[css-grid] Test that inheriting rows and columns doesn't inherit areas

It used to be the case that setting 'grid-template-columns: inherit' and 'grid-template-rows: inherit' would also inherit 'grid-template-areas'. This got fixed as a side-effect of r747669, adding a test now. Bug: 966090, 1085853 TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html Change-Id: I27865cd8e0533f2ba4380c94c0a51e2ef0decea4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2215858 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#772012}
web-platform-tests · May 27, 2020 · 3ddd3b7 · 3ddd3b7
1 parent 3c20a28
commit 3ddd3b7
Showing 1 changed file with 32 additions and 0 deletions.
diff --git a/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html b/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with non-inherited grid-template-areas</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-100px-square.xht">
+<meta name="assert" content="Checks that inheriting grid-template-columns and grid-template-rows doesn't also inherit grid-template-areas.">
+<style>
+.wrapper {
+  grid-template-areas: "area";
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  grid-auto-columns: 0px 100%;
+  grid-auto-rows: 0px 100%;
+  grid-template-columns: inherit;
+  grid-template-rows: inherit;
+  background: red;
+}
+.item {
+  grid-area: area;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="wrapper">
+  <div class="grid">
+    <div class="item"></div>
+  </div>
+</div>