[GridNG] Dynamic change of out of flow items
This change addresses a TODO in |UpdateGridPositionAfterStyleChange|. It
triggers a full layout for GridNG when an out of flow descendant of the
grid changes its style. Additionally, a web test is added to validate
said behavior in an absolutely positioned child of a grid item.
Bug: 1045599
Change-Id: I912bc4ba2b44cd8db53f501ff7d0119903139a9d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2713389
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Reviewed-by: Daniel Libby <dlibby@microsoft.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Ana Sollano Kim <ansollan@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#858226}
diff --git a/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html b/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html
new file mode 100644
index 0000000..2728e02
--- /dev/null
+++ b/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html
@@ -0,0 +1,55 @@
+
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test checks that descendant positioned items can be dynamically changed.">
+<style>
+.grid {
+ display: grid;
+ grid: 50px 50px / 50px 50px;
+ position: relative;
+}
+
+.green {
+ background: green;
+}
+
+.red {
+ background: red;
+}
+
+#item {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ top: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="grid">
+ <div class="green"></div>
+ <div class="green">
+ <div id="item" class="green"></div>
+ </div>
+ <div class="green"></div>
+ <div class="red"></div>
+</div>
+
+<script>
+ document.body.offsetLeft;
+
+ var item = document.getElementById("item");
+ item.style.gridColumn = "2 / 3";
+ item.style.gridRow = "2 / 3";
+
+ document.documentElement.classList.remove('reftest-wait');
+</script>
+
+</html>
