[css-grid] Update item placement when grid-template-areas changes
Before r747669, both explicit and implicit named lines were stored in
NamedGridColumnLines and NamedGridRowLines. But that patch moved the
implicit ones into their own ImplicitNamedGridColumnLines and
ImplicitNamedGridRowLines fields.
However, LayoutGrid::NamedGridLinesDefinitionDidChange was not updated
to also look at the new fields. Therefore, a dynamic change in
grid-template-areas might not force the grid items to be placed again.
BUG=1066679
TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html
Change-Id: I4b6ff2de1f1c13f985b146169f39283613defc88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132397
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#755548}
diff --git a/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html b/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html
new file mode 100644
index 0000000..4e6c4cc
--- /dev/null
+++ b/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with dynamically named grid lines</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Grid item placement is updated when the names of the grid lines change dynamically.">
+<style>
+.container {
+ display: grid;
+ width: 300px;
+ height: 100px;
+ background: red;
+}
+.container::before {
+ content: "";
+ grid-area: main;
+ background: green;
+}
+.explicit {
+ grid-template-columns: [quux-start] 100% [quux-end];
+ grid-template-rows: [quux-start] 100% [quux-end];
+}
+.explicit.changed {
+ grid-template-columns: [main-start] 100% [main-end];
+ grid-template-rows: [main-start] 100% [main-end];
+}
+.auto-repeat {
+ grid-template-columns: repeat(auto-fill, [quux-start] 100% [quux-end]);
+ grid-template-rows: repeat(auto-fill, [quux-start] 100% [quux-end]);
+}
+.auto-repeat.changed {
+ grid-template-columns: repeat(auto-fill, [main-start] 100% [main-end]);
+ grid-template-rows: repeat(auto-fill, [main-start] 100% [main-end]);
+}
+.implicit {
+ grid-template-columns: 100%;
+ grid-template-rows: 100%;
+ grid-template-areas: "quux";
+}
+.implicit.changed {
+ grid-template-areas: "main";
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container explicit"></div>
+<div class="container auto-repeat"></div>
+<div class="container implicit"></div>
+<script>
+// Force layout
+document.body.offsetLeft;
+
+// Change the grid line names
+for (let container of document.querySelectorAll(".container")) {
+ container.classList.add("changed");
+}
+</script>
