diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/subgrid')
161 files changed, 15756 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-grid/subgrid/WEB_FEATURES.yml new file mode 100644 index 0000000000..9fffbbfce9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: subgrid + files: "**" diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001-ref.html new file mode 100644 index 0000000000..fe316d5d3b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: grid-aligned abs.pos. inside subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / repeat(10, 30px) 100px; + place-content: start; + border: 1px solid; + width: 500px; + position: relative; + padding: 4px 3px 1px 10px; +} + +.subgrid { + display: grid; + grid: 0 / repeat(10, 30px) 100px; + background: lightgrey; + grid-column: 2 / span 8; + min-width:0; + min-height:0; +} + +i { + grid-row: 1; + counter-increment: i; + background: pink; +} +i::before { content: counter(i, decimal); } + +x { + position: absolute; + top:0; bottom:0; left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3/-1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/-1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/1">x</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001.html new file mode 100644 index 0000000000..e524ec2d76 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: grid-aligned abs.pos. inside subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="abs-pos-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(10, 30px); + grid-template-areas: ". . . . . . . . . . ."; + place-content: start; + border: 1px solid; + width: 500px; + grid-auto-columns: 100px; + grid-auto-rows: 100px; + position: relative; + padding: 4px 3px 1px 10px; +} + +.subgrid { + display: grid; + grid: auto / subgrid; + background: lightgrey; + grid-column: 2 / span 8; + grid-row: 2 / span 2; + min-width:0; + min-height:0; +} + +i { + grid-row: 1; + counter-increment: i; + background: pink; +} +i::before { content: counter(i, decimal); } + +x { + position: absolute; + top:0; bottom:0; left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3/-1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/-1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/1">x</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002-ref.html new file mode 100644 index 0000000000..69e071c758 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002-ref.html @@ -0,0 +1,125 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: grid-aligned abs.pos. inside rel.pos. subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(10, 30px) 100px; + place-content: start; + border: 1px solid; + width: 500px; + padding: 1px 2px; +} + +.subgrid { + position: relative; + display: grid; + grid: auto / 27px repeat(7, 30px); + grid-column: 2 / span 8; + grid-row: 2 / span 2; + padding: 4px 0 1px 0; + border: 3px solid black; + min-height: 1em; + background: yellow; +} + +i { + grid-row: 1; + counter-increment: i; + background: pink; +} +i::before { content: counter(i, decimal); } + +x { + position: absolute; + top:0; bottom:0; left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3; right:33px">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/1; right:-10px">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/-1; left:13px">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/1; left:-33px">x</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002.html new file mode 100644 index 0000000000..5d6833555e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002.html @@ -0,0 +1,131 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: grid-aligned abs.pos. inside rel.pos. subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="abs-pos-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(10, 30px); + grid-template-areas: ". . . . . . . . . . ."; + place-content: start; + border: 1px solid; + width: 500px; + grid-auto-columns: 100px; + grid-auto-rows: 100px; + padding: 1px 2px; +} + +.subgrid { + position: relative; + display: grid; + grid: auto / subgrid; + grid-column: 2 / span 8; + grid-row: 2 / span 2; + padding: 4px 33px 1px 10px; + border: 3px solid black; + min-width: 0; + min-height: 1em; + background: yellow; +} + +i { + grid-row: 1; + counter-increment: i; + background: pink; +} +i::before { content: counter(i, decimal); } + +x { + position: absolute; + top:0; bottom:0; left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3/-1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid"> + <x style="grid-column:auto/1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/5">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3/-1">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/3">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr"> + <x style="grid-column:auto/1">x</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/align-self-baseline-with-subgrid-mbp.html b/testing/web-platform/tests/css/css-grid/subgrid/align-self-baseline-with-subgrid-mbp.html new file mode 100644 index 0000000000..bb9f844483 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/align-self-baseline-with-subgrid-mbp.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<meta name="assert" content="Margin, border, and padding of subgrids should influence the offset of items in the same baseline alignment context"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +html,body { + color:black; background-color:white; padding:0; margin:0; +} +.grid { + font:16px/1 Ahem; + display: inline-grid; + border: 1px solid black; + grid-template-columns: auto auto; +} +.subgrid { + display: grid; + grid-template-rows: subgrid; + border: 9px solid blue; + margin-top: 15px; + padding-top: 6px; +} +.first-baseline { + align-self: baseline; +} +</style> +</head> +<body onload="checkLayout('.first-baseline')"> +<div id="target" class="grid"> + <div data-offset-y="31" class="first-baseline">X</div> + <div class="subgrid"> + <div data-offset-y="31" class="first-baseline">X</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-001.html b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-001.html new file mode 100644 index 0000000000..419088b4d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-001.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Specified alignment properties in subgridded axes</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<style> +body { + margin: 0; + padding: 0; + font-size: 0; +} + +.grid { + background: gray; + display: inline-grid; + grid-auto-rows: 100px; + grid-template-columns: 100px; +} + +.subgrid { + margin: 10px; + padding: 10px; + display: grid; + background: orangered; + border: blue solid 10px; + grid-template: subgrid / subgrid; +} + +.as { align-self: start; } +.ae { align-self: end; } +.ac { align-self: center; } +.ab { align-self: baseline; } + +.js { justify-self: start; } +.je { justify-self: end; } +.jc { justify-self: center; } +.jb { justify-self: baseline; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> +<div class="grid"> + <div class="subgrid as js"> + <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> + </div> + <div class="subgrid as je"> + <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> + </div> + <div class="subgrid as jc"> + <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> + </div> + <div class="subgrid as jb"> + <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid ae js"> + <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> + </div> + <div class="subgrid ae je"> + <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> + </div> + <div class="subgrid ae jc"> + <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> + </div> + <div class="subgrid ae jb"> + <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid ac js"> + <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> + </div> + <div class="subgrid ac je"> + <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> + </div> + <div class="subgrid ac jc"> + <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> + </div> + <div class="subgrid ac jb"> + <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid ab js"> + <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> + </div> + <div class="subgrid ab je"> + <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> + </div> + <div class="subgrid ab jc"> + <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> + </div> + <div class="subgrid ab jb"> + <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002-ref.html new file mode 100644 index 0000000000..5e2f1cbac3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Specified alignment properties in subgridded axes</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<style> +div { + display: inline-grid; + gap: 5px; +} + +.grid { grid-template: 50px / 50px } +.vlr { writing-mode: vertical-lr } +.subgrid { background: gray } + +.item { + background: orange; + height: 20px; + width: 20px; +} + +.as { align-self: start } +.ae { align-self: end } +.ac { align-self: center } +.ab { align-self: baseline } + +.js { justify-self: start } +.je { justify-self: end } +.jc { justify-self: center } +.jb { justify-self: baseline } +</style> +<div id="wrapper"></div> + +<template id="grid"> + <div class="grid"> + <div class="subgrid"> + <div class="item"></div> + </div> + </div> +</template> + +<script> +"use strict"; + +let align_properties = ["as", "ae", "ac", "ab"]; +let justify_properties = ["js", "je", "jc", "jb"]; +let wrapper = document.getElementById("wrapper"); + +wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`; + +for (let align_self of align_properties) { + // Add a grid for all combinations of `align-self` and `justify-self`. + for (let justify_self of justify_properties) { + let grid = document.getElementById("grid").content.cloneNode(true); + grid.querySelector(".item").classList.add(align_self, justify_self); + wrapper.appendChild(grid); + } + + // Add all combinations again, but make the subgrid orthogonal. + for (let justify_self of justify_properties) { + let grid = document.getElementById("grid").content.cloneNode(true); + grid.querySelector(".item").classList.add(align_self, justify_self); + grid.querySelector(".subgrid").classList.add("vlr"); + wrapper.appendChild(grid); + } +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html new file mode 100644 index 0000000000..68f1b3d43c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Specified alignment properties in subgridded axes</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="alignment-in-subgridded-axes-002-ref.html"> +<style> +div { + display: inline-grid; + gap: 5px; +} + +.grid { grid-template: 50px / 50px } +.vlr { writing-mode: vertical-lr } + +.subgrid { + background: gray; + grid-template: subgrid / subgrid; +} + +.item { + background: orange; + height: 20px; + width: 20px; +} + +.as { align-self: start } +.ae { align-self: end } +.ac { align-self: center } +.ab { align-self: baseline } + +.js { justify-self: start } +.je { justify-self: end } +.jc { justify-self: center } +.jb { justify-self: baseline } +</style> +<div id="wrapper"></div> + +<template id="grid"> + <div class="grid"> + <div class="subgrid"> + <div class="item"></div> + </div> + </div> +</template> + +<script> +"use strict"; + +let align_properties = ["as", "ae", "ac", "ab"]; +let justify_properties = ["js", "je", "jc", "jb"]; +let wrapper = document.getElementById("wrapper"); + +wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`; + +for (let align_self of align_properties) { + // Add a grid for all combinations of `align-self` and `justify-self`. + for (let justify_self of justify_properties) { + let grid = document.getElementById("grid").content.cloneNode(true); + grid.querySelector(".item").classList.add(align_self, justify_self); + wrapper.appendChild(grid); + } + + // Add all combinations again, but make the subgrid orthogonal. + for (let justify_self of justify_properties) { + let grid = document.getElementById("grid").content.cloneNode(true); + grid.querySelector(".item").classList.add(align_self, justify_self); + grid.querySelector(".subgrid").classList.add("vlr"); + wrapper.appendChild(grid); + } +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001-ref.html new file mode 100644 index 0000000000..81c6d18402 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid auto track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1558705"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + max-width: 260px; + padding: 1px 5px; + border: 1px solid; +} +.subgrid { + display: grid; + padding: 3px 5px 7px 11px; + border-style: solid; + border-width: 5px 7px 11px 3px; + margin: 7px 11px 3px 5px; + background: grey; +} + + </style> +</head> +<body> + +<article class="grid"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: 100px auto"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: auto 100px"> + <div class="subgrid" style="grid-column:2"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: auto 100px auto"> + <div class="subgrid" style="grid-column:2 / span 2"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: auto 100px auto"> + <div class="subgrid" style="grid-column:1 / span 3"> + The cat can not be separated from milk + </div> +</article> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001.html new file mode 100644 index 0000000000..4a946e6feb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: subgrid auto track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1558705"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="auto-track-sizing-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + max-width: 260px; + padding: 1px 5px; + border: 1px solid; +} +.subgrid { + display: grid; + grid-template-rows: subgrid; + padding: 3px 5px 7px 11px; + border-style: solid; + border-width: 5px 7px 11px 3px; + margin: 7px 11px 3px 5px; + background: grey; +} + + </style> +</head> +<body> + +<article class="grid"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: 100px auto"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: auto 100px"> + <div class="subgrid" style="grid-column:2"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: auto 100px auto"> + <div class="subgrid" style="grid-column:2 / span 2"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid" style="grid-template-columns: auto 100px auto"> + <div class="subgrid" style="grid-column:1 / span 3"> + The cat can not be separated from milk + </div> +</article> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002-ref.html new file mode 100644 index 0000000000..5d4b9c8178 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid auto track sizing</title> + <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=236951"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + max-width: 260px; + padding: 1px 5px; + border: 1px solid; + grid-template-columns: 100px; +} +.subgrid { + display: grid; + grid-template-columns: 100%; + margin: 0px 10px 0px 10px; + background: grey; +} + + </style> +</head> +<body> + +<article class="grid"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid"> + <div class="subgrid"> + The cat can not be separated from milk + </div> +</article> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002.html new file mode 100644 index 0000000000..c44c9d3925 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: subgrid auto track sizing</title> + <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=236951"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="auto-track-sizing-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + max-width: 260px; + padding: 1px 5px; + border: 1px solid; + grid-template-columns: 100px; +} + +.subgrid { + display: grid; + grid-template-rows: subgrid; + grid-template-columns: 100%; + margin: 0px 5px 0px 10px; +} + +.inner { + margin: 0px 5px 0px 0px; + background: grey; +} + </style> +</head> +<body> + +<article class="grid"> + <div class="subgrid" style="margin: 0px 10px 0px 10px; background: grey"> + The cat can not be separated from milk + </div> +</article> + +<article class="grid"> + <div class="subgrid"> + <div class="subgrid inner"> + The cat can not be separated from milk + </div> + </div> +</article> + +<article class="grid"> + <div class="subgrid" style="grid-template-columns: subgrid"> + <div class="subgrid inner"> + The cat can not be separated from milk + </div> + </div> +</article> + +<article class="grid"> + <div class="subgrid"> + <div class="subgrid inner" style="grid-template-columns: subgrid"> + The cat can not be separated from milk + </div> + </div> +</article> + +<article class="grid"> + <div class="subgrid" style="grid-template-columns: subgrid"> + <div class="subgrid inner" style="grid-template-columns: subgrid"> + The cat can not be separated from milk + </div> + </div> +</article> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-003.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-003.html new file mode 100644 index 0000000000..fdb571c157 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-003.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid auto track sizing</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +.wrapper { + width: 100px; + height: 100px; + background: red; +} +.grid { + display: grid; + width: min-content; + background: green; + color: transparent; + font: 25px/1 Ahem; +} +.subgrid { + display: grid; + grid-row: 1 / -1; + grid-column: 1 / -1; + grid-template: subgrid / subgrid; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="wrapper"> + <div class="grid"> + <div class="subgrid"> + X XXXX XX XXX + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-004.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-004.html new file mode 100644 index 0000000000..d5e120dab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-004.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid auto track sizing</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.wrapper { + width: 100px; + height: 100px; + background: red; +} +.grid { + display: inline-grid; + grid-template-columns: repeat(10, auto); + grid-template-rows: repeat(5, 5px auto); +} +.subgrid { + display: grid; + grid-template: subgrid / subgrid; + grid-column: 1 / -1; + grid-row: 1 / -1; +} +.item { + background: green; + height: 50px; + width: 50px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="wrapper"> + <div class="grid"> + <div class="subgrid"> + <div class="item" style="grid-column: span 3; grid-row: span 8;"></div> + <div class="item" style="grid-column: span 7; grid-row: span 8;"></div> + <div class="item" style="grid-column: span 6; grid-row: span 2;"></div> + <div class="item" style="grid-column: span 4; grid-row: span 2;"></div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001-ref.html new file mode 100644 index 0000000000..c98740b4e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: baseline-aligned subgrid item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; + place-content: start; + place-items: baseline start; + border: 1px solid; + text-decoration: underline blue; +} + +.subgrid { + background: lightgrey; + grid-column: 2 / span 4; + grid-row: 3 / span 2; + min-width: 10px; + min-height: 0; + background: yellow; +} + +x, z { + display: block; + min-width: 20px; + min-height: 10px; + font-size: 8em; + background: silver; +} +z { + width: 20px; + height: 10px; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:3/1">A </y> +<div class="subgrid"> + <z></z><x> A</x> +</div> +</div> + +<div class="grid" style="align-items: last baseline"> +<y style="grid-area:4/1">A </y> +<div class="subgrid"> + <z></z><x> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/baseline-001.html b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001.html new file mode 100644 index 0000000000..995b1a8d2a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: baseline-aligned subgrid item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="baseline-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; + place-content: start; + place-items: baseline start; + border: 1px solid; + text-decoration: underline blue; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + background: lightgrey; + grid-column: 2 / span 4; + grid-row: 3 / span 2; + min-width: 10px; + min-height: 0; + background: yellow; + place-content: inherit; + place-items: inherit; +} + +x { + min-width: 20px; + min-height: 10px; + font-size: 8em; + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:4/1">A </y> +<div class="subgrid"> + <x style="grid-row:2"> A</x><x></x> +</div> +</div> + +<div class="grid" style="align-items: last baseline"> +<y style="grid-area:4/1">A </y> +<div class="subgrid"> + <x></x><x style="grid-row:2"> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/contribution-size-flex-tracks-001.html b/testing/web-platform/tests/css/css-grid/subgrid/contribution-size-flex-tracks-001.html new file mode 100644 index 0000000000..cc99f63968 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/contribution-size-flex-tracks-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size to flexible tracks</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-size-contribution"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + background: red; + display: inline-grid; + grid-template: repeat(4, minmax(0, 1fr)) / repeat(10, minmax(0, 1fr)); +} +.subgrid { + width: 50px; + height: 50px; + background: green; + display: grid; + grid-row: 1 / -1; + grid-column: 1 / -1; + grid-template: subgrid / subgrid; +} +.item { + width: 10px; + height: 25px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="item"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-nested-subgrid.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-nested-subgrid.html new file mode 100644 index 0000000000..a98e43777e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-nested-subgrid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1606485"> +<style> +* { + grid-template-rows: subgrid; + display: grid; + overflow: scroll; + contain: strict; +} +</style> +<script> +document.addEventListener('DOMContentLoaded', function() { + let e = document.createElement('s'); + document.documentElement.appendChild(e); + document.documentElement.getBoundingClientRect() // Update layout +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-subgrid.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-subgrid.html new file mode 100644 index 0000000000..0d377175b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-subgrid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<head> +<title>contain: strict element with subgrid properties</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1606485"> +</head> +<style> + +#gridcontainer { + display: grid; + contain: strict; +} + +.item { + display: grid; + grid: subgrid [x] / subgrid [x]; +} +</style> +<div id="gridcontainer"> +<div class="item">Text1</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgrid-reflow-root.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgrid-reflow-root.html new file mode 100644 index 0000000000..e8bfc2b7d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgrid-reflow-root.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +* { + grid-template-rows: subgrid; + display: inline-grid; +} + +html { + contain: strict; +} +</style> +<script> + window.addEventListener('load', () => { + document.head.appendChild(document.createElement('style')) + }) +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-001.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-001.html new file mode 100644 index 0000000000..2edb01db08 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> + #grid { + display: grid; + grid-template-columns: subgrid repeat(auto-fill, [b]); + } + </style> +</head> +<body> + <div id="grid"> + <div style="grid-column: b"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-002.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-002.html new file mode 100644 index 0000000000..42bcbcfab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> + #grid { + display: grid; + position: relative; + grid-template-columns: subgrid repeat(auto-fill, [b]); + } + </style> +</head> +<body> + <div id="grid"> + <div style="position: absolute; grid-column: b"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-003.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-003.html new file mode 100644 index 0000000000..eeb97967f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2"> +<style> + .grid { + display: grid; + } + .subgrid { + grid-template-columns: subgrid repeat(auto-fill, [x]); + } +</style> +</head> +<body> + <div class="grid"> + <div class="grid subgrid"> + <div style="grid-column: x"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-001.html b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-001.html new file mode 100644 index 0000000000..97fa9b1327 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; height: 100px; width: min-content; background: green;"> + <div style="display: grid; grid-template-columns: subgrid;"> + <div id="target" style="width: 50px;"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-002.html b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-002.html new file mode 100644 index 0000000000..04c5d143d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; height: 100px; width: min-content; background: green;"> + <div style="display: grid; grid-template-rows: subgrid; writing-mode: vertical-rl;"> + <div id="target" style="writing-mode: horizontal-tb; width: 50px;"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-003.html b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-003.html new file mode 100644 index 0000000000..625d83485c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-003.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; height: 100px; width: min-content; background: green;"> + <div style="display: grid; grid-template-rows: subgrid; writing-mode: vertical-rl;"> + <div style="display: grid; grid-template-columns: subgrid; writing-mode: horizontal-tb;"> + <div id="target" style="width: 50px;"> + </div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001-ref.html new file mode 100644 index 0000000000..e7909fc206 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid with definite grid-gap in both axes</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: inline-grid; + gap: 20px 10px; + grid-template-columns: repeat(4,auto); + grid-template-rows: repeat(3,auto); + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-area: 1 / 1 / 2 / 3; + } + + .b { + grid-area: 1/4; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + margin-right: 10px; + } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + row-gap: 100px; + column-gap: 10px; + grid: repeat(2,auto) / repeat(3,auto); + } + + .e { + grid-area: 1/2; visibility:hidden; margin-left:15px; + } + .f { + grid-area: 1/3; visibility:hidden; margin-left:10px; + } + .g { + grid-area: 1/4; visibility:hidden; margin-left:15px; + } +</style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div><div class="box e">E</div><div class="box f">F</div><div class="box g">G</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box">E</div> + <div class="box">F</div> + <div class="box">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001.html new file mode 100644 index 0000000000..0bc8eed4d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid with definite grid-gap in both axes</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: inline-grid; + gap: 20px; + grid-template-columns: repeat(4,auto); + grid-template-rows: repeat(3,auto); + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-column: 1 / 3; + } + + .b { + grid-column: 4; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + row-gap: 100px; + column-gap: 10px; + grid: subgrid / subgrid; + } +</style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box e">E</div> + <div class="box f">F</div> + <div class="box g">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002-ref.html new file mode 100644 index 0000000000..db30524612 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid with border-bottom</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + gap: 10px 20px; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + min-width:10px; + min-height:0; + background: yellow; +} + +.subgrid > * { background: lightgrey; } + +x { + min-width:10px; + min-height:0px; +} +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: magenta; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: grey; } + +e { + border: 0 solid lightblue; + border-bottom-width: 40px; + margin: -5px 0; +} + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> +<div class="subgrid"> +<c>c</c> +<d>d</d> +<e></e> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002.html new file mode 100644 index 0000000000..bd4b74924b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid with border-bottom</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-gap-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + gap: 10px 20px; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + min-width:10px; + min-height:0; + border: 0 solid lightblue; + border-bottom-width: 40px; + background: yellow; +} + +.subgrid > * { background: lightgrey; } + +x { + min-width:10px; + min-height:0px; +} +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: magenta; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> +<div class="subgrid"> +<c>c</c> +<d>d</d> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003-ref.html new file mode 100644 index 0000000000..44053f0505 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid with border-bottom and percentage gap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 0 15px 15px 0 0 40px / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: repeat(4, auto) / auto auto; + gap: 3px 8px; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + background: grey; + width: 40px; + height: 30px; +} + +.subgrid > * { background: lightgrey; } + +x { + min-width:10px; + min-height:0px; +} +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: magenta; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: grey; } + +e { display:block; width: 20px; height:15px; background:black; } + +f { + grid-area: 4/2/span 1/span 5; + background: lightblue!important; + height: 40px; +} + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1; height:0"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> +<f></f> +<div class="subgrid"> +<c><e></e></c> +<d><e></e></d> +<c><e></e></c> +<d><e></e></d> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003.html new file mode 100644 index 0000000000..f8ce8655cf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid with border-bottom and percentage gap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-003-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: subgrid / auto auto; + gap: 20% 20%; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + min-width:10px; + min-height:0; + border: 0 solid lightblue; + border-bottom-width: 40px; + background: grey; +} + +.subgrid > * { background: lightgrey; } + +x { + min-width:10px; + min-height:0px; +} +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: magenta; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: grey; } + +e { display:block; width: 20px; height:15px; background:black; } + + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> +<div class="subgrid"> +<c><e></e></c> +<d><e></e></d> +<c><e></e></c> +<d><e></e></d> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004-ref.html new file mode 100644 index 0000000000..b1819d1eaa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px auto/100px auto; + gap:20px; + border:3px solid; + background:yellow; +} +span { background:cyan; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div class="grid"> + <div style="display:grid; grid: 100px 1em / 100px 1em; gap:60px; grid-area:span 2/span 2"> + <div style="display:grid; grid: 60px 1em / 100px; gap:100px; grid-row:span 2"> + <span>a</span><span>b</span> + </div> + <span style="grid-area:2/2">c</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004.html new file mode 100644 index 0000000000..b46d22e1e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-gap-004-ref.html"> +<style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px auto/100px auto; + gap:20px; + border:3px solid; + background:yellow; +} +span { background:cyan; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div class="grid"> + <div style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2"> + <div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2"> + <span>a</span><span>b</span> + </div> + <span style="grid-area:2/2">c</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005-ref.html new file mode 100644 index 0000000000..88d8b34d93 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +span { background:cyan; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;"> + <div style="display:grid; grid:100px/140px calc(40px); gap:20px; grid-column:span 2"> + <span>a</span><span>b</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005.html new file mode 100644 index 0000000000..9afba90a52 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-gap-005-ref.html"> +<style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +span { background:cyan; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;"> + <div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2"> + <span>a</span><span>b</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006-ref.html new file mode 100644 index 0000000000..35af77634f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested subgrid, justify-content:space-around, overflowing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +body { margin:200px; } +span { background:cyan; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:start; width:50px"> + <div style="display:grid; grid:100px/140px 50px; gap:20px; grid-column:span 2"> + <span>a</span><span>b</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006.html new file mode 100644 index 0000000000..d79ced10c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested subgrid, justify-content:space-around, overflowing</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-gap-006-ref.html"> +<style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +body { margin:200px; } +span { background:cyan; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:space-around; width:50px"> + <div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2"> + <span>a</span><span>b</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007-ref.html new file mode 100644 index 0000000000..84d4c00235 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested ortogonal writing-mode subgrids</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:60px auto/100px auto; + gap:100px 60px; + border:3px solid; + background:pink; +} +span { background:grey; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.vrl { writing-mode: vertical-rl; direction:ltr; } +</style> +</head> +<body> + +<div class="grid"> + <span style="grid-area:1/1; background:lightgrey; width:60px; height:160px"></span> + <span style="grid-area:1/1">a</span> + <span style="grid-row:2; background:cyan">b</span> + <span style="grid-area:2/2" class="vrl">ccc</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007.html new file mode 100644 index 0000000000..5b94fe5302 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested ortogonal writing-mode subgrids</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-gap-007-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px auto/100px auto; + gap:20px; + border:3px solid; + background:yellow; +} +span { background:cyan; } +span:nth-child(2n+1) { background:grey; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.vrl { writing-mode: vertical-rl; direction:ltr; } +</style> +</head> +<body> + +<div class="grid"> + <div class="vrl" style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2; background:pink"> + <div class="hl" style="display:grid; grid:subgrid/100px; gap:100px; grid-column:span 2; background:lightgrey"> + <span>a</span><span>b</span> + </div> + <span style="grid-area:1/2">ccc</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008-ref.html new file mode 100644 index 0000000000..ca8d4b3f1e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested orthogonal writing-mode subgrids with percentage column-gap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px 375px/300px; + border:3px solid; + width: 300px; + height: 500px; + background:lightgrey; + row-gap: 25px; +} +span { + grid-row:2; + background:cyan; + width:50px; +} +</style> +</head> +<body> + +<div class="grid"> + <span>ccc</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008.html new file mode 100644 index 0000000000..760bd92c3d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage column-gap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-gap-008-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px auto/200px auto; + border:3px solid; + background:grey; + width: 300px; + height: 500px; +} +.subgrid { + display: grid; + grid: 50px / subgrid; + column-gap: 10%; + grid-area: span 2/span 2; + justify-content:end; + background:lightgrey; +} +span { background:cyan; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +</style> +</head> +<body> + +<div class="grid"> + <div class="subgrid vlr"> + <span class="hl">ccc</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009-ref.html new file mode 100644 index 0000000000..628e4988b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested orthogonal writing-mode subgrids with percentage row-gap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:400px/300px; + border:3px solid; + background:lightgrey; + width:300px; + height:400px; +} +span { + margin-top:350px; + margin-right:115px; + background:cyan; +} +</style> +</head> +<body> + +<div class="grid"> + <span>cc</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009.html new file mode 100644 index 0000000000..4bbf5c6e81 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage row-gap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-gap-009-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px auto/200px auto; + border:3px solid; + background:grey; + width:300px; + height:400px; +} +.subgrid { + display: grid; + grid: subgrid / 50px; + row-gap: 10%; + grid-area: span 2/span 2; + background:lightgrey; +} +span { background:cyan; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +</style> +</head> +<body> + +<div class="grid"> + <div class="subgrid vlr"> + <span class="hl">cc</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010-ref.html new file mode 100644 index 0000000000..8e13f6e561 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Subgrids with empty tracks and column gap</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> +</head> +<body> +<div style="width:100px; height: 100px; background-color: blue; position:relative; left:50px;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010.html new file mode 100644 index 0000000000..23d67b95dd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Subgrids with empty tracks and column gap</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-010-ref.html"> +</head> +<body> +<div style="display:grid; grid-template-columns: auto 200px; width: 200px"> + <div style="display:grid; grid-template-columns: subgrid; gap: 100px; grid-column: span 2"> + <div style="width:100px; height: 100px; background-color: blue; grid-column: 2"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011-ref.html new file mode 100644 index 0000000000..23bcdfaa5a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Subgrids with empty tracks and column gap</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> +</head> +<body> +<div style="width:200px; height: 100px; background-color: blue; position:relative; left:175px;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011.html new file mode 100644 index 0000000000..d40ad2640f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Subgrids with column gap larger than the track size</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-011-ref.html"> +</head> +<body> +<div style="display:grid; grid-template-columns: 100px 100px 100px; width: 300px"> + <div style="display:grid; grid-template-columns: subgrid; gap: 150px; grid-column: span 3"> + <div style="width:100px; height: 100px; background-color: blue; grid-column: 2"></div> + <div style="width:100px; height: 100px; background-color: blue; grid-column: 3"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012-ref.html new file mode 100644 index 0000000000..347fc79098 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Grid Reference</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<div style="width: 200px; height: 100px; background-color: blue; position: relative; left: 225px;"></div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012.html new file mode 100644 index 0000000000..02d9a0e801 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrids with column gap larger than 2x the track size</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1841297"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution"> +<link rel="match" href="grid-gap-012-ref.html"> + +<div style="display: grid; grid-template-columns: 100px 100px 100px; width: 300px"> + <div style="display: grid; grid-template-columns: subgrid; gap: 250px; grid-column: span 3"> + <div style="width: 100px; height: 100px; background-color: blue; grid-column: 2"></div> + <div style="width: 100px; height: 100px; background-color: blue; grid-column: 3"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001-ref.html new file mode 100644 index 0000000000..0d3050f568 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001-ref.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid grid-gap:20px</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: grid; + gap: 0; + grid-template-columns: 150px 100px 150px 100px; + grid-template-rows: repeat(3,auto); + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-column: 1 / 3; + } + + .b { + grid-column: 4 ; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + } + + .box .f { background-color: purple; } + .box .i { background-color: blue; } + .box .e { background-color: yellow; } + .a { background-color: grey; } + .c { background-color: black; } + .b { background-color: black; } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + gap: 20px; + grid: auto / 70px 130px 70px; + } + + </style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box e">E</div> + <div class="box f">F</div> + <div class="box g">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001.html new file mode 100644 index 0000000000..85725d5292 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001.html @@ -0,0 +1,83 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid grid-gap:20px</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-larger-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: grid; + gap: 0; + grid-template-columns: 150px 100px 150px 100px; + grid-template-rows: repeat(3,auto); + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-column: 1 / 3; + } + + .b { + grid-column: 4 ; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + } + + .box .f { background-color: purple; } + .box .i { background-color: blue; } + .box .e { background-color: yellow; } + .a { background-color: grey; } + .c { background-color: black; } + .b { background-color: black; } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + gap: 20px; + grid: subgrid / subgrid; + } + + </style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box e">E</div> + <div class="box f">F</div> + <div class="box g">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002-ref.html new file mode 100644 index 0000000000..7415de64cd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid with larger gap than parent grid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px auto/100px; + gap:20px; + border:3px solid; + background:yellow; +} +span { background:lightgrey; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div class="grid"> + <span style="height:60px">a</span><span style="margin-top:40px">b</span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002.html new file mode 100644 index 0000000000..4565be1b80 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid with larger gap than parent grid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-larger-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +.grid { + display:inline-grid; + grid:100px auto/100px; + gap:20px; + border:3px solid; + background:yellow; +} +span { background:lightgrey; } +span:nth-child(2n+1) { background:grey; } +</style> +</head> +<body> + +<div class="grid"> + <div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2"> + <span>a</span><span>b</span> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001-ref.html new file mode 100644 index 0000000000..ee99c02410 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid grid-gap:normal</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: grid; + gap: 10px; + grid-template-columns: 150px 100px 150px 100px; + grid-template-rows: repeat(3,minmax(100px,auto)); + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-column: 1 / 3; + } + + .b { + grid-column: 4 ; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + gap: 10px; + grid-template-columns: 80px 150px 80px; + grid-template-rows: 80px 80px; + } + + </style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box e">E</div> + <div class="box f">F</div> + <div class="box g">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001.html new file mode 100644 index 0000000000..5edf1e0762 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid grid-gap:normal</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-normal-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: grid; + gap: 10px; + grid-template-columns: 150px 100px 150px 100px; + grid-template-rows: repeat(3,minmax(100px,auto)); + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-column: 1 / 3; + } + + .b { + grid-column: 4 ; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + } + + </style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box e">E</div> + <div class="box f">F</div> + <div class="box g">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001-ref.html new file mode 100644 index 0000000000..fcd6851e2f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid grid-gap:0px</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: grid; + gap: 20px; + grid-template-columns: 170px 100px 190px 100px; + grid-template-rows: repeat(3,auto); + gap: 0; + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-column: 1 / 3; + margin-bottom: 20px; + } + + .b { + grid-column: 4 ; + margin-bottom: 20px; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + margin-right: 20px; + } + + .box .f { background-color: purple; } + .box .i { background-color: blue; } + .box .e { background-color: yellow; } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + gap: 0; + grid-template-columns: 90px 170px 90px; + } + + </style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box e">E</div> + <div class="box f">F</div> + <div class="box g">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001.html new file mode 100644 index 0000000000..7b59acd700 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid grid-gap:0px</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="grid-gap-smaller-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + .wrapper { + display: grid; + gap: 20px; + grid-template-columns: 150px 100px 150px 100px; + grid-template-rows: repeat(3,auto); + background-color: #fff; + color: #444; + } + + .box { + background-color: #444; + color: #fff; + padding: 20px; + } + + .box .box { + background-color: #ccc; + color: #444; + } + + .a { + grid-column: 1 / 3; + } + + .b { + grid-column: 4 ; + } + + .c { + grid-column: 1; + grid-row: 2 / 4; + } + + .box .f { background-color: purple; } + .box .i { background-color: blue; } + .box .e { background-color: yellow; } + + .d { + grid-column: 2 / 5; + grid-row: 2 / 4; + display: grid; + gap: 0; + grid: subgrid / subgrid; + } + + </style> +</head> +<body> + +<div class="wrapper"> + <div class="box a">A</div> + <div class="box b">B</div> + <div class="box c">C</div> + <div class="box d"> + <div class="box e">E</div> + <div class="box f">F</div> + <div class="box g">G</div> + <div class="box h">H</div> + <div class="box i">I</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-template-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-computed-nogrid.html new file mode 100644 index 0000000000..1f37ce860a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-computed-nogrid.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list" "title"="2.3. Resolved Value of a Track Listing"> +<meta name="assert" content="Checks the resolved value of grid-template-columns or grid-template-columns on an element which is not a grid container."> +<style> +#target { + display: block; + height: 1px; + font-size: 1px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +test_computed_value("grid-template-columns", "subgrid []"); +test_computed_value("grid-template-columns", "subgrid [a]"); +test_computed_value("grid-template-columns", "subgrid [a] [b]"); +test_computed_value("grid-template-columns", "subgrid [] [b]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] [b] [c]"); +test_computed_value("grid-template-columns", "subgrid [a] [b c d] [e f] [e f] [g]"); +test_computed_value("grid-template-columns", "subgrid [a b c] [d] [e f]"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c]) [g]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c]) [g h]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c d])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c d]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c d]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c d]) [g]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c d]) [g h]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c d])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c] [d]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c] [d]) [g]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d]) [g h]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d e])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d e]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c] [d e]) [g] [h i]"); +test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c] [d e]) [g]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d e]) [g h]"); +test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d e])"); +test_computed_value("grid-template-columns", "subgrid [a] repeat(2, [c] [d e])"); +test_computed_value("grid-template-columns", "subgrid repeat(1, [])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [a])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [a] [])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [] [a] [])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [] [] []) repeat(auto-fill, [] [] [])"); +test_computed_value("grid-template-columns", "subgrid repeat(1, [a b])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [a b])"); +test_computed_value("grid-template-columns", "subgrid repeat(1, [a] [b])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [a] [b])"); +test_computed_value("grid-template-columns", "subgrid [a] repeat(2, [b])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [a]) [b]"); +test_computed_value("grid-template-columns", "subgrid [a] repeat(2, [b] [c d]) [e]"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [a b]) repeat(auto-fill, [c] [d e])"); +test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [a] [b c]) repeat(2, [d e])"); +test_computed_value("grid-template-columns", "subgrid repeat(2, [a b]) repeat(auto-fill, [c] [d e]) repeat(2, [f g])"); +test_computed_value("grid-template-columns", "subgrid [a] [b c] repeat(2, [d e]) [f] [g h] repeat(auto-fill, [i] [j k]) [l] repeat(2, [m n]) [o]"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-template-invalid.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-invalid.html new file mode 100644 index 0000000000..49d781e91f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-invalid.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing 'grid' with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2"> +<meta name="assert" content="grid-template supports the grammar `none | <track-list> | <auto-track-list> | subgrid <line-name-list>?`."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +// <'grid-template'> invalid values +test_invalid_value("grid-template-rows", 'subgrid subgrid'); +test_invalid_value("grid-template-rows", 'subgrid none'); +test_invalid_value("grid-template-rows", 'subgrid 1px'); +test_invalid_value("grid-template-rows", 'subgrid [a] 1px'); +test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, 1px)'); +test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, line)'); +test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fit, [a])'); +test_invalid_value("grid-template-rows", 'subgrid repeat(2, 1px)'); +test_invalid_value("grid-template-rows", 'subgrid repeat(2, line)'); +test_invalid_value("grid-template-rows", 'subgrid repeat(2,'); +test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, [a]) repeat(auto-fill, [b]'); + +test_invalid_value("grid-template-columns", 'subgrid subgrid'); +test_invalid_value("grid-template-columns", 'subgrid none'); +test_invalid_value("grid-template-columns", 'subgrid 1px'); +test_invalid_value("grid-template-columns", 'subgrid [a] 1px'); +test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, 1px)'); +test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, line)'); +test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fit, [a])'); +test_invalid_value("grid-template-columns", 'subgrid repeat(2, 1px)'); +test_invalid_value("grid-template-columns", 'subgrid repeat(2, line)'); +test_invalid_value("grid-template-columns", 'subgrid repeat(2,'); +test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, [a]) repeat(auto-fill, [b]'); + + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-template-valid.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-valid.html new file mode 100644 index 0000000000..d568e973e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-valid.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: parsing 'grid' with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2"> +<meta name="assert" content="grid-template supports the grammar `none | <track-list> | <auto-track-list> | subgrid <line-name-list>?`."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +// <'grid-template'> values +test_valid_value("grid-template-rows", 'subgrid'); +test_valid_value("grid-template-rows", 'subgrid [a]'); +test_valid_value("grid-template-rows", 'subgrid [a] [b]'); +test_valid_value("grid-template-rows", 'subgrid [a] [b] [c]'); +test_valid_value("grid-template-rows", 'subgrid []'); +test_valid_value("grid-template-rows", 'subgrid [a] [b] [] [c]'); +test_valid_value("grid-template-rows", 'subgrid [] [] [] [c]'); +test_valid_value("grid-template-rows", 'subgrid [] [] [] []'); +test_valid_value("grid-template-rows", 'subgrid repeat(auto-fill, [a])'); +test_valid_value("grid-template-rows", 'subgrid repeat(auto-fill, [])'); +test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b])'); +test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b]) [c]'); +test_valid_value("grid-template-rows", 'subgrid [] repeat(auto-fill, []) []'); +test_valid_value("grid-template-rows", 'subgrid repeat(2, [a])'); +test_valid_value("grid-template-rows", 'subgrid repeat(2, [a] [b])'); +test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b])'); +test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b]) [c]'); +test_valid_value("grid-template-rows", 'subgrid [] repeat(2, []) []'); +test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b]) repeat(auto-fill, [c]) [d]'); + +test_valid_value("grid-template-columns", 'subgrid'); +test_valid_value("grid-template-columns", 'subgrid [a]'); +test_valid_value("grid-template-columns", 'subgrid [a] [b]'); +test_valid_value("grid-template-columns", 'subgrid [a] [b] [c]'); +test_valid_value("grid-template-columns", 'subgrid []'); +test_valid_value("grid-template-columns", 'subgrid [a] [b] [] [c]'); +test_valid_value("grid-template-columns", 'subgrid [] [] [] [c]'); +test_valid_value("grid-template-columns", 'subgrid [] [] [] []'); +test_valid_value("grid-template-columns", 'subgrid repeat(auto-fill, [a])'); +test_valid_value("grid-template-columns", 'subgrid repeat(auto-fill, [])'); +test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b])'); +test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b]) [c]'); +test_valid_value("grid-template-columns", 'subgrid [] repeat(auto-fill, []) []'); +test_valid_value("grid-template-columns", 'subgrid repeat(2, [a])'); +test_valid_value("grid-template-columns", 'subgrid repeat(2, [a] [b])'); +test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b])'); +test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b]) [c]'); +test_valid_value("grid-template-columns", 'subgrid [] repeat(2, []) []'); +test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b]) repeat(auto-fill, [c]) [d]'); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-ref.html new file mode 100644 index 0000000000..fe842b2823 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid disabled if grid item establishes independent formatting context</title> + <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=237692"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <style> + +html,body { + font:16px/1 monospace; padding:0; margin:0; line-height: 0; +} + +.grid { + display: inline-block; + background-color: green; + width: 100px; + height: 100px; + margin-right: 20px; +} + + </style> +</head> +<body> + +<div class="grid"> +</div> + +<div class="grid"> +</div> + +<div class="grid"> +</div> + +<div class="grid"> +</div> + +<div class="grid"> +</div> + +<div class="grid"> +</div> + +<div class="grid"> +</div> + +<div class="grid"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context.html new file mode 100644 index 0000000000..5a76ac2d6d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context.html @@ -0,0 +1,101 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: subgrid disabled if grid item establishes independent formatting context</title> + <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=237692"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="independent-formatting-context-ref.html"> + <style> + +html,body { + font:16px/1 monospace; padding:0; margin:0; line-height: 0; +} + +.grid { + position: relative; + display: inline-grid; + grid-template-rows: 0px 100px; + width: 100px; + margin-right: 20px; +} + +.subgrid { + display: grid; + grid-template-rows: subgrid; + grid-row: 1 / 3; + width: 100px; + height: 100px; + background-color: red; +} + +.first { + grid-row: 1; + background-color: green; +} + +.second { + grid-row: 2; + background-color: green; +} + + </style> +</head> +<body> +<!-- The subgrid's style attribute establishes an independent formatting context + and makes them no longer eligible as subgrids.--> +<div class="grid"> + <div class="subgrid" style="position:absolute"> + <div class="first"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="contain: layout"> + <div class="first"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="contain: paint"> + <div class="first"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="contain: strict"> + <div class="first"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="contain: content"> + <div class="first"></div> + </div> +</div> + +<!-- Only layout and paint containment establish an independent formatting + context. These tests validate that other types of containment maintain + subgrid layout.--> +<div class="grid"> + <div class="subgrid" style="contain: none"> + <div class="second"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="contain: size"> + <div class="second"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="contain: style"> + <div class="second"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/independent-tracks-from-parent-grid.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-tracks-from-parent-grid.html new file mode 100644 index 0000000000..d7647eaafb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/independent-tracks-from-parent-grid.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid standalone tracks are independent of the parent grid</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrids"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: inline-grid; + background: red; + gap: 25px; +} +.subgrid { + display: grid; + grid-template-columns: subgrid; +} +.item { + background: green; + height: 25px; + width: 100px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001-ref.html new file mode 100644 index 0000000000..44f0d443ff --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid item percentage height</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style type="text/css"> + +.wrapper { + padding: 2px; + padding-top: 5px; + border: 1px solid; +} +.grid { + display: grid; + grid: auto auto / auto; + grid-row-gap: 60px; + height: 300px; + background: lightgrey; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + grid-row: span 2; + grid-row-gap: 40px; + padding: 10px; + padding-top: 5px; +} + +.item { + align-self: start; + width: 100px; + background: grey; + margin-left: 10px; +} + +.hidden { visibility: hidden; } +.a1 { grid-area: 1/1; } +.a2 { grid-area: 2/1; } + </style> +</head> +<body> + +<div class="wrapper"> +<div class="grid"> + <div class="item hidden a1" style="height:25px"></div><div class="item a1" style="margin-top:5px; margin-bottom:-10px; align-self:stretch"></div> + <div class="item hidden a2" style="height:120px"></div><div class="item a2" style="margin-top:-10px; height:100px"></div> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001.html b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001.html new file mode 100644 index 0000000000..15e996ea32 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid item percentage height</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="item-percentage-height-001-ref.html"> + <style type="text/css"> + +.grid { + display: grid; + grid: auto auto / auto; + grid-row-gap: 60px; + border: 1px solid; + padding: 2px; + padding-top: 5px; + height: 300px; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + grid-row: span 2; + grid-row-gap: 40px; + background: lightgrey; + padding: 10px; + padding-top: 5px; +} + +.item { + align-self: start; + height: 100%; + width: 100px; + background: grey; +} + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <div class="item"></div> + <div class="item" style="height:100px"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001-ref.html new file mode 100644 index 0000000000..04c5839596 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid item using line names from outer grid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / [a] 50px 50px [a] 50px 50px [a]; + padding: 20px 10px; +} + +.subgrid { + display: grid; + grid: 50px / subgrid; + grid-column: span 3; +} + +x { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <x style="grid-column: 1 / 3"></x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html new file mode 100644 index 0000000000..69c300d864 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid item using line names from outer grid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / [a] 50px 50px [a] 50px 50px [a]; + padding: 20px 10px; +} + +.subgrid { + display: grid; + grid: 50px / subgrid; + grid-column: span 3; +} + +x { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <x style="grid-column: span a / a -1"></x> + </div> +</div> + +<script> + const expectedResults = [ + "subgrid [] [] [] []", + ]; + [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { + let actual = window.getComputedStyle(subgrid)['grid-template-columns']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; + document.body.appendChild(document.createTextNode(err)); + } + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002-ref.html new file mode 100644 index 0000000000..2399328bec --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid item using line names from outer grid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / [a] 50px 40px [a] 10px 50px [a]; + padding: 20px 10px; +} + +.subgrid { + display: grid; + grid: 50px / subgrid; + grid-column: span 3; +} + +x { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <x style="grid-column: 3 / 4"></x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-002.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002.html new file mode 100644 index 0000000000..574e353f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid item using line names from outer grid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / repeat(10, 10px) repeat(10, [a] 10px) [a]; + padding: 20px 10px; +} + +.subgrid { + display: grid; + grid: 50px / subgrid; + grid-column: span 10; +} + +x { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <x style="grid-column: span a / a 8"></x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-003.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-003.html new file mode 100644 index 0000000000..43afaf9414 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested subgrid item using line names from outer grid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / [a] 50px 50px [a] 50px 50px [a]; + padding: 20px 10px; +} + +.subgrid { + display: grid; + grid: 50px / subgrid; + grid-column: span 4; +} + +x { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <div class="subgrid" style="grid-column: span 3"> + <x style="grid-column: span a / a -1"></x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004-ref.html new file mode 100644 index 0000000000..6ceb9d4927 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid item using mix of outer/inner line names</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b]; + padding: 20px 10px; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid [x] [b] [] [] [b]; + grid-auto-rows: 10px; + grid-column: 2 / span 4; +} + +x { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <x style="grid-row:1; grid-column: 2 / 4"></x> + <x style="grid-row:2; grid-column: 2 / 5"></x> + <x style="grid-row:3; grid-column: 2 / 4"></x> + <x style="grid-row:4; grid-column: 2 / 4"></x> + <x style="grid-row:5; grid-column: 2 / 5"></x> + <x style="grid-row:6; grid-column: 2 / 4"></x> + <x style="grid-row:7; grid-column: 1 / 4"></x> + <x style="grid-row:8; grid-column: 2 / 4"></x> + <x style="grid-row:9; grid-column: 2 / 3"></x> + <x style="grid-row:10; grid-column: 2 / 3"></x> + <x style="grid-row:11; grid-column: 2 / 5"></x> + <x style="grid-row:12; grid-column: 2 / 4"></x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html new file mode 100644 index 0000000000..84f727d2e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid item using mix of outer/inner line names</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-004-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b]; + padding: 20px 10px; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid [x] [b] [] [] [b]; + grid-auto-rows: 10px; + grid-column: 2 / span 4; +} + +x { background: grey; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <x style="grid-row:1; grid-column: b / b 2"></x> + <x style="grid-row:2; grid-column: b / b -1"></x> + <x style="grid-row:3; grid-column: b / b -2"></x> + <x style="grid-row:4; grid-column: b / span b"></x> + <x style="grid-row:5; grid-column: b / span b 2"></x> + <x style="grid-row:6; grid-column: span b / b 2"></x> + <x style="grid-row:7; grid-column: span b 2 / b 2"></x> + <x style="grid-row:8; grid-column: b -2 / b"></x> + <x style="grid-row:9; grid-column: b -3 / b"></x> + <x style="grid-row:10; grid-column: b / b"></x> + <x style="grid-row:11; grid-column: b / b 10"></x> + <x style="grid-row:12; grid-column: span b / b -2"></x> + </div> +</div> + +<script> + const expectedResults = [ + "subgrid [x] [b] [] [] [b]", + ]; + [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { + let actual = window.getComputedStyle(subgrid)['grid-template-columns']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; + document.body.appendChild(document.createTextNode(err)); + } + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005-ref.html new file mode 100644 index 0000000000..44bb0e0dbb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005-ref.html @@ -0,0 +1,153 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid line name resolution</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] / + [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k]; + grid-template-areas: ". . . e . . . . . . ."; + place-content: start; + border: 1px solid; + width: 500px; + grid-auto-columns: 100px; + grid-auto-rows: 100px; +} + +.subgrid { + display: grid; + grid: auto / subgrid; + background: lightgrey; + grid-column: 2 / span 8; + grid-row: 2 / span 2; + min-width:0; + min-height:0; +} + +.subgrid2 { + display: grid; + grid: auto / subgrid [] [] [] [b]; + grid-column: span 10; +} + +.subgrid#s1 { + grid-template-areas: ". e e . . . ."; +} + +i { + grid-row: 1; + counter-increment: i; +} +i::before { content: counter(i, decimal); } + +x { + min-width:10px; + min-height:20px; + background:silver; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } + + </style> +</head> +<body> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid" id="s1"> + <x style="grid-column:10 / span 4">x</x> +</div> +</div> + +<div class="grid hr"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hl" id="s2"> + <x style="grid-column: 10 / span 4">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr" id="s2"> + <x style="grid-column: 10 / span 4">x</x> +</div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column:1 / 4">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column:10 / span 4">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column: 1 / -1">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-row:2; grid-column: 1 / -1">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column: span 3 / 11">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] "> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2" style="grid-row:2"> + <x style="grid-column: 10 / 11">x</x> + </div> +</div> + +<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2"> + <x style="grid-column: 10 / 11">x</x> + </div> +</div> + +<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> + <x style="grid-column: 1 / 6">x</x> + </div> +</div> + +<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'> +<div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> + <x style="grid-column: 2 / 5">x</x> + </div> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html new file mode 100644 index 0000000000..26be899e93 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html @@ -0,0 +1,182 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid line name resolution</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-005-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +.grid { + display: grid; + grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] / + [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k]; + grid-template-areas: ". . . e . . . . . . ."; + place-content: start; + border: 1px solid; + width: 500px; + grid-auto-columns: 100px; + grid-auto-rows: 100px; +} + +.subgrid { + display: grid; + grid: auto / subgrid; + background: lightgrey; + grid-column: 2 / span 8; + grid-row: 2 / span 2; + min-width:0; + min-height:0; +} + +.subgrid2 { + display: grid; + grid: auto / subgrid [] [] [] [b]; + grid-column: span 10; +} + +.subgrid#s1 { + grid-template-areas: ". e e . . . ."; +} + +i { + grid-row: 1; + counter-increment: i; +} +i::before { content: counter(i, decimal); } + +x { + min-width:10px; + min-height:20px; + background:silver; +} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } + + </style> +</head> +<body> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid" id="s1"> + <x style="grid-column:foo / span 4">x</x> +</div> +</div> + +<div class="grid hr"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hl" id="s2"> + <x style="grid-column: x 6 / span 4">x</x> +</div> +</div> + +<div class="grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> +<div class="subgrid hr" id="s2"> + <x style="grid-column: x 6 / span 4">x</x> +</div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column:1 / b">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column:foo / span 4">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column: span bar / foo 3">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-row:2; grid-column: span bar / foo 3">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2"> + <x style="grid-column:span 4 / foo">x</x> + </div> +</div> + +<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] "> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="subgrid2" style="grid-row:2"> + <x style="grid-column:foo / span 4">x</x> + </div> +</div> + +<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2"> + <x style="grid-column: span a / a 8">x</x> + </div> +</div> + +<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> + <x style="grid-column: a">x</x> + </div> +</div> + +<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'> +<div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> + <x style="grid-column: a">x</x> + </div> +</div> +</div> + +<script> + const expectedResults = [ + "subgrid [] [] [] [] [] [] [] [] []", + "subgrid [] [] [] [] [] [] [] [] []", + "subgrid [] [] [] [] [] [] [] [] []", + "subgrid [] [] [] [b] [] [] [] [] [] [] []", + "subgrid [] [] [] [b] [] [] [] [] [] [] []", + "subgrid [] [] [] [b] [] [] [] [] [] [] []", + "subgrid [] [] [] [b] [] [] [] [] [] [] []", + "subgrid [] [] [] [b] [] [] [] [] [] [] []", + "subgrid [] [] [] [b] [] [] [] [] [] [] []", + "subgrid [] [] [] [] [] [] [] [] [] [] []", + "subgrid [] [] [] [] [] []", + "subgrid [] [] [] [] [] [] [] [] [] [] []", + "subgrid [] [] [] [] [] []", + ]; + [...document.querySelectorAll('div > div')].forEach(function(subgrid, i) { + let actual = window.getComputedStyle(subgrid)['grid-template-columns']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; + document.body.appendChild(document.createTextNode(err)); + } + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-006-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006-ref.html new file mode 100644 index 0000000000..e2c2ec2085 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006-ref.html @@ -0,0 +1,115 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid line name resolution</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +div > div { background: grey; grid-column: 2 / span 2; } + +i { + grid-row: 1; + counter-increment: i; +} +i::before { content: counter(i, decimal); } + +x { background: silver; } + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> + <x style="grid-column: 2 / 3">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a];"> + <x style="grid-column: 1 / 2">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> + <x style="grid-column: 1 / 2">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> + <x style="grid-column: 2 / 3">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> + <x style="grid-column: 3 / 4">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> + <x style="grid-column: 2 / 3">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> + <x style="grid-column: 2 / 3">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a];"> + <x style="grid-column: 1 / 2">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> + <x style="grid-column: 1 / 2">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> + <x style="grid-column: 2 / 3">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> + <x style="grid-column: 3 / 4">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> + <x style="grid-column: 2 / 3">x</x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-006.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006.html new file mode 100644 index 0000000000..0aa8c80b2e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006.html @@ -0,0 +1,117 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid line name resolution</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-006-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; +} + +div > div { background: grey; grid-column: 2 / span 2; } + +i { + grid-row: 1; + counter-increment: i; +} +i::before { content: counter(i, decimal); } + +x { background: silver; } + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> + <x style="grid-column: a-end -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a];"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> + <x style="grid-column: a">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> + <x style="grid-column: a-end -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a];"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div style="display:grid"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> + <x style="grid-column: a">x</x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-007-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007-ref.html new file mode 100644 index 0000000000..2b06d9c381 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007-ref.html @@ -0,0 +1,134 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + position: relative; + display: grid; + grid: 0.2em / repeat(10,30px); + grid-auto-rows: 2em; + border: 1px solid; + padding: 1px 2px; +} + +div > div { + padding: 4px 0 1px 0; + border: 3px solid black; + background: grey; + margin-left: 30px; + width: 54px; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + position: absolute; + left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="margin-left:0"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="width:84px"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="width:84px"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="width:174px"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="margin-left:0"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="width:84px"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="width:84px"> + <x>x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="width:174px"> + <x>x</x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-007.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007.html new file mode 100644 index 0000000000..d70a86b6b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007.html @@ -0,0 +1,137 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-007-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + position: relative; + display: grid; + grid: 0.2em / repeat(10,30px); + grid-auto-rows: 2em; + border: 1px solid; + padding: 1px 2px; +} + +div > div { + display: grid; + grid-column: 2 / span 2; + grid: auto / subgrid; + padding: 4px 33px 1px 10px; + border: 3px solid black; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + position: absolute; + left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-areas: '. a a a a';"> + <x style="grid-column: a-end -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [a];"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [a]; grid-column:1/span 2"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6"> + <x style="grid-column: a">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-areas: '. a a a a';"> + <x style="grid-column: a-end -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [a];"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:1/span 2"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6"> + <x style="grid-column: a">x</x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-008-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008-ref.html new file mode 100644 index 0000000000..262fa548ec --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008-ref.html @@ -0,0 +1,162 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid CB</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10,30px); + border: 1px solid; + padding: 0 2px; +} + +div > div { + position: relative; + display: grid; + grid-column: 2 / span 2; + grid: auto / subgrid; + padding: 4px 0 1px 10px; + border: 1px solid black; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + position: absolute; + left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div> + <x style="grid-column: -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div> + <x style="grid-column: 2">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column-end:span 5"> + <x style="grid-column: 2">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column:2/span 5"> + <x style="grid-column: 4">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column-end:span 6"> + <x style="grid-column: 2 / 4">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column-end:span 3"> + <x style="grid-column: -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column:2/span 6"> + <x style="grid-column: 3 / 5">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column:2/span 6"> + <x style="grid-column: 3 / 5">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr"> + <x style="grid-column: 3 / auto">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr"> + <x style="grid-column: 2 / auto">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-column-end:span 5"> + <x style="grid-column: 2 / auto">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-column:2/span 5"> + <x style="grid-column: 6 / auto">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-column-end:span 6"> + <x style="grid-column: 2 / 4">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-column-end:span 3"> + <x style="grid-column: 4 / auto">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-column:2/span 6"> + <x style="grid-column: 5 / 7">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-column:2/span 6"> + <x style="grid-column: 5 / 7">x</x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-008.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008.html new file mode 100644 index 0000000000..56ea961298 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008.html @@ -0,0 +1,164 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid CB</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-008-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10,30px); + border: 1px solid; + padding: 0 2px; +} + +div > div { + position: relative; + display: grid; + grid-column: 2 / span 2; + grid: auto / subgrid; + padding: 4px 0 1px 10px; + border: 1px solid black; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + position: absolute; + left:0; right:0; + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-areas: '. a a a a';"> + <x style="grid-column: a-end -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [][a][];"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [a]; grid-column:2/span 5"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6"> + <x style="grid-column: a 2 / a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> + <x style="grid-column: a/span a">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> + <x style="grid-column: a/a 2">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-areas: '. a a a a';"> + <x style="grid-column: a-end -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [][a][];"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:2/span 5"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6"> + <x style="grid-column: a 2 / a -1">x</x> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3"> + <x style="grid-column: a -1">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> + <x style="grid-column: a/span a">x</x> + </div> +</div> + +<div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> + <x style="grid-column: a/a 2">x</x> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-009-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009-ref.html new file mode 100644 index 0000000000..103a35968d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid line names are not inherited to a non-subgridded axis</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> + html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; + } + + div > div { background: grey; grid-column:2 / span 2; } + + i { + grid-row: 1; + counter-increment: i; + } + i::before { content: counter(i, decimal); } + + x { background: silver; } + </style> +</head> +<body> + +<div style="display:grid;"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:1 / 4;"> + <x style="grid-column:c">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c / 4;"> + <x style="grid-column:span 1">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;"> + <x style="grid-column:4">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;"> + <x style="grid-column:span 1">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c-1 / c 3;"> + <x style="grid-column:span 1">x</x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-009.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009.html new file mode 100644 index 0000000000..bd8a776872 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid line names are not inherited to a non-subgridded axis</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-009-ref.html"> + <style> + html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; + } + + div > div { background: grey; grid-column:2 / span 2; } + + i { + grid-row: 1; + counter-increment: i; + } + i::before { content: counter(i, decimal); } + + x { background: silver; } + </style> +</head> +<body> + +<div style="display:grid;"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:1 / 4;"> + <x style="grid-column:c">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c / 4;"> + <x style="grid-column:span c">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;"> + <x style="grid-column:c 2">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;"> + <x style="grid-column:span c 2">x</x> + </div> + </div> +</div> + +<div style="display:grid;"> +<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;"> + <div style="display:grid; grid:subgrid/auto; grid-column:c-1 / c 3;"> + <x style="grid-column:span c">x</x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html new file mode 100644 index 0000000000..9232f1dcf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid implicit line names are clamped to the subgrid axis</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> + html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; + } + + div > div { background: grey; grid-column:2 / span 2; } + + i { + grid-row: 1; + counter-increment: i; + } + i::before { content: counter(i, decimal); } + + x { background: silver; } + </style> +</head> +<body> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: 3 / 5">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: 5">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: 3 / 5">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: 5">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'";> + <x style="grid-column: 1 / 4">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: 1 / 4">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: 1 / 4"">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: 1 / 4"">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:3 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: 1"">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a];"> + <x style="grid-column: 1 / 3">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [b] [b] [b] [a]; grid-column:1 / 9;"> + <x style="grid-column: 1 / 4">x</x> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html new file mode 100644 index 0000000000..f22cfe3303 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html @@ -0,0 +1,107 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid implicit line names are clamped to the subgrid axis</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-010-ref.html"> + <style> + html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; + } + + div > div { background: grey; grid-column:2 / span 2; } + + i { + grid-row: 1; + counter-increment: i; + } + i::before { content: counter(i, decimal); } + + x { background: silver; } + </style> +</head> +<body> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: a">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: a">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: a-start / a-end">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;"> + <x style="grid-column: a-start / a-end">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'";> + <x style="grid-column: a">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: a">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: '. . . . . . a a a ';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: a-start / a-end">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: a-start / a-end">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid; grid-column:3 / 9; grid-template-areas: 'a a a'"> + <x style="grid-column: a-start / a-end">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [a];"> + <x style="grid-column: a">x</x> + </div> +</div> + +<div style="display:grid; grid-template-areas: 'a a a';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:auto/subgrid [b] [b] [b] [a]; grid-column:1 / 9;"> + <x style="grid-column: a">x</x> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-011-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011-ref.html new file mode 100644 index 0000000000..40f3543980 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid line names do not apply to non-subgrids</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> + html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; + } + + div > div { background: grey; grid-column:2 / span 2; } + + i { + grid-row: 1; + counter-increment: i; + } + i::before { content: counter(i, decimal); } + + x { background: silver; } + </style> +</head> +<body> + + <div style="display:grid; grid-template-columns: subgrid [a] [b] [c] [d];"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <x style="grid-column: 2 / 3">x</x> + </div> + + <div style="display:grid; grid-template-columns: 'auto [a] auto [b]';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:subgrid [c] [d] [d] [e] / auto; "> + <x style="grid-column: 3">x</x> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-011.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011.html new file mode 100644 index 0000000000..d3bb734447 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid line names do not apply to non-subgrids</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-011-ref.html"> + <style> + html,body { + color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; + } + + div > div { background: grey; grid-column:2 / span 2; } + + i { + grid-row: 1; + counter-increment: i; + } + i::before { content: counter(i, decimal); } + + x { background: silver; } + </style> +</head> +<body> + + <div style="display:grid; grid-template-columns: subgrid [a] [b] [c] [d];"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <x style="grid-column: a / d">x</x> + </div> + + <div style="display:grid; grid-template-columns: 'auto [a] auto [b]';"> + <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> + <div style="display:grid; grid:subgrid [c] [d] [d] [e] / auto; "> + <x style="grid-column: c">x</x> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-012-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012-ref.html new file mode 100644 index 0000000000..6ddf3ab87c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012-ref.html @@ -0,0 +1,181 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid line names do not apply to non-subgrids</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10,30px); + border: 1px solid; + padding: 0 2px; +} + +div > div { + xposition: relative; + display: grid; + grid: auto / subgrid; + border: 1px solid black; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + background: silver; +} + +.hr { writing-mode: horizontal-tb; direction:rtl; } + </style> +</head> +<body> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / span 2;"> + <div style="grid-column: 1;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / span 2;"> + <div style="grid-column: 1;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 4;"> + <div style="grid-column: 1 / 2;"> + <x style="grid-column: 1 / 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 4;"> + <div style="grid-column: 1 / 2;"> + <x style="grid-column: 1 / 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 1 / 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 2 / 3;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 1 / 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 2 / 3;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 1 / 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 2 / 3;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 1 / 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 7;"> + <div style="grid-column: 3 / 5;"> + <x style="grid-column: 2 / 3;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 5;"> + <div style="grid-column: 1 / 3;"> + <x style="grid-column: 1 / 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-column: 2 / 5;"> + <div style="grid-column: 1 / 3;"> + <x style="grid-column: 2 / 3;">x</x> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-012.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012.html new file mode 100644 index 0000000000..e8101043cf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012.html @@ -0,0 +1,185 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid line name ordering matches writing direction</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="line-names-012-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10,30px); + border: 1px solid; + padding: 0 2px; +} + +div > div { + position: relative; + display: grid; + grid-column: 2 / span 2; + grid: auto / subgrid; + border: 1px solid black; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + background: silver; +} + +.rtl { writing-mode: horizontal-tb; direction:rtl; } +.ltr { writing-mode: horizontal-tb; direction:ltr; } + </style> +</head> +<body> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [a][][];"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a];"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a -1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [a][a] 30px;"> + <div class="ltr" style="grid-template-columns: subgrid [][][a];"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [a][a] 30px;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a -1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a -1;">x</x> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a -1;">x</x> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column:2/span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column:2/span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][][];"> + <x style="grid-column: a -1;">x</x> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px);"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [a][a]; grid-column:2/span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][a];"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px);"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [a][a]; grid-column:2/span 5;"> + <div class="ltr" style="grid-template-columns: subgrid [a][a];"> + <x style="grid-column: a 2;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> + <div class="ltr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> + <x style="grid-column: a;">x</x> + </div> + </div> +</div> + +<div class="grid"> +<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> + <div class="ltr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> + <x style="grid-column: a 2;">x</x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001-ref.html new file mode 100644 index 0000000000..4f0f6f962e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: auto / auto; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + min-width:10px; + min-height:0; + border: 0 solid lightblue; + border-bottom-width: 40px; +} + +.vlr { + writing-mode: vertical-lr; + grid: auto / auto; + grid-column: 2 / span 5; + grid-row: 3 / span 5; + background: blue; +} + +x { + min-width:10px; + min-height:0px; +} +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="text-indent:10px"> + A B + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vr"> + <div class="subgrid hr">A B</div> + </div> +</div> + +<div class="grid"> +<x style="grid-row:3; height:50px; background:black"></x> +<x style="grid-row:4; height:50px; background:pink"></x> +<x style="grid-row:5; height:40px; background:black"></x> +<div class="subgrid vlr"> +<div class="subgrid hl"> + <x style="grid-row:2 / span 2; height: 100px">A B C D E F</x> +</div> +</div> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001.html new file mode 100644 index 0000000000..1cf99a73e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001.html @@ -0,0 +1,89 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="orthogonal-writing-mode-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 monospace; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + min-width:10px; + min-height:0; + border: 0 solid lightblue; + border-bottom-width: 40px; +} + +.vlr { + writing-mode: vertical-lr; + grid: auto / subgrid; + grid-column: 2 / span 5; + grid-row: 3 / span 5; + background: blue; +} + +x { + min-width:10px; + min-height:0px; +} +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="text-indent:10px"> + A B + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vr"> + <div class="subgrid hr">A B</div> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> +<div class="subgrid vlr"> +<div class="subgrid hl"> + <x style="grid-row:2 / span 2; height: 100px">A B C D E F</x> +</div> +</div> +</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002-ref.html new file mode 100644 index 0000000000..7c51c02828 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002-ref.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:12px/1 Ahem; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: auto / auto; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + min-width:10px; + min-height:0; + border: 0 solid lightblue; + border-bottom-width: 40px; + background: yellow; + padding: 1px 3px 5px 7px; + margin: 3px 11px 7px 5px; +} + +.vlr { + writing-mode: vertical-lr; + grid: auto / auto; + grid-column: 2 / span 5; + grid-row: 3 / span 5; + background: blue; +} + +x { + min-width:10px; + min-height:0px; +} + +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid vrl"> +<x style="grid-column:1; height:0px"></x><x style="grid-column:2; height:16px"></x><x style="grid-column:3; height:30px"></x><x style="grid-column:4; height:52px"></x> +<div class="subgrid hl"> + <x style="grid-column:span 12">A _B</x> + <x style="width:100px; height:30px"></x> + <x style="background:yellow">C D_</x> +</div> +</div> + +<div class="grid"> +<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:52px"></x><x style="grid-row:4; height:30px"></x> +<div class="subgrid vlr" style="grid: auto / repeat(5, auto);"> + <x>A _B</x> + <x style="width:100px; height:30px"></x> + <x>C D_</x> +</div> +</div> + +<div class="grid"> +<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:4px"></x> +<div class="subgrid vlr"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002.html new file mode 100644 index 0000000000..20a4b0ccf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002.html @@ -0,0 +1,92 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="orthogonal-writing-mode-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 Ahem; +} + +.grid { + display: grid; + grid: repeat(4, auto) / repeat(5, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + grid-column: 2 / span 5; + grid-row: 2 / span 5; + min-width:10px; + min-height:0; + border: 0 solid lightblue; + border-bottom-width: 40px; + background: yellow; + padding: 1px 3px 5px 7px; + margin: 3px 11px 7px 5px; +} + +.vlr { + writing-mode: vertical-lr; + grid: auto / subgrid; + grid-column: 2 / span 5; + grid-row: 3 / span 5; + background: blue; +} + +x { + min-width:10px; + min-height:0px; +} + +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid vrl"> +<x style="grid-column:1"></x><x style="grid-column:2"></x><x style="grid-column:3"></x><x style="grid-column:4"></x><x style="grid-column:5"></x><x style="grid-column:6"></x> +<div class="subgrid hl"> + <x style="grid-column:span 12">A _B</x> + <x style="width:100px; height:30px"></x> + <x style="background:yellow">C D_</x> +</div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> +<div class="subgrid vlr"> + <x>A _B</x> + <x style="width:100px; height:30px"></x> + <x>C D_</x> +</div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> +<div class="subgrid vlr"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003-ref.html new file mode 100644 index 0000000000..3026548c68 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003-ref.html @@ -0,0 +1,104 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:12px/1 Ahem; +} + +.grid { + display: grid; + grid: 2px repeat(4, auto) / 10px repeat(50, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: repeat(50, auto) / repeat(4, auto); + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 3 / span 3; + min-width:10px; + min-height:0; + border: solid lightblue; + border-width: 1px 5px 3px 7px; + padding: 5px 7px 3px 1px; + margin: 7px 3px 5px 1px; +} + +item { text-indent:10px; background: magenta; } + +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } +x:nth-child(2n+5) { background: blue; } +x:nth-child(2n+6) { background: cyan; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x> + <div class="subgrid vrl"> + <item class="hl">AB</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:23px"></x> + <div class="subgrid vlr"> + <item class="hl">AB</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl">AB</item> + </div> + <item class="hl" style="grid-area:3/5/4/6">AB</item> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:40px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl" style="height:27px">AB</item> + </div> + <item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:40px"></x><x style="grid-row:5;height:11px"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl" style="height:12px">AB</item> + </div> + <item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:40px"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl" style="height:12px">AB</item> + </div> + <item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003.html new file mode 100644 index 0000000000..2cd17d628b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003.html @@ -0,0 +1,106 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="orthogonal-writing-mode-003-ref.html"> + <style> +html,body { + color:black; background-color:white; font:12px/1 Ahem; +} + +.grid { + display: grid; + grid: 2px repeat(4, auto) / 10px repeat(50, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: subgrid / subgrid; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 3 / span 3; + min-width:10px; + min-height:0; + border: solid lightblue; + border-width: 1px 5px 3px 7px; + padding: 5px 7px 3px 1px; + margin: 7px 3px 5px 1px; +} + +item { text-indent:10px; background: magenta; } + +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } +x:nth-child(2n+5) { background: blue; } +x:nth-child(2n+6) { background: cyan; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl"> + <item class="hl">AB</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vlr"> + <item class="hl">AB</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl">AB</item> + </div> + <item class="hl" style="grid-area:3/5/4/6">AB</item> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl">AB</item> + </div> + <item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl">AB</item> + </div> + <item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item class="hl">AB</item> + </div> + <item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004-ref.html new file mode 100644 index 0000000000..1de585bd62 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004-ref.html @@ -0,0 +1,128 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 2px repeat(4, auto) / 10px repeat(50, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: repeat(4, auto) / repeat(50, auto);; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 3 / span 3; + min-width:10px; + min-height:0; + border: solid lightblue; + border-width: 1px 5px 3px 7px; + padding: 5px 7px 3px 1px; + margin: 7px 3px 5px 1px; +} + +item { background: magenta; } + +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } +x:nth-child(2n+5) { background: blue; } +x:nth-child(2n+6) { background: cyan; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x> + <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x> <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item><item>C</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>É</item><item>C</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x> + <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> + <div class="subgrid vlr" style="grid-column:5/8"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x> + <div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px"> + <item>X</item><item>É</item> + </div> + <div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:10px 20px"> + <item>X</item><item>ÉÉ</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:43px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x> + <div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px"> + <item>X</item><item class="">É</item> + </div> + <div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:30px 20px"> + <item>X</item><item>ÉÉ</item> + </div> + <div class="subgrid vrl" style="grid-column:8/11; grid-template-columns:30px 20px"> + <item>XXX</item><item>É</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004.html new file mode 100644 index 0000000000..4a0edd7e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004.html @@ -0,0 +1,131 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrids with different writing-mode than parent</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="orthogonal-writing-mode-004-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 2px repeat(4, auto) / 10px repeat(50, auto); + place-content: start; + border: 1px solid; +} + +.subgrid { + display: grid; + grid: subgrid / subgrid; + background: lightgrey; + grid-column: 2 / span 5; + grid-row: 3 / span 3; + min-width:10px; + min-height:0; + border: solid lightblue; + border-width: 1px 5px 3px 7px; + padding: 5px 7px 3px 1px; + margin: 7px 3px 5px 1px; +} + +item { background: magenta; } + +x:nth-child(2n+1) { background: silver; } +x:nth-child(2n+2) { background: grey; } +x:nth-child(2n+3) { background: pink; } +x:nth-child(2n+4) { background: black; } +x:nth-child(2n+5) { background: blue; } +x:nth-child(2n+6) { background: cyan; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; } +.vr { writing-mode: vertical-rl; } +.vlr { writing-mode: vertical-lr; direction:rtl; } +.vrl { writing-mode: vertical-rl; direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> + <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> + <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item><item>C</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>É</item><item>C</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> + <div class="subgrid vlr" style="grid-column:5/8"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vrl" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>É</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>ÉÉ</item> + </div> +</div> + +<div class="grid"> +<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x> + <div class="subgrid vlr" style="grid-column:2/5"> + <item>X</item><item>É</item> + </div> + <div class="subgrid vrl" style="grid-column:5/8"> + <item>X</item><item>ÉÉ</item> + </div> + <div class="subgrid vrl" style="grid-column:8/11"> + <item>XXX</item><item>É</item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005-ref.html new file mode 100644 index 0000000000..20e7a30cce --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005-ref.html @@ -0,0 +1,286 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: line names in orthogonal parent subgrid</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <style> + body { + font:10px monospace; padding:0; margin:0; line-height:0; + } + + .grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; + vertical-align: bottom; + } + + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + background: grey; + } + .grid > .subgrid > .subgrid { + writing-mode: vertical-lr; + grid-template-rows: subgrid; + grid-template-columns: initial; + grid-column: 1 / span 4; + grid-auto-columns: 8px; + grid-auto-flow: column; + } + + .fill-1a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [y] [z] [z] [z] [z] */ + .fill-1b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [y] [z] [z] [z] */ + .fill-1c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [y] [z] [z] */ + .fill-1d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [y] [z] */ + .fill-1e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [y] */ + + .areas-1a { grid-template-areas: 'x x x x' } + .areas-1b { grid-template-areas: '. x x x' } + .areas-1c { grid-template-areas: 'x x x .' } + .areas-1d { grid-template-areas: '. . x x' } + .areas-1e { grid-template-areas: '. . x .' } + + .subgrid > .subgrid > :nth-child(2n) { background: black; } + .subgrid > .subgrid > :nth-child(2n+1) { background: pink; } + .subgrid > .subgrid > * { writing-mode: horizontal-tb; } + + </style> + </head> + <body> + + <!-- Line names before/after auto repeat --> + <div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <!-- Auto repeat line names --> + <div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:2"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:3"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:2"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:3"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:4"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + <div style="grid-row:1"></div> + </div></div></div> + + <!-- Named grid areas --> + <div class="grid"><div class="subgrid areas-1a"><div class="subgrid"> + <div style="grid-row:1"></div> + <div style="grid-row:1 / -1"></div> + <div style="grid-row:1 / -1"></div> + <div style="grid-row:-1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid areas-1b"><div class="subgrid"> + <div style="grid-row:2"></div> + <div style="grid-row:2 / -1"></div> + <div style="grid-row:2 / -1"></div> + <div style="grid-row:-1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid areas-1c"><div class="subgrid"> + <div style="grid-row:1"></div> + <div style="grid-row:1/-2"></div> + <div style="grid-row:1/-2"></div> + <div style="grid-row:-2"></div> + </div></div></div> + + <div class="grid"><div class="subgrid areas-1d"><div class="subgrid"> + <div style="grid-row:3"></div> + <div style="grid-row:3 / -1"></div> + <div style="grid-row:3 / -1"></div> + <div style="grid-row:-1"></div> + </div></div></div> + + <div class="grid"><div class="subgrid areas-1e"><div class="subgrid"> + <div style="grid-row:3"></div> + <div style="grid-row:3"></div> + <div style="grid-row:3"></div> + <div style="grid-row:-1"></div> + </div></div></div> + </body> + </html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005.html new file mode 100644 index 0000000000..d5bd178161 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005.html @@ -0,0 +1,288 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: line names in orthogonal parent subgrid</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="orthogonal-writing-mode-005-ref.html"> + <style> +body { + color:black; background-color:white; font:10px monospace; padding:0; margin:0; line-height:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; + vertical-align: bottom; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + background: grey; +} +.grid > .subgrid > .subgrid { + writing-mode: vertical-lr; + grid-template-rows: subgrid; + grid-template-columns: initial; + grid-column: 1 / span 4; + grid-auto-columns: 8px; + grid-auto-flow: column; +} + +.fill-1a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [y] [z] [z] [z] [z] */ +.fill-1b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [y] [z] [z] [z] */ +.fill-1c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [y] [z] [z] */ +.fill-1d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [y] [z] */ +.fill-1e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [y] */ + +.areas-1a { grid-template-areas: 'x x x x' } +.areas-1b { grid-template-areas: '. x x x' } +.areas-1c { grid-template-areas: 'x x x .' } +.areas-1d { grid-template-areas: '. . x x' } +.areas-1e { grid-template-areas: '. . x .' } + +.subgrid > .subgrid > :nth-child(2n) { background: black; } +.subgrid > .subgrid > :nth-child(2n+1) { background: pink; } +.subgrid > .subgrid > * { writing-mode: horizontal-tb; } + + </style> +</head> +<body> + +<!-- Line names before auto repeat --> +<div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-row:z 5"></div> + <div style="grid-row:z 4"></div> + <div style="grid-row:z 3"></div> + <div style="grid-row:z 2"></div> + <div style="grid-row:z 1"></div> + <div style="grid-row:z -1"></div> + <div style="grid-row:z -2"></div> + <div style="grid-row:z -3"></div> + <div style="grid-row:z -4"></div> + <div style="grid-row:z -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-row:x 5"></div> + <div style="grid-row:x 4"></div> + <div style="grid-row:x 3"></div> + <div style="grid-row:x 2"></div> + <div style="grid-row:x 1"></div> + <div style="grid-row:x -1"></div> + <div style="grid-row:x -2"></div> + <div style="grid-row:x -3"></div> + <div style="grid-row:x -4"></div> + <div style="grid-row:x -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-row:x 5"></div> + <div style="grid-row:x 4"></div> + <div style="grid-row:x 3"></div> + <div style="grid-row:x 2"></div> + <div style="grid-row:x 1"></div> + <div style="grid-row:x -1"></div> + <div style="grid-row:x -2"></div> + <div style="grid-row:x -3"></div> + <div style="grid-row:x -4"></div> + <div style="grid-row:x -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-row:x 5"></div> + <div style="grid-row:x 4"></div> + <div style="grid-row:x 3"></div> + <div style="grid-row:x 2"></div> + <div style="grid-row:x 1"></div> + <div style="grid-row:x -1"></div> + <div style="grid-row:x -2"></div> + <div style="grid-row:x -3"></div> + <div style="grid-row:x -4"></div> + <div style="grid-row:x -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-row:x 5"></div> + <div style="grid-row:x 4"></div> + <div style="grid-row:x 3"></div> + <div style="grid-row:x 2"></div> + <div style="grid-row:x 1"></div> + <div style="grid-row:x -1"></div> + <div style="grid-row:x -2"></div> + <div style="grid-row:x -3"></div> + <div style="grid-row:x -4"></div> + <div style="grid-row:x -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<!-- Auto repeat line names --> +<div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-row:z 5"></div> + <div style="grid-row:z 4"></div> + <div style="grid-row:z 3"></div> + <div style="grid-row:z 2"></div> + <div style="grid-row:z 1"></div> + <div style="grid-row:z -1"></div> + <div style="grid-row:z -2"></div> + <div style="grid-row:z -3"></div> + <div style="grid-row:z -4"></div> + <div style="grid-row:z -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-row:z 5"></div> + <div style="grid-row:z 4"></div> + <div style="grid-row:z 3"></div> + <div style="grid-row:z 2"></div> + <div style="grid-row:z 1"></div> + <div style="grid-row:z -1"></div> + <div style="grid-row:z -2"></div> + <div style="grid-row:z -3"></div> + <div style="grid-row:z -4"></div> + <div style="grid-row:z -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-row:z 5"></div> + <div style="grid-row:z 4"></div> + <div style="grid-row:z 3"></div> + <div style="grid-row:z 2"></div> + <div style="grid-row:z 1"></div> + <div style="grid-row:z -1"></div> + <div style="grid-row:z -2"></div> + <div style="grid-row:z -3"></div> + <div style="grid-row:z -4"></div> + <div style="grid-row:z -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-row:z 5"></div> + <div style="grid-row:z 4"></div> + <div style="grid-row:z 3"></div> + <div style="grid-row:z 2"></div> + <div style="grid-row:z 1"></div> + <div style="grid-row:z -1"></div> + <div style="grid-row:z -2"></div> + <div style="grid-row:z -3"></div> + <div style="grid-row:z -4"></div> + <div style="grid-row:z -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-row:z 5"></div> + <div style="grid-row:z 4"></div> + <div style="grid-row:z 3"></div> + <div style="grid-row:z 2"></div> + <div style="grid-row:z 1"></div> + <div style="grid-row:z -1"></div> + <div style="grid-row:z -2"></div> + <div style="grid-row:z -3"></div> + <div style="grid-row:z -4"></div> + <div style="grid-row:z -5"></div> +</div></div></div> + +<!-- Named grid areas --> +<div class="grid"><div class="subgrid areas-1a"><div class="subgrid"> + <div style="grid-row:x-start"></div> + <div style="grid-row:x"></div> + <div style="grid-row:x-start / x-end"></div> + <div style="grid-row:x-end"></div> +</div></div></div> + +<div class="grid"><div class="subgrid areas-1b"><div class="subgrid"> + <div style="grid-row:x-start"></div> + <div style="grid-row:x"></div> + <div style="grid-row:x-start / x-end"></div> + <div style="grid-row:x-end"></div> +</div></div></div> + +<div class="grid"><div class="subgrid areas-1c"><div class="subgrid"> + <div style="grid-row:x-start"></div> + <div style="grid-row:x"></div> + <div style="grid-row:x-start / x-end"></div> + <div style="grid-row:x-end"></div> +</div></div></div> + +<div class="grid"><div class="subgrid areas-1d"><div class="subgrid"> + <div style="grid-row:x-start"></div> + <div style="grid-row:x"></div> + <div style="grid-row:x-start / x-end"></div> + <div style="grid-row:x-end"></div> +</div></div></div> + +<div class="grid"><div class="subgrid areas-1e"><div class="subgrid"> + <div style="grid-row:x-start"></div> + <div style="grid-row:x"></div> + <div style="grid-row:x-start / x-end"></div> + <div style="grid-row:x-end"></div> +</div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006-ref.html new file mode 100644 index 0000000000..2bf12f083f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>Reference: Subgridded item sizing with mixed writing modes</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +body { + background: white; + color: black; + display: grid; + font: 20px/1 Ahem; + place-items: start; + padding: 0; + margin: 0; +} +.grid { + background: cyan; + display: grid; + padding: 5px; +} +.grid > .grid { + background: pink; +} +.h { writing-mode: horizontal-tb; } +.v { writing-mode: vertical-rl; } +</style> +</head> +<body> + <div class="grid h"> + <div class="grid h"> + <div class="h">1234</div> + </div> + </div> + <div class="grid h"> + <div class="grid h"> + <div class="v">1234</div> + </div> + </div> + <div class="grid h"> + <div class="grid v"> + <div class="h">1234</div> + </div> + </div> + <div class="grid h"> + <div class="grid v"> + <div class="v">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid h"> + <div class="h">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid h"> + <div class="v">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid v"> + <div class="h">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid v"> + <div class="v">1234</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006.html new file mode 100644 index 0000000000..95d1243228 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgridded item sizing with mixed writing modes</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<link rel="match" href="orthogonal-writing-mode-006-ref.html"> +<style> +body { + background: white; + color: black; + display: grid; + font: 20px/1 Ahem; + place-items: start; + padding: 0; + margin: 0; +} +.grid { + background: cyan; + display: grid; + padding: 5px; +} +.grid > .grid { + background: pink; + grid-template: subgrid / subgrid; +} +.h { writing-mode: horizontal-tb; } +.v { writing-mode: vertical-rl; } +</style> +</head> +<body> + <div class="grid h"> + <div class="grid h"> + <div class="h">1234</div> + </div> + </div> + <div class="grid h"> + <div class="grid h"> + <div class="v">1234</div> + </div> + </div> + <div class="grid h"> + <div class="grid v"> + <div class="h">1234</div> + </div> + </div> + <div class="grid h"> + <div class="grid v"> + <div class="v">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid h"> + <div class="h">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid h"> + <div class="v">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid v"> + <div class="h">1234</div> + </div> + </div> + <div class="grid v"> + <div class="grid v"> + <div class="v">1234</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/overflow-hidden-does-not-prohibit-subgrid.html b/testing/web-platform/tests/css/css-grid/subgrid/overflow-hidden-does-not-prohibit-subgrid.html new file mode 100644 index 0000000000..b0c73e0e24 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/overflow-hidden-does-not-prohibit-subgrid.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-control"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#track-sizing"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="overflow on a grid item does not cause it to establish an independent formatting context, and as a result does not prohibit subgrid"> +<style> +.grid { + display: inline-grid; + grid-template: auto auto / auto auto; + background-color: green; +} +.subgrid { + grid-row: span 2; + grid-column: 2; + display: grid; + grid-template-rows: subgrid; + overflow: hidden; +} +.item { + width: 50px; + height: 50px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<div class="grid"> + <div class="item" style="grid-row: 1;"></div> + <div class="subgrid"> + <div class="item" style="grid-row: 2;"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001-ref.html new file mode 100644 index 0000000000..2217497cd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001-ref.html @@ -0,0 +1,436 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid inside a parent with repeat(auto-fit) columns</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + width: 50px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.fit-0a { grid-template-columns: [y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]; } +.fit-0b { grid-template-columns: [x y] 0px [z] 1px [z] 1px [z] 1px [z]; } +.fit-0c { grid-template-columns: [x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]; } +.fit-0d { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]; } +.fit-0e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]; } +.fit-0f { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px; } +.fit-0g { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]; } +.fit-0h { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]; } +.fit-0i { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]; } +.fit-0j { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px; } +.fit-0k { grid-template-columns: [y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; } +.fit-0l { grid-template-columns: [x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; } +.fit-0m { grid-template-columns: [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px; } + +.fit-1a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]; } +.fit-1b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; } +.fit-1c { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]; } +.fit-1d { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]; } +.fit-1e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px; } + +.fit-2a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; } +.fit-2b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; } +.fit-2c { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]; } +.fit-2d { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px; } + +.fit-3a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; } +.fit-3b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; } +.fit-3c { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px; } + +.fit-4a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; } +.fit-4b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; } + +.fit-5 { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; } + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid fit-0a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0f"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0g"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0h"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0i"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0j"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0k"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0l"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0m"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-3a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-3b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-3c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-4a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-4b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-5"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001.html new file mode 100644 index 0000000000..8ecbccbea6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001.html @@ -0,0 +1,485 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid inside a parent with repeat(auto-fit) columns</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/"> + <link rel="match" href="parent-repeat-auto-fit-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +#report { + white-space: pre-wrap; +} + +.grid { + display: inline-grid; + width: 50px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.fit-0a { grid-template-columns: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) } +.fit-0b { grid-template-columns: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) minmax(0, auto) } +.fit-0c { grid-template-columns: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } +.fit-0d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-0e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } +.fit-0f { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } +.fit-0g { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-0h { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-0i { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } +.fit-0j { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } +.fit-0k { grid-template-columns: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } +.fit-0l { grid-template-columns: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } +.fit-0m { grid-template-columns: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) } + +.fit-1a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] } +.fit-1b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } +.fit-1c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-1d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } +.fit-1e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } + +.fit-2a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } +.fit-2b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) } +.fit-2c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } +.fit-2d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } + +.fit-3a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) } +.fit-3b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } +.fit-3c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) minmax(0, auto) } + +.fit-4a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } +.fit-4b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) minmax(0, auto) } + +.fit-5 { grid-template-columns: repeat(auto-fit, [y] 10px) minmax(0, auto) } + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid fit-0a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0f"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0g"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0h"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0i"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0j"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0k"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0l"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-0m"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-1e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-2d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-3a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-3b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-3c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-4a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-4b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid fit-5"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div id="report"></div> + +<script> + const expectedResults = [ + "[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px", + "[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px", + "[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]", + "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]", + "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px", + "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px", + "[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", + "[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", + "[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px", + "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]", + "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", + "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]", + "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]", + "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px", + "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", + "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", + "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px", + "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px", + "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", + "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", + "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px", + "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", + "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", + "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", + ]; + [...document.querySelectorAll('.grid')].forEach(function(grid, i) { + let actual = window.getComputedStyle(grid)['grid-template-columns']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "\nUnexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\"\n"; + report.appendChild(document.createTextNode(err)); + } + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002-ref.html new file mode 100644 index 0000000000..a884a12b99 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002-ref.html @@ -0,0 +1,440 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid inside a parent with repeat(auto-fit) rows</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + height: 50px; + width: 50px; + grid-template-columns: repeat(auto-fit, 10px); + border: 1px solid; + vertical-align: top; +} + +.subgrid { + display: grid; + grid: subgrid / subgrid; + grid-column: 1 / -1; + grid-row: 3 / span 4; + grid-auto-columns: 8px; + background: grey; +} + +.fit-0a { grid-template-rows: [y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]; } +.fit-0b { grid-template-rows: [x y] 0px [z] 1px [z] 1px [z] 1px [z]; } +.fit-0c { grid-template-rows: [x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]; } +.fit-0d { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]; } +.fit-0e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]; } +.fit-0f { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px; } +.fit-0g { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]; } +.fit-0h { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]; } +.fit-0i { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]; } +.fit-0j { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px; } +.fit-0k { grid-template-rows: [y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; } +.fit-0l { grid-template-rows: [x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; } +.fit-0m { grid-template-rows: [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px; } + +.fit-1a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]; } +.fit-1b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; } +.fit-1c { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]; } +.fit-1d { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]; } +.fit-1e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px; } + +.fit-2a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; } +.fit-2b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; } +.fit-2c { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]; } +.fit-2d { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px; } + +.fit-3a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; } +.fit-3b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; } +.fit-3c { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px; } + +.fit-4a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; } +.fit-4b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; } + +.fit-5 { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; } + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid fit-0a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1e"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-3a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-3b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-3c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-4a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-4b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-5"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002.html new file mode 100644 index 0000000000..b113f47a0b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002.html @@ -0,0 +1,489 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid inside a parent with repeat(auto-fit) rows</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/"> + <link rel="match" href="parent-repeat-auto-fit-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +#report { + white-space: pre-wrap; +} + +.grid { + display: inline-grid; + height: 50px; + width: 50px; + grid-template-columns: repeat(auto-fit, 10px); + border: 1px solid; + vertical-align: top; +} + +.subgrid { + display: grid; + grid: subgrid / subgrid; + grid-column: 1 / -1; + grid-row: 3 / span 4; + grid-auto-columns: 8px; + background: grey; +} + +.fit-0a { grid-template-rows: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) } +.fit-0b { grid-template-rows: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) minmax(0, auto) } +.fit-0c { grid-template-rows: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } +.fit-0d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-0e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } +.fit-0f { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } +.fit-0g { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-0h { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-0i { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } +.fit-0j { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } +.fit-0k { grid-template-rows: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } +.fit-0l { grid-template-rows: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } +.fit-0m { grid-template-rows: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) } + +.fit-1a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] } +.fit-1b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } +.fit-1c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } +.fit-1d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } +.fit-1e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } + +.fit-2a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } +.fit-2b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) } +.fit-2c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } +.fit-2d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } + +.fit-3a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) } +.fit-3b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } +.fit-3c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) minmax(0, auto) } + +.fit-4a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] minmax(0, auto) } +.fit-4b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) minmax(0, auto) } + +.fit-5 { grid-template-rows: repeat(auto-fit, [y] 10px) minmax(0, auto) } + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid fit-0a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-1e"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-2d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-3a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-3b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-3c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-4a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-4b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div class="grid fit-5"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div> + +<div id="report"></div> + +<script> + const expectedResults = [ + "[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px", + "[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px", + "[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]", + "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]", + "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px", + "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]", + "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px", + "[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", + "[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", + "[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px", + "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]", + "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", + "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]", + "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]", + "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px", + "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", + "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", + "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px", + "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px", + "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", + "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", + "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px", + "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", + "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", + "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", + ]; + [...document.querySelectorAll('.grid')].forEach(function(grid, i) { + let actual = window.getComputedStyle(grid)['grid-template-rows']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "\nUnexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\"\n"; + report.appendChild(document.createTextNode(err)); + } + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/percentage-track-sizing.html b/testing/web-platform/tests/css/css-grid/subgrid/percentage-track-sizing.html new file mode 100644 index 0000000000..3e62f19a0a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/percentage-track-sizing.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid percentage track sizing</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: grid; + background: red; + height: 100px; + width: 100px; +} +.subgrid { + display: grid; + grid-template-columns: 100% 0%; + grid-template-rows: subgrid; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div style="background: green"></div> + </div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001-ref.html new file mode 100644 index 0000000000..c27d3334d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: : Implicit line placement with a subgrid</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement"> + <style> +html,body { + font:10px/1 monospace; + padding:0; + margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <div style="grid-column:5"></div> + <div style="grid-column:x"></div> + <div style="grid-column:5"></div> + <div style="grid-row: 4; grid-column:1"></div> + <div style="grid-column:5"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <div style="grid-column:5"></div> + <div style="grid-column:5"></div> + <div style="grid-column:5"></div> + <div style="grid-column:5"></div> + <div style="grid-column:5"></div> + <div style="grid-column:5"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <div style="grid-column:5"></div> + <div style="grid-row: 2; grid-column:1"></div> + <div style="grid-column:5"></div> + <div style="grid-row: 3; grid-column:1"></div> + <div style="grid-column:5"></div> + <div style="grid-row: 4; grid-column:1"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001.html b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001.html new file mode 100644 index 0000000000..738b83f482 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: Implicit line placement with a subgrid</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement"> + <link rel="match" href="placement-implicit-001-ref.html"> + <style> +html,body { + font:10px/1 monospace; + padding:0; + margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <div style="grid-column:5"></div> + <div style="grid-column:x"></div> + <div style="grid-column:5"></div> + <div></div> + <div style="grid-column:5"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <div style="grid-column:5"></div> + <div style="grid-column:5"></div> + <div style="grid-column:x"></div> + <div style="grid-column:5"></div> + <div style="grid-column:x"></div> + <div style="grid-column:5"></div> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <div style="grid-column:5"></div> + <div></div> + <div style="grid-column:5"></div> + <div></div> + <div style="grid-column:5"></div> + <div></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html new file mode 100644 index 0000000000..8cd0ef66b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html @@ -0,0 +1,401 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: repeat(auto-fill, line-names)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid"><div class="subgrid fill-0a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0d"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0e"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0f"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0g"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0h"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0i"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0j"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0k"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0l"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0m"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:2"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:3"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1d"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1e"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2d"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-4a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-4b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-5"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> +</div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html new file mode 100644 index 0000000000..9e57028c4c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html @@ -0,0 +1,478 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fill, line-names)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="repeat-auto-fill-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [x] [z] [z] [z] [z] */ +.fill-0c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */ +.fill-0d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [z] [z] */ +.fill-0e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [z] */ +.fill-0f { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0g { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0h { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0i { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [x] */ +.fill-0j { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0k { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) } /* [z] [z] [z] [z] [z] */ +.fill-0l { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) } /* [x] [z] [z] [z] [z] */ +.fill-0m { grid-template-columns: subgrid repeat(100, [x]) repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ + +.fill-1a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [y] [z] [z] [z] [z] */ +.fill-1b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [y] [z] [z] [z] */ +.fill-1c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [y] [z] [z] */ +.fill-1d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [y] [z] */ +.fill-1e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [y] */ + +.fill-2a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] } /* [y] [y] [z] [z] [z] */ +.fill-2b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [y] [y] [z] [z] */ +.fill-2c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [y] [y] [z] */ +.fill-2d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [y] [y] */ + +.fill-3a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */ +.fill-3b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] } /* [x] [y] [y] [y] [z] */ +.fill-3c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [y] [y] [y] */ + +.fill-4a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] } /* [y] [y] [y] [y] [z] */ +.fill-4b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) } /* [x] [y] [y] [y] [y] */ + +.fill-5 { grid-template-columns: subgrid repeat(auto-fill, [y]) } /* [y] [y] [y] [y] [y] */ + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid"><div class="subgrid fill-0a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0c"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0d"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0e"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0f"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0g"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0h"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0i"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0j"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0k"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0l"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0m"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1c"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1d"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1e"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2c"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2d"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3c"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-4a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-4b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-5"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<script> + const expectedResults = [ + "subgrid [z] [z] [z] [z] [z]", + "subgrid [x] [z] [z] [z] [z]", + "subgrid [x] [x] [z] [z] [z]", + "subgrid [x] [x] [x] [z] [z]", + "subgrid [x] [x] [x] [x] [z]", + "subgrid [x] [x] [x] [x] [x]", + "subgrid [x] [x] [x] [x] [x]", + "subgrid [x] [x] [x] [x] [x]", + "subgrid [x] [x] [x] [x] [x]", + "subgrid [x] [x] [x] [x] [x]", + "subgrid [z] [z] [z] [z] [z]", + "subgrid [x] [z] [z] [z] [z]", + "subgrid [x] [x] [x] [x] [x]", + "subgrid [y] [z] [z] [z] [z]", + "subgrid [x] [y] [z] [z] [z]", + "subgrid [x] [x] [y] [z] [z]", + "subgrid [x] [x] [x] [y] [z]", + "subgrid [x] [x] [x] [x] [y]", + "subgrid [y] [y] [z] [z] [z]", + "subgrid [x] [y] [y] [z] [z]", + "subgrid [x] [x] [y] [y] [z]", + "subgrid [x] [x] [x] [y] [y]", + "subgrid [y] [y] [y] [z] [z]", + "subgrid [x] [y] [y] [y] [z]", + "subgrid [x] [x] [y] [y] [y]", + "subgrid [y] [y] [y] [y] [z]", + "subgrid [x] [y] [y] [y] [y]", + "subgrid [y] [y] [y] [y] [y]", + ]; + [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { + let actual = window.getComputedStyle(subgrid)['grid-template-columns']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; + document.body.appendChild(document.createTextNode(err)); + } + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html new file mode 100644 index 0000000000..80980f14e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html @@ -0,0 +1,439 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fill, line-names) in parent subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="repeat-auto-fill-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} +.grid > .subgrid { grid-template-rows: auto; } +.grid > .subgrid > .subgrid { grid-column: 1 / span 4; } + +.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [x] [z] [z] [z] [z] */ +.fill-0c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */ +.fill-0d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [z] [z] */ +.fill-0e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [z] */ +.fill-0f { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0g { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0h { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0i { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [x] */ +.fill-0j { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0k { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) } /* [z] [z] [z] [z] [z] */ +.fill-0l { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) } /* [x] [z] [z] [z] [z] */ +.fill-0m { grid-template-columns: subgrid repeat(100, [x]) repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ + +.fill-1a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [y] [z] [z] [z] [z] */ +.fill-1b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [y] [z] [z] [z] */ +.fill-1c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [y] [z] [z] */ +.fill-1d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [y] [z] */ +.fill-1e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [y] */ + +.fill-2a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] } /* [y] [y] [z] [z] [z] */ +.fill-2b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [y] [y] [z] [z] */ +.fill-2c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [y] [y] [z] */ +.fill-2d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [y] [y] */ + +.fill-3a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */ +.fill-3b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] } /* [x] [y] [y] [y] [z] */ +.fill-3c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [y] [y] [y] */ + +.fill-4a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] } /* [y] [y] [y] [y] [z] */ +.fill-4b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) } /* [x] [y] [y] [y] [y] */ + +.fill-5 { grid-template-columns: subgrid repeat(auto-fill, [y]) } /* [y] [y] [y] [y] [y] */ + +.subgrid > .subgrid > :nth-child(2n) { background: black; } +.subgrid > .subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid"><div class="subgrid fill-0a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0f"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0g"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0h"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0i"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0j"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0k"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0l"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0m"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-4a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-4b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-5"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html new file mode 100644 index 0000000000..df14ed8350 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html @@ -0,0 +1,446 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fill, line-names) in orthogonal parent subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="repeat-auto-fill-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px monospace; padding:0; margin:0; line-height:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; + vertical-align: top; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + background: grey; +} +.grid > .subgrid > .subgrid { + writing-mode: vertical-lr; + grid-template-rows: subgrid; + grid-template-columns: initial; + grid-column: 1 / span 4; + grid-auto-columns: 8px; + grid-auto-flow: column; +} + +.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [x] [z] [z] [z] [z] */ +.fill-0c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */ +.fill-0d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [z] [z] */ +.fill-0e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [z] */ +.fill-0f { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0g { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0h { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0i { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [x] */ +.fill-0j { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0k { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) } /* [z] [z] [z] [z] [z] */ +.fill-0l { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) } /* [x] [z] [z] [z] [z] */ +.fill-0m { grid-template-columns: subgrid repeat(100, [x]) repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ + +.fill-1a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [y] [z] [z] [z] [z] */ +.fill-1b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [y] [z] [z] [z] */ +.fill-1c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [y] [z] [z] */ +.fill-1d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [y] [z] */ +.fill-1e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [y] */ + +.fill-2a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] } /* [y] [y] [z] [z] [z] */ +.fill-2b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [y] [y] [z] [z] */ +.fill-2c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [y] [y] [z] */ +.fill-2d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [y] [y] */ + +.fill-3a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */ +.fill-3b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] } /* [x] [y] [y] [y] [z] */ +.fill-3c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [y] [y] [y] */ + +.fill-4a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] } /* [y] [y] [y] [y] [z] */ +.fill-4b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) } /* [x] [y] [y] [y] [y] */ + +.fill-5 { grid-template-columns: subgrid repeat(auto-fill, [y]) } /* [y] [y] [y] [y] [y] */ + +.subgrid > .subgrid > :nth-child(2n) { background: black; } +.subgrid > .subgrid > :nth-child(2n+1) { background: pink; } +.subgrid > .subgrid > * { writing-mode: horizontal-tb; } + + </style> +</head> +<body> + +<div class="grid"><div class="subgrid fill-0a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0e"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0f"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0g"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0h"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0i"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0j"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0k"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0l"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0m"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2d"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3c"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-4a"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-4b"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-5"><div class="subgrid"> + <div style="grid-row:y 5"></div> + <div style="grid-row:y 4"></div> + <div style="grid-row:y 3"></div> + <div style="grid-row:y 2"></div> + <div style="grid-row:y 1"></div> + <div style="grid-row:y -1"></div> + <div style="grid-row:y -2"></div> + <div style="grid-row:y -3"></div> + <div style="grid-row:y -4"></div> + <div style="grid-row:y -5"></div> +</div></div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html new file mode 100644 index 0000000000..ca2729fa3f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html @@ -0,0 +1,401 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: repeat(auto-fill, line-names) in RTL/LTR subgrids</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid"><div class="subgrid fill-0a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0d"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0e"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0f"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0g"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0h"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0i"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0j"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0k"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0l"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0m"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:3"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1d"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:2"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-1e"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-2d"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-3c"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-4a"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-4b"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:1"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-5"> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> + <div style="grid-column:4"></div> + <div style="grid-column:4"></div> + <div style="grid-column:3"></div> + <div style="grid-column:2"></div> + <div style="grid-column:1"></div> +</div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html new file mode 100644 index 0000000000..9dd8f33eb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html @@ -0,0 +1,439 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fill, line-names) in RTL/LTR subgrids</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="repeat-auto-fill-004-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} +.grid > .subgrid { grid-template-rows: auto; direction:rtl; } +.grid > .subgrid > .subgrid { grid-column: 1 / span 4; direction:ltr; } + +.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [x] [z] [z] [z] [z] */ +.fill-0c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */ +.fill-0d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [z] [z] */ +.fill-0e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [z] */ +.fill-0f { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0g { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0h { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [x] [x] [x] */ +.fill-0i { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [x] [x] */ +.fill-0j { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ +.fill-0k { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) } /* [z] [z] [z] [z] [z] */ +.fill-0l { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) } /* [x] [z] [z] [z] [z] */ +.fill-0m { grid-template-columns: subgrid repeat(100, [x]) repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [x] */ + +.fill-1a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [y] [z] [z] [z] [z] */ +.fill-1b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [y] [z] [z] [z] */ +.fill-1c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [y] [z] [z] */ +.fill-1d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [y] [z] */ +.fill-1e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [y] */ + +.fill-2a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] } /* [y] [y] [z] [z] [z] */ +.fill-2b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [y] [y] [z] [z] */ +.fill-2c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [y] [y] [z] */ +.fill-2d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [y] [y] */ + +.fill-3a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */ +.fill-3b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] } /* [x] [y] [y] [y] [z] */ +.fill-3c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [y] [y] [y] */ + +.fill-4a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] } /* [y] [y] [y] [y] [z] */ +.fill-4b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) } /* [x] [y] [y] [y] [y] */ + +.fill-5 { grid-template-columns: subgrid repeat(auto-fill, [y]) } /* [y] [y] [y] [y] [y] */ + +.subgrid > .subgrid > :nth-child(2n) { background: black; } +.subgrid > .subgrid > :nth-child(2n+1) { background: pink; } + + </style> +</head> +<body> + +<div class="grid"><div class="subgrid fill-0a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0f"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0g"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0h"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0i"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0j"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0k"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0l"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-0m"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-2d"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-3c"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-4a"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-4b"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +<div class="grid"><div class="subgrid fill-5"><div class="subgrid"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html new file mode 100644 index 0000000000..95976e8216 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html @@ -0,0 +1,165 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: repeat(auto-fill / INTEGER, line-names)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 20px; + background: lightgrey; +} + +.subgrid { + display: grid; + grid: auto / subgrid; + grid-column: 2 / span 4; + background: black; +} + +item { + min-width: 0; + min-height: 10px; + background: grey; +} + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:2 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:2 / 4"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:3 / 4"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 4"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:2 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:2 / 3"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-column:1 / 2"></item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html new file mode 100644 index 0000000000..0cf16d47a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html @@ -0,0 +1,167 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fill / INTEGER, line-names)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="repeat-auto-fill-005-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 20px; + background: lightgrey; +} + +.subgrid { + display: grid; + grid-column: 2 / span 4; + background: black; +} + +item { + min-width: 0; + min-height: 10px; + grid-column:x -2 / x -1; + background: grey; +} + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(auto-fill,[]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-columns:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]"> + <item></item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html new file mode 100644 index 0000000000..8d4213c6d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html @@ -0,0 +1,204 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fill / INTEGER, line-names)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="repeat-auto-fill-005-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 20px; + background: lightgrey; +} + +.subgrid { + display: grid; + grid-column: 2 / span 4; + background: black; + writing-mode: vertical-lr; +} + +item { + min-width: 0; + min-height: 10px; + grid-row:x -2 / x -1; + background: grey; + writing-mode: horizontal-tb; +} + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]"> + <item></item> + </div> +</div> + +<script> + const expectedResults = [ + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] []", + "subgrid [x] [x] [] [] [x]", + "subgrid [x] [x] [] [x] []", + "subgrid [x] [x] [x] [x] []", + "subgrid [] [] [] [] []", + "subgrid [] [] [] [x] []", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] []", + "subgrid [] [] [] [] []", + "subgrid [] [] [] [] [x]", + "subgrid [x] [x] [] [] [x]", + "subgrid [x] [x] [x] [] []", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] [x]", + "subgrid [] [] [] [] []", + ]; + [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { + let actual = window.getComputedStyle(subgrid)['grid-template-rows']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; + document.body.appendChild(document.createTextNode(err)); + } + }); +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html new file mode 100644 index 0000000000..9bc2eeff1c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: repeat(auto-fill / INTEGER, line-names)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 20px; + background: lightgrey; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + grid-column: 2 / span 4; + background: black; + writing-mode: vertical-rl; +} + +item { + min-width: 0; + min-height: 10px; + background: grey; + writing-mode: horizontal-tb; +} + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:2 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:2 / 4"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:3 / 4"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 4"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 2"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:2 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:2 / 3"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 5"></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid"> + <item style="grid-row:1 / 2"></item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html new file mode 100644 index 0000000000..949d8296fe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html @@ -0,0 +1,169 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fill / INTEGER, line-names)</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> + <link rel="match" href="repeat-auto-fill-007-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 20px; + background: lightgrey; +} + +.subgrid { + display: grid; + grid-column: 2 / span 4; + background: black; + writing-mode: vertical-rl; +} + +item { + min-width: 0; + min-height: 10px; + grid-row:x -2 / x -1; + background: grey; + writing-mode: horizontal-tb; +} + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]"> + <item></item> + </div> +</div> + +<div class="grid"> + <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]"> + <item></item> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008-ref.html new file mode 100644 index 0000000000..4cbb1540de --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008-ref.html @@ -0,0 +1,322 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.fill-0a { grid-template-columns: subgrid [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0b { grid-template-columns: subgrid [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0c { grid-template-columns: subgrid [x] [y] [y] [y] [z] } /* [x] [y] [y] [y] [z] */ +.fill-0d { grid-template-columns: subgrid [x] [z] [z] [z] [z] } /* [x] [z] [z] [z] [z] */ +.fill-0e { grid-template-columns: subgrid [x] [x] [x] [x] [z] } /* [x] [x] [x] [x] [z] */ +.fill-0f { grid-template-columns: subgrid [x] [x] [z] [z] [z] } /* [x] [x] [z] [z] [z] */ +.fill-0g { grid-template-columns: subgrid [x] [y] [z] [z] } /* [x] [y] [z] [z] [] */ +.fill-0h { grid-template-columns: subgrid [x] [y] [x] [y] [z] } /* [x] [y] [x] [y] [z] */ +.fill-0i { grid-template-columns: subgrid [x] [y] [x] [y] } /* [x] [y] [x] [y] [] */ +.fill-0j { grid-template-columns: subgrid [y] [y] [y] [z] [z] } /* [y] [y] [y] [z] [z] */ +.fill-0k { grid-template-columns: subgrid [x] [y] [z] [z] } /* [x] [y] [z] [z] [] */ +.fill-0l { grid-template-columns: subgrid [z] [x] [y] [z] } /* [z] [x] [y] [z] [] */ +.fill-0m { grid-template-columns: subgrid [z] [x] [y] [x] [y] } /* [z] [x] [y] [x] [y] */ +.fill-0n { grid-template-columns: subgrid [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0o { grid-template-columns: subgrid [z] [x] [y] [z] } /* [z] [x] [y] [z] [] */ +.fill-0p { grid-template-columns: subgrid [z] [x] [y] [z] [x] } /* [z] [x] [y] [z] [x] */ +.fill-0q { grid-template-columns: subgrid [x] [y] [z] [x] } /* [x] [y] [z] [x] [] */ +.fill-0r { grid-template-columns: subgrid [x] [y] [z] [y] [z] } /* [x] [y] [z] [y] [z] */ + +.fill-0s { + grid-column: 2 / span 5; + grid-template-columns: subgrid [w] [y] [z] [y] [z] [x]; /* [w] [y] [z] [y] [z] [x] */ +} + +.fill-0t { + grid-column: 1 / span 6; + grid-template-columns: subgrid [w] [y] [z] [y] [z] [x]; /* [w] [y] [z] [y] [z] [x] [] */ +} + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> + </head> +<body> + +<div class="grid"><div class="subgrid fill-0a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0c"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0d"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0e"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0f"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0g"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0h"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0i"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0j"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0k"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0l"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0m"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0n"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0o"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0p"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0q"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0r"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0s"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0t"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html new file mode 100644 index 0000000000..28238178f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html @@ -0,0 +1,358 @@ +<!DOCTYPE HTML> +<html> + <link rel="author" title="Mozilla" href="https://mozilla.org"> + <link rel="match" href="repeat-auto-fill-008-ref.html"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list"> + <head> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.grid { + display: inline-grid; + grid-auto-columns: 15px; + border: 1px solid; +} + +.subgrid { + display: grid; + grid-column: 3 / span 4; + grid-auto-rows: 8px; + background: grey; +} + +.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y] [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ +.fill-0b { grid-template-columns: subgrid [z] repeat(auto-fill, [z] [z] [z]) [z] } /* [z] [z] [z] [z] [z] */ +.fill-0c { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [y] [y]) [z] } /* [x] [y] [y] [y] [z] */ +.fill-0d { grid-template-columns: subgrid [x] repeat(auto-fill, [z] [z]) } /* [x] [z] [z] [z] [z] */ +.fill-0e { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] } /* [x] [x] [x] [x] [z] */ +.fill-0f { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */ +.fill-0g { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */ +.fill-0h { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] } /* [x] [y] [x] [y] [z] */ +.fill-0i { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) } /* [x] [y] [x] [y] [] */ +.fill-0j { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */ +.fill-0k { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */ +.fill-0l { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) [z] } /* [z] [x] [y] [z] [] */ +.fill-0m { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) } /* [z] [x] [y] [x] [y] */ +.fill-0n { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) repeat(100, [z])} /* [z] [z] [z] [z] [z] */ +.fill-0o { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) } /* [z] [x] [y] [z] [] */ +.fill-0p { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) [x] } /* [z] [x] [y] [z] [x] */ +.fill-0q { grid-template-columns: subgrid repeat(auto-fill, [x] [y] [z]) [x] } /* [x] [y] [z] [x] [] */ +.fill-0r { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [z]) } /* [x] [y] [z] [y] [z] */ + +/* With span of 5... */ +.fill-0s { + grid-column: 2 / span 5; + grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] */ +} + +/* With span of 6, same as fill-0s but with room for a partial additional repetition */ +.fill-0t { + grid-column: 1 / span 6; + grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] [] */ +} + +.subgrid > :nth-child(2n) { background: black; } +.subgrid > :nth-child(2n+1) { background: pink; } + + </style> + </head> +<body> + +<div class="grid"><div class="subgrid fill-0a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0c"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0d"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0e"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0f"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0g"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0h"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0i"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0j"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0k"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0l"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0m"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0n"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0o"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0p"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0q"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0r"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0s"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="grid"><div class="subgrid fill-0t"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<script> + const expectedResults = [ + "subgrid [z] [z] [z] [z] [z]", + "subgrid [z] [z] [z] [z] [z]", + "subgrid [x] [y] [y] [y] [z]", + "subgrid [x] [z] [z] [z] [z]", + "subgrid [x] [x] [x] [x] [z]", + "subgrid [x] [x] [z] [z] [z]", + "subgrid [x] [y] [z] [z] []", + "subgrid [x] [y] [x] [y] [z]", + "subgrid [x] [y] [x] [y] []", + "subgrid [y] [y] [y] [z] [z]", + "subgrid [x] [y] [z] [z] []", + "subgrid [z] [x] [y] [z] []", + "subgrid [z] [x] [y] [x] [y]", + "subgrid [z] [z] [z] [z] [z]", + "subgrid [z] [x] [y] [z] []", + "subgrid [z] [x] [y] [z] [x]", + "subgrid [x] [y] [z] [x] []", + "subgrid [x] [y] [z] [y] [z]", + "subgrid [w] [y] [z] [y] [z] [x]", + "subgrid [w] [y] [z] [y] [z] [x] []", + ]; + [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { + let actual = window.getComputedStyle(subgrid)['grid-template-columns']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; + document.body.appendChild(document.createTextNode(err)); + document.body.appendChild(document.createElement("br")); + } + }); +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-009.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-009.html new file mode 100644 index 0000000000..086a4769d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-009.html @@ -0,0 +1,121 @@ +<!DOCTYPE HTML> +<html> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list"> + <head> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +.wrapper { + display: inline-block; + width: 110px; + border: 1px solid; +} + +.grid { + display: grid; + grid-auto-rows: 8px; + background: grey; +} + +.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] } +.fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] } +.fill-0c { grid-template-columns: subgrid [x] [y] repeat(auto-fill, [z]) } +.fill-0d { grid-template-columns: subgrid repeat(auto-fill, [x]) } +.fill-0e { grid-template-columns: subgrid [x] } + +.grid > :nth-child(2n) { background: black; } +.grid > :nth-child(2n+1) { background: pink; } + + </style> + </head> +<body> + +<div class="wrapper"><div class="grid fill-0a"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="wrapper"><div class="grid fill-0b"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="wrapper"><div class="grid fill-0c"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="wrapper"><div class="grid fill-0d"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<div class="wrapper"><div class="grid fill-0e"> + <div style="grid-column:y 5"></div> + <div style="grid-column:y 4"></div> + <div style="grid-column:y 3"></div> + <div style="grid-column:y 2"></div> + <div style="grid-column:y 1"></div> + <div style="grid-column:y -1"></div> + <div style="grid-column:y -2"></div> + <div style="grid-column:y -3"></div> + <div style="grid-column:y -4"></div> + <div style="grid-column:y -5"></div> +</div></div> + +<script> + const expectedResults = [ + "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", + "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", + "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", + "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", + "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", + ]; + [...document.querySelectorAll('.grid')].forEach(function(grid, i) { + let actual = window.getComputedStyle(grid)['grid-template-columns']; + let expected = expectedResults[i]; + if (actual != expected) { + let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" + + " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; + document.body.appendChild(document.createTextNode(err)); + document.body.appendChild(document.createElement("br")); + } + }); +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-001.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-001.html new file mode 100644 index 0000000000..aaa71ddbef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid specified size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: grid; + grid-template-rows: 100px; +} +.subgrid { + display: grid; + background: red; + width: min-content; + grid-template-rows: subgrid; +} +.item { + background: green; + width: 100px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="item"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-002.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-002.html new file mode 100644 index 0000000000..0e02aa1b14 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid specified size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: grid; + grid-template-rows: 100px; +} +.subgrid { + display: grid; + width: min-content; + grid-template: subgrid / 20% 30%; +} +.w100 { width: 100px } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div style="background: green"><div class="w100"></div></div> + <div style="background: green"><div class="w100"></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-003.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-003.html new file mode 100644 index 0000000000..5c06ee62e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + background: green; + display: inline-grid; + grid-template-rows: 100px; +} +.subgrid { + width: 100px; + display: grid; + grid-template-rows: subgrid; +} +.w200 { width: 200px } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="w200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-004.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-004.html new file mode 100644 index 0000000000..d69412d625 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: inline-grid; + grid-template: 100px / minmax(auto, 100px); +} +.subgrid { + width: 100%; + display: grid; + background: green; + grid-template-rows: subgrid; +} +.w200 { width: 200px } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="w200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-005.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-005.html new file mode 100644 index 0000000000..586d26bf2f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: grid; + background: red; + width: max-content; + grid-template-columns: minmax(min-content, max-content); +} +.subgrid { + display: grid; + background: green; + width: min-content; + grid-template-rows: subgrid; +} +.w100 { + display: inline-block; + height: 50px; + width: 100px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div style="font-size: 0"> + <div class="w100"></div> + <div class="w100"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-006.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-006.html new file mode 100644 index 0000000000..056f0a4028 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-006.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: grid; + background: red; + width: min-content; +} +.subgrid { + display: grid; + background: green; + max-width: 100px; + width: max-content; + grid-template-rows: subgrid; +} +.w100 { + display: inline-block; + height: 50px; + width: 100px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div style="font-size: 0"> + <div class="w100"></div> + <div class="w100"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-007.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-007.html new file mode 100644 index 0000000000..464200614c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-007.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + background: red; + display: inline-grid; +} +.subgrid { + display: grid; + grid-row: span 2; + background: green; + min-width: min-content; + grid-auto-flow: column; + grid-template-rows: subgrid; +} +.w100 { + height: 50px; + width: 100px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="w100"></div> + <div class="w100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-008.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-008.html new file mode 100644 index 0000000000..6ee4e77405 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + background: green; + display: inline-grid; + grid-template-columns: 100px; +} +.subgrid { + height: 100px; + display: grid; + grid-template-columns: subgrid; +} +.h200 { height: 200px } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="h200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-009.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-009.html new file mode 100644 index 0000000000..bbf585efd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-009.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid contribution size on standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: inline-grid; + grid-template: minmax(auto, 100px) / 100px; +} +.subgrid { + height: 100%; + display: grid; + background: green; + grid-template-columns: subgrid; +} +.h200 { height: 200px } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="h200"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001-ref.html new file mode 100644 index 0000000000..dd4b0dccf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: baseline-aligned subgrid item with padding</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; + place-content: start; + place-items: baseline start; + border: 1px solid; + text-decoration: underline blue; +} + +.subgrid { + background: lightgrey; + grid-column: 2 / span 4; + grid-row: 3 / span 2; + min-width: 10px; + min-height: 0; + background: yellow; + padding-top: 20px; +} + +x, z { + display: block; + min-width: 20px; + min-height: 10px; + font-size: 8em; + background: silver; +} +z { + width: 20px; + height: 10px; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:3/1">A </y> +<div class="subgrid"> + <z></z><x> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001.html new file mode 100644 index 0000000000..95469c0018 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: baseline-aligned subgrid item with padding</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="subgrid-baseline-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; + place-content: start; + place-items: baseline start; + border: 1px solid; + text-decoration: underline blue; +} + +.subgrid { + display: grid; + grid: subgrid / auto; + background: lightgrey; + grid-column: 2 / span 4; + grid-row: 3 / span 2; + min-width: 10px; + min-height: 0; + background: yellow; + place-content: inherit; + place-items: inherit; + padding-top: 20px; +} + +x { + min-width: 20px; + min-height: 10px; + font-size: 8em; + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:4/1">A </y> +<div class="subgrid"> + <x style="grid-row:2"> A</x><x></x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002-ref.html new file mode 100644 index 0000000000..3008d31e03 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: baseline-aligned subgrid item with orthogonal writing-mode</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; + place-content: start; + place-items: baseline start; + border: 1px solid; + text-decoration: underline blue; +} + +.subgrid { + background: lightgrey; + grid-column: 2 / span 4; + grid-row: 3 / span 2; + min-width: 10px; + min-height: 0; + background: yellow; +} + +x, z { + display: block; + min-width: 20px; + min-height: 10px; + font-size: 8em; + background: silver; +} +z { + width: 20px; + height: 10px; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:3/1">A </y> +<div class="subgrid"> + <z></z><x style="margin-left: 20px"> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002.html new file mode 100644 index 0000000000..12a17d7cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: baseline-aligned subgrid item with orthogonal writing-mode</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="subgrid-baseline-002-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px; + place-content: start; + place-items: baseline start; + border: 1px solid; + text-decoration: underline blue; +} + +.subgrid { + display: grid; + grid: auto / subgrid; + background: lightgrey; + grid-column: 2 / span 4; + grid-row: 3 / span 2; + min-width: 10px; + min-height: 0; + background: yellow; + place-content: inherit; + place-items: start baseline; + writing-mode: vertical-rl; +} + +x { + min-width: 20px; + min-height: 10px; + font-size: 8em; + background: silver; + writing-mode: horizontal-tb; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:4/1">A </y> +<div class="subgrid"> + <x style="grid-column:2"> A</x><x></x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003-ref.html new file mode 100644 index 0000000000..d6da254d88 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: baseline-aligned subgrid item</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: auto auto; + max-width: 100px; + place-items: baseline start; +} + +.first { + font-size: 3em; +} + +.second { + font-size: 2em; +} + </style> +</head> +<body> +<div class="grid"> + <div class="first">A</div> + <div class="second">A</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003.html new file mode 100644 index 0000000000..da8e550fb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: baseline-aligned subgrid item</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="subgrid-baseline-003-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + max-width: 100px; + place-items: baseline start; +} + +.subgrid { + display: grid; + grid-template-rows: subgrid; + grid-row: 1 / 3; + grid-column: 2; + + padding-bottom: 20px; + place-items: inherit; +} + +.first { + font-size: 3em; + grid-row: 2; +} + +.second { + font-size: 2em; + grid-row: 2; +} + </style> +</head> +<body> +<div class="grid"> + <div class="first">A</div> + <div class="subgrid"> + <div class="second">A</div> + </div> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004-ref.html new file mode 100644 index 0000000000..4240df1659 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: baseline-aligned subgrid item</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 50px 50px; + place-items: baseline start; +} + +.first { + font-size: 3em; +} + +.second { + font-size: 2em; +} + </style> +</head> +<body> +<div class="grid"> + <div class="first">A</div> + <div class="second">A</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004.html new file mode 100644 index 0000000000..c2bcaccc33 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Test: baseline-aligned subgrid item</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="subgrid-baseline-004-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: auto auto; + place-items: baseline start; +} + +.subgrid { + display: grid; + grid-template-columns: subgrid; + grid-row: 1 / 3; + grid-column: 2; + + padding-bottom: 20px; + writing-mode: vertical-lr; + place-items: start baseline; +} + +.first { + font-size: 3em; + grid-row: 2; +} + +.second { + font-size: 2em; + grid-column: 2; + writing-mode: horizontal-tb; +} + </style> +</head> +<body> +<div class="grid"> + <div class="first">A</div> + <div class="subgrid"> + <div class="second">A</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-005.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-005.html new file mode 100644 index 0000000000..455439f798 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-005.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 3px; + margin-block-end: 5px; +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;"> + <div style="display: grid; + gap: 10px; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid; + margin-block-start: 5px; margin-block-end: 10px; + border: solid black 5px; + padding-block-start: 10px; padding-block-end: 20px;"> + <div style="display: grid; + gap: 20px; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid; + margin-block-start: 3px; margin-block-end: 7px; + border: solid black 5px; + padding-block-start: 5px; padding-block-end: 10px;"> + <div data-offset-y="36" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="85" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-y="163" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="218" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="308" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="360" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="41" class="item small first"></div> + <div data-offset-y="110" class="item small last"></div> + <div data-offset-y="168" class="item small first"></div> + <div data-offset-y="243" class="item small last"></div> + <div data-offset-y="313" class="item small first"></div> + <div data-offset-y="385" class="item small last"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-006.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-006.html new file mode 100644 index 0000000000..23d2b3b606 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-006.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 3px; + margin-block-end: 5px; +} +.small { + width: 30px; + height: 30px; + border: solid 5px cyan; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;"> + <div style="display: grid; + gap: 10px; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid; + margin-block-start: 5px; margin-block-end: 10px; + border: solid black 5px; + padding-block-start: 10px; padding-block-end: 20px;"> + <div style="display: grid; + gap: 20px; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid; + margin-block-start: 3px; margin-block-end: 7px; + border: solid black 5px; + padding-block-start: 5px; padding-block-end: 10px;"> + <div data-offset-x="514" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="465" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-x="387" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="332" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="242" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="190" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="534" class="item small first"></div> + <div data-offset-x="465" class="item small last"></div> + <div data-offset-x="407" class="item small first"></div> + <div data-offset-x="332" class="item small last"></div> + <div data-offset-x="262" class="item small first"></div> + <div data-offset-x="190" class="item small last"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-007.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-007.html new file mode 100644 index 0000000000..f8477bea50 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-007.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 3px; + margin-block-end: 5px; +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +.item.small.first { + block-size: 50px; +} +.item.small.last { + block-size: 100px; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;"> + <div style="display: grid; + gap: 10px; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid; + margin-block-start: 5px; margin-block-end: 10px; + border: solid black 5px; + padding-block-start: 10px; padding-block-end: 20px;"> + <div style="display: grid; + gap: 20px; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid; + margin-block-start: 3px; margin-block-end: 7px; + border: solid black 5px; + padding-block-start: 5px; padding-block-end: 10px;"> + <div data-offset-y="36" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="58" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-y="151" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="181" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="291" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="321" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="11" class="item small first"></div> + <div data-offset-y="3" class="item small last"></div> + <div data-offset-y="126" class="item small first"></div> + <div data-offset-y="126" class="item small last"></div> + <div data-offset-y="266" class="item small first"></div> + <div data-offset-y="266" class="item small last"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-008.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-008.html new file mode 100644 index 0000000000..1ef23599f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-008.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 3px; + margin-block-end: 5px; +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +.item.small.first { + block-size: 50px; +} +.item.small.last { + block-size: 100px; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;"> + <div style="display: grid; + gap: 10px; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid; + margin-block-start: 5px; margin-block-end: 10px; + border: solid black 5px; + padding-block-start: 10px; padding-block-end: 20px;"> + <div style="display: grid; + gap: 20px; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid; + margin-block-start: 3px; margin-block-end: 7px; + border: solid black 5px; + padding-block-start: 5px; padding-block-end: 10px;"> + <div data-offset-x="514" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="428" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-x="325" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="234" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="131" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="40" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="524" class="item small first"></div> + <div data-offset-x="393" class="item small last"></div> + <div data-offset-x="335" class="item small first"></div> + <div data-offset-x="199" class="item small last"></div> + <div data-offset-x="141" class="item small first"></div> + <div data-offset-x="5" class="item small last"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-009.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-009.html new file mode 100644 index 0000000000..b7bf46d874 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-009.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + writing-mode: vertical-rl; + block-size: 80px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 10px; + margin-block-end: 15px; +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; +} +.first { + justify-self: baseline; +} +.last { + justify-self: last baseline; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="width: 600px; position: relative; display: grid; grid-auto-flow: column; grid-template: 100px 100px 100px 100px / auto auto auto;"> + <div style="display: grid; + grid-auto-flow: column; + gap: 10px; + grid-column: 1 / span 3; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid; + margin-inline-start: 5px; margin-inline-end: 10px; + border: solid black 5px; + padding-inline-start: 10px; padding-inline-end: 20px;"> + <div style="display: grid; + direction: rtl; + grid-auto-flow: column; + gap: 20px; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid; + margin-inline-start: 3px; margin-inline-end: 7px; + border: solid black 5px; + padding-inline-start: 5px; padding-inline-end: 10px;"> + <div data-offset-x="292" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="237" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-x="112" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="57" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="475" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="420" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="177" class="item small first"></div> + <div data-offset-x="102" class="item small last"></div> + <div data-offset-x="357" class="item small first"></div> + <div data-offset-x="282" class="item small last"></div> + <div data-offset-x="540" class="item small first"></div> + <div data-offset-x="465" class="item small last"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-010.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-010.html new file mode 100644 index 0000000000..fde522c57a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-010.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid with baseline-aligned standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +body { + margin: 0; + padding: 0; + font: 15px/1 Ahem; +} +div { + align-items: baseline; + display: inline-grid; + grid-template: 30px / 60px; +} +.subgrid { grid-template: subgrid / repeat(2, 30px) } +.item { grid-template: auto / subgrid } +.item:nth-child(2) { font-size: 30px } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> +<div> + <div class="subgrid"> + <div class="item" data-offset-y="12" data-expected-height="15">X</div> + <div class="item" data-offset-y="0" data-expected-height="30">X</div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-011.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-011.html new file mode 100644 index 0000000000..098145cd04 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-011.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid with baseline-aligned standalone axis</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +body { + margin: 0; + padding: 0; + font: 15px/1 Ahem; +} +div { + align-items: baseline; + display: inline-grid; + grid-template-columns: repeat(2, auto); +} +div > div { grid-template-columns: subgrid } +.subgrid { grid-column: 1 / -1 } +.item:nth-child(2) { font-size: 30px } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> +<div> + <div class="subgrid"> + <div class="item" data-offset-y="12" data-expected-height="15">X</div> + <div class="item" data-offset-y="0" data-expected-height="30">X</div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-012.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-012.html new file mode 100644 index 0000000000..e6348411f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-012.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Test: Baseline-aligned subgridded item</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + display: inline-grid; + background: red; +} +.subgrid { + display: grid; + grid-template-rows: subgrid; + writing-mode: vertical-rl; +} +.item { + align-self: baseline; + background: green; + height: 100px; + width: 100px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="subgrid"> + <div class="item"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001-ref.html new file mode 100644 index 0000000000..d264a3455a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: subgrid item auto block-size</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + +body { width:600px; } + +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-flow:dense; + column-gap: 40px; + row-gap: 0px; +} + +.card { + background-color: #fff; + grid-row: auto / span 3; + grid-template-rows: repeat(3, auto); + grid-template-columns: auto; + display: grid; + row-gap: 40px; +} + + +.card .inner, .card footer { + padding: 10px; +} + +.card .inner { background: grey; } + +.card h2 { + margin: 0; + color: #fff; + background-color: rgb(3,99,143); + border-bottom: 4px solid rgb(24,154,153); +} + +.card footer { + background-color: rgb(182,222,211); +} + +* { box-sizing: border-box; } + +item { + border: 1px solid; + visibility: visible; +} + +.hidden { visibility: hidden; } +</style> +<body> + +<div class="grid"> + + <div class="card"> + <h2><span class="hidden">My title</span></h2> + <div class="inner"> + <p>The contents.<span class="hidden"> I have a lot of content, more content than the other ones.</span></p> + </div> + <footer>Footer contents</footer> + </div> + + <div class="card hidden"> + <h2 style="grid-area:1/1"><span>My title</span></h2> + <div class="inner" style="grid-area:2/1"> + <p>The contents. I have a lot of content, more content than the other ones.</p> + </div> + <footer style="grid-area:3/1">Footer contents</footer> + + <item style="grid-area:1/1">1</item> + <item style="grid-area:2/1">2</item> + <item style="grid-area:3/1">3</item> + + </div> + + <div class="card"> + <h2>My title</h2> + <div class="inner"> + <p>The contents. I have a lot of content, more content than the other ones.</p> + </div> + <footer><span class="hidden">Footer contents</span></footer> + </div> + +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001.html new file mode 100644 index 0000000000..29e8219783 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001.html @@ -0,0 +1,88 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: subgrid item auto block-size</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="subgrid-item-block-size-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + + +body { width:600px; } + +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-flow:dense; + gap: 40px; +} + +.card { + background-color: #fff; + grid-row: auto / span 3; + grid-template-rows: subgrid; + grid-template-columns: auto; + display: grid; +} + + +.card .inner, .card footer { + padding: 10px; +} + +.card .inner { background: grey; } + +.card h2 { + margin: 0; + color: #fff; + background-color: rgb(3,99,143); + border-bottom: 4px solid rgb(24,154,153); +} + +.card footer { + background-color: rgb(182,222,211); +} + +* { box-sizing: border-box; } + +item { + border: 1px solid; + grid-column: 2; +} + +</style> +<body> + +<div class="grid"> + + <div class="card"> + <h2></h2> + <div class="inner"> + <p>The contents.</p> + </div> + <footer>Footer contents</footer> + </div> + + <item>1</item> + <item>2</item> + <item>3</item> + + <div class="card"> + <h2>My title</h2> + <div class="inner"> + <p>The contents. I have a lot of content, more content than the other ones.</p> + </div> + <footer></footer> + </div> + +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-001.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-001.html new file mode 100644 index 0000000000..f43c6f785d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid with no grid items accommodates border and padding</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-edge-placeholders"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.wrapper { + width: 100px; + height: 100px; + background: red; +} +.grid { + display: inline-grid; + grid: repeat(3, auto) / repeat(5, auto); + background: red; +} +.subgrid { + display: grid; + grid-row: 1 / -1; + grid-column: 1 / -1; + grid-template: subgrid / subgrid; + background: green; + padding: 11px 7px 20px 13px; + border-width: 14px 18px 5px 12px; + border-style: solid; + border-color: green; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="wrapper"> + <div class="grid"> + <div class="subgrid"> + <div class="subgrid"></div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-002.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-002.html new file mode 100644 index 0000000000..aa905954b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Grid Test: Subgrid with no grid items accommodates gutter size and padding</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-edge-placeholders"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.wrapper { + width: 100px; + height: 100px; + background: red; +} +.grid { + display: inline-grid; + grid: repeat(2, auto) / repeat(4, auto); + background: red; +} +.subgrid { + display: grid; + grid-template: subgrid / subgrid; + background: green; + padding: 11px 3px 9px 7px; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="wrapper"> + <div class="grid"> + <div class="subgrid" style="grid-column: span 4; grid-row: span 2; gap: 20px 10px"> + <div class="subgrid" style="grid-column: span 2; grid-row: span 2"> + <div class="subgrid"></div> + <div class="subgrid"></div> + <div class="subgrid"></div> + <div class="subgrid"></div> + </div> + <div class="subgrid" style="grid-column: span 2; grid-row: span 2"> + <div class="subgrid"></div> + <div class="subgrid"></div> + <div class="subgrid"></div> + <div class="subgrid"></div> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch-ref.html new file mode 100644 index 0000000000..33e8669da0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: The subgrid is always stretched in its subgridded dimension(s)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> + <style> + body { + margin: 0; + } + .grid { + display: inline-block; + width: 100px; + height: 100px; + background-color: blue; + } + </style> +</head> +<body> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + + <br> + + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + <div class="grid"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch.html new file mode 100644 index 0000000000..321e12d2a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch.html @@ -0,0 +1,96 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: The subgrid is always stretched in its subgridded dimension(s)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> + <link rel="match" href="subgrid-stretch-ref.html"> + <style> + body { + margin: 0; + } + .grid { + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 100px; + } + .subgrid { + display: grid; + background-color: blue; + } + .rows { + grid-template-rows: subgrid; + align-self: baseline; + } + .columns { + grid-template-columns: subgrid; + justify-self: baseline; + } + .vrl { + writing-mode: vertical-rl; + } + .vrl.rows { + align-self: initial; + justify-self: baseline; + } + .vrl.columns { + justify-self: initial; + align-self: baseline; + } + </style> +</head> +<body> + <div class="grid"> + <div class="subgrid rows" style="height: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid rows" style="height: 150px;"></div> + </div> + <div class="grid"> + <div class="subgrid rows" style="max-height: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid rows" style="min-height: 150px;"></div> + </div> + <div class="grid"> + <div class="subgrid columns" style="width: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid columns" style="width: 150px;"></div> + </div> + <div class="grid"> + <div class="subgrid columns" style="max-width: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid columns" style="min-width: 150px;"></div> + </div> + + <br> + + <div class="grid"> + <div class="subgrid vrl rows" style="width: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid vrl rows" style="width: 150px;"></div> + </div> + <div class="grid"> + <div class="subgrid vrl rows" style="max-width: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid vrl rows" style="min-width: 150px;"></div> + </div> + <div class="grid"> + <div class="subgrid vrl columns" style="height: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid vrl columns" style="height: 150px;"></div> + </div> + <div class="grid"> + <div class="subgrid vrl columns" style="max-height: 50px;"></div> + </div> + <div class="grid"> + <div class="subgrid vrl columns" style="min-height: 150px;"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001-ref.html new file mode 100644 index 0000000000..9061251688 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested subgrids map margin/border/padding according to writing direction</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> +html,body { + font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10, 30px); + border: 1px solid; + padding: 0 0 0 0; +} + +div > div { + display: grid; + grid-column: 2 / span 3; + grid: auto / subgrid; + border: 1px solid; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid; padding: 0 0 0 10px;"> + <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; margin-right: 29px;"> + <x style="grid-column: 1; ">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid;"> + <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; margin-right: 29px; padding-left: 10px;"> + <x style="grid-column: 1; ">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin-right: 10px;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3; border-right: 20px solid; border-left: 10px solid; margin-right: 29px;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid; margin: 0 20px 0 0;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin-right: 9px;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin: 0 20px 0 0; margin-right: 49px;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001.html new file mode 100644 index 0000000000..24caaebc4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested subgrids map margin/border/padding according to writing direction</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="writing-directions-001-ref.html"> + <style> +html,body { + font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10, 30px); + border: 1px solid; + padding: 0 0 0 0; +} + +div > div { + display: grid; + grid-column: 2 / span 3; + grid: auto / subgrid; + border: 1px solid; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + background: silver; +} + +.rtl { direction:rtl; } +.ltr { direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; padding: 0 0 0 10px;"> + <div class="ltr" style="grid-template-columns: subgrid;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; "> + <div class="ltr" style="grid-template-columns: subgrid; padding: 0 0 0 10px;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;"> + <div class="ltr" style="grid-template-columns: subgrid; "> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid;"> + <div class="ltr" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; margin: 0 20px 0 0;"> + <div class="ltr" style="grid-template-columns: subgrid; "> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid;"> + <div class="ltr" style="grid-template-columns: subgrid; margin: 0 20px 0 0;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002-ref.html new file mode 100644 index 0000000000..cd1ee527ab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: nested subgrids map margin/border/padding according to writing direction</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> +html,body { + font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10, auto); + border: 1px solid; + padding: 0 0 0 0; +} + +div > div { + display: grid; + grid-column: 1 / span 3; + grid: auto / subgrid; + border: 1px solid; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid; padding: 0 0 0 10px;"> + <div style="grid-template-columns: subgrid; grid-column: 1 /span 3;"> + <x style="grid-column: 1; ">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid;"> + <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; padding-left: 10px;"> + <x style="grid-column: 1; ">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3; border-right: 20px solid; border-left: 10px solid;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid; margin: 0 20px 0 0;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div style="grid-template-columns: subgrid;"> + <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin: 0 20px 0 0;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002.html new file mode 100644 index 0000000000..078d5808b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: nested subgrids map margin/border/padding according to writing direction</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="writing-directions-002-ref.html"> + <style> +html,body { + font:12px/1 monospace; +} + +.grid { + display: grid; + grid: 0.2em 1.4em / repeat(10, auto); + border: 1px solid; + padding: 0 0 0 0; +} + +div > div { + display: grid; + grid-column: 1 / span 3; + grid: auto / subgrid; + border: 1px solid; + background: grey; +} + +n { + grid-row: 1; + counter-increment: n; +} +n::before { content: counter(n, decimal); } + +x { + background: silver; +} + +.rtl { direction:rtl; } +.ltr { direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; padding: 0 0 0 10px;"> + <div class="ltr" style="grid-template-columns: subgrid;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; "> + <div class="ltr" style="grid-template-columns: subgrid; padding: 0 0 0 10px;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;"> + <div class="ltr" style="grid-template-columns: subgrid; "> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid;"> + <div class="ltr" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid; margin: 0 20px 0 0;"> + <div class="ltr" style="grid-template-columns: subgrid; "> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +<div class="grid"> + <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> + <div class="rtl" style="grid-template-columns: subgrid;"> + <div class="ltr" style="grid-template-columns: subgrid; margin: 0 20px 0 0;"> + <x style="grid-column: 1;">x</x> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003-ref.html new file mode 100644 index 0000000000..b8038a2b50 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Reference: out-of-flow subgridded items properly map repetitions</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <style> + +.grid { + display: grid; + grid-template: repeat(5, 10px) repeat(5, 10px) / repeat(5, 10px) repeat(5, 10px); + background: grey; + border: 1px solid; + width: 100px; + height: 100px; +} + +.grid-item { + width: 10px; + height: 10px; + background: orange; + border: 1px solid; +} + +.rtl { direction:rtl; } + +.ltr { direction:ltr; } + + </style> +</head> +<body> + +<div class="grid rtl"> + <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div> + <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div> + <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div> + <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div> + <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div> + <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div> + <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div> + <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div> + <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div> + <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div> +</div> + +<div class="grid ltr"> + <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div> + <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div> + <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div> + <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div> + <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div> + <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div> + <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div> + <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div> + <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div> + <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003.html new file mode 100644 index 0000000000..1df5512d19 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: out-of-flow subgridded items properly map repetitions</title> + <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid-2"> + <link rel="match" href="writing-directions-003-ref.html"> + <style> + +.grid { + display: grid; + grid-template: repeat(5, 10px) repeat(5, 10px) / repeat(5, 10px) repeat(5, 10px); + width: 100px; + height: 100px; + border: 1px solid; + background: grey; +} + +.subgrid { + position: relative; + display: grid; + grid-template: subgrid / subgrid; + grid-column: span 10; + grid-row: span 10; +} + +.grid-item { + width: 10px; + height: 10px; + background: orange; + border: 1px solid; + position: absolute; +} + +.rtl { direction:rtl; } + +.ltr { direction:ltr; } + + </style> +</head> +<body> + +<div class="grid"> + <div class="subgrid rtl"> + <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div> + <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div> + <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div> + <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div> + <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div> + <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div> + <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div> + <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div> + <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div> + <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div> + </div> +</div> + +<div class="grid rtl"> + <div class="subgrid ltr"> + <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div> + <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div> + <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div> + <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div> + <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div> + <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div> + <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div> + <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div> + <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div> + <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div> + </div> +</div> + +</body> +</html> |