summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html')
-rw-r--r--testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html39
1 files changed, 39 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html
new file mode 100644
index 0000000000..81b531ca34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>grid-auto applies to explicit rows</title>
+
+<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/">
+<link rel=help href="https://www.w3.org/TR/css-grid-1/#implicit-grids">
+<meta name=assert content="grid-auto-rows/columns should dictate the size of all rows past grid-template-rows/columns, even if they are part of the explicit grid as established by grid-template-areas; they're not just limited to implicit tracks.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+.grid {
+ display: grid;
+ grid-template-areas: "a b c" "d e f" "g e h";
+ grid-template-rows: 11px 13px;
+ grid-auto-rows: 17px 19px;
+ grid-template-columns: 23px 29px;
+ grid-auto-columns: 31px 37px;
+}
+
+.grid > div {
+ background: rgba(0, 0, 0, .2);
+}
+#c1 { grid-area: 1 / 1 / 2 / 2; }
+#c2 { grid-area: 1 / 1 / 3 / 3; }
+#c3 { grid-area: 1 / 1 / 4 / 4; }
+#c4 { grid-area: 1 / 1 / 5 / 5; }
+</style>
+
+<div class=grid>
+ <div id=c1 data-expected-width=23 data-expected-height=11></div>
+ <div id=c2 data-expected-width=52 data-expected-height=24></div>
+ <div id=c3 data-expected-width=83 data-expected-height=41></div>
+ <div id=c4 data-expected-width=120 data-expected-height=60></div>
+</div>
+
+<script>
+checkLayout('.grid');
+</script>