diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-grid/alignment | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/alignment')
476 files changed, 35525 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html new file mode 100644 index 0000000000..a03ce153b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<style> +#target { + display: grid; + grid-auto-flow: column; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + writing-mode: vertical-lr; +} +#target > :nth-child(1) { + background: lime; + margin-right: 20px; + padding-right: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-lr; +} +#target > :nth-child(4) { + background: orange; + margin-left: 20px; + padding-left: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: cyan; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(6) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-x="120">line1<br>line2</div> + <div data-offset-x="105">line1<br>line2</div> + <div data-offset-x="126">line1<br>line2</div> + <div data-offset-x="20">line1<br>line2</div> + <div data-offset-x="35">line1<br>line2</div> + <div data-offset-x="42">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html new file mode 100644 index 0000000000..2b4d71756d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<style> +#target { + display: grid; + grid-auto-flow: column; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + writing-mode: vertical-rl; +} +#target > :nth-child(1) { + background: lime; + margin-right: 20px; + padding-right: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-lr; +} +#target > :nth-child(4) { + background: orange; + margin-left: 20px; + padding-left: 20px; + font-size: 20px; + line-height: 20px; + align-self: first baseline; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: cyan; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(6) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-x="120">line1<br>line2</div> + <div data-offset-x="105">line1<br>line2</div> + <div data-offset-x="126">line1<br>line2</div> + <div data-offset-x="20">line1<br>line2</div> + <div data-offset-x="35">line1<br>line2</div> + <div data-offset-x="42">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html new file mode 100644 index 0000000000..2e0c5f29f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<style> +#target { + display: grid; + grid-auto-flow: column; + grid-template-rows: 120px; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + line-height: 0; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cornflowerblue 3px; + outline-offset: -3px; +} +#target > div { + flex: none; +} +#target > :nth-child(1) { + background: lime; + margin-bottom: 20px; + padding-bottom: 20px; + font-size: 20px; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 10px; + writing-mode: vertical-lr; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-y="40"><span></span><br><span></span></div> + <div data-offset-y="20"><span></span><br><span></span></div> + <div data-offset-y="70"><span></span><br><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html new file mode 100644 index 0000000000..233c88a01f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<style> +#target { + display: grid; + grid-template: 50px 50px 50px / 50px 50px; + grid-auto-flow: column; + align-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + line-height: 0; + font-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div style="grid-area: 3 / 1; margin-bottom: 10px;" data-offset-y="100"><span></span><br><span></span></div> + <div style="grid-area: 1 / 2 / 4 / 2;" data-offset-y="100"><span></span><br><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html new file mode 100644 index 0000000000..c217a3b6de --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<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: inline-grid; grid-template: auto / 50px 50px; align-items: baseline; background: red;"> + <canvas style="background: green; width: 100%; height: 100%;"></canvas> + <div style="height: 100px; background: green;"><br></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html new file mode 100644 index 0000000000..207fabb166 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134"> +<style> +.target { + display: grid; + width: min-content; + grid-auto-flow: column; + position: relative; + line-height: 0; +} +.target > div { + background: hotpink; + font-size: 30px; +} +fieldset { + padding: 10px; + border: solid 10px; + margin: 0; + font-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <fieldset data-offset-y="0"> + <legend><span></span></legend> + <span></span><br><span></span> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="40"><span></span></div> + <fieldset data-offset-y="0"> + <span></span><br><span></span> + <legend><span></span></legend> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html new file mode 100644 index 0000000000..dbbca16150 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134"> +<style> +.target { + display: grid; + grid-auto-flow: column; + width: min-content; + position: relative; + line-height: 0; + writing-mode: vertical-rl; +} +.target > div { + background: hotpink; + font-size: 30px; +} +fieldset { + padding: 10px; + border: solid 10px; + margin: 0; + font-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="35"><span></span></div> + <fieldset data-offset-x="0"> + <legend><span></span></legend> + <span></span><br><span></span> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="15"><span></span></div> + <fieldset data-offset-x="0"> + <span></span><br><span></span> + <legend><span></span></legend> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html new file mode 100644 index 0000000000..38fc5b5eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134"> +<style> +.target { + display: grid; + grid-auto-flow: column; + width: min-content; + position: relative; + line-height: 0; + writing-mode: vertical-lr; +} +.target > div { + background: hotpink; + font-size: 30px; +} +fieldset { + padding: 10px; + border: solid 10px; + margin: 0; + font-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <fieldset data-offset-x="0"> + <legend><span></span></legend> + <span></span><br><span></span> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <fieldset data-offset-x="0"> + <span></span><br><span></span> + <legend><span></span></legend> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html new file mode 100644 index 0000000000..d00472474b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html @@ -0,0 +1,261 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="25"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="25"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="50"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap-reverse --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="40"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="60"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="15"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html new file mode 100644 index 0000000000..b6df9d7d73 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html @@ -0,0 +1,262 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-inline: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="50"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-direction: column;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="20"><span></span></div> + <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="70"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="33"><span></span></div> + <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="65"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="55"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="38"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="50"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="20"><span></span></div> + <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<!-- flex-wrap: wrap-reverse --> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="75"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="63"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="35"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="60"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="43"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html new file mode 100644 index 0000000000..7fdc921b27 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; + gap: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html new file mode 100644 index 0000000000..447f008e0e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 200px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + display: flex; + border: solid 5px; + padding: 10px; + gap: 10px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="110"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="110"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="45"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="40"><span></span></div> + <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 50px;"><span></span></div> + <div style="font-size: 60px;"><span></span></div> + <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html new file mode 100644 index 0000000000..d59e70601a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + display: grid; + gap: 10px; + grid-template: 50px 50px / 50px 50px 50px; + border: solid 5px; + padding: 10px; +} + +.inner > div:first-child, +.inner > div:last-child { + align-self: start; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="35"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="100"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="55"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="115"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="25"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="90"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html new file mode 100644 index 0000000000..686587bc94 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + display: grid; + gap: 10px; + grid-template: 50px 50px / 50px 50px 50px; + border: solid 5px; + padding: 10px; +} + +.inner > div:first-child, +.inner > div:last-child { + align-self: start; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="110"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="48"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="90"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="33"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="115"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="53"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html new file mode 100644 index 0000000000..f561e13cfa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-lr; +} + +.inner { + display: grid; + gap: 10px; + grid-template: 50px 50px / 50px 50px 50px; + border: solid 5px; + padding: 10px; +} + +.inner > div:first-child, +.inner > div:last-child { + align-self: start; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="93"><span></span></div> + <div class="inner" style="align-items: first baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="50"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="108"><span></span></div> + <div class="inner" style="align-items: last baseline;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="88"><span></span></div> + <div class="inner" style="align-items: end;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 10px;"><span></span></div> + <div style="font-size: 30px;"><span></span></div> + <div style="font-size: 15px;"><span></span></div> + <div style="font-size: 35px;"><span></span></div> + <div style="font-size: 25px;"><span></span></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html new file mode 100644 index 0000000000..27e48bc7cc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline"> +<style> +.target { + display: grid; + grid-auto-flow: column; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; +} +.target > div { + background: hotpink; + font-size: 30px; +} +.line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + border: solid 10px; + font-size: 40px !important; + overflow: hidden; +} +.line-clamp div { + background: orange; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Five lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<!-- Two lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span> + </div> +</div> + +<!-- Three lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + + +<!-- Wrapping div --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Nested div after first line --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Block within inline. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="110"><span></span></div> + <div class="line-clamp" data-offset-y="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html new file mode 100644 index 0000000000..a51c43f406 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline"> +<style> +.target { + display: grid; + grid-auto-flow: column; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; + writing-mode: vertical-rl; +} +.target > div { + background: hotpink; + font-size: 30px; +} +.line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + border: solid 10px; + font-size: 40px !important; + overflow: hidden; +} +.line-clamp div { + background: orange; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Five lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<!-- Two lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="65"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<!-- Three lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + + +<!-- Wrapping div --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Nested div after first line --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Block within inline. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html new file mode 100644 index 0000000000..689c952dbb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline"> +<style> +.target { + display: grid; + grid-auto-flow: column; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; + writing-mode: vertical-lr; +} +.target > div { + background: hotpink; + font-size: 30px; +} +.line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + border: solid 10px; + font-size: 40px !important; + overflow: hidden; +} +.line-clamp div { + background: orange; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Five lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span><br><span></span><br><span></span> + </div> +</div> + +<!-- Two lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="65"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span> + </div> +</div> + +<!-- Three lines --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><span></span><br><span></span> + </div> +</div> + + +<!-- Wrapping div --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Nested div after first line --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> + </div> +</div> + +<!-- Block within inline. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="line-clamp" data-offset-x="10"> + <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html new file mode 100644 index 0000000000..d7d6faabb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> +<style> +.target { + display: grid; + grid-auto-flow: column; + inline-size: 100px; + position: relative; + line-height: 0; + padding: 10px; +} +.target > div { + background: hotpink; + font-size: 20px; +} +.multicol { + columns: 3; + column-fill: auto; + padding: 10px; + border: solid 10px; +} +.multicol > div { + break-inside: avoid; + break-before: column; + break-after: column; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Three columns, largest in the middle. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="100"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- Start spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="30"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="140"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- End spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="140"><span></span></div> + <div class="multicol" data-offset-y="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html new file mode 100644 index 0000000000..d237f4c2e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> +<style> +.target { + display: grid; + grid-auto-flow: column; + inline-size: 200px; + position: relative; + line-height: 0; + margin: 40px; + padding: 10px; + writing-mode: vertical-rl; +} +.target > div { + background: hotpink; + font-size: 20px; +} +.multicol { + columns: 3; + column-fill: auto; + padding: 10px; + border: solid 10px; +} +.multicol > div { + break-inside: avoid; + break-before: column; + break-after: column; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Three columns, largest in the middle. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="105"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="35"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- Start spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="140"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="35"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- End spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="145"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html new file mode 100644 index 0000000000..52b2403f88 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> +<style> +.target { + display: grid; + grid-auto-flow: column; + inline-size: 200px; + position: relative; + line-height: 0; + margin: 40px; + padding: 10px; + writing-mode: vertical-lr; +} +.target > div { + background: hotpink; + font-size: 20px; +} +.multicol { + columns: 3; + column-fill: auto; + padding: 10px; + border: solid 10px; +} +.multicol > div { + break-inside: avoid; + break-before: column; + break-after: column; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<!-- Three columns, largest in the middle. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="95"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- Start spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="30"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="135"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + </div> +</div> + +<!-- End spanning element. --> +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="25"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="140"><span></span></div> + <div class="multicol" data-offset-x="10"> + <div style="font-size: 10px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 30px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="font-size: 20px;"> + <span></span><br><span></span><br><span></span> + </div> + <div style="column-span: all; background: orange;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html new file mode 100644 index 0000000000..66f9eb1bcf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; +} + +.inner { + overflow: hidden; + inline-size: 100px; + block-size: 80px; + margin: 10px; + border: solid 5px; + padding: 10px; + font-size: 30px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="55"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="10"><span></span><br><span></span></div> + <div class="inner" data-offset-y="30"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="10"><span></span><br><span></span></div> + <div class="inner" data-offset-y="50"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="110"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="90"><span></span><br><span></span></div> + <div class="inner" data-offset-y="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html new file mode 100644 index 0000000000..b74dbf750b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-rl; +} + +.inner { + overflow: hidden; + inline-size: 100px; + block-size: 80px; + margin: 10px; + border: solid 5px; + padding: 10px; + font-size: 30px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="70"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="60"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="100"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="120"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="40"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html new file mode 100644 index 0000000000..569dd1ae37 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660"> +<style> +.target { + display: grid; + grid-auto-flow: column; + position: relative; + line-height: 0; + font-size: 20px; + inline-size: 300px; + margin-block: 10px; + padding: 10px; + border: solid 3px; + writing-mode: vertical-lr; +} + +.inner { + overflow: hidden; + inline-size: 100px; + block-size: 80px; + margin: 10px; + border: solid 5px; + padding: 10px; + font-size: 30px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="40"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="50"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="10"><span></span><br><span></span></div> + <div class="inner" data-offset-x="40"> + <div style="margin-block-start: -200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="120"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="100"><span></span><br><span></span></div> + <div class="inner" data-offset-x="20"> + <div style="margin-block-start: 200px;"> + <span></span><br><span></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html new file mode 100644 index 0000000000..0cafef6ecc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> +<style> +.target { + display: grid; + grid-auto-flow: column; + justify-items: start; + position: relative; +} +.target > div, td { + background: hotpink; + font-size: 20px; + line-height: 0; +} +table { border-spacing: 0; } +td { padding: 5px; min-width: 5px; min-height: 5px; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="45"><span></span></div> + <table data-offset-y="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="95"><span></span></div> + <table data-offset-y="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-y="20"><span></span></div> + <table data-offset-y="0"> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-y="70"><span></span></div> + <table data-offset-y="0"> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + <tr> + <td style="border: solid 10px;"></td> + <td style="border: solid 5px;"></td> + <td style="border: solid 20px;"></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html new file mode 100644 index 0000000000..6fc444ff84 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> +<style> +.target { + display: grid; + grid-auto-flow: column; + justify-items: start; + position: relative; + writing-mode: vertical-rl; +} +.target > div, td { + background: hotpink; + font-size: 20px; + line-height: 0; +} +table { border-spacing: 0; } +td { padding: 5px; min-width: 5px; min-height: 5px; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="115"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="65"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html new file mode 100644 index 0000000000..43ba6ae86d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> +<style> +.target { + display: grid; + grid-auto-flow: column; + justify-items: start; + position: relative; + writing-mode: vertical-lr; +} +.target > div, td { + background: hotpink; + font-size: 20px; + line-height: 0; +} +table { border-spacing: 0; } +td { padding: 5px; min-width: 5px; min-height: 5px; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target" style="align-items: first baseline;"> + <div data-offset-x="45"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> + +<div class="target" style="align-items: last baseline;"> + <div data-offset-x="95"><span></span></div> + <table data-offset-x="0"> + <caption>top</caption> + <tr style="vertical-align: baseline;"> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr style="vertical-align: baseline;"> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;">bottom</caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html new file mode 100644 index 0000000000..aff424be77 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid align baseline vertical</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<meta name="assert" content="This test checks that baseline alignment works correctly for align-self properties in vertical-rl and -lr writing modes"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> + +.grid { + height: 600px; + grid-auto-columns: 1fr; + margin-bottom: 20px; + position: relative; + text-orientation: sideways; + font: 20px/1 Ahem; +} + +.grid :nth-child(1) { background-color: brown; } +.grid :nth-child(2) { background-color: green; } +.grid :nth-child(3) { background-color: red; } +.grid :nth-child(4) { background-color: yellow; } +.grid :nth-child(5) { background-color: purple; } +.grid :nth-child(6) { background-color: orange; } +.grid :nth-child(7) { background-color: lime; } +.grid :nth-child(8) { background-color: lightblue; } +.grid :nth-child(9) { background-color: darkred; } +.grid :nth-child(10) { background-color: gold; } +.grid :nth-child(11) { background-color: salmon; } + +.firstRowThirdColumn { + grid-row: 1; + grid-column: 3; +} +.firstRowFourthColumn { + grid-row: 1; + grid-column: 4; +} +.firstRowFifthColumn { + grid-row: 1; + grid-column: 5; +} +.grid > div { + min-width: 0px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> setup({ explicit_done: true }); </script> + +<body onload="document.fonts.ready.then(() => { runTests(); })"> + +<div class="grid" style="writing-mode: vertical-rl"> + <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div> + <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div> + <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div> + <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div> +</div> + +<div class="grid" style="writing-mode: vertical-rl"> + <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div> + <div id="baseline2" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> + <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> + <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> + <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div> +</div> + +<div class="grid" style="writing-mode: vertical-rl"> + <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div> + <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> + <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> + <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div> +</div> + +<div class="grid" style="writing-mode: vertical-lr"> + <div id="baseline6" data-offset-x="13" class="firstRowFirstColumn alignSelfBaseline">ahem</div> + <div id="baseline7" data-offset-x="13" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> + <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> + <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> + <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div> +</div> + +<div class="grid" style="writing-mode: vertical-lr"> + <div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div> + <div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> + <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> + <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div> +</div> + +<div id="log"></div> + +</body> + +<script> + + function runTests() { + var baseline1 = document.getElementById("baseline1"); + var baseline2 = document.getElementById("baseline2"); + var baseline3 = document.getElementById("baseline3"); + var baseline4 = document.getElementById("baseline4"); + var baseline5 = document.getElementById("baseline5"); + var baseline6 = document.getElementById("baseline6"); + var baseline7 = document.getElementById("baseline7"); + var baseline8 = document.getElementById("baseline8"); + var baseline9 = document.getElementById("baseline9"); + + checkLayout('.grid', false); + + test(() => {assert_equals(baseline1.offsetLeft, baseline2.offsetLeft, "baseline1 and baseline2 should have the same baseline;")}, "Additional Check 1"); + test(() => {assert_greater_than(baseline3.offsetLeft + baseline3.offsetWidth, 75, "baseline3 should be above the center align-itemsed item;")}, "Additional Check 2"); + test(() => {assert_equals(baseline4.offsetLeft + baseline4.offsetWidth, baseline5.offsetLeft + baseline5.offsetWidth, "baseline4 and baseline5 should be right aligned with each other;")}, "Additional Check 3"); + test(() => {assert_less_than(baseline4.offsetLeft + baseline4.offsetWidth, 100, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4"); + test(() => {assert_equals(baseline6.offsetLeft, baseline7.offsetLeft, "baseline6 and baseline7 should have the same baseline;")}, "Additional Check 5"); + test(() => {assert_equals(baseline8.offsetLeft, baseline9.offsetLeft, "baseline8 and baseline9 should be left aligned with each other;")}, "Additional Check 6"); + + done(); + }; + +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html new file mode 100644 index 0000000000..25744ce61e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid align baseline</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<meta name="assert" content="This test checks that baseline alignment works correctly for align-items and align-self properties"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> + +.grid { + width: 600px; + grid-auto-columns: 1fr; + position: relative; + margin-bottom: 20px; + font: 20px/1 Ahem; +} + +.grid :nth-child(1) { background-color: blue; } +.grid :nth-child(2) { background-color: green; } +.grid :nth-child(3) { background-color: red; } +.grid :nth-child(4) { background-color: yellow; } +.grid :nth-child(5) { background-color: purple; } +.grid :nth-child(6) { background-color: orange; } +.grid :nth-child(7) { background-color: lime; } +.grid :nth-child(8) { background-color: lightblue; } +.grid :nth-child(9) { background-color: darkred; } +.grid :nth-child(10) { background-color: gold; } +.grid :nth-child(11) { background-color: salmon; } + +.firstRowThirdColumn { + grid-row: 1; + grid-column: 3; +} +.firstRowFourthColumn { + grid-row: 1; + grid-column: 4; +} +.firstRowFifthColumn { + grid-row: 1; + grid-column: 5; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> setup({ explicit_done: true }); </script> + +<body onload="document.fonts.ready.then(() => { runTests(); })"> + +<div class="grid alignItemsBaseline"> + <div style="margin: 40px 0px;" class="firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div> + <div style="margin: auto 0px 0px;" class="firstRowSecondColumn" data-offset-x="200" data-offset-y="80" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div> + <div style="margin: 20px 0px;" class="firstRowThirdColumn" data-offset-x="400" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div> +</div> + +<div class="grid"> + <div data-expected-height="20" data-offset-y="20" class="firstRowFirstColumn alignSelfBaseline" style="height: 20px;"></div> + <div data-expected-height="10" data-offset-y="30" class="firstRowSecondColumn alignSelfBaseline" style="height: 10px; margin: 30px 0 10px;"></div> + <div data-expected-height="10" data-offset-y="30" class="firstRowThirdColumn alignSelfBaseline" style="height: 10px; margin: 20px 0 0;"></div> + <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div> +</div> + +<div class="grid"> + <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div> + <div id="baseline2" data-offset-y="0" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px;"></div> + <div data-expected-height="50" data-offset-y="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div> + <div id="baseline3" data-expected-height="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div> + <div data-expected-height="100" data-offset-y="0" class="firstRowFifthColumn" style="height: 100px;"></div> +</div> + +<div class="grid"> + <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div> + <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="height: 50px;"></div> + <div data-expected-height="50" data-offset-y="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div> + <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div> +</div> + +<div id="log"></div> + +</body> + +<script> + + function runTests() { + var baseline1 = document.getElementById("baseline1"); + var baseline2 = document.getElementById("baseline2"); + var baseline3 = document.getElementById("baseline3"); + var baseline4 = document.getElementById("baseline4"); + var baseline5 = document.getElementById("baseline5"); + + checkLayout('.grid', false); + + test(() => {assert_equals(baseline1.offsetTop + baseline1.offsetHeight, baseline2.offsetTop + baseline2.offsetHeight, "baseline1 and baseline2 should have the same baseline;")}, + "Additional Check 1"); + test(() => {assert_less_than(baseline3.offsetTop, 25, "baseline3 should be above the center align-selfed item;")}, "Additional Check 2"); + test(() => {assert_equals(baseline4.offsetTop, baseline5.offsetTop, "baseline4 and baseline5 should be top aligned with each other;")}, "Additional Check 3"); + test(() => {assert_greater_than(baseline4.offsetTop, 0, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4"); + + done(); + }; + +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html new file mode 100644 index 0000000000..98d4e3c661 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html @@ -0,0 +1,343 @@ +<meta charset="utf-8"> +<title>CSS Grid Layout Test: aligned content distribution for vertical lr</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-lr writing mode."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> + +.grid { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + position: relative; + width: 400px; + height: 300px; +} + +.stretchedGrid { + grid-auto-rows: auto; +} + +.width300height400 { + width: 300px; + height: 400px; +} + +.fourthRowFirstColumn { + background-color: deepskyblue; + grid-column: 1; + grid-row: 4; +} + +.fourthRowSecondColumn { + background-color: maroon; + grid-column: 2; + grid-row: 4; +} + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that the align-content property is applied correctly when using content-distribution values in vertical-lr writing mode.</p> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR" data-expected-width="300" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR directionRTL" data-expected-width="300" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html new file mode 100644 index 0000000000..60864c110d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html @@ -0,0 +1,343 @@ +<meta charset="utf-8"> +<title>CSS Grid Layout Test: aligned content distribution for vertical rl</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-rl writing mode."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> + +.grid { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + position: relative; + width: 400px; + height: 300px; +} + +.stretchedGrid { + grid-auto-rows: auto; +} + +.width300height400 { + width: 300px; + height: 400px; +} + +.fourthRowFirstColumn { + background-color: deepskyblue; + grid-column: 1; + grid-row: 4; +} + +.fourthRowSecondColumn { + background-color: maroon; + grid-column: 2; + grid-row: 4; +} + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that the align-content property is applied correctly when using content-distribution values for vertical-rl mode.</p> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL" data-expected-width="300" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL directionRTL" data-expected-width="300" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div> + <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html new file mode 100644 index 0000000000..cc3785da0f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html @@ -0,0 +1,338 @@ +<meta charset="utf-8"> +<title>CSS Grid Layout Test: aligned content distribution</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> + +.grid { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + position: relative; + width: 200px; + height: 300px; +} + +.stretchedGrid { + grid-auto-rows: auto; +} + +.fourthRowFirstColumn { + background-color: deepskyblue; + grid-column: 1; + grid-row: 4; +} + +.fourthRowSecondColumn { + background-color: maroon; + grid-column: 2; + grid-row: 4; +} + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that the align-content property is applied correctly when using content-distribution values.</p> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> + <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> + <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> + <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> + <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> + <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-between'</p> + <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-around'</p> + <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'space-evenly'</p> + <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> + <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'stretch'</p> + <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> + <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div> + <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> + <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div> + <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> + <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div> + <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> + <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html new file mode 100644 index 0000000000..484ab78e9d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: align-content in vertical-lr</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#direction"> +<meta name="assert" content="This test checks that the align-content property is applied correctly in vertical-lr grids, for both LTR and RTL directions."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> + +.grid { + grid: 100px 100px / 50px 50px; + position: relative; + width: 300px; + height: 200px; +} + +.cell { + width: 20px; + height: 40px; +} + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'center'</p> + <div class="grid verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'start'</p> + <div class="grid verticalLR alignContentStart" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'end'</p> + <div class="grid verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | align-content: 'center'</p> + <div class="grid directionRTL verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'start'</p> + <div class="grid directionRTL verticalLR alignContentStart" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'end'</p> + <div class="grid directionRTL verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html new file mode 100644 index 0000000000..fc584d8818 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: align-content in vertical-rl</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#direction"> +<meta name="assert" content="This test checks that the align-content property is applied correctly in vertical-rl grids, for both LTR and RTL directions."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> + +.grid { + grid: 100px 100px / 50px 50px; + position: relative; + width: 300px; + height: 200px; +} + +.cell { + width: 20px; + height: 40px; +} + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'center'</p> + <div class="grid verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'start'</p> + <div class="grid verticalRL alignContentStart" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'end'</p> + <div class="grid verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | align-content: 'center'</p> + <div class="grid directionRTL verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'start'</p> + <div class="grid directionRTL verticalRL alignContentStart" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'end'</p> + <div class="grid directionRTL verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> + <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html new file mode 100644 index 0000000000..85d0d501ff --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html @@ -0,0 +1,177 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: align-content property</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<meta name="assert" content="This test checks that the align-content property is applied correctly in both directions RTL and LTR."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +body { + margin: 0; +} + +.grid { + grid: 100px 100px / 50px 50px; + position: relative; + width: 200px; + height: 300px; +} + +.verticalGrid { + width: 300px; + height: 200px; +} + +.cell { + width: 20px; + height: 40px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'center'</p> + <div class="grid alignContentCenter" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'left'</p> + <div class="grid alignContentLeft" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'right'</p> + <div class="grid alignContentRight" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'start'</p> + <div class="grid alignContentStart" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'end'</p> + <div class="grid alignContentEnd" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'flex-start'</p> + <div class="grid alignContentFlexStart" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | align-content: 'flex-end</p> + <div class="grid alignContentFlexEnd" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Default alignment and initial values. --> +<div style="position: relative"> + <p>direction: LTR | align-content: 'auto' (resolved to 'start')</p> + <div class="grid" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | align-content: 'center'</p> + <div class="grid directionRTL alignContentCenter" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'left'</p> + <div class="grid directionRTL alignContentLeft" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'right'</p> + <div class="grid directionRTL alignContentRight" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'start'</p> + <div class="grid directionRTL alignContentStart" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | align-content: 'end'</p> + <div class="grid directionRTL alignContentEnd" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html new file mode 100644 index 0000000000..76f195311d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html @@ -0,0 +1,243 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: box model parts and alignment properties, vertical-LR writing mode</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"> +<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids, in both LTR and RTL directions."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 200px 200px; + padding: 10px 15px 20px 30px; + border-width: 5px 10px 15px 20px; + border-style: dotted; + border-color: blue; + position: relative; +} + +.cell { + width: 20px; + height: 40px; + margin: 4px 8px 12px 16px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids.</p> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'auto' | justify-items: 'auto'</p> + <div class="grid fit-content verticalLR" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'center' | justify-items: 'center'</p> + <div class="grid fit-content verticalLR itemsCenter" data-expected-width="475" data-expected-height="350"> + <div class="firstRowFirstColumn cell" data-offset-x="124" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'end' | justify-items: 'end'</p> + <div class="grid fit-content verticalLR itemsEnd" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'left' | justify-items: 'left'</p> + <div class="grid fit-content verticalLR itemsLeft" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'start' | justify-items: 'right'</p> + <div class="grid fit-content verticalLR alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: rtl)</p> + <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: rtl)</p> + <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction. --> +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'auto' | justify-items: 'auto'</p> + <div class="grid fit-content verticalLR directionRTL" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'center' | justify-items: 'center'</p> + <div class="grid fit-content verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="124" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="324" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'end' | justify-items: 'end'</p> + <div class="grid fit-content verticalLR directionRTL itemsEnd" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'start' | justify-items: 'left'</p> + <div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsLeft" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'start' | justify-items: 'right'</p> + <div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: ltr)</p> + <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: ltr)</p> + <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html new file mode 100644 index 0000000000..f24bbc120f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html @@ -0,0 +1,244 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: box model parts and alignment properties, vertical-RL writing mode</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"> +<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids, in both LTR and RTL directions."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 200px 200px; + padding: 10px 15px 20px 30px; + border-width: 5px 10px 15px 20px; + border-style: dotted; + border-color: blue; + position: relative; +} + +.cell { + width: 20px; + height: 40px; + margin: 4px 8px 12px 16px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids.</p> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'auto' | justify-items: 'auto'</p> + <div class="grid fit-content verticalRL" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'center' | justify-items: 'center'</p> + <div class="grid fit-content verticalRL itemsCenter" data-expected-width="475" data-expected-height="350"> + <div class="firstRowFirstColumn cell" data-offset-x="324" data-offset-y="36" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="186" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'end' | justify-items: 'end'</p> + <div class="grid fit-content verticalRL itemsEnd" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'left' | justify-items: 'left'</p> + <div class="grid fit-content verticalRL itemsLeft" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'start' | justify-items: 'right'</p> + <div class="grid fit-content verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: rtl)</p> + <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: rtl)</p> + <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="58" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + + +<!-- RTL direction. --> +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'auto' | justify-items: 'auto'</p> + <div class="grid fit-content directionRTL verticalRL" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'center' | justify-items: 'center'</p> + <div class="grid fit-content directionRTL verticalRL itemsCenter" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="324" data-offset-y="236" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'end' | justify-items: 'end'</p> + <div class="grid fit-content directionRTL verticalRL itemsEnd" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'start' | justify-items: 'left'</p> + <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsLeft" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'start' | justify-items: 'right'</p> + <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350"> + <div class="cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: ltr)</p> + <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="402" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: ltr)</p> + <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html new file mode 100644 index 0000000000..d4de084267 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html @@ -0,0 +1,242 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: box model parts and alignment properties</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties, in both LTR and RTL directions."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 200px 200px; + padding: 10px 15px 20px 30px; + border-width: 5px 10px 15px 20px; + border-style: dotted; + border-color: blue; + position: relative; +} + +.cell { + width: 20px; + height: 40px; + margin: 4px 8px 12px 16px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'auto' | justify-items: 'auto'</p> + <div class="grid fit-content" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="146" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'center' | justify-items: 'center'</p> + <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450"> + <div class="firstRowFirstColumn cell" data-offset-x="74" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="224" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'end' | justify-items: 'end'</p> + <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'start' | justify-items: 'left'</p> + <div class="grid fit-content alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR | align-items: 'start' | justify-items: 'right'</p> + <div class="grid fit-content alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="102" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="146" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="102" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="302" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction. --> +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'auto' | justify-items: 'auto'</p> + <div class="grid fit-content directionRTL" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="202" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'center' | justify-items: 'center'</p> + <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="274" data-offset-y="86" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="124" data-offset-y="286" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'end' | justify-items: 'end'</p> + <div class="grid fit-content directionRTL itemsEnd" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'start' | justify-items: 'left'</p> + <div class="grid fit-content directionRTL alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'start' | justify-items: 'right'</p> + <div class="grid fit-content directionRTL alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450"> + <div class="cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="246" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="46" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="302" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="202" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="302" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="46" data-offset-y="358" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html new file mode 100644 index 0000000000..37d5c14600 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: overflow for justify and align</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<meta name="assert" content="This test checks that both safe and unsafe overflow positions are applied correctly for align-items and justify-items properties."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> + +<style> + +.grid { + grid-template-columns: 150px 150px; + grid-template-rows: 120px 120px 120px; + margin-bottom: 20px; +} +.cellOverflowWidth { + width: 180px; + height: 40px; +} +.cellOverflowHeight { + width: 50px; + height: 150px; +} +.cellWithNoOverflow { + width: 50px; + height: 40px; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p> + +<div style="position: relative"> + <div class="grid fit-content alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="135" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsUnsafeCenter justifyItemsUnsafeCenter" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="120" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsUnsafeEnd justifyItemsUnsafeEnd" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow secondRowFirstColumn justifySelfUnsafeCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360"> + <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + <div class="cellWithNoOverflow firstRowSecondColumn alignSelfUnsafeCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> + <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> + <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html new file mode 100644 index 0000000000..3b50bb4d6e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test:align stretch with orthogonal flows</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<meta name="assert" content="This test checks that stretching alignment works as expected with orthogonal flows, in horizontal and vertical writing mode."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> + +.container { + position: relative; +} +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 150px 150px; + font: 10px/1 ahem; + margin-bottom: 20px; +} +.widthAndHeightSet { + width: 20px; + height: 40px; +} +.onlyWidthSet { width: 20px; } +.onlyHeightSet { height: 40px; } +.maxHeight { max-height: 160px; } +.maxWidth { max-width: 90px; } +.minWidth { min-width: 120px; } +.minHeight { min-height: 220px; } +.topAutoMargin { margin-top: auto; } +.bottomAutoMargin { margin-bottom: auto; } +.leftAutoMargin { margin-left: auto; } +.rightAutoMargin { margin-right: auto; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that stretching alignment works as expected with orthogonal flows.</p> + +<p>HORIZONTAL vs VERTICAL-RL</p> +<div class="container"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="300"> + <div class="verticalRL firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div> + <div class="verticalRL firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="150">XXX</div> + <div class="verticalRL secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div> + <div class="verticalRL secondRowSecondColumn selfSelfStart" data-expected-width="10" data-expected-height="30">XXX</div> + </div> +</div> + +<div class="container"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="300"> + <div class="verticalRL firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div> + <div class="verticalRL firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div> + <div class="verticalRL secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div> + <div class="verticalRL secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div> + </div> +</div> + +<p>HORIZONTAL vs VERTICAL-LR</p> +<div class="container"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="300"> + <div class="verticalLR firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div> + <div class="verticalLR firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="150">XXX</div> + <div class="verticalLR secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div> + <div class="verticalLR secondRowSecondColumn selfSelfStart" data-expected-width="10" data-expected-height="30">XXX</div> + </div> +</div> +<div class="container"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="300"> + <div class="verticalLR firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div> + <div class="verticalLR firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div> + <div class="verticalLR secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div> + <div class="verticalLR secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10" data-expected-height="150">XXX</div> + </div> +</div> + +<p>VERTICAL-RL vs HORIZONTAL</p> +<div class="container"> + <div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200"> + <div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div> + <div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="100">XXX</div> + <div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div> + <div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30" data-expected-height="10">XXX</div> + </div> +</div> +<div class="container"> + <div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200"> + <div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div> + <div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div> + <div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div> + <div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div> + </div> +</div> + +<p>VERTICAL-LR vs HORIZONTAL</p> +<div class="container"> + <div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200"> + <div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20" data-expected-height="40">XXX</div> + <div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20" data-expected-height="100">XXX</div> + <div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div> + <div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30" data-expected-height="10">XXX</div> + </div> +</div> +<div class="container"> + <div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200"> + <div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div> + <div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div> + <div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div> + <div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30" data-expected-height="100">XXX</div> + </div> +</div> + +<div id="log"></div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html new file mode 100644 index 0000000000..7af6695a65 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html @@ -0,0 +1,196 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: stretch value for align and justify properties</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> + +<meta name="assert" content="This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties for both RTL/LTR directions and horizontal/vertical writing modes."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { + margin: 0; +} + +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 200px 200px; + margin-bottom: 20px; +} + +.widthAndHeightSet { + width: 20px; + height: 40px; +} +.onlyWidthSet { width: 20px; } +.onlyHeightSet { height: 40px; } +.maxHeight { max-height: 160px; } +.maxWidth { max-width: 90px; } +.minWidth { min-width: 120px; } +.minHeight { min-height: 220px; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div> + <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div> + <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div> + <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="160"></div> + <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="120" data-expected-height="40"></div> + <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="220"></div> + <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="90" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div> + </div> +</div> + +<!-- RTL direction (it should not affect the block-flow direction). --> +<div style="position: relative"> + <div class="grid fit-content directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. --> +<div style="position: relative"> + <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400"> + <div class="firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="widthAndHeightSet firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> + <div class="onlyHeightSet secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div> + </div> +</div> + +<!-- Vertical RL writing mode. --> +<div style="position: relative"> + <div class="grid fit-content verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> + </div> +</div> + +<!-- Vertical LR writing mode. --> +<div style="position: relative"> + <div class="grid fit-content verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div> + <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html new file mode 100644 index 0000000000..b1dbbd8fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: alignment for replaced element</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element"> +<link rel="help" href="https://drafts.csswg.org/css-align/#align-grid"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing"> +<meta name="assert" content="This test checks that the alignment properties apply the 'stretch' value correctly on replaced elements, such as images."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> + +<style> +.grid { + grid-template-columns: 500px; + grid-template-rows: 500px; +} +.fixedSizes { + width: 150px; + height: 150px; +} +.autoMargins { + margin: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + + <p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p> + + <div style="position: relative"> + <p>The blue image's original size is 100px x 100px, default alignment is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p> + <div class="grid"> + <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> + </div> + </div> + + <div style="position: relative"> + <p>The blue image's original size is 100px x 100px, 'normal' is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p> + <div class="grid itemsNormal"> + <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> + </div> + </div> + + <div style="position: relative"> + <p>The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into.</p> + <div class="grid alignItemsStretch justifyItemsStretch"> + <img src="/css/support/blue-100.png" data-expected-width="500" data-expected-height="500"/> + </div> + </div> + + <div style="position: relative"> + <p>The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.</p> + <div class="grid itemsCenter"> + <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> + </div> + </div> + + <div style="position: relative"> + <p>The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.</p> + <div class="grid"> + <img class="fixedSizes" src="/css/support/blue-100.png" data-expected-width="150" data-expected-height="150"/> + </div> + </div> + + <div style="position: relative"> + <p>The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.</p> + <div class="grid"> + <img class="autoMargins" src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html new file mode 100644 index 0000000000..79aa684740 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html @@ -0,0 +1,225 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: align-self property</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction"> +<meta name="assert" content="This test checks that the align-self property is applied correctly for RL and LR, vertical and horizontal writing modes."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> + +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 200px 200px; + margin-bottom: 20px; +} + +.cell { + width: 20px; + height: 40px; +} + +.item { + width: 8px; + height: 16px; + background: black; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Default alignment and initial values. --> +<div style="position: relative"> + <div class="grid fit-content alignItemsCenter" data-expected-width="200" data-expected-height="400"> + <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction (it should not affect the block-flow direction). --> +<div style="position: relative"> + <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400"> + <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400"> + <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="80" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. --> +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content" data-expected-width="200" data-expected-height="400"> + <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Vertical RL writing mode. --> +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> + <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> + <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Vertical LR writing mode. --> +<div style="position: relative"> + <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> + <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> + <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. --> +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> + <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"> + </div> + <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200"> + <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfFlexStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfSelfStart secondRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + </div> +</div> + +<!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. --> +<div style="position: relative"> + <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> + <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> + </div> + <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200"> + <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfFlexStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfSelfStart secondRowFirstColumn verticalRL" data-offset-x="380" data-offset-y="0" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html new file mode 100644 index 0000000000..ee931b990f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: stretch; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 200); + grid.style.alignItems = "start"; + evaluateStyleChange(item, "after", "data-expected-height", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html new file mode 100644 index 0000000000..2ef899fca9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: start; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 100); + grid.style.alignItems = "stretch"; + evaluateStyleChange(item, "after", "data-expected-height", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html new file mode 100644 index 0000000000..47cb3347db --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes no effect on non-replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: stretch; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 200); + grid.style.alignItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-height", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html new file mode 100644 index 0000000000..d3f22e9bc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes no effect on non-replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: normal; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 200); + grid.style.alignItems = "stretch"; + evaluateStyleChange(item, "after", "data-expected-height", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html new file mode 100644 index 0000000000..bb9de73d73 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid's align-items value from 'start' to 'normal' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: start; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 100); + grid.style.alignItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-height", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html new file mode 100644 index 0000000000..5a61e333f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid's align-items value from 'normal' to 'start' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: normal; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 200); + grid.style.alignItems = "start"; + evaluateStyleChange(item, "after", "data-expected-height", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html new file mode 100644 index 0000000000..b50d8be7a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 80px; + font: 20px/1 Ahem; + background: grey; + align-items: start; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 100); + grid.style.alignItems = "stretch"; + evaluateStyleChange(item, "after", "data-expected-height", 80); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html new file mode 100644 index 0000000000..fd394b83e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 80px; + font: 20px/1 Ahem; + background: grey; + align-items: stretch; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 80); + grid.style.alignItems = "start"; + evaluateStyleChange(item, "after", "data-expected-height", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html new file mode 100644 index 0000000000..0ef6351dbb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 80px; + font: 20px/1 Ahem; + background: grey; + align-items: start; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 100); + grid.style.alignItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-height", 80); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html new file mode 100644 index 0000000000..d9eb6066b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 80px; + font: 20px/1 Ahem; + background: grey; + align-items: normal; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 80); + grid.style.alignItems = "start"; + evaluateStyleChange(item, "after", "data-expected-height", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html new file mode 100644 index 0000000000..c06918538d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: stretch; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 200, + 'data-expected-height': 200, + }, + }); + grid.style.alignItems = 'start'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html new file mode 100644 index 0000000000..1fe7d2696f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: start; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + grid.style.alignItems = 'stretch'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 200, + 'data-expected-height': 200, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html new file mode 100644 index 0000000000..266e2124fb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: stretch; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 200, + 'data-expected-height': 200, + }, + }); + grid.style.alignItems = 'normal'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html new file mode 100644 index 0000000000..23f79cba32 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: normal; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + grid.style.alignItems = 'stretch'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 200, + 'data-expected-height': 200, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html new file mode 100644 index 0000000000..405dbcf7bc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes no effect on replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: start; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 100); + grid.style.alignItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-height", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img data-expected-width="100" id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html new file mode 100644 index 0000000000..f3477a2aa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes no effect on replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 200px; + font: 20px/1 Ahem; + background: grey; + align-items: normal; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-height", 100); + grid.style.alignItems = "start"; + evaluateStyleChange(item, "after", "data-expected-height", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img data-expected-width="100" id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html new file mode 100644 index 0000000000..2f45db5eae --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal"> +<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 80px; + font: 20px/1 Ahem; + background: grey; + align-items: start; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + grid.style.alignItems = 'stretch'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 80, + 'data-expected-height': 80, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html new file mode 100644 index 0000000000..2aa06ab2e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> +<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px; + grid-template-rows: 80px; + font: 20px/1 Ahem; + background: grey; + align-items: stretch; +} +#item { + background: blue; + align-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 80, + 'data-expected-height': 80, + }, + }); + grid.style.alignItems = 'start'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html new file mode 100644 index 0000000000..49896c21f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: stretch; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 200); + grid.style.justifyItems = "start"; + evaluateStyleChange(item, "after", "data-expected-width", 120); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html new file mode 100644 index 0000000000..e04356bc72 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: start; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 120); + grid.style.justifyItems = "stretch"; + evaluateStyleChange(item, "after", "data-expected-width", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html new file mode 100644 index 0000000000..29aa8ff6eb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes no effect on non-replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: stretch; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 200); + grid.style.alignItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-width", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html new file mode 100644 index 0000000000..b986bbe659 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes no effect on non-replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: normal; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 200); + grid.style.justifyItems = "stretch"; + evaluateStyleChange(item, "after", "data-expected-width", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html new file mode 100644 index 0000000000..e896326a95 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'normal' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: start; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 120); + grid.style.justifyItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-width", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html new file mode 100644 index 0000000000..b236ef15d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid's justify-items value from 'normal' to 'start' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: normal; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 200); + grid.style.justifyItems = "start"; + evaluateStyleChange(item, "after", "data-expected-width", 120); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html new file mode 100644 index 0000000000..6f268ee774 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 80px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: start; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 120); + grid.style.justifyItems = "stretch"; + evaluateStyleChange(item, "after", "data-expected-width", 80); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html new file mode 100644 index 0000000000..c3bfc67a7e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 80px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: stretch; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 80); + grid.style.justifyItems = "start"; + evaluateStyleChange(item, "after", "data-expected-width", 120); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html new file mode 100644 index 0000000000..5f1512c8c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes non-replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 80px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: start; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 120); + grid.style.justifyItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-width", 80); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html new file mode 100644 index 0000000000..2fb651162a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 80px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: normal; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 80); + grid.style.justifyItems = "start"; + evaluateStyleChange(item, "after", "data-expected-width", 120); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div> +</div> +</body> + diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html new file mode 100644 index 0000000000..6d41acfb2a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: stretch; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 200, + 'data-expected-height': 200, + }, + }); + grid.style.justifyItems = 'start'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html new file mode 100644 index 0000000000..559f04a11e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: start; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + grid.style.justifyItems = 'stretch'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 200, + 'data-expected-height': 200, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html new file mode 100644 index 0000000000..843e1b2acd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: stretch; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 200, + 'data-expected-height': 200, + }, + }); + grid.style.justifyItems = 'normal'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html new file mode 100644 index 0000000000..011eea64a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes non-replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: normal; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 100); + grid.style.justifyItems = "stretch"; + evaluateStyleChange(item, "after", "data-expected-width", 200); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img data-expected-width="100" id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html new file mode 100644 index 0000000000..eace9b956d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes no effect on replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: start; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 100); + grid.style.justifyItems = "normal"; + evaluateStyleChange(item, "after", "data-expected-width", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img data-expected-height="100" id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html new file mode 100644 index 0000000000..7b22dffe31 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes no effect on replaced items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 200px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: normal; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChange(item, "before", "data-expected-width", 100); + grid.style.justifyItems = "start"; + evaluateStyleChange(item, "after", "data-expected-width", 100); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img data-expected-height="100" id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html new file mode 100644 index 0000000000..b4b0725d8d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> +<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes replaced items to shrink."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 80px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: start; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + grid.style.justifyItems = 'stretch'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 80, + 'data-expected-height': 80, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html new file mode 100644 index 0000000000..99396bf173 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start"> +<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes replaced items to grow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 80px; + grid-template-rows: 100px; + font: 20px/1 Ahem; + background: grey; + justify-items: stretch; +} +#item { + background: blue; + justify-self: auto; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + evaluateStyleChangeMultiple('before', { + item: { + 'data-expected-width': 80, + 'data-expected-height': 80, + }, + }); + grid.style.justifyItems = 'start'; + evaluateStyleChangeMultiple('after', { + item: { + 'data-expected-width': 100, + 'data-expected-height': 100, + }, + }); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> +<div class="grid" id="grid"> + <img id="item" src="support/100x100-green.png"></img> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html new file mode 100644 index 0000000000..25ce0619db --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position"> +<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context."> +<style> +#container { + position: relative; + display: inline-grid; + grid: 100px / 50px 50px 50px; + background: grey; + align-items: baseline; +} +#item1 { + height: 20px; + background: blue; +} +#item2 { + height: 50px; + background: green; +} +#item3 { + height: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +function runTest() { + let before = { + item1: {"data-offset-y": 30 }, + item2: {"data-offset-y": 0 }, + item3: {"data-offset-y": 20 } + }; + + let after = { + item1: {"data-offset-y": 10 }, + item2: {"data-offset-y": 50 }, + item3: {"data-offset-y": 0 } + }; + + evaluateStyleChangeMultiple("before", before); + item2.style.alignSelf = "end"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="runTest()"> + <div id="container"> + <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div> + <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div> + <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html new file mode 100644 index 0000000000..c97be7ddb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position"> +<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context."> +<style> +#container { + position: relative; + display: inline-grid; + grid: 100px / 50px 50px 50px; + background: grey; + align-items: baseline; +} +#item1 { + height: 20px; + background: blue; +} +#item2 { + height: 50px; + background: green; + align-self: center; +} +#item3 { + height: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +function runTest() { + let before = { + item1: {"data-offset-y": 10 }, + item2: {"data-offset-y": 25 }, + item3: {"data-offset-y": 0 } + }; + + let after = { + item1: {"data-offset-y": 30 }, + item2: {"data-offset-y": 0 }, + item3: {"data-offset-y": 20 } + }; + + evaluateStyleChangeMultiple("before", before); + item2.style.alignSelf = "baseline"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="runTest()"> + <div id="container"> + <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div> + <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div> + <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html new file mode 100644 index 0000000000..dc7f350af5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position"> +<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context."> +<style> +#container { + position: relative; + display: inline-grid; + grid: 50px 50px 50px / 100px; + background: grey; + justify-items: baseline; +} +#container > div { writing-mode: vertical-rl; } +#item1 { + width: 20px; + background: blue; +} +#item2 { + width: 50px; + margin: 0 10px; + background: green; +} +#item3 { + width: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +function runTest() { + let before = { + item1: {"data-offset-x": 40 }, + item2: {"data-offset-x": 40 }, + item3: {"data-offset-x": 40 } + }; + + let after = { + item1: {"data-offset-x": 70 }, + item2: {"data-offset-x": 40 }, + item3: {"data-offset-x": 70 } + }; + + evaluateStyleChangeMultiple("before", before); + item2.style.justifySelf = "end"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="runTest()"> + <div id="container"> + <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div> + <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div> + <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html new file mode 100644 index 0000000000..84475fdbce --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position"> +<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context."> +<style> +#container { + position: relative; + display: inline-grid; + grid: 50px 50px 50px / 100px; + background: grey; + justify-items: baseline; +} +#container > div { writing-mode: vertical-rl; } +#item1 { + width: 20px; + background: blue; +} +#item2 { + width: 50px; + margin: 0 10px; + background: green; + justify-self: center; +} +#item3 { + width: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +function runTest() { + let before = { + item1: {"data-offset-x": 70 }, + item2: {"data-offset-x": 25 }, + item3: {"data-offset-x": 70 } + }; + + let after = { + item1: {"data-offset-x": 40 }, + item2: {"data-offset-x": 40 }, + item3: {"data-offset-x": 40 } + }; + + evaluateStyleChangeMultiple("before", before); + item2.style.justifySelf = "baseline"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="runTest()"> + <div id="container"> + <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div> + <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div> + <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html new file mode 100644 index 0000000000..919c6eefa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position"> +<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + display: inline-grid; + grid: 100px / 50px 50px 50px; + background: grey; + align-items: baseline; + font-family: Ahem; + line-height: 1; +} +#item1 { + font-size: 20px; + background: blue; +} +#item2 { + font-size: 40px; + background: green; +} +#item3 { + font-size: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + let before = { + item1: {"data-offset-y": 16 }, + item2: {"data-offset-y": 0 }, + item3: {"data-offset-y": 8 } + } + + let after = { + item1: {"data-offset-y": 8 }, + item2: {"data-offset-y": 60 }, + item3: {"data-offset-y": 0 } + } + + evaluateStyleChangeMultiple("before", before); + item2.style.alignSelf = "end"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> + <div id="container"> + <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div> + <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div> + <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html new file mode 100644 index 0000000000..21e7d0d3ab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position"> +<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + display: inline-grid; + grid: 100px / 50px 50px 50px; + background: grey; + align-items: baseline; + font-family: Ahem; + line-height: 1; +} +#item1 { + font-size: 20px; + background: blue; +} +#item2 { + font-size: 40px; + background: green; + align-self: center; +} +#item3 { + font-size: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + let before = { + item1: {"data-offset-y": 8 }, + item2: {"data-offset-y": 30 }, + item3: {"data-offset-y": 0 } + } + + let after = { + item1: {"data-offset-y": 16 }, + item2: {"data-offset-y": 0 }, + item3: {"data-offset-y": 8 } + } + + evaluateStyleChangeMultiple("before", before); + item2.style.alignSelf = "baseline"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> + <div id="container"> + <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div> + <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div> + <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html new file mode 100644 index 0000000000..136a36167a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing the value of Self-Alignment properties</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position"> +<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + display: inline-grid; + grid: 50px 50px 50px / 100px; + background: grey; + justify-items: baseline; + font-family: Ahem; + text-orientation: sideways; + line-height: 1; +} +#container > div { writing-mode: vertical-lr; } +#item1 { + font-size: 20px; + background: blue; +} +#item2 { + font-size: 40px; + background: green; +} +#item3 { + font-size: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + let before = { + item1: {"data-offset-x": 4 }, + item2: {"data-offset-x": 0 }, + item3: {"data-offset-x": 2 } + } + + let after = { + item1: {"data-offset-x": 2 }, + item2: {"data-offset-x": 60 }, + item3: {"data-offset-x": 0 } + } + + evaluateStyleChangeMultiple("before", before); + item2.style.justifySelf = "end"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> + <div id="container"> + <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div> + <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div> + <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html new file mode 100644 index 0000000000..3145fb0cc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property"> +<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position"> +<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + display: inline-grid; + grid: 50px 50px 50px / 100px; + background: grey; + justify-items: baseline; + font-family: Ahem; + text-orientation: sideways; + line-height: 1; +} +#container > div { writing-mode: vertical-lr; } +#item1 { + font-size: 20px; + background: blue; +} +#item2 { + font-size: 40px; + background: green; + justify-self: center; +} +#item3 { + font-size: 30px; + background: red; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script src="support/style-change.js"></script> +<script> +setup({ explicit_done: true }); +function runTest() { + let before = { + item1: {"data-offset-x": 2 }, + item2: {"data-offset-x": 30 }, + item3: {"data-offset-x": 0 } + }; + + let after = { + item1: {"data-offset-x": 4 }, + item2: {"data-offset-x": 0 }, + item3: {"data-offset-x": 2 } + }; + + evaluateStyleChangeMultiple("before", before); + item2.style.justifySelf = "baseline"; + evaluateStyleChangeMultiple("after", after); + done(); +} +</script> +<body onload="document.fonts.ready.then(() => { runTest(); })"> + <div id="container"> + <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div> + <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div> + <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div> + </div> + <div id="log"></div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html new file mode 100644 index 0000000000..ef8c0e4d34 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html @@ -0,0 +1,218 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: Grid container baseline</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> +<link rel="help" href="https://crbug.com/234191"> +<link rel="match" href="references/grid-baseline-001-ref.html"> +<meta name="assert" content="Check the first baselines of a grid container."/> + +<style> +body { + margin: 0; +} +.inline-grid { + display: inline-grid; + background-color: lightgrey; + margin-top: 5px; + grid-auto-flow: column; +} +.grid { + display: grid; + background-color: grey; + margin-top: 10px; + grid-auto-flow: column; +} +.empty { + border-style: solid; + border-width: 5px 0px 10px; + padding: 2px 0px 4px; + margin: 10px 0px 20px; +} +.column { + grid-auto-flow: row; +} +.firstRowFirstColumn { + grid-column: 1; + grid-row: 1; +} +.secondRowFirstColumn { + grid-column: 1; + grid-row: 2; +} +</style> + +<body style="position: relative"> + +<!-- If any of the grid items whose areas intersect the grid container's first +row/column participate in baseline alignment, the grid container's baseline is +the baseline of those grid items. --> +<div> +before text +<div class="inline-grid" style="grid-auto-rows: 50px;"> + <div style="align-self: end">below</div> + <div style="align-self: baseline; margin-top: 15px">baseline</div> + <div style="align-self: start">above</div> +</div> +after text +</div> + +<!-- This grid has a baseline item, it's orthogonal but it still participates +in baseline alignment. --> +<div> +before text +<div class="inline-grid" style="grid-auto-rows: 40px"> + <div style="align-self: end">below</div> + <div style="align-self: baseline; margin-top: 20px; writing-mode: vertical-rl"></div> + <div style="align-self: start">above</div> +</div> +after text +</div> + +<div> +before text +<div class="inline-grid"> + <h2>h2 baseline</h2> + <div>above</div> +</div> +after text +</div> + +<div> +before text +<div class="inline-grid"> + <div>baseline</div> + <h2>h2 below</h2> +</div> +after text +</div> + +<!-- If the first grid item has an orthogonal baseline, use the synthesized +baseline (bottom of the content box of the first item). --> +<div> +should align with the middle +<div class="inline-grid" style="width: 40px; height: 40px"> + <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div> +</div> +of the grey box +</div> + +<!-- If there are no griditems, align to the bottom of the margin box. --> +<div> +should align below the bottom +<div class="empty inline-grid" style="width: 30px; height: 30px"> +</div> +of the black line +</div> + +<div> +should align with the bottom +<div class="inline-grid" style="width: 40px; height: 40px;"> + <div style="width: 20px; height: 20px; border: 5px solid black; background: red;"></div> +</div> +of the red box +</div> + +<!-- column-axis test cases. --> +<div> +before text +<div class="inline-grid column"> + <div>baseline</div> + <div>below</div> +</div> +after text +</div> + +<!-- If the first grid item has an orthogonal baseline, use the synthesized +baseline (bottom of the border box of the first item). --> +<div> +should align with the middle +<div class="inline-grid column" style="width: 40px; height: 40px;"> + <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div> + <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div> +</div> +of the grey box +</div> + +<!-- More tests on the right side of the page. --> +<div style="position: absolute; top: 0; left: 400px; width: 360px"> + +<!-- Ignore absolutely positioned grid items. --> +<div> +before text +<div class="inline-grid"> + <div style="position: absolute">absolute</div> + <div style="margin-top: 30px">baseline</div> +</div> +after text +</div> + +<!-- We don't participate in baseline alignment if there's an auto margin. --> +<div> +before text +<div class="inline-grid" style="grid-auto-rows: 40px;"> + <div>baseline</div> + <div style="align-self: baseline; margin-top: auto">below</div> +</div> +after text +</div> + +<div> +before text +<div style="display: inline-block"> +<div class="inline-grid" style="height: 40px;"> + <div>above</div> + <div style="align-self: baseline; margin-top: 10px">baseline</div> + <div>above</div> +</div> +after +</div> +text +</div> + +<!-- The spec is a little unclear what should happen here. For now, +align to the last line box. --> +<div> + before text + <div style="display: inline-block"> + <div class="grid" style="height: 30px;"> + baseline + </div> + </div> + after text +</div> + +<table style="background-color: lightgrey; margin-top: 5px"> +<tr style="height: 50px"> + <td style="vertical-align: bottom">bottom</td> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: baseline"><div class="grid"> + <h2>h2 baseline</h2> + <div>above</div> + </div></td> +</table> + +<!-- If a box contributing a baseline has a scrollbar, the box must be treated +as being in its initial scroll position when computing the baseline. --> +<div> +before text +<div id="grid-with-scrollbar" class="inline-grid" style="height: 65px; width: 150px"> + <div id="griditem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;"> + The baseline is based on<br> + the non-scrolled position;<br> + this won't line up. + </div> +</div> +after text +</div> + +</div> + +<script> +document.getElementById("griditem-with-scrollbar").scrollTop = 999; +document.getElementById("grid-with-scrollbar").style.width = "auto"; +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html new file mode 100644 index 0000000000..b52eeff27e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Grid: Grid container baseline</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> +<link rel="help" href="https://crbug.com/234191"> +<link rel="match" href="references/grid-baseline-002-ref.html"> +<meta name="assert" content="Check that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders."/> + +<link href="/css/support/grid.css" rel="stylesheet"> +<style> +.inline-block { display: inline-block; } +.grid, .inline-grid { + background-color: lightgrey; + grid-auto-flow: column; +} +.border { border: 11px solid pink; } +.padding { padding: 13px; } +.margin { margin: 8px 0; } +</style> +<div> +before text +<div class="border" style="display: inline-block; background-color: lightgrey"> +<div class="grid" style="height: 30px; margin-top: 7px; padding-top: 10px;"> + baseline +</div> +</div> +after text +</div> + +<div> +Should align +<div class="inline-block border"> + <div class="grid padding" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink"> + <div style="background-color: lightgrey"></div> + </div> +</div> +with the +<div class="inline-block margin"> + <div class="grid border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink"> + <div style="background-color: lightgrey"></div> + </div> +</div> +bottom of +<div class="inline-block padding" style="padding-left: 0; padding-right: 0"> + <div class="grid margin border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink"> + <div style="background-color: lightgrey;"></div> + </div> +</div> +the grey box. +</div> + +<div> +Should align with the +<div class="inline-block"> + <div class="grid" style="background-color: white"> + <div class="border padding margin" style="background-color: lightgrey;"></div> + </div> +</div> +bottom of the pink box. +</div> + +<div> +Should align 8px +<div class="inline-grid margin border" style="grid-template-columns: 30px; grid-template-rows: 30px;"></div> +below the bottom +<div class="inline-grid margin border padding"></div> +of the pink box. +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html new file mode 100644 index 0000000000..bd411abed9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS Grid: Grid container baseline</title> +<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline"> +<link rel="help" href="https://crbug.com/234191"> +<link rel="match" href="references/grid-baseline-003-ref.html"> +<meta name="assert" content="Check that grid container baseline should be synthesized from the border edges when it has no baseline."/> + +<link href="/css/support/grid.css" rel="stylesheet"> +<style> +.inline-block { display: inline-block; } +.grid, .inline-grid { + background-color: lightgrey; + grid-auto-flow: column; +} +.border { border: 11px solid pink; } +.padding { padding: 13px; } +.margin { margin: 8px 0; } +</style> + +<div> +Should align with the bottom +<div class="inline-block border margin padding" style="background-color: pink"> + <div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink"> + <div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div> + </div> +</div> +of the horizontal scrollbar. +</div> + +<div> +Should align 10px below the +<div class="inline-block" style="background-color: pink"> + <div class="grid" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink"> + <div style="overflow: scroll; padding-bottom: 10px; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div> + </div> +</div> +horizontal scrollbar, if one is visible. +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html new file mode 100644 index 0000000000..cd565a10ad --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html @@ -0,0 +1,222 @@ +<!DOCTYPE html> +<title>CSS Grid: Grid container baseline</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order"> +<link rel="help" href="https://crbug.com/234191"> +<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/> + +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/alignment.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { margin: 0; } +.container { + position: relative; + font: 10px/1 Ahem; + border: 5px solid; + width: 470px; +} +.grid { + display: inline-grid; + grid-template-columns: 50px 50px; + width: 150px; + background-color: transparent; + position: relative; +} +.twoRows { grid-template-rows: 50px 50px; } +.threeRows { grid-template-rows: 50px 50px 50px; } +.empty { + border-color: black; + border-style: solid; + margin: 15px 0px 30px; + border-width: 5px 0px 10px; + padding: 10px 0px 20px; +} +.item { + height: 25px; + border-color: gray; + border-style: solid; +} +.grid.grid > * { + background: silver; + background: rgba(0,0,0,0.3); +} +.target.target { + background: blue; + border-color: navy; +} +.style1 { + border-width: 5px 0px 10px; + padding: 10px 0px 20px; +} +.style2 { + border-width: 10px 0px 5px; + padding: 20px 0px 10px; + margin-top: 10px; +} +.style3 { + border-width: 10px 0px 20px; + padding: 5px 0px 10px; + margin-top: 20px; +} + +.bothRowFirstColumn, .secondRowSecondColumn { + margin-right: 10px; + margin-top: 10px; + margin-bottom: 10px; + background-color: pink; +} +.firstRowBothColumn, .secondRowBothColumn { + margin-top: 15px; + margin-bottom: 15px; + background-color: green; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid, container'); })"> +<div id="log"></div> +<p> + The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br> + Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly. +</p> + +<p> + This case shows 3 items located along the first row and in different columns. + The grid baseline is computed using the one located at first column (blue item) + regardless of source order. +</p> +<div class="container" data-expected-width="480" data-expected-height="120"> + <div class="grid" data-offset-x="0" data-offset-y="20"> + <div class="item style1 firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div> + <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div> + <div class="item style3 firstRowThirdColumn" data-offset-x="100" data-offset-y="20"></div> + </div> + <div class="grid" data-offset-x="160" data-offset-y="10"> + <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div> + <div class="item style2 firstRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div> + <div class="item style3 firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div> + </div> + <div class="grid" data-offset-x="320" data-offset-y="0"> + <div class="item style1 firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div> + <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div> + <div class="item style3 firstRowFirstColumn target" data-offset-x="0" data-offset-y="20"></div> + </div> +</div> + +<p> + This case shows 3 items located along the first row and in different columns. + The baseline-aligned item (blue) always determines the grid baseline. +</p> +<div class="container" data-expected-width="480" data-expected-height="120"> + <div class="grid" data-offset-x="0" data-offset-y="0"> + <div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div> + <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div> + <div class="item style3 firstRowThirdColumn alignSelfBaseline target" data-offset-x="100" data-offset-y="20"></div> + </div> + <div class="grid" data-offset-x="160" data-offset-y="0"> + <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div> + <div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div> + <div class="item style3 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50" data-offset-y="20"></div> + </div> + <div class="grid" data-offset-x="320" data-offset-y="20"> + <div class="item style1 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50" data-offset-y="0"></div> + <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div> + <div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div> + </div> +</div> + +<p> + This case shows 3 items' areas intersecting the first row and first column, + but none of them participate in baseline alignment in the first row, + so the dom order must be used to determine each grid's baseline. +</p> +<div class="container" data-expected-width="480" data-expected-height="165"> + <div class="grid twoRows" data-offset-x="0" data-offset-y="40"> + <div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div> + <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div> + <div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div> + </div> + <div class="grid twoRows" data-offset-x="160" data-offset-y="0"> + <div class="bothRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div> + <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div> + </div> + <div class="grid twoRows" data-offset-x="320" data-offset-y="55"> + <div class="firstRowBothColumn target" data-offset-x="0" data-offset-y="15"></div> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div> + <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div> + </div> +</div> + +<p> + This case shows 3 items' areas intersecting the first row and first column, + but one of the items participates in baseline alignment in the first row, + so such item is used to determine the grid's baseline + instead of using the dom order. +</p> +<div class="container" data-expected-width="480" data-expected-height="165"> + <div class="grid twoRows" data-offset-x="0" data-offset-y="55"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div> + <div class="firstRowBothColumn alignSelfBaseline target" style="width: 100px; height: 20px;" data-offset-x="0" data-offset-y="15"></div> + <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div> + </div> + <div class="grid twoRows" data-offset-x="160" data-offset-y="40"> + <div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div> + <div class="firstRowFirstColumn alignSelfBaseline target" style="width: 50px; height: 50px;" data-offset-x="0" data-offset-y="0"></div> + <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div> + </div> + <div class="grid twoRows" data-offset-x="320" data-offset-y="0"> + <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div> + <div class="bothRowFirstColumn alignSelfBaseline target" style="width: 40px; height: 80px;" data-offset-x="0" data-offset-y="10"></div> + </div> +</div> + +<p> + This case shows one of the grids with no items, + hence its baseline must be synthesized from its margin box. +</p> +<div class="container" data-expected-width="480" data-expected-height="250"> + <div class="grid twoRows" data-offset-x="0" data-offset-y="140"> + <div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div> + <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div> + <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div> + </div> + <div class="grid twoRows" data-offset-x="160" data-offset-y="100"> + <div class="bothRowFirstColumn target" data-offset-x="0" data-offset-y="10"></div> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div> + <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div> + </div> + <div class="grid empty twoRows target" data-offset-x="320" data-offset-y="15"> + </div> +</div> + +<p> + This case shows two of the grids with no items in their first row, + hence the items in the second row are evaluated. +</p> +<div class="container" data-expected-width="480" data-expected-height="250"> + <div id=first class="grid twoRows" data-offset-x="0" data-offset-y="80"> + <div class="firstRowFirstColumn target" data-offset-x="0" data-offset-y="0"></div> + <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div> + <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div> + </div> + <div id=second class="grid threeRows" data-offset-x="160" data-offset-y="55"> + <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="100"></div> + <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="65"></div> + <div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first" data-offset-x="50" data-offset-y="60"></div> + </div> + <div class="grid empty threeRows" data-offset-x="320" data-offset-y="15"> + <div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div> + <div class="secondRowFirstColumn target" data-offset-x="0" data-offset-y="60"></div> + <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html new file mode 100644 index 0000000000..e32031779f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html @@ -0,0 +1,140 @@ +<!DOCTYPE html> +<title> + Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items +</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values"> +<link rel="match" href="references/grid-baseline-align-001-ref.html"> + +<style> + @import "/fonts/ahem.css"; + .grid { + border: solid silver; + margin: 1em 2px; + font: 20px/1 Ahem; + + display: inline-grid; + vertical-align: top; + grid-template-columns: repeat(4, max-content); + } + .grid > div { + border: black 10px; + border-style: solid none; + color: orange; + } + div + div { + font-size: 2em; + } + div + div + div { + font-size: 50%; + } + .self > div { + align-self: baseline; + } + .content > div { + align-content: baseline; + } + div.stretch { + align-self: stretch; + } + + .ref { + position: relative; + width: 80px; + height: 96px; + } + .ref > div { + position: absolute; + } + .ref1 { top: 16px; } + .ref2 { left: 20px; } + .ref3 { top: 24px; + left: 60px; } + .ref4 { right: 0px; + top: 0px; + bottom: 0px; + width: 10px; } + + .ref.content > div:not(.stripe) { + border-color: transparent; + } + .stripe { + width: 80px; + height: 76px; + } +</style> + +<p>Test passes if each pair of boxes is identical.</p> + +<div class="grid self"> + <div> + p<br> + p<br> + p + </div> + <div> + p + </div> + <div> + p + </div> + <div class="stretch"> + + </div> +</div> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<br> + +<div class="grid content"> + <div> + p<br> + p<br> + p + </div> + <div> + p + </div> + <div> + p + </div> + <div class="stretch"> + + </div> +</div> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html new file mode 100644 index 0000000000..b6b04144ed --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions +</title> +<meta name="assert" content=" + If baseline alignment is specified on a grid item whose size in that axis + depends on the size of an intrinsically-sized track (whose size is therefore + dependent on both the item’s size and baseline alignment, creating a cyclic + dependency), that item does not participate in baseline alignment, and + instead uses its fallback alignment as if that were originally specified. +"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align"> +<link rel="match" href="references/grid-baseline-align-cycles-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + border: solid silver; + margin: 1em 0.25em; + display: inline-grid; + grid-template-columns: repeat(2, auto); + font: 20px/1 Ahem; + height: 5em; + } + .grid > div { + border: 1em aqua; + border-style: solid none; + } + .index { + padding: 1em 0; + } + .percent { + height: 20%; + } + .orthogonal { + height: 20%; + writing-mode: vertical-rl; + } + + .self > div { + align-self: baseline; + } + .content > div { + align-content: baseline; + } + .self.ref > div { + align-self: start; + } + .content.ref > div { + align-content: start; + } +</style> + +<p>Test passes if the upper set of boxes is identical to the lower set. + +<div class="grid self"> + <div class="index"> + X + </div> + <div class="percent orthogonal"> + X + </div> +</div> + +<div class="grid self"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<div class="grid content"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid content"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<br> + +<div class="grid self ref"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid self ref"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<div class="grid content ref"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid content ref"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html new file mode 100644 index 0000000000..171fcd3fcd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<title> + Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items +</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values"> +<link rel="match" href="references/grid-baseline-justify-001-ref.html"> + +<style> + @import "/fonts/ahem.css"; + .grid { + border: solid silver; + margin: 1em 2px; + font: 20px/1 Ahem; + + display: inline-grid; + vertical-align: top; + grid-template-rows: repeat(4, max-content); + } + .grid > div { + border: black 10px; + border-style: none solid; + color: orange; + writing-mode: vertical-rl; + } + div + div { + font-size: 2em; + } + div + div + div { + font-size: 50%; + } + .self > div { + justify-self: baseline; + } + .content > div { + align-content: baseline; + } + div.stretch { + justify-self: stretch; + } + + .ref { + position: relative; + width: 96px; + height: 80px; + } + .ref > div { + position: absolute; + } + .ref1 { right: 16px; } + .ref2 { top: 20px; + right: 0px; } + .ref3 { right: 24px; + top: 60px; } + .ref4 { bottom: 0px; + right: 0px; + left: 0px; + height: 10px; } + + .ref.content > div:not(.stripe) { + border-color: transparent; + } + .stripe { + width: 76px; + height: 80px; + } +</style> + +<p>Test passes if each pair of boxes is identical.</p> + +<div class="grid self"> + <div> + p<br> + p<br> + p + </div> + <div> + p + </div> + <div> + p + </div> + <div class="stretch"> + + </div> +</div> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<br> + +<div class="grid content"> + <div> + p<br> + p<br> + p + </div> + <div> + p + </div> + <div> + p + </div> + <div class="stretch"> + + </div> +</div> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html new file mode 100644 index 0000000000..e3a880f66e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-rows: 40% 60%; + height: 500px; + width: 300px; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + background: green; + width: 25px; + height: 50px; + } + #item2 { + background: blue; + width: 25px; + height: 100px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-y", "75"); + item2.setAttribute("data-offset-y", "300"); + checkLayout('#grid', false); + + grid.style.height = "300px"; + + item1.setAttribute("data-offset-y", "35"); + item2.setAttribute("data-offset-y", "160"); + + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html new file mode 100644 index 0000000000..7390548371 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-rows: 40% 60%; + height: 500px; + width: 300px; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + background: green; + width: 25px; + height: 50px; + } + #item2 { + background: blue; + width: 25px; + height: 100px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-y", "75"); + item2.setAttribute("data-offset-y", "300"); + checkLayout('#grid', false); + + item1.style.height = "100px"; + + item1.setAttribute("data-offset-y", "50"); + item2.setAttribute("data-offset-y", "300"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html new file mode 100644 index 0000000000..f451ebeae7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid items's height changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 300px; + grid-template-rows: 40% 60%; + height: 500px; + width: 300px; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + background: green; + width: 25px; + height: 50px; + } + #item2 { + background: blue; + width: 25px; + height: 100px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-y", "75"); + item2.setAttribute("data-offset-y", "300"); + checkLayout('#grid', false); + + item1.style.height = "100px"; + + item1.setAttribute("data-offset-y", "50"); + item2.setAttribute("data-offset-y", "300"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html new file mode 100644 index 0000000000..4d0a092e00 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 300px; + grid-template-rows: 40% 60%; + height: 500px; + width: min-content; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + background: green; + width: 25px; + height: 50px; + } + #item2 { + background: blue; + width: 25px; + height: 100px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-y", "75"); + item2.setAttribute("data-offset-y", "300"); + checkLayout('#grid', false); + + grid.style.height = "300px"; + + item1.setAttribute("data-offset-y", "35"); + item2.setAttribute("data-offset-y", "160"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html new file mode 100644 index 0000000000..9231779e2a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-rows: 40% 60%; + height: 500px; + width: 300px; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + font: 20px/1 Ahem; + color: green; + } + #item2 { + font: 10px/1 Ahem; + color: blue; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1">XXXXX</div> + <div id="item2">XXXXX</div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-y", "90"); + item2.setAttribute("data-offset-y", "345"); + checkLayout('#grid', false); + + item2.style.fontSize = "40px"; + + item1.setAttribute("data-offset-y", "90"); + item2.setAttribute("data-offset-y", "330"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html new file mode 100644 index 0000000000..ccb2dfd5dc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + position: relative; + background: grey; + font: 10px/1 Ahem; + grid-template-columns: 100px; + grid-template-rows: 40% 60%; + height: 500px; + width: 300px; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + color: green; + } + #item2 { + color: blue; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1">XXXXX</div> + <div id="item2">XXXXX</div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-y", "95"); + item2.setAttribute("data-offset-y", "345"); + checkLayout('#grid', false); + + grid.style.fontSize = "40px"; + + item1.setAttribute("data-offset-y", "80"); + item2.setAttribute("data-offset-y", "330"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html new file mode 100644 index 0000000000..da51ff321c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-rows: 40% 60%; + height: 500px; + width: 200px; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + background: green; + width: 25px; + height: 50px; + } + #item2 { + background: blue; + width: 25px; + height: 100px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-y", "75"); + item2.setAttribute("data-offset-y", "300"); + checkLayout('#grid', false); + + grid.style.height = "300px"; + + item1.setAttribute("data-offset-y", "35"); + item2.setAttribute("data-offset-y", "160"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html new file mode 100644 index 0000000000..9b489ac119 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<link rel="match" href="../reference/grid-block-axis-alignment-auto-margins-008-ref.html"> +<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed after the grid's intrinsic size is determined."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: auto; + grid-template-rows: 40% 60%; + height: 50vh; + width: auto; + } + #grid div { + margin: auto 0px auto 0px; + } + #item1 { + font: 20px/1 Ahem; + color: green; + } + #item2 { + font: 40px/1 Ahem; + color: blue; + } +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div id="item1">XXX</div> + <div id="item2">XXXXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html new file mode 100644 index 0000000000..9216ed370c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start"> +<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with its alignment container's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html new file mode 100644 index 0000000000..4a4a397ffa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end"> +<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with its alignment container's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html new file mode 100644 index 0000000000..c1f9b16ef0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values"> +<meta name="assert" content="Absolute positioned grid items with 'left' value for align-self are flushed with its alignment container's 'left' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: left; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: left; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: left; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br></br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html new file mode 100644 index 0000000000..d52ed74f6f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values"> +<meta name="assert" content="Absolute positioned grid items with 'right' value for align-self are flushed with its alignment container's 'right' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: right; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: right; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: right; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br></br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html new file mode 100644 index 0000000000..7c903389f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center"> +<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: center; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: center; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="70" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="60" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="70" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="60" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br></br> + +<div class="grid verticalLR"> + <div data-offset-x="70" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="195" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="170" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="30" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html new file mode 100644 index 0000000000..b1f2136a57 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start"> +<meta name="assert" content="The 'flex-start' value of align-self behaves like 'start' for absolute positioned grid items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: flex-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: flex-start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: flex-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: flex-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br></br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html new file mode 100644 index 0000000000..eeeadeff45 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-end"> +<meta name="assert" content="The 'flex-end' value of align-self behaves like 'end' for absolute positioned grid items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: flex-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: flex-end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: flex-end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: flex-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br></br> + +<div class="grid verticalLR"> + <div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html new file mode 100644 index 0000000000..1329501015 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: self-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: self-start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br></br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html new file mode 100644 index 0000000000..60a135dfee --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end"> +<meta name="assert" content="Absolute positioned grid items with 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: self-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: self-end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html new file mode 100644 index 0000000000..eb01d61bc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: self-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: self-start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div> + <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html new file mode 100644 index 0000000000..ad3beb8ab1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: self-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: self-end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html new file mode 100644 index 0000000000..57db133a7d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start"> +<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; + align-content: center; +} +.grid.LTR, .grid.RTL { height: 450px; } +.grid.verticalLR, .grid.verticalRL { width: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: auto / 1; + grid-column: 1 / 2; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: start; +} +.secondRowFirstColumn { + grid-row: 2 / auto; + grid-column: 1 / 2; + align-self: start; +} +.secondRowSecondColumn { + grid-row: auto / auto; + grid-column: 2 / 3; + align-self: start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="80" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="250" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html new file mode 100644 index 0000000000..9854540a6f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end"> +<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; + align-content: center; +} +.grid.LTR, .grid.RTL { height: 450px; } +.grid.verticalLR, .grid.verticalRL { width: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: auto / 1; + grid-column: 1 / 2; + align-self: end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; +} +.secondRowFirstColumn { + grid-row: 2 / auto; + grid-column: 1 / 2; + align-self: end; +} +.secondRowSecondColumn { + grid-row: auto / auto; + grid-column: 2 / 3; + align-self: end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="0" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="190" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="80" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="350" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html new file mode 100644 index 0000000000..2f0cd54c42 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center"> +<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; + align-content: center; +} +.grid.LTR, .grid.RTL { height: 450px; } +.grid.verticalLR, .grid.verticalRL { width: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: auto / 1; + grid-column: 1 / 2; + align-self: center; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / auto; + grid-column: 1 / 2; + align-self: center; +} +.secondRowSecondColumn { + grid-row: auto / auto; + grid-column: 2 / 3; + align-self: center; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="0" data-offset-y="45" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="190" data-offset-y="45" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="80" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="345" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="395" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="260" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="95" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html new file mode 100644 index 0000000000..d2bd432d9d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; + align-content: center; +} +.grid.LTR, .grid.RTL { height: 450px; } +.grid.verticalLR, .grid.verticalRL { width: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: auto / 1; + grid-column: 1 / 2; + align-self: self-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: self-start; +} +.secondRowFirstColumn { + grid-row: 2 / auto; + grid-column: 1 / 2; + align-self: self-start; +} +.secondRowSecondColumn { + grid-row: auto / auto; + grid-column: 2 / 3; + align-self: self-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="80" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div> + <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="350" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div> + <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html new file mode 100644 index 0000000000..53284b4678 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; + align-content: center; +} +.grid.LTR, .grid.RTL { height: 450px; } +.grid.verticalLR, .grid.verticalRL { width: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: auto / 1; + grid-column: 1 / 2; + align-self: self-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: self-end; +} +.secondRowFirstColumn { + grid-row: 2 / auto; + grid-column: 1 / 2; + align-self: self-end; +} +.secondRowSecondColumn { + grid-row: auto / auto; + grid-column: 2 / 3; + align-self: self-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="0" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="190" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="80" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="250" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div> + <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div> + <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html new file mode 100644 index 0000000000..f20ac0d02c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start"> +<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: baseline; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: baseline; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: baseline; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: baseline; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html new file mode 100644 index 0000000000..975360f4c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Sticky positioned grid items are aligned correcly."> +<style> +.container { + border: solid 1px; + overflow: auto; + height: 500px; +} +.grid { + position: relative; + float: left; + display: grid; + grid-template-columns: 75px 75px 75px 75px; + grid-template-rows: 100px 100px 100px 300px; + background: grey; + height: 400px; + margin-right: 20px; +} +.sticky { + position: -webkit-sticky; + position: sticky; + width: 20px; + height: 20px; + background-color: #cae8ca; +} +.item1 { + top: 0px; + grid-column: 1; + grid-row: 1; +} +.item2 { + top: 0px; + grid-column: 2; + grid-row: 2; +} +.item3 { + top: 0px; + grid-column: 3; + grid-row: 3; +} +.item4 { + grid-column: 4; + grid-row: 4; + background: lightgrey; +} +.scroll { overflow: auto; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid')"> +<div class="container"> + <div style="height:30px"></div> + <div class="grid"> + <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div> + <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div> + <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div> + <div class="item4"></div> + </div> + <div class="grid scroll"> + <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div> + <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div> + <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div> + <div class="item4"></div> + </div> + <div style="height:2000px"></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html new file mode 100644 index 0000000000..357cbe13e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required."> +<style> +.container { + border: solid 1px; + overflow: auto; + height: 500px; +} +.grid { + position: relative; + float: left; + display: grid; + grid-template-columns: 75px 75px 75px 75px; + grid-template-rows: 100px 100px 100px 300px; + background: grey; + height: 400px; + margin-right: 20px; +} +.sticky { + position: -webkit-sticky; + position: sticky; + width: 20px; + height: 20px; + background-color: #cae8ca; +} +.item1 { + top: 40px; + grid-column: 1; + grid-row: 1; +} +.item2 { + top: 100px; + grid-column: 2; + grid-row: 2; +} +.item3 { + top: 290px; + grid-column: 3; + grid-row: 3; +} +.item4 { + grid-column: 4; + grid-row: 4; + background: lightgrey; +} +.scroll { overflow: auto; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid')"> +<div class="container"> + <div style="height:30px"></div> + <div class="grid"> + <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="10"></div> + <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div> + <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div> + <div class="item4"></div> + </div> + <div class="grid scroll"> + <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="40"></div> + <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div> + <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="290"></div> + <div class="item4"></div> + </div> + <div style="height:2000px"></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html new file mode 100644 index 0000000000..0d3a556f40 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { position: relative; } +.grid { + position: relative; + text-orientation: sideways; + grid: 200px 100px / 100px 200px; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.width25 { width: 25px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 25px; } +.paddingRight { padding-right: 25px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>Horizontal grid and verticalRL item</pre> + +<div class="grid width300 alignItemsBaseline"> + <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 height25"></div> +</div> + +<pre>Horizontal grid and verticalLR item</pre> + +<div class="grid width300 alignItemsBaseline"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 height25"></div> +</div> + +<pre>VerticalLR grid and Horizontal item</pre> + +<div class="grid alignItemsBaseline verticalLR"> + <div class="firstRowFirstColumn horizontalTB" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> + +<pre>VerticalRL grid and Horizontal item</pre> + +<div class="grid alignItemsBaseline verticalRL"> + <div class="firstRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html new file mode 100644 index 0000000000..c20489e9a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + text-orientation: sideways; + grid: 200px 100px / 100px 200px; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.width25 { width: 25px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 20px; } +.paddingRight { padding-right: 20px; } + +.fixedHeight { height: 125px; } +.fixedWidth { width: 125px; } + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>Horizontal grid and item with fixed height</pre> + +<div class="grid width300 alignItemsBaseline"> + <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> + <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 height25"></div> +</div> + +<pre>VerticalLR grid and item with fixed width</pre> + +<div class="grid alignItemsBaseline verticalLR"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> + +<pre>VerticalRL grid and item with fixed width</pre> + +<div class="grid alignItemsBaseline verticalRL"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="175" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html new file mode 100644 index 0000000000..10a9adb9ff --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + text-orientation: sideways; + grid: 200px 100px / 100px 200px; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.height75 { height: 75px; } +.width25 { width: 25px; } +.width75 { width: 75px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 20px; } +.paddingRight { padding-right: 20px; } + +.relativeHeight { height: 50%; } +.relativeWidth { width: 50%; } + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>Horizontal grid and item with relative height</pre> + +<div class="grid width300 alignItemsBaseline"> + <div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 height25"></div> +</div> + +<pre>VerticalLR grid and item with relative width</pre> + +<div class="grid alignItemsBaseline verticalLR"> + <div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> + +<pre>VerticalRL grid and item with rlative width</pre> + +<div class="grid alignItemsBaseline verticalRL"> + <div class="firstRowFirstColumn relativeWidth" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html new file mode 100644 index 0000000000..8c6d7abe4e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline."> +<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + text-orientation: sideways; + grid: auto auto / 100px 200px; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.width25 { width: 25px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 20px; } +.paddingRight { padding-right: 20px; } + +.fixedHeight { height: 125px; } +.fixedWidth { width: 125px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>Horizontal grid and item with fixed height</pre> + +<div class="grid width300 alignItemsBaseline"> + <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> + <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 height25"></div> +</div> + +<pre>VerticalLR grid and item with fixed width</pre> + +<div class="grid alignItemsBaseline verticalLR"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> + +<pre>VerticalRL grid and item with fixed width</pre> + +<div class="grid alignItemsBaseline verticalRL"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="85" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowAutoColumnSpanning2 width25"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html new file mode 100644 index 0000000000..6207ce5b88 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { overflow: scroll; } +.container { position: relative; } +.grid { + position: relative; + grid-template-rows: 150px; + text-orientation: sideways; + font: 20px/1 Ahem; +} +.width100 { width: 100px; } +.width200 { width: 200px; } +.width300 { width: 300px; } +.bigFont { font-size: 50px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>verticalLR grid and parallel items</pre> + +<div class="grid width100 alignItemsBaseline"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="120">É É ÉÉ</div> + <div class="firstRowSecondColumn verticalLR bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div> +</div> + +<pre>verticalRL grid and parallel items</pre> + +<div class="grid width100 alignItemsBaseline"> + <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="120">É É ÉÉ</div> + <div class="firstRowSecondColumn verticalRL bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html new file mode 100644 index 0000000000..51c7b18e94 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: Ignore auto-margins in the track sizing algorithm</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"/> +<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"/> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=776581"/> +<link rel="match" href="../reference/grid-container-auto-margins-scrollbars-001-ref.html"> +<meta name="assert" content="This test ensures that the grid logic ignores any 'auto' margin during the track sizing algorithm. Previously resolved auto-margins should not affect the track sizing computation."/> +<style> +body { + display: grid; + grid-template-columns: auto; + grid-template-rows: 1fr auto; + height: 100vh; +} +.item1 { + margin: 0px auto; +} +.item2 { + background-color: cyan; + height: 50px; +} +</style> +<div class="item1">item1</div> +<div class="item2">item2</div> +<script> + document.body.style = "overflow: hidden;"; + document.body.offsetLeft; + document.body.style = "overflow: auto;"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html new file mode 100644 index 0000000000..aa6e77871a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid container baseline</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines"> +<meta name="assert" content="Grid container baseline should match the element with 'align-self: baseline' in the first row, even if it's an orthogonal element."> +<style> +.wrapper { + position: relative; + margin: 10px; + line-height: 0; +} + +.grid { + display: inline-grid; + grid-auto-flow: column; + background: grey; +} + +.i1 { + width: 150px; + height: 100px; + background: magenta; +} + +.i2 { + align-self: baseline; + width: 75px; + height: 50px; + background: cyan; +} + +.i3 { + width: 100px; + height: 75px; + background: yellow; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.wrapper')"> + +<div class="wrapper" style="writing-mode: horizontal-tb;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" data-offset-y="0"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> +</div> + +<div class="wrapper" style="writing-mode: horizontal-tb;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" style="writing-mode: vertical-lr;" data-offset-y="0"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> +</div> + +<div class="wrapper" style="writing-mode: horizontal-tb;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" style="writing-mode: vertical-rl;" data-offset-y="0"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" data-offset-x="0"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" data-offset-x="0"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" data-offset-x="75"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" data-offset-x="75"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> +</div> + +<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;"> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> + <div class="grid"> + <div class="i1"></div> + <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div> + <div class="i3"></div> + </div> + <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html new file mode 100644 index 0000000000..4c47ffdda9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html @@ -0,0 +1,379 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items in just one cell." /> + +<style> +.grid { + grid-template-columns: 200px 100px; + grid-template-rows: 100px 50px; + width: 500px; + height: 350px; + position: relative; + font: 10px/1 Ahem; +} + +.gridGaps { + grid-gap: 10px 20px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> +<div class="grid contentSpaceBetween itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> +<div class="grid contentSpaceBetween itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p> +<div class="grid contentSpaceAround itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> +<div class="grid contentSpaceAround itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p> +<div class="grid contentSpaceEvenly itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> +<div class="grid contentSpaceEvenly itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p> +<div class="grid gridGaps contentSpaceBetween itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p> +<div class="grid gridGaps contentSpaceBetween itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p> +<div class="grid gridGaps contentSpaceAround itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p> +<div class="grid gridGaps contentSpaceAround itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p> +<div class="grid gridGaps contentSpaceEvenly itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p> +<div class="grid gridGaps contentSpaceEvenly itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<!-- RTL direction. --> + +<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> +<div class="grid directionRTL contentSpaceBetween itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> +<div class="grid directionRTL contentSpaceBetween itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p> +<div class="grid directionRTL contentSpaceAround itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> +<div class="grid directionRTL contentSpaceAround itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p> +<div class="grid directionRTL contentSpaceEvenly itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> +<div class="grid directionRTL contentSpaceEvenly itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p> +<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p> +<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p> +<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p> +<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p> +<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div> +</div> + +<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p> +<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd"> + <!-- Dummy DIVs to help checking the result visually. --> + <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> + <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div> + + <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> + <div class="firstRowSecondColumn" data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> + <div class="secondRowSecondColumn" data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html new file mode 100644 index 0000000000..68835c0461 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html @@ -0,0 +1,561 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=602670"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items spanning more than one track." /> + +<style> +body { + margin: 0px; +} + +.grid { + position: relative; +} +.spanningTwo { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + grid-template-areas: "a a b" + "c d b"; + width: 300px; + height: 200px; +} +.spanningThree { + grid-auto-columns: 50px; + grid-auto-rows: 50px; + grid-template-areas: ". . . . . ." + ". b b b c ." + ". . . . c ." + ". . . . c ." + ". . . . . ."; + width: 550px; + height: 450px; +} + +.gridRowColumnGaps { + grid-row-gap: 20px; + grid-column-gap: 10px; +} + +.i1 { grid-row: 1; } +.i2 { grid-row: 2; } +.i3 { grid-row: 3; grid-column: 6; } +.i4 { grid-row: 4; grid-column: 6; } +.i5 { grid-row: 5; grid-column: 6; } + +.a { + grid-area: a; + background-color: blue; +} +.b { + grid-area: b; + background-color: lime; +} +.c { + grid-area: c; + background-color: purple; +} +.d { + grid-area: d; + background-color: orange; +} +.stretchedGrid { + grid-auto-columns: minmax(20px, auto); + grid-auto-rows: minmax(40px, auto); +} + +.cell { + width: 20px; + height: 40px; +} +.cell1 { + width: 20px; + height: 20px; +} +</style> +</head> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p> + <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> + <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p> + <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> + <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p> + <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p> + <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'default' | self-alignment: center</p> + <div class="grid spanningThree"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="115" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="200" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'default' | self-alignment: end</p> + <div class="grid spanningThree"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="200" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spanningThree contentSpaceBetween"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spanningThree contentSpaceBetween"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p> + <div class="grid spanningThree gridRowColumnGaps"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="135" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="240" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p> + <div class="grid spanningThree gridRowColumnGaps"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="210" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="240" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<!-- Same expected result than without gaps because space-between just use the remaining available space. --> +<div style="position: relative"> + <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<!-- Same expected result than without gaps because space-between just use the remaining available space. --> +<div style="position: relative"> + <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p> + <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> + <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p> + <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> + <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p> + <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p> + <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'default' | self-alignment: center</p> + <div class="grid spanningThree directionRTL"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="415" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="330" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'default' | self-alignment: end</p> + <div class="grid spanningThree directionRTL"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="350" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="330" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spanningThree contentSpaceBetween directionRTL"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spanningThree contentSpaceBetween directionRTL"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p> + <div class="grid spanningThree gridRowColumnGaps directionRTL"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="395" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="290" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p> + <div class="grid spanningThree gridRowColumnGaps directionRTL"> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="320" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="290" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL"> + <div class="i1" style="background: blue;"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i1" style="background: blue"></div> + <div class="i1" style="background: red"></div> + <div class="i2" style="background: red"></div> + <div class="i2" style="background: blue"></div> + <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div> + <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div> + <div class="i3" style="background: red"></div> + <div class="i4" style="background: blue"></div> + <div class="i5" style="background: red"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html new file mode 100644 index 0000000000..32c3e3e474 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: content alignment and auto sized tracks.</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<meta name="assert" content="Test that 'stretch' value for content alignment properties is applied only on 'auto-sized' tracks, which are the ones with an 'auto' max sizing function." /> + +<style> +body { + margin: 0px; +} + +.grid { + display: grid; + background-color: grey; + position: relative; +} + +.definiteSize { + width: 200px; + height: 300px; +} + +.item { + width: 40px; + height: 80px; +} + +.content { + width: 20px; + height: 40px; +} + +.firstRowFirstColumn { + background-color: blue; + grid-column: 1; + grid-row: 1; +} +.firstRowSecondColumn { + background-color: lime; + grid-column: 2; + grid-row: 1; +} +.secondRowFirstColumn { + background-color: purple; + grid-column: 1; + grid-row: 2; +} +.secondRowSecondColumn { + background-color: orange; + grid-column: 2; + grid-row: 2; +} + +/* track sizes allowed to be stetched */ +.autoTracks { grid: auto auto / auto auto; } +.autoMaxTracks { grid: minmax(40px, auto) minmax(40px, auto) / minmax(20px, auto) minmax(20px, auto); } + +/* content-sized tracks disallowed to be stetched */ +.minContentTracks { grid: min-content min-content / min-content min-content; } +.maxContentTracks { grid: max-content max-content / max-content max-content; } +.minMaxWithMaxContentTracks { grid: minmax(20px, max-content) minmax(20px, max-content) / minmax(20px, max-content) minmax(20px, max-content); } +.minMaxWithMinContentTracks { grid: minmax(20px, min-content) minmax(20px, min-content) / minmax(20px, min-content) minmax(20px, min-content); } +.minMaxWithMinAutoTracks { grid: minmax(auto, max-content) minmax(auto, max-content) / minmax(auto, max-content) minmax(auto, max-content); } +.fitContentTracks { grid: fit-content(20px) fit-content(20px) / fit-content(40px) fit-content(40px); font: 10px/1 Ahem; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +</head> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div style="position: relative"> + <p>cols: 'auto' | rows: 'auto' | definite-sized container | definite-sized items </p> + <div class="grid contentStretch itemsStart definiteSize autoTracks" data-expected-width="200" data-expected-height="300"> + <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div> + </div> +</div> + +<div style="position: relative"> + <p>cols: 'minmax(20px, auto)' | rows: 'minmax(40px, auto)' | definite-sized container | definite-sized items </p> + <div class="grid contentStretch itemsStart definiteSize autoMaxTracks" data-expected-width="200" data-expected-height="300"> + <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div> + </div> +</div> + +<div style="position: relative"> + <p>cols: 'min-content' | rows: 'min-content' | definite-sized container | definite-sized items </p> + <div class="grid contentStretch itemsStart definiteSize minContentTracks" data-expected-width="200" data-expected-height="300"> + <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + </div> +</div> + +<div style="position: relative"> + <p>cols: 'max-content' | rows: 'max-content' | definite-sized container | definite-sized items </p> + <div class="grid contentStretch itemsStart definiteSize maxContentTracks" data-expected-width="200" data-expected-height="300"> + <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + </div> +</div> + +<div style="position: relative"> + <p>cols: 'minmax(20px, max-content)' | rows: 'minmax(20px, max-content)' | definite-sized container | definite-sized items </p> + <div class="grid contentStretch itemsStart definiteSize minMaxWithMaxContentTracks" data-expected-width="200" data-expected-height="300"> + <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + </div> +</div> + +<div style="position: relative"> + <p>cols: 'minmax(20px, min-content)' | rows: 'minmax(20px, min-content)' | definite-sized container | definite-sized items </p> + <div class="grid contentStretch itemsStart definiteSize minMaxWithMinContentTracks" data-expected-width="200" data-expected-height="300"> + <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + </div> +</div> + +<div style="position: relative"> + <p>cols: 'minmax(auto, max-content)' | rows: 'minmax(auto, max-content)' | definite-sized container | definite-sized items </p> + <div class="grid contentStretch itemsStart definiteSize minMaxWithMinAutoTracks" data-expected-width="200" data-expected-height="300"> + <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div> + </div> +</div> + +<div style="position: relative"> + <p>cols: 'fit-content(40px)' | rows: 'fit-content(20px)' | definite-sized container | content-sized items</p> + <div class="grid contentStretch itemsStart definiteSize fitContentTracks" data-expected-width="200" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div> + <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div> + <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html new file mode 100644 index 0000000000..e3e3329583 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html @@ -0,0 +1,235 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: content alignment and overflow alignment.</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." /> + +<style> +body { + margin: 0; +} + +.container { + position: relative; + float: left; +} + +.grid { + grid-template-columns: 50px 50px; + grid-template-rows: 100px 100px; +} + +.contentSizedTracks { + grid-template: max-content 100px / max-content 50px; +} + +.overflowWidth { + width: 60px; + height: 300px; +} + +.overflowHeight { + width: 200px; + height: 150px; +} + +.item1 { + width: 50px; + height: 150px; +} + +.item2 { + width: 150px; + height: 100px; +} + +.minSize { + min-width: 300px; + min-height: 400px; +} + +.maxSize { + max-width: 100px; + max-height: 100px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> + +<body onload="checkLayout('.grid')"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150"> + <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 75px; margin-right: 25px;"> + <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150"> + <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150"> + <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 75px; margin-right: 25px;"> + <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150"> + <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid fit-content contentEndUnsafe" data-expected-width="100" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 200px; margin-right: 25px;"> + <div class="grid fit-content contentCenterUnsafe" data-expected-width="100" data-expected-height="200"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 100px; margin-right: 25px;"> + <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100"> + <div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y="-150" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset-y="0" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 100px; margin-right: 75px;"> + <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100"> + <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400"> + <div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-y="300" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-right: 25px;"> + <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400"> + <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html new file mode 100644 index 0000000000..e358c7b210 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html @@ -0,0 +1,240 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: content alignment and overflow alignment.</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527539"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." /> + +<style> +body { + margin: 0; +} + +.container { + position: relative; + float: left; +} + +.grid { + grid-template-columns: 50px 50px; + grid-template-rows: 100px 100px; + padding: 30px; + box-sizing: border-box; + overflow: hidden; +} + +.contentSizedTracks { + grid-template: max-content 100px / max-content 50px; +} + +.overflowWidth { + width: 60px; + height: 300px; +} + +.overflowHeight { + width: 200px; + height: 150px; +} + +.item1 { + width: 50px; + height: 150px; +} + +.item2 { + width: 150px; + height: 100px; +} + +.minSize { + min-width: 300px; + min-height: 400px; +} + +.maxSize { + max-width: 100px; + max-height: 100px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> + +<body onload="checkLayout('.grid')"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="110" data-expected-scroll-height="300"> + <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="205"> + <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300"> + <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 75px; margin-right: 25px;"> + <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260"> + <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="60" data-expected-scroll-height="300"> + <div class="firstRowFirstColumn" data-offset-x="-70" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="-70" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="-20" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="-20" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="150"> + <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300"> + <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 75px; margin-right: 25px;"> + <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260"> + <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid fit-content contentEndUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260"> + <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 200px; margin-right: 25px;"> + <div class="grid fit-content contentCenterUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260"> + <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 100px; margin-right: 25px;"> + <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="100" data-expected-scroll-height="100"> + <div class="item1 firstRowSecondColumn" data-offset-x="20" data-offset-y="-180" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="-130" data-offset-y="-30" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 100px; margin-right: 75px;"> + <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="180" data-expected-scroll-height="205"> + <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> + <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400"> + <div class="item1 firstRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="70" data-offset-y="270" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +<div class="container" style="margin-right: 25px;"> + <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400"> + <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div> + <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> +<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> + +<br clear="all"> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html new file mode 100644 index 0000000000..1d83f53a47 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content alignment second pass</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + width: 100px; + height: 50px; + font: 25px/1 Ahem; + margin: 10px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<div class="grid"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div> +</div> + +<div class="grid contentStretch"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div> +</div> + +<div class="grid contentStart"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> +</div> + +<div class="grid contentCenter"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="25" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> +</div> + +<div class="grid contentEnd"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> +</div> + +<div class="grid contentSpaceBetween"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> + <div class="firstRowSecondColumn" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div> +</div> + +<div class="grid contentSpaceEvenly" style="width: 105px;"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> + <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div> +</div> + +<div class="grid contentSpaceAround" style="width: 115px;"> + <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html new file mode 100644 index 0000000000..74a783bce2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content alignment second pass</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + font: 20px/1 Ahem; + margin: 10px; + display: inline-grid; + grid: 50% / 70%; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<div class="grid" data-expected-width="100" data-expected-height="40"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div> +</div> + +<div class="grid contentStretch" data-expected-width="100" data-expected-height="40"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div> +</div> + +<div class="grid contentStart" data-expected-width="100" data-expected-height="40"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div> +</div> + +<div class="grid contentCenter" data-expected-width="100" data-expected-height="40"> + <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="10" data-expected-width="70" data-expected-height="20">XXX X</div> +</div> + +<div class="grid contentEnd" data-expected-width="100" data-expected-height="40"> + <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="70" data-expected-height="20">XXX X</div> +</div> + +<div class="grid contentSpaceBetween" data-expected-width="100" data-expected-height="60"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30">XXX X</div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="70" data-expected-height="20">X</div> +</div> + +<div class="grid contentSpaceEvenly" style="grid-template-rows: 30%;" data-expected-width="100" data-expected-height="80"> + <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="24">XXX X</div> + <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div> +</div> + +<div class="grid contentSpaceAround" style="grid-template-rows: 25%;" data-expected-width="100" data-expected-height="80"> + <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="20">XXX X</div> + <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html new file mode 100644 index 0000000000..c9aa165e80 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: dynamic content alignment with abspos elements.</title> +<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1248940"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<meta name="assert" content="Test that dynamically changing alignment for abspos grid items works as expected." /> + +<style> +body { + margin: 0px; + width: 800px; +} + +.grid { + width: 100%; + height: 600px; +} + +.a { + width: 140px; + height: 60px; + border: 1px solid purple; + position: absolute; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + function updateAlignmentAndCheckLayout() { + let item = document.getElementById("item"); + item.style.alignSelf = "center"; + item.style.justifySelf = "center"; + checkLayout('.grid'); + } +</script> +</head> + +<body onload="updateAlignmentAndCheckLayout()"> + + <div class="grid" data-expected-width="800" data-expected-height="600"> + <div class="a" id="item" data-offset-x="329" data-offset-y="269" data-expected-width="142" data-expected-height="62"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html new file mode 100644 index 0000000000..6333c13b00 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks.</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track." /> + +<style> +body { + margin: 0px; +} + +.grid { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + grid-template-areas: "a a b" + "c d b"; + position: relative; + width: 300px; + height: 200px; +} +.a { + grid-area: a; + background-color: blue; +} +.b { + grid-area: b; + background-color: lime; +} +.c { + grid-area: c; + background-color: purple; +} +.d { + grid-area: d; + background-color: orange; +} +.stretchedGrid { + grid-auto-columns: auto; + grid-auto-rows: auto; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> + +<body onload="checkLayout('.grid')"> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between'</p> + <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div> + <div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div> + <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-around'</p> + <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div> + <div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div> + <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-evenly'</p> + <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div> + <div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div> + <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'stretch'</p> + <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between'</p> + <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div> + <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div> + <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-around'</p> + <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div> + <div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div> + <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-evenly''</p> + <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div> + <div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div> + <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'stretch'</p> + <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html new file mode 100644 index 0000000000..d1b256bc0a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-lr).</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'." /> + +<style> +body { + margin: 0px; +} + +.grid { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + grid-template-areas: "a a b" + "c d b"; + position: relative; + width: 200px; + height: 300px; +} +.a { + grid-area: a; + background-color: blue; +} +.b { + grid-area: b; + background-color: lime; +} +.c { + grid-area: c; + background-color: purple; +} +.d { + grid-area: d; + background-color: orange; +} +.stretchedGrid { + grid-auto-columns: auto; + grid-auto-rows: auto; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> + +<body onload="checkLayout('.grid')"> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between'</p> + <div class="grid contentSpaceBetween verticalLR" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div> + <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> + <div class="c" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-around'</p> + <div class="grid contentSpaceAround verticalLR" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div> + <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div> + <div class="c" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-evenly'</p> + <div class="grid contentSpaceEvenly verticalLR" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div> + <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div> + <div class="c" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'stretch'</p> + <div class="grid stretchedGrid contentStretch verticalLR" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div> + <div class="c" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between'</p> + <div class="grid contentSpaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div> + <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> + <div class="c" data-offset-x="160" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-around'</p> + <div class="grid contentSpaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div> + <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div> + <div class="c" data-offset-x="130" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-evenly'</p> + <div class="grid contentSpaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div> + <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div> + <div class="c" data-offset-x="120" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'stretch'</p> + <div class="grid stretchedGrid contentStretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div> + <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="c" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html new file mode 100644 index 0000000000..f3102a82b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-rl).</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'." /> + +<style> +body { + margin: 0px; +} + +.grid { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + grid-template-areas: "a a b" + "c d b"; + position: relative; + width: 200px; + height: 300px; +} +.a { + grid-area: a; + background-color: blue; +} +.b { + grid-area: b; + background-color: lime; +} +.c { + grid-area: c; + background-color: purple; +} +.d { + grid-area: d; + background-color: orange; +} +.stretchedGrid { + grid-auto-columns: auto; + grid-auto-rows: auto; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +</head> + +<body onload="checkLayout('.grid')"> + +<p>This test checks that Content Distribution alignment is applied correctly when items span more than one track.</p> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between'</p> + <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div> + <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> + <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-around'</p> + <div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div> + <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div> + <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-evenly'</p> + <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div> + <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div> + <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'stretch'</p> + <div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div> + <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between'</p> + <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div> + <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> + <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-around'</p> + <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div> + <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div> + <div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-evenly'</p> + <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div> + <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div> + <div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div> + <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'stretch'</p> + <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> + <div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div> + <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> + <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html new file mode 100644 index 0000000000..7b53a2897b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 25px; + height: 25px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 25px 25px; + grid-template-rows: 25px 25px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 50px; left: 50px;"></div> + <div style="top: 125px; left: 125px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html new file mode 100644 index 0000000000..194934bb93 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px; + grid-template-rows: 20px 20px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html new file mode 100644 index 0000000000..ed6e322639 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px; + grid-template-rows: 20px 20px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 40px; left: 40px;"></div> + <div style="top: 140px; left: 140px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html new file mode 100644 index 0000000000..419d0fb1bd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 100px; + height: 100px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 100px; left: 100px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html new file mode 100644 index 0000000000..2830aecab6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution default value</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties have 'stretch' as default value and render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 100px; + height: 100px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: auto auto; + grid-template-rows: auto auto; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 100px; left: 100px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html new file mode 100644 index 0000000000..61cfe2b68e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px; + grid-template-rows: 20px 20px; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 50px; left: 50px;"></div> + <div style="top: 130px; left: 130px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html new file mode 100644 index 0000000000..d4dce5dc95 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 35px; left: 90px;"></div> + <div style="top: 35px; left: 145px;"></div> + <div style="top: 90px; left: 35px;"></div> + <div style="top: 145px; left: 35px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html new file mode 100644 index 0000000000..3e381ec68b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 30px; left: 90px;"></div> + <div style="top: 30px; left: 150px;"></div> + <div style="top: 90px; left: 30px;"></div> + <div style="top: 150px; left: 30px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html new file mode 100644 index 0000000000..aa28a980b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 25px; + height: 25px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 25px 25px 25px 25px; + grid-template-rows: 25px 25px 25px 25px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 20px; left: 65px;"></div> + <div style="top: 20px; left: 110px;"></div> + <div style="top: 65px; left: 110px;"></div> + <div style="top: 110px; left: 110px;"></div> + <div style="top: 155px; left: 20px;"></div> + <div style="top: 155px; left: 155px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html new file mode 100644 index 0000000000..cb08775cd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 15px; + height: 15px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 15px 15px 15px 15px; + grid-template-rows: 15px 15px 15px 15px; + grid-row-gap: 5px; + grid-column-gap: 5px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 25px; left: 70px;"></div> + <div style="top: 25px; left: 115px;"></div> + <div style="top: 70px; left: 115px;"></div> + <div style="top: 115px; left: 115px;"></div> + <div style="top: 160px; left: 25px;"></div> + <div style="top: 160px; left: 160px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html new file mode 100644 index 0000000000..57eb3d0eac --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px; + grid-template-rows: 20px 20px; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html new file mode 100644 index 0000000000..e45dbec8fc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 90px;"></div> + <div style="top: 0px; left: 180px;"></div> + <div style="top: 90px; left: 0px;"></div> + <div style="top: 180px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html new file mode 100644 index 0000000000..3e1df650fb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 90px;"></div> + <div style="top: 0px; left: 180px;"></div> + <div style="top: 90px; left: 0px;"></div> + <div style="top: 180px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html new file mode 100644 index 0000000000..423aad172b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px 20px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 60px;"></div> + <div style="top: 0px; left: 120px;"></div> + <div style="top: 60px; left: 120px;"></div> + <div style="top: 120px; left: 120px;"></div> + <div style="top: 180px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html new file mode 100644 index 0000000000..ef4c857db6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px 20px; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 60px;"></div> + <div style="top: 0px; left: 120px;"></div> + <div style="top: 60px; left: 120px;"></div> + <div style="top: 120px; left: 120px;"></div> + <div style="top: 180px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html new file mode 100644 index 0000000000..11a66915de --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 25px; + height: 25px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 25px 25px; + grid-template-rows: 25px 25px; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 35px; left: 35px;"></div> + <div style="top: 140px; left: 140px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html new file mode 100644 index 0000000000..9a490ad948 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-template-columns: 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 40px; left: 140px;"></div> + <div style="top: 40px; left: 240px;"></div> + <div style="top: 140px; left: 40px;"></div> + <div style="top: 240px; left: 40px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html new file mode 100644 index 0000000000..1ba4f54aa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-row-gap: 10px; + grid-column-gap: 10px; + grid-template-columns: 20px 20px 20px; + grid-template-rows: 20px 20px 20px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 20px; left: 90px;"></div> + <div style="top: 20px; left: 160px;"></div> + <div style="top: 90px; left: 20px;"></div> + <div style="top: 90px; left: 20px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html new file mode 100644 index 0000000000..49ca22eb24 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px 20px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 15px; left: 65px;"></div> + <div style="top: 15px; left: 115px;"></div> + <div style="top: 65px; left: 115px;"></div> + <div style="top: 115px; left: 115px;"></div> + <div style="top: 165px; left: 15px;"></div> + <div style="top: 165px; left: 165px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html new file mode 100644 index 0000000000..249f57d93f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-row-gap: 20px; + grid-column-gap: 20px; + grid-template-columns: 20px 20px 20px 20px; + grid-template-rows: 20px 20px 20px 20px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 20px; left: 100px;"></div> + <div style="top: 20px; left: 180px;"></div> + <div style="top: 100px; left: 180px;"></div> + <div style="top: 180px; left: 180px;"></div> + <div style="top: 260px; left: 20px;"></div> + <div style="top: 260px; left: 260px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html new file mode 100644 index 0000000000..6a5469fc8c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 95px; + height: 95px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 105px; left: 105px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html new file mode 100644 index 0000000000..15a69c1102 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 100px; + height: 100px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-template-columns: auto auto auto; + grid-template-rows: auto auto auto; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 100px;"></div> + <div style="top: 0px; left: 200px;"></div> + <div style="top: 100px; left: 0px;"></div> + <div style="top: 200px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html new file mode 100644 index 0000000000..f5d07b7648 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 60px; + height: 60px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: auto auto auto; + grid-template-rows: auto auto auto; + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 70px;"></div> + <div style="top: 0px; left: 140px;"></div> + <div style="top: 70px; left: 0px;"></div> + <div style="top: 140px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 1;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html new file mode 100644 index 0000000000..1b6932bca5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 50px; + height: 50px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: auto auto auto auto; + grid-template-rows: auto auto auto auto; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 50px;"></div> + <div style="top: 0px; left: 100px;"></div> + <div style="top: 50px; left: 100px;"></div> + <div style="top: 100px; left: 100px;"></div> + <div style="top: 150px; left: 0px;"></div> + <div style="top: 150px; left: 150px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html new file mode 100644 index 0000000000..f229a56f4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 60px; + height: 60px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-template-columns: auto auto auto auto; + grid-template-rows: auto auto auto auto; + grid-row-gap: 20px; + grid-column-gap: 20px; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 80px;"></div> + <div style="top: 0px; left: 160px;"></div> + <div style="top: 80px; left: 160px;"></div> + <div style="top: 160px; left: 160px;"></div> + <div style="top: 240px; left: 0px;"></div> + <div style="top: 240px; left: 240px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 2; grid-column: 3;"></div> + <div class="item" style="grid-row: 3; grid-column: 3;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html new file mode 100644 index 0000000000..b56d638437 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="The fallback alignment for 'space-evenly' should be 'center'."> +<p>Test passes if there is a filled green square.</p> +<div style="display: grid; width: 50px; height: 50px; align-content: space-evenly; justify-content: space-evenly;"> + <div style="width: 100px; height: 100px; background: green; position: relative; top: 25px; left: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html new file mode 100644 index 0000000000..f92ed520d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="The fallback alignment for 'space-around' should be 'center'."> +<p>Test passes if there is a filled green square.</p> +<div style="display: grid; width: 50px; height: 50px; align-content: space-around; justify-content: space-around;"> + <div style="width: 100px; height: 100px; background: green; position: relative; top: 25px; left: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html new file mode 100644 index 0000000000..216b05a4d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="The fallback alignment for 'space-between' should be 'start'."> +<p>Test passes if there is a filled green square.</p> +<div style="display: grid; width: 50px; height: 50px; align-content: space-between; justify-content: space-between;"> + <div style="width: 100px; height: 100px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html new file mode 100644 index 0000000000..ebd169cf59 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' with collapsed tracks on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-evenly'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 25px; + height: 25px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 25px); + grid-template-rows: repeat(auto-fit, 25px); + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 50px; left: 50px;"></div> + <div style="top: 125px; left: 125px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 2; grid-column: 3;"></div> + <div style="grid-row: 3; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html new file mode 100644 index 0000000000..a48c377ef3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' with collapsed tracks on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-between'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + display: grid; + z-index: 1; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 2; grid-column: 3;"></div> + <div style="grid-row: 3; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html new file mode 100644 index 0000000000..25c03022a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' with collapsed tracks on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-around'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 40px; left: 40px;"></div> + <div style="top: 140px; left: 140px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 2; grid-column: 3;"></div> + <div style="grid-row: 3; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html new file mode 100644 index 0000000000..a280a69871 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 100px; + height: 100px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, minmax(25px, auto)); + grid-template-rows: repeat(auto-fit, minmax(25px, auto)); + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 100px; left: 100px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 2; grid-column: 3;"></div> + <div style="grid-row: 3; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html new file mode 100644 index 0000000000..34d62116ed --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 50px; left: 50px;"></div> + <div style="top: 130px; left: 130px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html new file mode 100644 index 0000000000..151d34d2bb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 35px; left: 90px;"></div> + <div style="top: 35px; left: 145px;"></div> + <div style="top: 90px; left: 35px;"></div> + <div style="top: 145px; left: 35px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html new file mode 100644 index 0000000000..061e93bae7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 30px; left: 90px;"></div> + <div style="top: 30px; left: 150px;"></div> + <div style="top: 90px; left: 30px;"></div> + <div style="top: 150px; left: 30px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html new file mode 100644 index 0000000000..1b7135e70b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 25px; + height: 25px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 25px); + grid-template-rows: repeat(auto-fit, 25px); + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 20px; left: 65px;"></div> + <div style="top: 20px; left: 110px;"></div> + <div style="top: 65px; left: 110px;"></div> + <div style="top: 110px; left: 110px;"></div> + <div style="top: 155px; left: 20px;"></div> + <div style="top: 155px; left: 155px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html new file mode 100644 index 0000000000..0bc4adae76 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 15px; + height: 15px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 15px); + grid-template-rows: repeat(auto-fit, 15px); + grid-row-gap: 5px; + grid-column-gap: 5px; + align-content: space-evenly; + justify-content: space-evenly; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 25px; left: 70px;"></div> + <div style="top: 25px; left: 115px;"></div> + <div style="top: 70px; left: 115px;"></div> + <div style="top: 115px; left: 115px;"></div> + <div style="top: 160px; left: 25px;"></div> + <div style="top: 160px; left: 160px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html new file mode 100644 index 0000000000..eccf0041c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html new file mode 100644 index 0000000000..fca4df588d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 90px;"></div> + <div style="top: 0px; left: 180px;"></div> + <div style="top: 90px; left: 0px;"></div> + <div style="top: 180px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html new file mode 100644 index 0000000000..4250c14126 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 90px;"></div> + <div style="top: 0px; left: 180px;"></div> + <div style="top: 90px; left: 0px;"></div> + <div style="top: 180px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html new file mode 100644 index 0000000000..f20741e4a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 60px;"></div> + <div style="top: 0px; left: 120px;"></div> + <div style="top: 60px; left: 120px;"></div> + <div style="top: 120px; left: 120px;"></div> + <div style="top: 180px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html new file mode 100644 index 0000000000..78d2477109 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-between; + justify-content: space-between; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 60px;"></div> + <div style="top: 0px; left: 120px;"></div> + <div style="top: 60px; left: 120px;"></div> + <div style="top: 120px; left: 120px;"></div> + <div style="top: 180px; left: 0px;"></div> + <div style="top: 180px; left: 180px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html new file mode 100644 index 0000000000..e8247e0419 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 25px; + height: 25px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 25px); + grid-template-rows: repeat(auto-fit, 25px); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 35px; left: 35px;"></div> + <div style="top: 140px; left: 140px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1;"></div> + <div style="grid-row: 2; grid-column: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html new file mode 100644 index 0000000000..511961f34e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 40px; left: 140px;"></div> + <div style="top: 40px; left: 240px;"></div> + <div style="top: 140px; left: 40px;"></div> + <div style="top: 240px; left: 40px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html new file mode 100644 index 0000000000..f587301599 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 20px; left: 90px;"></div> + <div style="top: 20px; left: 160px;"></div> + <div style="top: 90px; left: 20px;"></div> + <div style="top: 90px; left: 20px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html new file mode 100644 index 0000000000..d91c1c5cab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 15px; left: 65px;"></div> + <div style="top: 15px; left: 115px;"></div> + <div style="top: 65px; left: 115px;"></div> + <div style="top: 115px; left: 115px;"></div> + <div style="top: 165px; left: 15px;"></div> + <div style="top: 165px; left: 165px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html new file mode 100644 index 0000000000..7a09ce699d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid with collapsed tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 20px; + height: 20px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-template-columns: repeat(auto-fit, 20px); + grid-template-rows: repeat(auto-fit, 20px); + grid-row-gap: 20px; + grid-column-gap: 20px; + align-content: space-around; + justify-content: space-around; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 20px; left: 100px;"></div> + <div style="top: 20px; left: 180px;"></div> + <div style="top: 100px; left: 180px;"></div> + <div style="top: 180px; left: 180px;"></div> + <div style="top: 260px; left: 20px;"></div> + <div style="top: 260px; left: 260px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html new file mode 100644 index 0000000000..f0a29e7f45 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 95px; + height: 95px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, minmax(25px, auto)); + grid-template-rows: repeat(auto-fit, minmax(25px, auto)); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px;"></div> + <div style="top: 105px; left: 105px;"></div> +</div> +<div class="grid"> + <div style="grid-row: 2; grid-column: 3;"></div> + <div style="grid-row: 3; grid-column: 4;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html new file mode 100644 index 0000000000..d45f528d49 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 100px; + height: 100px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-template-columns: repeat(auto-fit, minmax(25px, auto)); + grid-template-rows: repeat(auto-fit, minmax(25px, auto)); + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 100px;"></div> + <div style="top: 0px; left: 200px;"></div> + <div style="top: 100px; left: 0px;"></div> + <div style="top: 200px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html new file mode 100644 index 0000000000..7f837ba4b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 3x3 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 60px; + height: 60px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, minmax(25px, auto)); + grid-template-rows: repeat(auto-fit, minmax(25px, auto)); + grid-row-gap: 10px; + grid-column-gap: 10px; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 70px;"></div> + <div style="top: 0px; left: 140px;"></div> + <div style="top: 70px; left: 0px;"></div> + <div style="top: 140px; left: 0px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 3;"></div> + <div class="item" style="grid-row: 1; grid-column: 4;"></div> + <div class="item" style="grid-row: 3; grid-column: 1;"></div> + <div class="item" style="grid-row: 4; grid-column: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html new file mode 100644 index 0000000000..11de67a099 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 200px; + height: 200px; +} +.block > div { + position: absolute; + background: red; + width: 50px; + height: 50px; +} +.grid { + z-index: 1; + display: grid; + width: 200px; + height: 200px; + grid-template-columns: repeat(auto-fit, minmax(25px, auto)); + grid-template-rows: repeat(auto-fit, minmax(25px, auto)); + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 50px;"></div> + <div style="top: 0px; left: 100px;"></div> + <div style="top: 50px; left: 100px;"></div> + <div style="top: 100px; left: 100px;"></div> + <div style="top: 150px; left: 0px;"></div> + <div style="top: 150px; left: 150px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html new file mode 100644 index 0000000000..9afd058692 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 4x4 grid</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'."> +<style> +.block { + position: absolute; + z-index: -1; + background: green; + width: 300px; + height: 300px; +} +.block > div { + position: absolute; + background: red; + width: 60px; + height: 60px; +} +.grid { + z-index: 1; + display: grid; + width: 300px; + height: 300px; + grid-template-columns: repeat(auto-fit, minmax(25px, auto)); + grid-template-rows: repeat(auto-fit, minmax(25px, auto)); + grid-row-gap: 20px; + grid-column-gap: 20px; + align-content: stretch; + justify-content: stretch; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 80px;"></div> + <div style="top: 0px; left: 160px;"></div> + <div style="top: 80px; left: 160px;"></div> + <div style="top: 160px; left: 160px;"></div> + <div style="top: 240px; left: 0px;"></div> + <div style="top: 240px; left: 240px;"></div> +</div> +<div class="grid"> + <div class="item" style="grid-row: 1; grid-column: 2;"></div> + <div class="item" style="grid-row: 1; grid-column: 5;"></div> + <div class="item" style="grid-row: 3; grid-column: 5;"></div> + <div class="item" style="grid-row: 4; grid-column: 5;"></div> + <div class="item" style="grid-row: 6; grid-column: 1;"></div> + <div class="item" style="grid-row: 6; grid-column: 7;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html new file mode 100644 index 0000000000..a03b549a9a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html @@ -0,0 +1,212 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: fit-content() tracks don't stretch</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing" title="7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-stretch" title="11.8. Stretch auto Tracks"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'fit-content()' tracks behave the same with 'normal', 'stretch' or 'start' values for content distribution properties."> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: grid; + width: 400px; + height: 200px; + font: 25px/1 Ahem; +} + +.constrainedGrid { + width: 20px; + height: 10px; +} + +.fitContent200x100 { + grid-template-columns: fit-content(200px); + grid-template-rows: fit-content(100px); +} + +.placeContentStretch { + place-content: stretch; +} + +.placeContentStart { + place-content: start; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<h1>1) place-content: normal</h1> + +<h2>1.2) Unconstrained grid container</h2> + +<div class="grid" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="400" data-expected-height="200">X</div> +</div> + +<div class="grid" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div> +</div> + +<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div> +</div> + +<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div> +</div> + +<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div> +</div> + +<h2>1.2) Constrained grid container</h2> + +<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div> +</div> + +<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div> +</div> + +<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div> +</div> + +<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div> +</div> + +<h1>2) place-content: stretch</h1> + +<h2>2.2) Unconstrained grid container</h2> + +<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="400" data-expected-height="200">X</div> +</div> + +<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div> +</div> + +<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div> +</div> + +<h2>2.2) Constrained grid container</h2> + +<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div> +</div> + +<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div> +</div> + +<h1>3) place-content: start</h1> + +<h2>3.1) Unconstrained grid container</h2> + +<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="325" data-expected-height="25">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div> +</div> + +<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200"> + <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div> +</div> + +<h2>3.2) Constrained grid container</h2> + +<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="25" data-expected-height="25">X</div> +</div> + +<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div> +</div> + +<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div> +</div> + +<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10"> + <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html new file mode 100644 index 0000000000..310aa4322a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="match" href="../reference/grid-equal-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + gap: 20px; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html new file mode 100644 index 0000000000..dbe9d14533 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<link rel="match" href="../reference/grid-equal-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + grid-gap: 20px; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html new file mode 100644 index 0000000000..51bc25b3f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap setting both to different values</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="match" href="../reference/grid-different-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + gap: 40px 20px; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html new file mode 100644 index 0000000000..c7d549a1b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap setting both to different values</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<link rel="match" href="../reference/grid-different-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + grid-gap: 40px 20px; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html new file mode 100644 index 0000000000..cc67190aff --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for row-gap and column-gap properties</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="match" href="../reference/grid-different-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + row-gap: 40px; + column-gap: 20px; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html new file mode 100644 index 0000000000..87fb7ec49d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for grid-row-gap alias for row-gap and grid-column-gap for column-gap</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<link rel="match" href="../reference/grid-different-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + grid-row-gap: 40px; + grid-column-gap: 20px; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html new file mode 100644 index 0000000000..4d66cf6750 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for percentage values for gap with definite height and width for grid</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="match" href="../reference/grid-equal-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + height: 200px; + gap: 10%; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html new file mode 100644 index 0000000000..a96eba3828 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for aliased support to gap of percentage values for grid-gap</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<link rel="match" href="../reference/grid-equal-gutters-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width:200px; + height: 200px; + grid-gap: 10%; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html new file mode 100644 index 0000000000..dfc595f820 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for percentage values for gap with indefinite percentage basis</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="match" href="../reference/grid-percentage-gap-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width: 200px; + gap: 10%; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + margin-bottom: 30px; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<div id="grid" style="display:inline-grid; width:auto; gap:calc(20px + 5%)"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html new file mode 100644 index 0000000000..22be6df72e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for percentage values for grid-gap with indefinite percentage basis</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="match" href="../reference/grid-percentage-gap-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk"> +<style> + #grid { + display: grid; + width: 200px; + grid-gap: 10%; + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + margin-bottom: 30px; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +<div id="grid" style="display:inline-grid; width:auto; grid-gap:calc(20px + 5%)"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html new file mode 100644 index 0000000000..daeba00aee --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for gap</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="match" href="../reference/grid-different-gutters-ref.html"> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + #grid { + display: grid; + width: 200px; + height: 220px; + gap: calc(15% + 7px) calc(10px + 5%); + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html new file mode 100644 index 0000000000..b4af6f7a28 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for grid-gap as alias for gap</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<link rel="match" href="../reference/grid-different-gutters-ref.html"> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + #grid { + display: grid; + width: 200px; + height: 220px; + grid-gap: calc(15% + 7px) calc(10px + 5%); + grid-template-columns: 90px 90px; + grid-template-rows: 90px 90px; + background-color: green; + } + + #grid > div { + background-color: silver; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html new file mode 100644 index 0000000000..e72814725d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Gutters adjacent to collapsed tracks also collapse</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items." /> +<style> + #grid { + display: grid; + margin-top: -50px; + margin-left: -50px; + width: 500px; + height: 500px; + grid-gap: 100px; + grid-template-rows: repeat(auto-fit, 200px); + grid-template-columns: repeat(auto-fit, 200px); + align-items: center; + justify-items: center; + background: linear-gradient(red, red) no-repeat 50px 50px / 100px 100px; + } + + #grid > div { + background-color: green; + width: 50%; + height: 50%; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="grid"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html new file mode 100644 index 0000000000..a6ca7c5aa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: Percentage gap, content-based width/height (via float)</title> +<style> + #grid { + border: solid 5px teal; + width: 200px; + height: 100px; + padding: 10px 0 0 10px; + } + + #grid > div { + float: left; + border: solid 5px aqua; + width: 70px; + height: 30px; + margin-left: 5px; + } + + /* highlight manual pass condition */ + #grid > div:nth-child(even) { + border-right: none; + margin-left: 40px; + } + #grid > div:nth-child(n + 3) { + border-bottom: none; + margin-top: 25px; + } +</style> + +<p>Test passes if there is no red. + +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html new file mode 100644 index 0000000000..404e694ec8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Percentage gap, content-based width/height (via float)</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps"> +<link rel="match" href="grid-gutters-014-ref.html"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<meta name="assert" content="Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout."> + +<style> + #grid { + display: grid; + border: solid 5px teal; + padding: 5px; + grid-gap: 15% 10%; + gap: 15% 10%; + float: left; + grid: auto auto / auto auto; + /* content box width = 200px height = 100px -> gap x = 20px y = 15px */ + position: relative; + } + + #grid > div { + margin: 5px 10px; + border: solid 5px aqua; + width: 70px; + height: 30px; + /* margin box height = 50px width = 100px */ + } + + /* highlight manual pass condition */ + #grid > div:nth-child(even) { + border-right-color: red; + } + #grid > div:nth-child(n + 3) { + border-bottom-color: red; + } + #mask { + position: absolute; + border: 5px teal; + border-style: none solid solid none; + bottom: -5px; right: -5px; + top: 10px; left: 15px; + } +</style> + +<p>Test passes if there is no red. +<div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <span id="mask"></span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html new file mode 100644 index 0000000000..dd4d8daf6a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + padding: 10px; + grid-template-columns: 40px 40px; + grid-template-rows: 40px 40px; + border: solid; + width: 80px; + height: 80px; + gap: 16px; +} +.grid > div { + background: green; +} +</style> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html new file mode 100644 index 0000000000..ed1048fd69 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps"> +<link rel="match" href="grid-gutters-015-ref.html"> +<style> +.grid { + display: inline-grid; + padding: 10px; + grid-template-columns: 40px 40px; + grid-template-rows: 40px 40px; + border: solid; + gap: 20%; +} +.grid > div { + background: green; +} +</style> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html new file mode 100644 index 0000000000..a56ab07e18 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.grid { + display: grid; + padding: 10px; + grid-template-columns: 40px 40px; + grid-template-rows: 40px 40px; + border: solid; + width: 140px; + height: 140px; + gap: 28px; +} +.grid > div { + background: green; +} +</style> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html new file mode 100644 index 0000000000..163787cfee --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps"> +<link rel="match" href="grid-gutters-016-ref.html"> +<style> +.grid { + display: inline-grid; + padding: 10px; + grid-template-columns: 40px 40px; + grid-template-rows: 40px 40px; + border: solid; + gap: 20%; + min-width: 140px; + min-height: 140px; +} +.grid > div { + background: green; +} +</style> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html new file mode 100644 index 0000000000..bc8af31c75 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html @@ -0,0 +1,366 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test:gutters with align and justify properties</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#gaps"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#column-row-gap"> +<meta name="assert" content="This test checks that gutters do not interfere with align and justify computation, with or without borders, paddings, margins and negative space."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.grid100And200 { + grid-template-columns: 100px 100px; + grid-template-rows: 200px 200px; + position: relative; /* For the <p> comments */ +} + +.grid50And100 { + grid: 100px 100px / 50px 50px; + width: 200px; + height: 300px; + position: relative; /* For the <p> comments */ +} + +.gridAuto20And40 { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + width: 400px; + height: 300px; + position: relative; /* For the <p> comments */ +} + +.gridWithPaddingBorder { + grid-template-columns: 100px 200px; + grid-template-rows: 200px 200px; + padding: 10px 15px 20px 30px; + border-width: 5px 10px 15px 20px; + border-style: dotted; + border-color: blue; + position: relative; /* For the <p> comments */ +} + +.gridWithAutoColumns { + grid-auto-columns: 20px; + border: 2px solid black; + width: 10px; + margin-left: 200px; + position: relative; +} + +.gridWithAutoRows { + grid-auto-rows: 40px; + border: 2px solid black; + height: 50px; + width: 20px; + position: relative; +} + +.stretchedGrid { grid-auto-columns: auto; } + +.gridRowColumnGaps { + grid-row-gap: 15px; + grid-column-gap: 20px; +} + +div.grid > div { font: 10px/1 Ahem; } + +.cell { + width: 20px; + height: 40px; +} + +div.gridWithPaddingBorder > div.cell { + margin: 4px 8px 12px 16px; +} + +.container { + position: relative; + margin-bottom: 10px; +} + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<!-- Check that gutters do not interfere with self alignment computation. --> +<div class="container"> + <div class="grid grid100And200 fit-content alignItemsCenter gridRowColumnGaps" data-expected-width="220" data-expected-height="415"> + <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="120" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="120" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <div class="grid grid100And200 fit-content verticalLR gridRowColumnGaps" data-expected-width="415" data-expected-height="220"> + <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> + </div> + <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="120" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="120" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="305" data-offset-y="0" data-expected-width="20" data-expected-height="40"> + <div class="item"></div> + </div> + </div> +</div> + +<div class="container"> + <div class="grid grid100And200 fit-content directionRTL gridRowColumnGaps" data-expected-width="220" data-expected-height="415"> + <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> + <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="200" data-offset-y="295" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Check that gutters do not interfere with align-content computation. --> +<div class="container"> + <p>direction: LTR | align-content: 'center'</p> + <div class="grid grid50And100 alignContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="43" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="43" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="158" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="70" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>direction: LTR | align-content: 'right'</p> + <div class="grid grid50And100 alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="70" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>direction: RTL | align-content: 'right'</p> + <div class="grid grid50And100 directionRTL alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>direction: RTL | align-content: 'start'</p> + <div class="grid grid50And100 directionRTL alignContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Check that gutters do not interfere with justify-content computation. --> +<div class="container"> + <p>direction: LTR | justify-content: 'center'</p> + <div class="grid grid50And100 justifyContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="40" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="110" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>direction: LTR | justify-content: 'end'</p> + <div class="grid grid50And100 justifyContentEnd gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>direction: RTL | justify-content: 'end'</p> + <div class="grid grid50And100 directionRTL justifyContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>direction: RTL | justify-content: 'start'</p> + <div class="grid grid50And100 directionRTL justifyContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300"> + <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div> + <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Check that gutters do not interfere with vertical justify-content computation. --> + +<div class="container"> + <p>direction: RTL | justify-content: 'stretch'</p> + <div class="grid gridAuto20And40 stretchedGrid justifyContentStretch verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="240" data-expected-width="40" data-expected-height="60"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="160" data-expected-width="40" data-expected-height="60"></div> + <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="60"></div> + <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="60"></div> + <div class="secondRowFirstColumn" data-offset-x="55" data-offset-y="240" data-expected-width="40" data-expected-height="60"></div> + <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="160" data-expected-width="40" data-expected-height="60"></div> + <div class="secondRowThirdColumn" data-offset-x="55" data-offset-y="80" data-expected-width="40" data-expected-height="60"></div> + <div class="secondRowFourthColumn" data-offset-x="55" data-offset-y="0" data-expected-width="40" data-expected-height="60"></div> + </div> +</div> + +<div class="container"> + <p>direction: LTR | justify-content: 'space-evenly'</p> + <div class="grid gridAuto20And40 justifyContentSpaceEvenly verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="55" data-offset-y="230" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowThirdColumn" data-offset-x="55" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div class="container"> + <p>direction: LTR | justify-content: 'space-between'</p> + <div class="grid gridAuto20And40 justifyContentSpaceBetween verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowThirdColumn" data-offset-x="360" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowFourthColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="305" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="305" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowThirdColumn" data-offset-x="305" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFourthColumn" data-offset-x="305" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<div class="container"> + <p>direction: LTR | justify-content: 'space-around'</p> + <div class="grid gridAuto20And40 justifyContentSpaceAround verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300"> + <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div> + <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowFirstColumn" data-offset-x="305" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div> + <div class="secondRowSecondColumn" data-offset-x="305" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div> + </div> +</div> + +<!-- Check that gutters do not interfere with align&justify computation when having border, padding and margins. --> +<div class="container"> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="395" data-expected-height="465"> + <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="150" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div> + <div class="directionLTR cell secondRowSecondColumn" data-offset-x="166" data-offset-y="229" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p> + <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="395" data-expected-height="465"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="150" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="166" data-offset-y="373" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL | align-items: 'right' | justify-items: 'right'</p> + <div class="grid gridWithPaddingBorder fit-content directionRTL itemsRight gridRowColumnGaps" data-expected-width="395" data-expected-height="465"> + <div class="cell firstRowFirstColumn" data-offset-x="322" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="selfStretch secondRowFirstColumn" data-offset-x="250" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div> + <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="229" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br> + direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p> + <div class="grid gridWithPaddingBorder fit-content directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="395" data-expected-height="465"> + <div class="directionRTL cell firstRowFirstColumn" data-offset-x="322" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> + <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"></div> + <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="250" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div> + <div class="directionRTL cell secondRowSecondColumn" data-offset-x="202" data-offset-y="229" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- Check behavior with negative free space --> +<div class="container"> + <p>Negative free space. justify-content: start</p> + <div class="grid gridWithAutoColumns justifyContentStart gridRowColumnGaps" data-expected-width="14" data-expected-height="44"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowThirdColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>Negative free space. justify-content: center</p> + <div class="grid gridWithAutoColumns justifyContentCenter gridRowColumnGaps" data-expected-width="14" data-expected-height="44"> + <div class="cell firstRowFirstColumn" data-offset-x="-45" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="-5" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowThirdColumn" data-offset-x="35" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container"> + <p>Negative free space. justify-content: end</p> + <div class="grid gridWithAutoColumns justifyContentEnd gridRowColumnGaps" data-expected-width="14" data-expected-height="44"> + <div class="cell firstRowFirstColumn" data-offset-x="-90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowSecondColumn" data-offset-x="-50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell firstRowThirdColumn" data-offset-x="-10" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<!-- NOTE: for the following 3 test cases we use margins just for enhancing the visual output (otherwise grids would overlap) --> +<div class="container" style="margin-bottom: 125px;"> + <p>Negative free space. align-content: start</p> + <div class="grid gridWithAutoRows alignContentStart gridRowColumnGaps" data-expected-width="24" data-expected-height="54"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div> + <div class="cell thirdRowFirstColumn" data-offset-x="0" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container" style="margin-bottom: 75px;"> + <p>Negative free space. align-content: center</p> + <div class="grid gridWithAutoRows alignContentCenter gridRowColumnGaps" style="margin-top: 75px" data-expected-width="24" data-expected-height="54"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="-50" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="20" data-expected-height="40"></div> + <div class="cell thirdRowFirstColumn" data-offset-x="0" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div class="container" style="margin-bottom: 25px;"> + <p>Negative free space. align-content: end</p> + <div class="grid gridWithAutoRows alignContentEnd gridRowColumnGaps" style="margin-top: 125px" data-expected-width="24" data-expected-height="54"> + <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="-100" data-expected-width="20" data-expected-height="40"></div> + <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="-45" data-expected-width="20" data-expected-height="40"></div> + <div class="cell thirdRowFirstColumn" data-offset-x="0" data-offset-y="10" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html new file mode 100644 index 0000000000..5c7825ca2f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 40% 60%; + height: 30vh; + width: 500px; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + background: green; + width: 50px; + height: 25px; + } + #item2 { + background: blue; + width: 100px; + height: 25px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-x", "75"); + item2.setAttribute("data-offset-x", "300"); + checkLayout('#grid', false); + + grid.style.width = "300px"; + + item1.setAttribute("data-offset-x", "35"); + item2.setAttribute("data-offset-x", "160"); + checkLayout('#grid', true); + + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html new file mode 100644 index 0000000000..3aa47a2570 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid item's width changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 40% 60%; + height: 30vh; + width: 500px; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + background: green; + width: 50px; + height: 25px; + } + #item2 { + background: blue; + width: 100px; + height: 25px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-x", "75"); + item2.setAttribute("data-offset-x", "300"); + checkLayout('#grid', false); + + item1.style.width = "100px"; + + item1.setAttribute("data-offset-x", "50"); + item2.setAttribute("data-offset-x", "300"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html new file mode 100644 index 0000000000..0136d7b4b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 40% 60%; + grid-template-rows: 300px; + height: 400px; + width: 500px; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + background: green; + width: 50px; + height: 25px; + } + #item2 { + background: blue; + width: 100px; + height: 25px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-x", "75"); + item2.setAttribute("data-offset-x", "300"); + checkLayout('#grid', false); + + item1.style.width = "100px"; + + item1.setAttribute("data-offset-x", "50"); + item2.setAttribute("data-offset-x", "300"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html new file mode 100644 index 0000000000..1ee0de73bc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 40% 60%; + grid-template-rows: 300px; + height: auto; + width: 500px; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + background: green; + width: 50px; + height: 25px; + } + #item2 { + background: blue; + width: 100px; + height: 25px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-x", "75"); + item2.setAttribute("data-offset-x", "300"); + checkLayout('#grid', false); + + grid.style.width = "300px"; + + item1.setAttribute("data-offset-x", "35"); + item2.setAttribute("data-offset-x", "160"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html new file mode 100644 index 0000000000..72427f1020 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 40% 60%; + grid-template-rows: 100px; + height: 200px; + width: 500px; + align-items: start; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + font: 20px/1 Ahem; + color: green; + } + #item2 { + font: 10px/1 Ahem; + color: blue; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1">XXXXX</div> + <div id="item2">XXXXX</div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-x", "50"); + item2.setAttribute("data-offset-x", "325"); + checkLayout('#grid', false); + + item2.style.fontSize = "30px"; + + item1.setAttribute("data-offset-x", "50"); + item2.setAttribute("data-offset-x", "275"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html new file mode 100644 index 0000000000..ed54ce722a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + position: relative; + background: grey; + font: 10px/1 Ahem; + grid-template-columns: 40% 60%; + grid-template-rows: 100px; + height: auto; + width: 500px; + align-items: start; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + color: green; + } + #item2 { + color: blue; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1">XXXX</div> + <div id="item2">XX</div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-x", "80"); + item2.setAttribute("data-offset-x", "340"); + checkLayout('#grid', false); + + grid.style.fontSize = "25px"; + + item1.setAttribute("data-offset-x", "50"); + item2.setAttribute("data-offset-x", "325"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html new file mode 100644 index 0000000000..0b991de98b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes."> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 40% 60%; + height: 200px; + width: 500px; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + background: green; + width: 50px; + height: 25px; + } + #item2 { + background: blue; + width: 100px; + height: 25px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> +<script> +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + item1.setAttribute("data-offset-x", "75"); + item2.setAttribute("data-offset-x", "300"); + checkLayout('#grid', false); + + grid.style.width = "300px"; + + item1.setAttribute("data-offset-x", "35"); + item2.setAttribute("data-offset-x", "160"); + checkLayout('#grid', true); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html new file mode 100644 index 0000000000..eb96664655 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<link rel="match" href="../reference/grid-inline-axis-alignment-auto-margins-008-ref.html"> +<meta name="assert" content="The 'left' and 'right' margins must be recomputed after the grid's intrinsic size is determined."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 40% 60%; + grid-template-rows: 100px; + height: 200px; + width: auto; + align-items: start; + } + #grid div { + margin: 0px auto 0px auto; + } + #item1 { + font: 20px/1 Ahem; + color: green; + } + #item2 { + font: 40px/1 Ahem; + color: blue; + } +</style> +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div id="item1">XXX</div> + <div id="item2">XXXXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html new file mode 100644 index 0000000000..0ff058553c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=943013"> +<link rel="match" href="../reference/grid-inline-baseline-ref.html"> +<p>Test passes if the text is aligned.</p> +<div style="writing-mode: vertical-lr; text-orientation: sideways;"> + before + <div style="display: inline-grid;"> + <div style="background: green; width: 100px; height: 50px;">grid</div> + </div> + after +</div> + diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html new file mode 100644 index 0000000000..a9ec652289 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-lr writing mode</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows"> +<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-lr and horizontal-tb orthogonal flows"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.container { + position: relative; +} +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 150px 150px 150px; + font-size: 10px; +} +.item { + width: 50px; + height: 20px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p> + +<p>Direction: LTR vs LTR</p> +<div class="container"> + <div class="grid fit-content verticalLR directionLTR"> + <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div> + <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div> + <div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="150" data-offset-y="0">start</div> + <div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="180">s-end</div> + <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="0">s-start</div> + <div class="item thirdRowSecondColumn horizontalTB" data-offset-x="300" data-offset-y="100">default</div> + </div> +</div> + +<p>Direction: RTL vs LTR</p> +<div class="container"> + <div class="grid fit-content verticalLR directionRTL"> + <div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div> + <div class="item secondRowFirstColumn directionLTR horizontalTB selfStart" data-offset-x="150" data-offset-y="180">start</div> + <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="80">s-end</div> + <div class="item thirdRowFirstColumn directionLTR horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="100">s-start</div> + <div class="item thirdRowSecondColumn directionLTR horizontalTB" data-offset-x="300" data-offset-y="80">default</div> + </div> +</div> + +<p>Direction: LTR vs RTL</p> +<div class="container"> + <div class="grid fit-content verticalLR directionLTR"> + <div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div> + <div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div> + <div class="item secondRowFirstColumn directionRTL horizontalTB selfStart" data-offset-x="150" data-offset-y="0">start</div> + <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="180">s-end</div> + <div class="item thirdRowFirstColumn directionRTL horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="0">s-start</div> + <div class="item thirdRowSecondColumn directionRTL horizontalTB" data-offset-x="300" data-offset-y="100">default</div> + </div> +</div> + +<p>Direction: RTL vs RTL</p> +<div class="container"> + <div class="grid fit-content verticalLR directionRTL"> + <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div> + <div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="150" data-offset-y="180">start</div> + <div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="80">s-end</div> + <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="100">s-start</div> + <div class="item thirdRowSecondColumn horizontalTB" data-offset-x="300" data-offset-y="80">default</div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html new file mode 100644 index 0000000000..2b3b7a489e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-rl writing mode</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows"> +<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-rl and horizontal-tb orthogonal flows"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.container { + position: relative; +} +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 150px 150px 150px; + font-size: 10px; +} +.item { + width: 50px; + height: 20px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p> + +<p>Direction: LTR vs LTR</p> +<div class="container"> + <div class="grid fit-content verticalRL directionLTR"> + <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="300" data-offset-y="80">end</div> + <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="350" data-offset-y="140">center</div> + <div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="0">start</div> + <div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="180">s-end</div> + <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="0">s-start</div> + <div class="item thirdRowSecondColumn horizontalTB" data-offset-x="100" data-offset-y="100">default</div> + </div> +</div> + +<p>Direction: RTL vs LTR</p> +<div class="container"> + <div class="grid fit-content verticalRL directionRTL"> + <div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="300" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="350" data-offset-y="40">center</div> + <div class="item secondRowFirstColumn directionLTR horizontalTB selfStart" data-offset-x="250" data-offset-y="180">start</div> + <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="80">s-end</div> + <div class="item thirdRowFirstColumn directionLTR horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="100">s-start</div> + <div class="item thirdRowSecondColumn directionLTR horizontalTB" data-offset-x="100" data-offset-y="80">default</div> + </div> +</div> + +<p>Direction: LTR vs RTL</p> +<div class="container"> + <div class="grid fit-content verticalRL directionLTR"> + <div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="300" data-offset-y="80">end</div> + <div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="350" data-offset-y="140">center</div> + <div class="item secondRowFirstColumn directionRTL horizontalTB selfStart" data-offset-x="250" data-offset-y="0">start</div> + <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="180">s-end</div> + <div class="item thirdRowFirstColumn directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div> + <div class="item thirdRowSecondColumn directionRTL horizontalTB" data-offset-x="100" data-offset-y="100">default</div> + + </div> +</div> + +<p>Direction: RTL vs RTL</p> +<div class="container"> + <div class="grid fit-content verticalRL directionRTL"> + <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="300" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="350" data-offset-y="40">center</div> + <div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="180">start</div> + <div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="80">s-end</div> + <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div> + <div class="item thirdRowSecondColumn horizontalTB" data-offset-x="100" data-offset-y="80">default</div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html new file mode 100644 index 0000000000..133132529a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: item alignment with orthogonal flows</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows"> +<meta name="assert" content="This test checks that grid item alignment works as expected with horizontal-tb and vertical-rl/vertical-lr orthogonal flows"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.container { + position: relative; +} +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 150px 150px 150px; + font-size: 10px; +} +.item { + width: 20px; + height: 50px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p> + +<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p> +<p>Direction: LTR vs LTR</p> +<div class="container"> + <div class="grid fit-content directionLTR"> + <div class="item firstRowFirstColumn verticalRL selfEnd" data-offset-x="80" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div> + <div class="item secondRowFirstColumn verticalRL selfStart" data-offset-x="0" data-offset-y="150">start</div> + <div class="item secondRowSecondColumn verticalRL selfSelfEnd" data-offset-x="100" data-offset-y="250">s-end</div> + <div class="item thirdRowFirstColumn verticalRL selfSelfStart" data-offset-x="80" data-offset-y="300">s-start</div> + <div class="item thirdRowSecondColumn verticalRL" data-offset-x= "100" data-offset-y="300">default</div> + </div> +</div> + +<p>Direction: RTL vs LTR</p> +<div class="container"> + <div class="grid fit-content directionRTL"> + <div class="item firstRowFirstColumn directionLTR verticalRL selfEnd" data-offset-x="100" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn directionLTR verticalRL selfCenter" data-offset-x="40" data-offset-y="50">center</div> + <div class="item secondRowFirstColumn directionLTR verticalRL selfStart" data-offset-x="180" data-offset-y="150">start</div> + <div class="item secondRowSecondColumn directionLTR verticalRL selfSelfEnd" data-offset-x="0" data-offset-y="250">s-end</div> + <div class="item thirdRowFirstColumn directionLTR verticalRL selfSelfStart" data-offset-x="180" data-offset-y="300">s-start</div> + <div class="item thirdRowSecondColumn directionLTR verticalRL" data-offset-x="80" data-offset-y="300">default</div> + + </div> +</div> + +<p>Direction: LTR vs RTL</p> +<div class="container"> + <div class="grid fit-content directionLTR"> + <div class="item firstRowFirstColumn directionRTL verticalRL selfEnd" data-offset-x="80" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn directionRTL verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div> + <div class="item secondRowFirstColumn directionRTL verticalRL selfStart" data-offset-x="0" data-offset-y="150">start</div> + <div class="item secondRowSecondColumn directionRTL verticalRL selfSelfEnd" data-offset-x="100" data-offset-y="150">s-end</div> + <div class="item thirdRowFirstColumn directionRTL verticalRL selfSelfStart" data-offset-x="80" data-offset-y="400">s-start</div> + <div class="item thirdRowSecondColumn directionRTL verticalRL" data-offset-x="100" data-offset-y="300">default</div> + </div> +</div> + +<p>Direction: RTL vs RTL</p> +<div class="container"> + <div class="grid fit-content directionRTL"> + <div class="item firstRowFirstColumn verticalRL selfEnd" data-offset-x="100" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn verticalRL selfCenter" data-offset-x="40" data-offset-y="50">center</div> + <div class="item secondRowFirstColumn verticalRL selfStart" data-offset-x="180" data-offset-y="150">start</div> + <div class="item secondRowSecondColumn verticalRL selfSelfEnd" data-offset-x="0" data-offset-y="150">s-end</div> + <div class="item thirdRowFirstColumn verticalRL selfSelfStart" data-offset-x="180" data-offset-y="400">s-start</div> + <div class="item thirdRowSecondColumn verticalRL" data-offset-x="80" data-offset-y="300">default</div> + </div> +</div> + +<!-- HORIZONTAL-TB vs VERTICAL-LR --> +<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p> +<p>Direction: LTR vs LTR</p> +<div class="container"> + <div class="grid fit-content drectionLTR"> + <div class="item firstRowFirstColumn verticalLR selfEnd" data-offset-x="80" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn verticalLR selfCenter" data-offset-x="140" data-offset-y="50">center</div> + <div class="item secondRowFirstColumn verticalLR selfStart" data-offset-x="0" data-offset-y="150">start</div> + <div class="item secondRowSecondColumn verticalLR selfSelfEnd" data-offset-x="180" data-offset-y="250">s-end</div> + <div class="item thirdRowFirstColumn verticalLR selfSelfStart" data-offset-x="0" data-offset-y="300">s-start</div> + <div class="item thirdRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="300">default</div> + </div> +</div> + +<p>Direction: RTL vs LTR</p> +<div class="container"> + <div class="grid fit-content directionRTL"> + <div class="item firstRowFirstColumn directionLTR verticalLR selfEnd" data-offset-x="100" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn directionLTR verticalLR selfCenter" data-offset-x="40" data-offset-y="50">center</div> + <div class="item secondRowFirstColumn directionLTR verticalLR selfStart" data-offset-x="180" data-offset-y="150">start</div> + <div class="item secondRowSecondColumn directionLTR verticalLR selfSelfEnd" data-offset-x="80" data-offset-y="250">s-end</div> + <div class="item thirdRowFirstColumn directionLTR verticalLR selfSelfStart" data-offset-x="100" data-offset-y="300">s-start</div> + <div class="item thirdRowSecondColumn directionLTR verticalLR" data-offset-x="80" data-offset-y="300">default</div> + </div> +</div> + +<p>Direction: RTL vs RTL</p> +<div class="container"> + <div class="grid fit-content directionRTL"> + <div class="item firstRowFirstColumn verticalLR selfEnd" data-offset-x="100" data-offset-y="100">end</div> + <div class="item firstRowSecondColumn verticalLR selfCenter" data-offset-x="40" data-offset-y="50">center</div> + <div class="item secondRowFirstColumn verticalLR selfStart" data-offset-x="180" data-offset-y="150">start</div> + <div class="item secondRowSecondColumn verticalLR selfSelfEnd" data-offset-x="80" data-offset-y="150">s-end</div> + <div class="item thirdRowFirstColumn verticalLR selfSelfStart" data-offset-x="100" data-offset-y="400">s-start</div> + <div class="item thirdRowSecondColumn verticalLR" data-offset-x="80" data-offset-y="300">default</div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html new file mode 100644 index 0000000000..1120e45f5c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img style="width:10px; height:20px"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html new file mode 100644 index 0000000000..909406f5e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html @@ -0,0 +1,52 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544"> +<link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + grid-template: 100% / 100%; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html new file mode 100644 index 0000000000..84d7950b09 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img style="width:20px; height:40px"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html new file mode 100644 index 0000000000..2a4dd2d787 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544"> +<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + grid-template: 100% / 100%; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html new file mode 100644 index 0000000000..b85803ec8f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html @@ -0,0 +1,52 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + background: blue; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img style="width:0px; height:20px"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html new file mode 100644 index 0000000000..43202541b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544"> +<link rel="match" href="grid-item-aspect-ratio-stretch-3-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + grid-template: 100% / 100%; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + img { background: blue; } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html new file mode 100644 index 0000000000..8d7fc870fa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html @@ -0,0 +1,52 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + background: blue; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img style="width:20px; height:0px"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html new file mode 100644 index 0000000000..f689cce023 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with a fallback aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544"> +<link rel="match" href="grid-item-aspect-ratio-stretch-4-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + grid-template: 100% / 100%; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + img { background: blue; } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px" viewBox="0 0 50 100"></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html new file mode 100644 index 0000000000..be5eb6efbe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878"> +<meta name="assert" content="Auto margin alignment should be safe."> +<style> +#grid { + display: grid; + width: 100px; + height: 100px; + background: red; + grid-template: 0px / 0px; +} + +#grid > div { + width: 100px; + height: 100px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="grid"> + <div style="margin: auto;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html new file mode 100644 index 0000000000..037794e6cc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878"> +<meta name="assert" content="Auto margin alignment should be safe."> +<style> +#grid { + display: grid; + width: 100px; + height: 100px; + background: red; + grid-template: 0px / 0px; +} + +#grid > div { + width: 100px; + height: 100px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="grid"> + <div style="margin-left: auto; margin-top: auto;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html new file mode 100644 index 0000000000..e11398907e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: align-self and justify-self with auto margins, vertical-lr</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions, vertical-lr writing mode."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 200px 200px; + margin-bottom: 20px; +} + +.item { + width: 20px; + height: 40px; +} + +.autoMarginTop { margin-top: auto; } +.autoMarginRight { margin-right: auto; } +.autoMarginBottom { margin-bottom: auto; } +.autoMarginLeft { margin-left: auto; } +.autoMargin { margin: auto; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p> + +<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR itemsCenter"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR itemsCenter"> + <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR"> + <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +<!-- direction RTL --> +<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR itemsCenter directionRTL"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + + +<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR directionRTL"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR itemsCenter directionRTL"> + <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + + +<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalLR directionRTL"> + <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html new file mode 100644 index 0000000000..42c6dd2d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: align-self and justify-self with auto margins, vertical-rl</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions, vertical-rl writing mode."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 200px 200px; + margin-bottom: 20px; +} + +.item { + width: 20px; + height: 40px; +} + +.autoMarginTop { margin-top: auto; } +.autoMarginRight { margin-right: auto; } +.autoMarginBottom { margin-bottom: auto; } +.autoMarginLeft { margin-left: auto; } +.autoMargin { margin: auto; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p> + +<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalRL itemsCenter"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalRL"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalRL itemsCenter"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalRL"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +<!-- direction RTL --> +<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalRL itemsCenter directionRTL"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + + +<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalRL directionRTL"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content verticalRL itemsCenter directionRTL"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + + +<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html new file mode 100644 index 0000000000..f9fdfd7dbf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout test: align-self and justify-self with auto margins</title> +<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.grid { + grid-template-columns: 100px 100px; + grid-template-rows: 200px 200px; + margin-bottom: 20px; +} + +.item { + width: 20px; + height: 40px; +} + +.autoMarginTop { margin-top: auto; } +.autoMarginRight { margin-right: auto; } +.autoMarginBottom { margin-bottom: auto; } +.autoMarginLeft { margin-left: auto; } +.autoMargin { margin: auto; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p> + +<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content itemsCenter"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content itemsCenter"> + <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content"> + <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +<!-- direction RTL --> +<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content itemsCenter directionRTL"> + <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content directionRTL"> + <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + <div class="item autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content itemsCenter directionRTL"> + <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p> +<div style="position: relative"> + <div class="grid fit-content directionRTL"> + <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + <div class="autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div> + </div> +</div> + +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html new file mode 100644 index 0000000000..e55fe0b9f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html @@ -0,0 +1,110 @@ +<!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: align-content/justify-content:baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / repeat(4, auto); +} +.c { + grid: repeat(4, auto) / auto; +} +div { + float: left; + border:2px solid; + padding:1px; + margin:1px; +} +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-self:baseline; justify-self:baseline; } +.lb { align-self:last baseline; justify-self:last baseline; } +.s { align-self:self-stretch; justify-self:self-stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div> +<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; padding-block-end:36px;" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div> +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div> +<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div> +<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0;" class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div> +<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:15px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html new file mode 100644 index 0000000000..aa33f3c15b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html @@ -0,0 +1,110 @@ +<!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: align-content:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-content-baseline-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + border: 2px solid; + padding: 1px; + margin: 1px; +} +.c { + grid: repeat(4, auto) / auto; +} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> +<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> +<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> +<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> +<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html new file mode 100644 index 0000000000..d32bbf2931 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html @@ -0,0 +1,109 @@ +<!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: align-content/justify-content:baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: 100px / repeat(4, auto); +} +.c { + grid: repeat(4, auto) / 100px; +} +div { + float: left; + border:2px solid; + padding:1px; + margin:1px; +} +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-self:baseline; justify-self:baseline; } +.lb { align-self:last baseline; justify-self:last baseline; } +.s { align-self:self-stretch; justify-self:self-stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } +</style> +</head> +<body> + +<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div> +<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; padding-block-end:56px;" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div> +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div> +<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div> +<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; padding-block-end:50px;" class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div> +<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span style="padding-block-start:15px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; padding-block-end:55px;" class="fb s vr">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div> +<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; padding-block-end:73px;" class="fb s vl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html new file mode 100644 index 0000000000..3d12f68cb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html @@ -0,0 +1,112 @@ +<!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: align-content:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-content-baseline-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: 100px / repeat(4, auto); + border: 2px solid; + padding: 1px; + margin: 1px; +} +.c { + grid: repeat(4, auto) / 100px; +} +.e { align-content:end; } +.c.e { justify-content:end; } + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid e hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid e hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid e vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid e vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid e vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid e vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> +<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> +<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> +<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> +<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid e c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid e c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid e c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid e c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid e c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div> +<div class="grid e c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div> +<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> +<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid e c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid e c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid e vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid e vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div> +<div class="grid e vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div> +<div class="grid e vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html new file mode 100644 index 0000000000..5efb78b00f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html @@ -0,0 +1,110 @@ +<!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: align-content/justify-content:baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / repeat(4, auto); +} +.c { + grid: repeat(4, auto) / auto; +} +div { + float: left; + border:2px solid; + padding:1px; + margin:1px; +} +span { + background: content-box silver; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-self:baseline; justify-self:baseline; } +.lb { align-self:last baseline; justify-self:last baseline; } +.s { align-self:self-stretch; justify-self:self-stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div> +<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div> +<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s">X</span></div> +<div class="grid vl"><span style="padding-block-start:15px;" class="fb">A</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; width:56px;" class="fb s">X</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div> + +<br clear="all"> + +<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div> +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div> +<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div> +<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; height:44px;" class="fb s hl">X</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div> +<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div> +<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div> +<div class="grid vl"><span style="" class="fb vr pbs">A</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; width:44px;" class="fb s vr">X</span></div> +<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div> +<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; width:56px;" class="fb s vl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html new file mode 100644 index 0000000000..8845afe864 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html @@ -0,0 +1,110 @@ +<!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: align-content:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-content-baseline-003-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + border: 2px solid; + padding: 1px; + margin: 1px; +} +.c { + grid: repeat(4, auto) / auto; +} + +span { + background: content-box silver; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid hl"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vl"><span class="fb pbs">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vr"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vr"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="lb">A</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb">A</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb pbs">A</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb">A</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> +<div class="grid c hl"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> +<div class="grid c vl"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> +<div class="grid c vl"><span class="fb hl pbs">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> +<div class="grid c vr"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> +<div class="grid c vr"><span class="fb hl pbe">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl pbs">A</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span class="lb hl pbe">A</span><span class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid c hl"><span class="fb vr pbe">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid vl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid vl"><span class="fb vr pbs">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid vr"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> +<div class="grid vr"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid c hl"><span class="lb vr pbe">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid vl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid vl"><span class="lb vr pbs">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid vr"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div> +<div class="grid vr"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html new file mode 100644 index 0000000000..2394818c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html @@ -0,0 +1,110 @@ +<!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: align-content/justify-content:baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / repeat(4, auto); +} +.c { + grid: repeat(4, auto) / auto; +} +div { + float: left; + border:2px solid; + padding:1px; + margin:1px; +} +span { + background: silver; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-self:baseline; justify-self:baseline; } +.lb { align-self:last baseline; justify-self:last baseline; } +.s { align-self:self-stretch; justify-self:self-stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div> +<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div> +<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s">X</span></div> +<div class="grid vl"><span style="padding-block-start:15px;" class="fb">A</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; width:56px;" class="fb s">X</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div> +<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div> + +<br clear="all"> + +<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div> +<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div> +<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div> +<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; height:44px;" class="fb s hl">X</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div> +<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div> +<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div> +<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div> +<div class="grid vl"><span style="" class="fb vr pbs">A</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; width:44px;" class="fb s vr">X</span></div> +<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div> +<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; width:56px;" class="fb s vl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div> +<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> +<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html new file mode 100644 index 0000000000..81a046be91 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html @@ -0,0 +1,110 @@ +<!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: align-content:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-content-baseline-004-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + border: 2px solid; + padding: 1px; + margin: 1px; +} +.c { + grid: repeat(4, auto) / auto; +} + +span { + background: silver; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:20px; } +span:nth-child(2) { font-size:30px; } +span:nth-child(3) { font-size:10px; } +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid hl"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vl"><span class="fb pbs">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vr"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> +<div class="grid vr"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="lb">A</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb">A</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="lb pbs">A</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb">A</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> +<div class="grid c hl"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> +<div class="grid c vl"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> +<div class="grid c vl"><span class="fb hl pbs">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> +<div class="grid c vr"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> +<div class="grid c vr"><span class="fb hl pbe">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div> +<div class="grid c hl"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vl"><span class="lb hl pbs">A</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div> +<div class="grid c vr"><span class="lb hl pbe">A</span><span class="lb hl">M<br>N</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid c hl"><span class="fb vr pbe">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid vl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid vl"><span class="fb vr pbs">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div> +<div class="grid vr"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> +<div class="grid vr"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div> + +<br clear="all"> + +<div class="grid c hl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid c hl"><span class="lb vr pbe">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid vl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid vl"><span class="lb vr pbs">A</span><span class="lb vr">M<br>N</span></div> +<div class="grid vr"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div> +<div class="grid vr"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html new file mode 100644 index 0000000000..6b89ef49d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html @@ -0,0 +1,110 @@ +<!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: mixed align-content/self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: auto / repeat(10, auto); + border: 2px solid; + margin: 1px; +} +.c { + grid: repeat(4, auto) / auto; +} +.t2 { grid: auto / repeat(3, auto);} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-self:baseline; justify-self:self-start; } +.lb { align-self:last baseline; justify-self:self-end; } +.s { justify-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end;} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px" class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:34px" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:36px" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:34px" class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + + +<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div> +<br clear="all"> +<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> + +<br clear="all"> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html new file mode 100644 index 0000000000..f724b3b6c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html @@ -0,0 +1,112 @@ +<!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: mixed align-content/self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-mixed-baseline-001-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: auto / repeat(10, auto); + border: 2px solid; + margin: 1px; +} +.c { + grid: repeat(4, auto) / auto; +} +.t2 { grid: auto / repeat(3, auto);} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end;} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + + +<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div> +<br clear="all"> +<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> + +<br clear="all"> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html new file mode 100644 index 0000000000..fae8d2e9b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html @@ -0,0 +1,114 @@ +<!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: mixed align-content/self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: 100px / repeat(10, auto); + border: 2px solid; + margin: 1px; + align-content: start; + justify-content: end; +} +.c { + grid: repeat(4, auto) / 100px; + align-content: end; + justify-content: start; +} +.t2 { grid: 100px / repeat(3, auto);} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { place-self:first baseline self-start; } +.lb { place-self:last baseline self-end; } +.s { justify-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end;} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:54px" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + + +<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div> +<br clear="all"> +<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span style="padding-block-end:0px" class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> + +<br clear="all"> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html new file mode 100644 index 0000000000..d14a8cae7a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html @@ -0,0 +1,114 @@ +<!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: mixed align-content/self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-mixed-baseline-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: 100px / repeat(10, auto); + border: 2px solid; + margin: 1px; + place-content: start end; +} +.c { + grid: repeat(4, auto) / 100px; + place-content: end start; +} +.t2 { grid: 100px / repeat(3, auto);} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; place-self:self-start; } +.lb { align-content:last baseline; place-self:self-end; } +.s { place-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end;} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + + +<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div> +<br clear="all"> +<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> + +<br clear="all"> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html new file mode 100644 index 0000000000..1810414816 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html @@ -0,0 +1,114 @@ +<!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: mixed align-content/self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: 100px / repeat(10, auto); + border: 2px solid; + margin: 1px; + align-content: end; + justify-content: start; +} +.c { + grid: repeat(4, auto) / 100px; + align-content: start; + justify-content: end; +} +.t2 { grid: 100px / repeat(3, auto);} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-self:baseline; justify-self:self-start; } +.lb { align-self:last baseline; justify-self:self-end; } +.s { justify-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end;} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px" class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:54px" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + + +<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div> +<br clear="all"> +<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> + +<br clear="all"> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html new file mode 100644 index 0000000000..0a78d59e98 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html @@ -0,0 +1,116 @@ +<!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: mixed align-content/self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-mixed-baseline-003-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: 100px / repeat(10, auto); + border: 2px solid; + margin: 1px; + align-content: end; + justify-content: start; +} +.c { + grid: repeat(4, auto) / 100px; + align-content: start; + justify-content: end; +} +.t2 { grid: 100px / repeat(3, auto);} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end;} + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + +<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div> +<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div> +<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> +<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div> + +<br clear="all"> + + +<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div> +<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div> +<br clear="all"> +<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> +<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div> + +<br clear="all"> + + + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html new file mode 100644 index 0000000000..d167a5f154 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-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: mixed align-content/self:baseline/last baseline in fragmentated grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.columns { + position:relative; + columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + margin-bottom: 5px; + height: 120px; +} + +.grid { + display: grid; + grid: 100px / repeat(3, auto); + grid-auto-rows: 100px; + border: 2px solid; + margin: 1px; +} +.g1 { + border-bottom-width: 0; + grid-template-rows: 100px 0 0; +} +.g2 { + border-top-width: 0; + grid-template-rows: 0 100px 100px; +} + +.h { + visibility: hidden; + height: 0; +} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="columns"> +<div class="grid hl g1"> +<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span> +<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb h">X<br>Z</span> +<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span> +</div> +<div class="grid hl g2"> +<span class="sfb h ">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span> +<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span> +<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html new file mode 100644 index 0000000000..6202845f6f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.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>CSS Grid Test: mixed align-content/self:baseline/last baseline in fragmentated grid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content"> + <link rel="match" href="grid-item-mixed-baseline-004-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; +} + +.columns { + position:relative; + columns: 5; + -ms-columns: 5; + -webkit-columns: 5; + columns: 5; + column-fill: auto; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + border: 2px dashed; + margin-bottom: 5px; + height: 120px; +} + +.grid { + display: grid; + grid: 100px / repeat(3, auto); + grid-auto-rows: 100px; + border: 2px solid; + margin: 1px; +} + +span { + background: lime; + display: inline-block; + border: 1px solid black; +} + +span:nth-child(1) { font-size:30px; } +span:nth-child(2) { font-size:15px; } +span:nth-child(3) { font-size:10px; } +span:nth-child(4) { font-size:20px; } + +.pbs { padding-block-start: 15px; margin-block-start: 5px; } +.pbe { padding-block-end: 7px; margin-block-end: 3px; } + +.fb { align-content:baseline; align-self:self-start; justify-self:self-start; } +.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; } +.s { align-self:stretch; justify-self:stretch; } + +.sfb { align-self:baseline; } +.slb { align-self:last baseline; align-content:self-end; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="columns"> +<div class="grid hl"> +<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span> +<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span> +<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html new file mode 100644 index 0000000000..6a7862c9ac --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html @@ -0,0 +1,39 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: purple; + margin: 10px; + } + + svg { + display: block; + background: green; + } + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <svg class="align justify"></svg> +</div> +<div> + <svg class="align"></svg> +</div> +<div> + <svg class="justify"></svg> +</div> +<div> + <svg></svg> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html new file mode 100644 index 0000000000..1b5ae0a6ad --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html @@ -0,0 +1,45 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="match" href="grid-item-no-aspect-ratio-stretch-1-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + height: 250px; + width: 350px; + background: purple; + margin: 10px; + vertical-align: top; + } + + svg { + background: green; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <svg class="align justify"></svg> +</div> +<div> + <svg class="align"></svg> +</div> +<div> + <svg class="justify"></svg> +</div> +<div> + <svg></svg> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html new file mode 100644 index 0000000000..69d59e85a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + width: 300px; + height: 150px; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align" style="width:20px"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img style="width:20px"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html new file mode 100644 index 0000000000..5371e560a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html @@ -0,0 +1,50 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="match" href="grid-item-no-aspect-ratio-stretch-2-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html new file mode 100644 index 0000000000..7ee8a2d6bd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + width: 300px; + height: 150px; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify" style="height:20px"> +</div> +<div> + <img style="height:20px"> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html new file mode 100644 index 0000000000..e2b05bd216 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html @@ -0,0 +1,50 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="match" href="grid-item-no-aspect-ratio-stretch-3-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html new file mode 100644 index 0000000000..4a543b4a34 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + width: 0px; + height: 20px; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html new file mode 100644 index 0000000000..a53c0fd87c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="match" href="grid-item-no-aspect-ratio-stretch-4-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + grid-template: 100% / 100%; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html new file mode 100644 index 0000000000..98f88fed7b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + width: 20px; + height: 0px; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html new file mode 100644 index 0000000000..c28022c6e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="match" href="grid-item-no-aspect-ratio-stretch-5-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + grid-template: 100% / 100%; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html new file mode 100644 index 0000000000..8e989d1045 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html @@ -0,0 +1,53 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> + body { + line-height: 0; + } + + div { + display: inline-block; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + img { + display: block; + width: 0px; + height: 0px; + } + + .justify { + width: 350px; + } + .align { + height: 250px; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html new file mode 100644 index 0000000000..b4f172c10d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html @@ -0,0 +1,50 @@ +<!doctype html> +<meta charset="utf-8"> +<title>stretching works for replaced items with no aspect ratio</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> +<link rel="match" href="grid-item-no-aspect-ratio-stretch-6-ref.html"> +<style> + body { + line-height: 0; + } + + div { + display: inline-grid; + height: 250px; + width: 350px; + background: grey; + margin: 10px; + vertical-align: top; + } + + .justify { + justify-self: stretch; + } + .align { + align-self: stretch; + } +</style> +<div> + <img class="align justify"> +</div> +<div> + <img class="align"> +</div> +<div> + <img class="justify"> +</div> +<div> + <img> +</div> + +<script> +var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' +var imgs = document.querySelectorAll('img'); +for (var i = 0; i < imgs.length; ++i) { + var img = imgs[i]; + img.src = url; +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html new file mode 100644 index 0000000000..6eadf9a02a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.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>Reference: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + display: grid; + grid: auto / repeat(4, auto); + align-items: start; + justify-items: start; +} +.c { + grid: repeat(4, auto) / auto; +} +div { + float: left; + border:2px solid; + padding:1px; + margin:1px; +} +span { + background: lime; + display: inline-block; + border: 1px solid black; + box-sizing: border-box; +} +span:nth-child(1) { font-size:12px; } +span:nth-child(2) { font-size:16px; } +span:nth-child(3) { font-size:24px; } +span:nth-child(4) { font-size:32px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div> +<div><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div> +<div class="vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> + +<br clear="all"> + +<div><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div> +<div><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div> +<div class="vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> +<div class="vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> +<div class="vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> +<div class="vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> + +<br clear="all"> + +<div class="grid vl"><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div> +<div class="grid vl"><span class="fb vl pbe">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div> +<div class="grid"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="grid"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="grid"><span class="fb" style="order:99">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div> +<div class="grid"><span class="fb pbe" style="order:99;">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div> + +<br clear="all"> + +<div><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div> +<div><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div> +<div class="vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> +<div class="vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> +<div class="vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> +<div class="vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html new file mode 100644 index 0000000000..ccc50c7649 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html @@ -0,0 +1,95 @@ +<!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: align-self/justify-self:baseline/last baseline</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> + <link rel="match" href="grid-item-self-baseline-001-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} + +.grid { + float: left; + display: grid; + grid: auto / repeat(4, auto); + place-items: start; + border: 2px solid; + padding: 1px; + margin: 1px; +} +.c { + grid: repeat(4, auto) / auto; +} + +span { + background: lime; + display: inline-block; + border: 1px solid black; + box-sizing: border-box; +} +span:nth-child(1) { font-size:12px; } +span:nth-child(2) { font-size:16px; } +span:nth-child(3) { font-size:24px; } +span:nth-child(4) { font-size:32px; } +.pbe { padding-block-end:20px; } +.pbs { padding-block-start:20px; } + +.fb { align-self:baseline; } +.lb { align-self:last baseline; } + +.jfb { justify-self:baseline; } +.jlb { justify-self:last baseline; } + +.hl { writing-mode: horizontal-tb; direction:ltr; } +.hr { writing-mode: horizontal-tb; direction:rtl; } +.vl { writing-mode: vertical-lr; text-orientation: sideways; } +.vr { writing-mode: vertical-rl; text-orientation: sideways; } +.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; } +.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; } + +</style> +</head> +<body> + +<div class="grid"><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div> +<div class="grid"><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div> +<div class="grid vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="grid vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="grid vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> +<div class="grid vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div> +<div class="grid"><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div> +<div class="grid vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> +<div class="grid vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> +<div class="grid vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> +<div class="grid vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div> + +<br clear="all"> + +<div class="grid c"><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div> +<div class="grid c"><span class="jfb vl pbe">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div> +<div class="grid c vl"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div> +<div class="grid c vl"><span class="jfb hl pbs">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div> +<div class="grid c vr"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div> +<div class="grid c vr"><span class="jfb hl pbe">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div> + +<br clear="all"> + +<div class="grid"><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div> +<div class="grid"><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div> +<div class="grid vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> +<div class="grid vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> +<div class="grid vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> +<div class="grid vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html new file mode 100644 index 0000000000..17a59d6edc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div style="display: grid; width: 100px; height: 100px; background: gray;"> + <div style="writing-mode: vertical-rl; background: cyan; justify-self: end; direction: rtl;">one<br>two</div> + <div style="writing-mode: vertical-lr; font-size: 30px; background: lime; justify-self: start; direction: rtl;">one<br>two</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html new file mode 100644 index 0000000000..959767bd7c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-sharing-group"> +<link rel="match" href="grid-justify-baseline-001-ref.html"> +<div style="display: grid; width: 100px; height: 100px; direction: rtl; justify-items: baseline; background: gray;"> + <div style="writing-mode: vertical-rl; background: cyan;">one<br>two</div> + <div style="writing-mode: vertical-lr; font-size: 30px; background: lime;">one<br>two</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html new file mode 100644 index 0000000000..27be724bf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<style> +#target { + display: grid; + justify-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; +} +#target > :nth-child(1) { + background: lime; + margin-right: 20px; + padding-right: 20px; + font-size: 20px; + line-height: 20px; + justify-self: first baseline; + writing-mode: vertical-rl; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-lr; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-lr; +} +#target > :nth-child(4) { + background: orange; + margin-left: 20px; + padding-left: 20px; + font-size: 20px; + line-height: 20px; + justify-self: first baseline; + writing-mode: vertical-lr; +} +#target > :nth-child(5) { + background: cyan; + font-size: 30px; + line-height: 30px; + writing-mode: vertical-rl; +} +#target > :nth-child(6) { + background: papayawhip; + font-size: 16px; + line-height: 16px; + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-x="120">line1<br>line2</div> + <div data-offset-x="105">line1<br>line2</div> + <div data-offset-x="126">line1<br>line2</div> + <div data-offset-x="20">line1<br>line2</div> + <div data-offset-x="35">line1<br>line2</div> + <div data-offset-x="42">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html new file mode 100644 index 0000000000..623f849115 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<style> +#target { + display: grid; + grid-template-columns: 120px; + justify-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + line-height: 0; + writing-mode: vertical-lr; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cornflowerblue 3px; + outline-offset: -3px; +} +#target > div { + flex: none; +} +#target > :nth-child(1) { + background: lime; + margin-bottom: 20px; + padding-bottom: 20px; + font-size: 20px; + writing-mode: horizontal-tb; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + writing-mode: horizontal-tb; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-y="40"><span></span><br><span></span></div> + <div data-offset-y="20"><span></span><br><span></span></div> + <div data-offset-y="75"><span></span><br><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html new file mode 100644 index 0000000000..b2e1d6d2ef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<style> +#target { + display: grid; + grid-template-columns: 120px; + justify-items: last baseline; + width: 200px; + border: solid 3px; + position: relative; + line-height: 0; + writing-mode: vertical-rl; +} +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cornflowerblue 3px; + outline-offset: -3px; +} +#target > div { + flex: none; +} +#target > :nth-child(1) { + background: lime; + margin-bottom: 20px; + padding-bottom: 20px; + font-size: 20px; + writing-mode: horizontal-tb; +} +#target > :nth-child(2) { + background: hotpink; + font-size: 30px; + writing-mode: horizontal-tb; +} +#target > :nth-child(3) { + background: papayawhip; + font-size: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div data-offset-y="40"><span></span><br><span></span></div> + <div data-offset-y="20"><span></span><br><span></span></div> + <div data-offset-y="75"><span></span><br><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html new file mode 100644 index 0000000000..ea835caa80 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> +<style> +#target { + display: grid; + grid-template: 50px 50px 50px 50px / 50px 50px 50px; + width: 200px; + border: solid 3px; + position: relative; + line-height: 20px; +} +#target > div { + writing-mode: vertical-rl; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target > div')"> + +<div id="target"> + <div style="grid-row: 1; grid-column: 3; justify-self: baseline; margin-right: 10px;" data-offset-x="100">line1<br>line2</div> + <div style="grid-row: 2; grid-column: span 3; justify-self: baseline;" data-offset-x="100">line1<br>line2</div> + <div style="grid-row: 3; grid-column: 1; justify-self: last baseline; margin-left: 10px;" data-offset-x="10">line1<br>line2</div> + <div style="grid-row: 4; grid-column: span 3; justify-self: last baseline;" data-offset-x="10">line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html new file mode 100644 index 0000000000..49bb63928b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid containers support 'place-content'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the 'justify-content' and 'align-content' properties"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-justify-content" title="5.1. The 'justify-content' and 'align-content' Properties"> +<meta name="assert" content="This test checks that the 'justify-content' and 'align-content' properties, set using their 'place-content' shorthand, work well in grid containers."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: inline-grid; + position: relative; + vertical-align: top; + border: 10px solid black; + margin: 5px; + font: 40px/1 Ahem; + color: cyan; +} +.small { + padding: 40px; +} +.big { + padding: 0px; +} +.content-box.small { + width: 0px; + height: 0px; +} +.content-box.big { + width: 80px; + height: 80px; +} +.border-box { + box-sizing: border-box; + width: 100px; + height: 100px; +} +.start { + place-content: start; +} +.center { + place-content: center; +} +.end { + place-content: end; +} +.space-between { + place-content: space-between; +} +.space-around { + place-content: space-around; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="log"></div> + +<h3>Small content area</h3> + +<pre>box-sizing: content-box</pre> + +<div class="grid small content-box start"> + <div data-offset-x="40" data-offset-y="40">X</div> +</div> +<div class="grid small content-box center"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> +<div class="grid small content-box end"> + <div data-offset-x="0" data-offset-y="0">X</div> +</div> +<div class="grid small content-box space-between"> + <div data-offset-x="40" data-offset-y="40">X</div> +</div> +<div class="grid small content-box space-around"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> + +<pre>box-sizing: border-box</pre> + +<div class="grid small border-box start"> + <div data-offset-x="40" data-offset-y="40">X</div> +</div> +<div class="grid small border-box center"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> +<div class="grid small border-box end"> + <div data-offset-x="0" data-offset-y="0">X</div> +</div> +<div class="grid small border-box space-between"> + <div data-offset-x="40" data-offset-y="40">X</div> +</div> +<div class="grid small border-box space-around"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> + +<h3>Big content area</h3> + +<pre>box-sizing: content-box</pre> + +<div class="grid big content-box start"> + <div data-offset-x="0" data-offset-y="0">X</div> +</div> +<div class="grid big content-box center"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> +<div class="grid big content-box end"> + <div data-offset-x="40" data-offset-y="40">X</div> +</div> +<div class="grid big content-box space-between"> + <div data-offset-x="0" data-offset-y="0">X</div> +</div> +<div class="grid big content-box space-around"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> + +<pre>box-sizing: border-box</pre> + +<div class="grid border-box start"> + <div data-offset-x="0" data-offset-y="0">X</div> +</div> +<div class="grid big border-box center"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> +<div class="grid big border-box end"> + <div data-offset-x="40" data-offset-y="40">X</div> +</div> +<div class="grid big border-box space-between"> + <div data-offset-x="0" data-offset-y="0">X</div> +</div> +<div class="grid big border-box space-around"> + <div data-offset-x="20" data-offset-y="20">X</div> +</div> + +<script> +document.fonts.ready.then(() => { + checkLayout('.grid'); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html new file mode 100644 index 0000000000..b76e808da5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start"> +<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with its alignment container's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html new file mode 100644 index 0000000000..c7ae3f0b7c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end"> +<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with its alignment container's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html new file mode 100644 index 0000000000..342ba8f2e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values"> +<meta name="assert" content="Absolute positioned grid items with 'left' value for justify-self are flushed with its alignment container's 'left' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: left; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: left; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: left; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html new file mode 100644 index 0000000000..39a3560c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values"> +<meta name="assert" content="Absolute positioned grid items with 'right' value for justify-self are flushed with its alignment container's 'right' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: right; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: right; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: right; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html new file mode 100644 index 0000000000..d37e541f68 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center"> +<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: center; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: center; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: center; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="20" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="140" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="20" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="145" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="320" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="320" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html new file mode 100644 index 0000000000..fe440bf0ca --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start"> +<meta name="assert" content="The 'flex-start' value of justify-self behaves like 'start' for absolute positioned grid items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: flex-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: flex-start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: flex-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: flex-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html new file mode 100644 index 0000000000..cdd8b5a1f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start"> +<meta name="assert" content="The 'flex-end' value of justify-self behaves like 'end' for absolute positioned grid items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: flex-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: flex-end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: flex-end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: flex-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html new file mode 100644 index 0000000000..a52265e344 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: self-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: self-start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: self-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html new file mode 100644 index 0000000000..2ff678ecc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end"> +<meta name="assert" content="Absolute positioned grid items with 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: self-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: self-end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: self-end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: self-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html new file mode 100644 index 0000000000..801f6590a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: self-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: self-start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: self-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html new file mode 100644 index 0000000000..596787d0bd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: self-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: self-end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: self-end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: self-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html new file mode 100644 index 0000000000..1b27bfc941 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start"> +<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + justify-self: start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + justify-self: start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + justify-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="200" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="390" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html new file mode 100644 index 0000000000..a15bbc0608 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end"> +<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + justify-self: end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + justify-self: end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + justify-self: end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="380" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="350" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html new file mode 100644 index 0000000000..52d8ca640d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center"> +<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + justify-self: center; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + justify-self: center; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: center; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="20" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="290" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="370" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="270" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> +o +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html new file mode 100644 index 0000000000..83071e0c23 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + justify-self: self-start; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + justify-self: self-start; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: self-start; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="380" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="350" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html new file mode 100644 index 0000000000..1ea1220092 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end"> +<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + justify-self: self-end; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + justify-self: self-end; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + justify-self: self-end; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: self-end; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="200" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="390" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div> + <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html new file mode 100644 index 0000000000..041ee3fcc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start"> +<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + align-items: start; +} +.grid.RTL { width: 400px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + justify-self: baseline; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + justify-self: baseline; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + justify-self: baseline; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + justify-self: baseline; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html new file mode 100644 index 0000000000..31d06b8062 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Sticky positioned grid items are aligned correcly."> +<style> +.container { + border: solid 1px; + overflow: auto; + width: 500px; +} +.grid { + position: relative; + display: grid; + grid-template-columns: 100px 100px 100px 300px; + grid-template-rows: 75px 75px 75px 75px; + background: grey; + width: 400px; + margin-bottom: 20px; +} +.sticky { + position: -webkit-sticky; + position: sticky; + width: 20px; + height: 20px; + background-color: #cae8ca; +} +.item1 { + left: 0px; + grid-column: 1; + grid-row: 1; +} +.item2 { + left: 0px; + grid-column: 2; + grid-row: 2; +} +.item3 { + left: 0px; + grid-column: 3; + grid-row: 3; +} +.item4 { + grid-column: 4; + grid-row: 4; + background: lightgrey; +} +.scroll { overflow: auto; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid')"> +<div class="container"> + <div style="width: 30px; float:left; height: 10px;"></div> + <div class="grid"> + <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div> + <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div> + <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div> + <div class="item4"></div> + </div> + <div style="width: 30px; float:left; height: 10px;"></div> + <div class="grid scroll"> + <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div> + <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div> + <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div> + <div class="item4"></div> + </div> + <div style="width: 2000px; height: 10px;"></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html new file mode 100644 index 0000000000..cf14691161 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required."> +<style> +.container { + border: solid 1px; + overflow: auto; + width: 500px; +} +.grid { + position: relative; + display: grid; + grid-template-columns: 100px 100px 100px 300px; + grid-template-rows: 75px 75px 75px 75px; + background: grey; + width: 400px; + margin-bottom: 20px; +} +.sticky { + position: -webkit-sticky; + position: sticky; + width: 20px; + height: 20px; + background-color: #cae8ca; +} +.item1 { + left: 40px; + grid-column: 1; + grid-row: 1; +} +.item2 { + left: 100px; + grid-column: 2; + grid-row: 2; +} +.item3 { + left: 290px; + grid-column: 3; + grid-row: 3; +} +.item4 { + grid-column: 4; + grid-row: 4; + background: lightgrey; +} +.scroll { overflow: auto; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid')"> +<div class="container"> + <div style="width: 30px; float:left; height: 10px;"></div> + <div class="grid"> + <div class="item1 sticky justifySelfStart" data-offset-x="10" data-offset-y="0"></div> + <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div> + <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div> + <div class="item4"></div> + </div> + <div style="width: 30px; float:left; height: 10px;"></div> + <div class="grid scroll"> + <div class="item1 sticky justifySelfStart" data-offset-x="40" data-offset-y="0"></div> + <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div> + <div class="item3 sticky justifySelfEnd" data-offset-x="290" data-offset-y="150"></div> + <div class="item4"></div> + </div> + <div style="width: 2000px; height: 10px;"></div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html new file mode 100644 index 0000000000..c9e630cbac --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { position: relative; } +.grid { + position: relative; + text-orientation: sideways; + grid: 100px 200px / 200px 100px; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.width25 { width: 25px; } +.width200 { width: 200px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 25px; } +.paddingRight { padding-right: 25px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>Horizontal grid and verticalRL items do not share a baseline context</pre> + +<div class="grid width300 justifyItemsBaseline"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="75" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>Horizontal grid and verticalLR item</pre> + +<div class="grid width300 justifyItemsBaseline"> + <div class="firstRowFirstColumn" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>VerticalLR grid and Horizontal item</pre> + +<div class="grid justifyItemsBaseline verticalLR"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + +<pre>VerticalRL grid and Horizontal item</pre> + +<div class="grid justifyItemsBaseline verticalRL"> + <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html new file mode 100644 index 0000000000..e96f8da6e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { position: relative; } +.grid { + position: relative; + text-orientation: sideways; + grid: 100px 200px / 200px 100px; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.width25 { width: 25px; } +.width200 { width: 200px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 20px; } +.paddingRight { padding-right: 20px; } + +.fixedHeight { height: 125px; } +.fixedWidth { width: 125px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>Horizontal grid and verticalLR item with fixed width</pre> + +<div class="grid width300 justifyItemsBaseline"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>Horizontal grid and verticalRL item with fixed width do not share a baseline context</pre> + +<div class="grid width300 justifyItemsBaseline"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>VerticalLR grid and item with fixed height</pre> + +<div class="grid justifyItemsBaseline verticalLR"> + <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + +<pre>VerticalRL grid and item with fixed width</pre> + +<div class="grid justifyItemsBaseline verticalRL"> + <div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html new file mode 100644 index 0000000000..19a4f5193b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { position: relative; } +.grid { + position: relative; + text-orientation: sideways; + grid: 100px 200px / 200px 100px; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.width25 { width: 25px; } +.width200 { width: 200px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 20px; } +.paddingRight { padding-right: 20px; } + +.relativeHeight { height: 50%; } +.relativeWidth { width: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>Horizontal grid and verticalLR item with relative width</pre> + +<div class="grid width300 justifyItemsBaseline"> + <div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>Horizontal grid and verticalRL item with relative width do not share a baseline context</pre> + +<div class="grid width300 justifyItemsBaseline"> + <div class="firstRowFirstColumn relativeWidth" data-offset-x="00" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>VerticalLR grid and item with relative height</pre> + +<div class="grid justifyItemsBaseline verticalLR"> + <div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + +<pre>VerticalRL grid and item with relative height</pre> + +<div class="grid justifyItemsBaseline verticalRL"> + <div class="firstRowFirstColumn relativeHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html new file mode 100644 index 0000000000..f3f70790c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { position: relative; } +.inline-grid { + position: relative; + text-orientation: sideways; + grid: 100px 200px / auto auto; + font-family: Ahem; +} +.bigFont { font-size: 50px; } +.height25 { height: 25px; } +.width25 { width: 25px; } +.width200 { width: 200px; } +.width300 { width: 300px; } + +.paddingLeft { padding-left: 20px; } +.paddingRight { padding-right: 20px; } + +.fixedHeight { height: 125px; } +.fixedWidth { width: 125px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })"> + +<pre>Horizontal grid and verticalLR item with fixed width</pre> + +<!-- The two items share a baseline group. --> +<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>Horizontal grid and verticalRL item with fixed width</pre> + +<!-- The two items *do not* share a baseline group. --> +<div class="inline-grid justifyItemsBaseline" data-expected-width="150" data-expected-height="300"> + <div class="firstRowFirstColumn fixedWidth" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> + <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="5" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn width25"></div> +</div> + +<pre>VerticalLR grid and item with fixed height</pre> + +<div class="inline-grid justifyItemsBaseline verticalLR"> + <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + +<pre>VerticalRL grid and item with fixed height</pre> + +<div class="inline-grid justifyItemsBaseline verticalRL"> + <div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> + <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> + <div class="autoRowSpanning2AutoColumn height25"></div> +</div> + + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html new file mode 100644 index 0000000000..8e0ca6f0c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { overflow: scroll; } +.container { position: relative; } +.grid { + position: relative; + grid-template-columns: 150px; + text-orientation: sideways; + font: 20px/1 Ahem; +} +.width100 { width: 100px; } +.width200 { width: 200px; } +.width300 { width: 300px; } +.bigFont { font-size: 50px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<pre>verticalLR grid and parallel items</pre> + +<div class="container width100 verticalLR"> + <div class="grid justifyItemsBaseline"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="120">É É ÉÉ</div> + <div class="secondRowFirstColumn bigFont" data-offset-x="20" data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div> + </div> +</div> + +<pre>verticalRL grid and parallel items</pre> + +<div class="container width100 verticalRL"> + <div class="grid justifyItemsBaseline"> + <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="120">É É ÉÉ</div> + <div class="secondRowFirstColumn bigFont" data-offset-x="0" data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html new file mode 100644 index 0000000000..df72a88262 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-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: baseline align a display:block item with a display:grid 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; +} + +.inner-grid { + background: lightgrey; + grid-column: 2; + grid-row: 3; + min-width: 10px; + min-height: 0; + border: 0 solid lightblue; + border-top-width: 10px; + border-bottom-width: 40px; + padding-bottom: 20px; +} + +x, z { + display: block; + min-width: 40px; + min-height: 10px; + font-size: 10em; + background: silver; +} +z { + width: 40px; + height: 10px; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <x> A</x><z></z> +</div> +</div> + +<div class="grid" style="align-items:last baseline"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <z></z><x> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html new file mode 100644 index 0000000000..19a26d8d6a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.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: baseline align a display:block item with a display:grid item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-self-alignment-baseline-with-grid-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; +} + +.inner-grid { + display: grid; + grid: auto auto / auto; + background: lightgrey; + grid-column: 2; + grid-row: 3; + min-width: 10px; + min-height: 0; + border: 0 solid lightblue; + border-top-width: 10px; + border-bottom-width: 40px; + place-content: inherit; + place-items: inherit; + padding-bottom: 20px; +} + +x { + min-width: 40px; + min-height: 10px; + font-size: 10em; + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <x> A</x><x style="grid-row:2"></x> +</div> +</div> + +<div class="grid" style="align-items:last baseline"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <x></x><x style="grid-row:2"> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html new file mode 100644 index 0000000000..a426f879c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.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: baseline align a display:block item with a display:grid item with spanned item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-self-alignment-baseline-with-grid-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; +} + +.inner-grid { + display: grid; + grid: auto auto / auto; + background: lightgrey; + grid-column: 2; + grid-row: 3; + min-width: 10px; + min-height: 0; + border: 0 solid lightblue; + border-top-width: 10px; + border-bottom-width: 40px; + place-content: inherit; + place-items: inherit; + padding-bottom: 20px; +} + +x { + min-width: 40px; + min-height: 10px; + font-size: 10em; + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <x style="grid-row:1/span 3"> A</x><x style="grid-column:1"></x> +</div> +</div> + +<div class="grid" style="align-items:last baseline"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <x></x><x style="grid-row:2/span 3"> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html new file mode 100644 index 0000000000..ed3bf30317 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.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: baseline align a display:block item with a display:grid spanned item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-self-alignment-baseline-with-grid-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; +} + +.inner-grid { + display: grid; + grid: auto auto / auto; + background: lightgrey; + grid-column: 2; + grid-row: 2 / span 2; + min-width: 10px; + min-height: 0; + border: 0 solid lightblue; + border-top-width: 10px; + border-bottom-width: 40px; + place-content: inherit; + place-items: inherit; + padding-bottom: 20px; +} + +x { + min-width: 40px; + min-height: 10px; + font-size: 10em; + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:2/1">A </y> +<div class="inner-grid"> + <x> A</x><x style="grid-row:2"></x> +</div> +</div> + +<div class="grid" style="align-items:last baseline"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <x></x><x style="grid-row:2"> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html new file mode 100644 index 0000000000..5e20b88d35 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-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: baseline align a display:block item with a display:grid spanned item with spanned item</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="match" href="grid-self-alignment-baseline-with-grid-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; +} + +.inner-grid { + display: grid; + grid: auto auto / auto; + background: lightgrey; + grid-column: 2; + grid-row: 2 / span 2; + min-width: 10px; + min-height: 0; + border: 0 solid lightblue; + border-top-width: 10px; + border-bottom-width: 40px; + place-content: inherit; + place-items: inherit; + padding-bottom: 20px; +} + +x { + min-width: 40px; + min-height: 10px; + font-size: 10em; + background: silver; +} + + </style> +</head> +<body> + +<div class="grid"> +<y style="grid-area:2/1">A </y> +<div class="inner-grid"> + <x style="grid-row:1/span 3"> A</x><x style="grid-row:4"></x> +</div> +</div> + +<div class="grid" style="align-items:last baseline"> +<y style="grid-area:3/1">A </y> +<div class="inner-grid"> + <x></x><x style="grid-row:2/span 3"> A</x> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html new file mode 100644 index 0000000000..93e622ce6d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on absolute positioned grid items with non-static position in the property's axis."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="5" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="170" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="105" data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="155" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="70" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="5" data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="5" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="110" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="195" data-offset-y="10" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="155" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="105" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="210" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="45" data-offset-y="10" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="5" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html new file mode 100644 index 0000000000..6b2d5c4256 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { margin: 5px 10px 15px 20px; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="25" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="160" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="20" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="125" data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="175" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="60" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="25" data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="25" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="200" data-offset-y="15" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="175" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="125" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="200" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="50" data-offset-y="15" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="25" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html new file mode 100644 index 0000000000..0a5d674fbd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with borders."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + border-color: silver; + border-style: solid; + border-width: 5px 10px 15px 20px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="105" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="155" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="40" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="5" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="5" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="80" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="105" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="30" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="5" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html new file mode 100644 index 0000000000..b9237a5334 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { padding: 5px 10px 15px 20px; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="105" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="155" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="40" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="5" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="5" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="80" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="105" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="30" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="5" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html new file mode 100644 index 0000000000..39c75eb5d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="13" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="8" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="113" data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="163" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="50" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="170" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="13" data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="13" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="189" data-offset-y="12" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="163" data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="113" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="39" data-offset-y="12" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="13" data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html new file mode 100644 index 0000000000..6565a60387 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items when both grid and its items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid { + margin: 4px 2px 8px 3px; + padding: 1px 4px 2px 3px; + border-color: silver; + border-style: solid; + border-width: 5px 6px 4px 8px; +} + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="16" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="153" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="11" data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="116" data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="166" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="53" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="173" data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="16" data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="16" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="93" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="192" data-offset-y="13" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="166" data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="116" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="193" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="42" data-offset-y="13" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="16" data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html new file mode 100644 index 0000000000..55c1892da1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on absolute positioned orthogonal grid items with non-static position in the property's axis."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="5" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="210" data-offset-y="80" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="105" data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="155" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="110" data-offset-y="80" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="5" data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="5" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="70" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="195" data-offset-y="10" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="155" data-offset-y="110" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="105" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="170" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="20" data-offset-y="10" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="5" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html new file mode 100644 index 0000000000..653dee6f7f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { margin: 5px 10px 15px 20px; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="25" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="200" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="20" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="125" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="175" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="100" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="25" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="25" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="60" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="200" data-offset-y="15" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="175" data-offset-y="115" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="125" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="160" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="25" data-offset-y="15" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="25" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html new file mode 100644 index 0000000000..4136c44b0d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with borders."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + border-color: silver; + border-style: solid; + border-width: 5px 10px 15px 20px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="5" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="180" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="155" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="80" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="5" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="5" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="40" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="155" data-offset-y="110" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="105" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="5" data-offset-y="10" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="5" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html new file mode 100644 index 0000000000..86dc3257a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { padding: 5px 10px 15px 20px; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="5" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="180" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="155" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="80" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="5" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="5" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="40" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="155" data-offset-y="110" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="105" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="5" data-offset-y="10" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="5" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html new file mode 100644 index 0000000000..d12c1826f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; + left: 5px; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; + right: 10px; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; + top: 10px +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; + left: 5px; + top: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="13" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="190" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="8" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="113" data-offset-y="162" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="163" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="90" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="170" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="13" data-offset-y="162" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="13" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="50" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="189" data-offset-y="12" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="163" data-offset-y="112" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="113" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="150" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="14" data-offset-y="12" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="13" data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html new file mode 100644 index 0000000000..003c3bbb37 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid { + margin: 4px 2px 8px 3px; + padding: 1px 4px 2px 3px; + border-color: silver; + border-style: solid; + border-width: 5px 6px 4px 8px; +} + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="73" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="157" data-offset-y="65" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="23" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="111" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="223" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="57" data-offset-y="65" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="161" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="11" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="11" data-offset-y="75" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="63" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="192" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="161" data-offset-y="103" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="173" data-offset-y="75" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="111" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="17" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="43" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html new file mode 100644 index 0000000000..4c8bd89ecf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { margin: 5px 10px 15px 20px; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="30" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="145" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="20" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="180" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="45" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="20" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="20" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="110" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="200" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="200" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="230" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="50" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="20" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html new file mode 100644 index 0000000000..6624ea00d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have borders."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + border-color: silver; + border-style: solid; + border-width: 5px 10px 15px 20px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="160" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="25" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="160" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="210" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html new file mode 100644 index 0000000000..cc377a5c59 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { padding: 5px 10px 15px 20px; } + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="160" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="25" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="160" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="210" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html new file mode 100644 index 0000000000..afbbfcb1dd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="20" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="134" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="8" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="rid RTL"> + <div data-offset-x="170" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="34" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="170" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="8" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="rid verticalLR"> + <div data-offset-x="8" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="189" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="rid verticalRL"> + <div data-offset-x="220" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="108" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="39" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="8" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html new file mode 100644 index 0000000000..3cf29475ed --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid { + margin: 4px 2px 8px 3px; + padding: 1px 4px 2px 3px; + border-color: silver; + border-style: solid; + border-width: 5px 6px 4px 8px; +} + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="23" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="137" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="11" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="173" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="37" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="173" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="11" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="11" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="103" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="192" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="223" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="111" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="42" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="11" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html new file mode 100644 index 0000000000..e1b3fc4d25 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { margin: 5px 10px 15px 20px; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="80" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="165" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="30" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="120" data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="230" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="65" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="170" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="20" data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="20" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="70" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="200" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="170" data-offset-y="105" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="180" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="120" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="25" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="50" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html new file mode 100644 index 0000000000..855ed7cdef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have borders."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + border-color: silver; + border-style: solid; + border-width: 5px 10px 15px 20px; +} + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="145" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="10" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="210" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="45" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="160" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="30" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html new file mode 100644 index 0000000000..6fa38b9206 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { padding: 5px 10px 15px 20px; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="145" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="10" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="210" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="45" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="160" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="30" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html new file mode 100644 index 0000000000..0ff8497818 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="70" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="154" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="20" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="108" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="220" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="54" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="158" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="8" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="8" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="60" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="189" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="158" data-offset-y="102" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="170" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="108" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="14" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="40" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html new file mode 100644 index 0000000000..003c3bbb37 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid { + margin: 4px 2px 8px 3px; + padding: 1px 4px 2px 3px; + border-color: silver; + border-style: solid; + border-width: 5px 6px 4px 8px; +} + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } +.horizontal { writing-mode: horizontal-tb; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: 1 / 2; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / 3; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 2 / 3; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="73" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="157" data-offset-y="65" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="23" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div> + <div data-offset-x="111" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="223" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div> + <div data-offset-x="57" data-offset-y="65" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="161" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div> + <div data-offset-x="11" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="11" data-offset-y="75" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="63" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="192" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div> + <div data-offset-x="161" data-offset-y="103" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="173" data-offset-y="75" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div> + <div data-offset-x="111" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="17" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div> + <div data-offset-x="43" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html new file mode 100644 index 0000000000..e0681310d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="290" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="390" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="390" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="250" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="195" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html new file mode 100644 index 0000000000..9049a826a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { margin: 5px 10px 15px 20px; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="30" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="295" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="20" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="380" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="95" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="380" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="270" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="20" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="110" data-offset-y="285" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="200" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="200" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="230" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="285" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="50" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="20" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html new file mode 100644 index 0000000000..42b92fd681 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have borders."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + border-color: silver; + border-style: solid; + border-width: 5px 10px 15px 20px; +} + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="360" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="75" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="360" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="250" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="210" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html new file mode 100644 index 0000000000..db5c0f89cb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { padding: 5px 10px 15px 20px; } + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="10" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="360" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="75" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="360" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="250" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="90" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="210" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html new file mode 100644 index 0000000000..3b0a3be6c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="20" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="284" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="8" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="370" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="84" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="370" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="258" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="8" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="283" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="189" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="190" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="220" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="108" data-offset-y="283" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="39" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="8" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html new file mode 100644 index 0000000000..537ce0ba80 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<meta name="assert" content="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + justify-content: center; +} +.grid.LTR, .grid.RTL { width: 450px; } +.grid.verticalLR, .grid.verticalRL { height: 450px; } +.grid > div { position: absolute; } +.grid > :nth-child(1) { background: green; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: red; } + +.grid { + margin: 4px 2px 8px 3px; + padding: 1px 4px 2px 3px; + border-color: silver; + border-style: solid; + border-width: 5px 6px 4px 8px; +} + +.grid > div { + margin: 2px 4px 6px 8px; + padding: 3px 2px 4px 5px; + border-color: silver; + border-style: solid; + border-width: 1px 6px 2px 3px; +} + +.LTR { direction: ltr; } +.RTL { direction: rtl; } +.verticalLR { writing-mode: vertical-lr; } +.verticalRL { writing-mode: vertical-rl; } + +.firstRowFirstColumn { + grid-row: 1 / 2; + grid-column: auto / 1; + align-self: start; + justify-self: right; +} +.firstRowSecondColumn { + grid-row: 1 / 2; + grid-column: 2 / auto; + align-self: end; + justify-self: center; +} +.secondRowFirstColumn { + grid-row: 2 / 3; + grid-column: auto / auto; + align-self: center; + justify-self: self-start; +} +.secondRowSecondColumn { + grid-row: 2 / 3; + grid-column: 1 / 2; + align-self: self-end; + justify-self: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid LTR"> + <div data-offset-x="23" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="289" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="8" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid RTL"> + <div data-offset-x="377" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="86" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="377" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="261" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<br><br> + +<div class="grid verticalLR"> + <div data-offset-x="11" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="103" data-offset-y="285" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="192" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div data-offset-x="223" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="111" data-offset-y="285" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div> + <div data-offset-x="42" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="11" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html new file mode 100644 index 0000000000..95b5f4fe6d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html new file mode 100644 index 0000000000..10ea533404 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-right: 20px; + margin-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html new file mode 100644 index 0000000000..51ad16826e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html @@ -0,0 +1,67 @@ + <!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 10px 0px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 0px 20px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 20px 10px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html new file mode 100644 index 0000000000..f0f19e2920 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-right: 20px; + padding-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html new file mode 100644 index 0000000000..c21500cd3f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html new file mode 100644 index 0000000000..65f5246764 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-right: 20px; + margin-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html new file mode 100644 index 0000000000..6ba763ea9c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { writing-mode: vertical-lr; } +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 10px 0px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 0px 20px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 20px 10px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html new file mode 100644 index 0000000000..e433dde9b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-right: 20px; + padding-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="60" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html new file mode 100644 index 0000000000..90de8d4bc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="20" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="80" data-expected-height="125" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="125" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html new file mode 100644 index 0000000000..b71a318908 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-right: 20px; + margin-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="20" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="110" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="130" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html new file mode 100644 index 0000000000..8b1999b4b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 10px 0px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 0px 20px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 20px 10px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="20" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="130" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="130" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html new file mode 100644 index 0000000000..fe738f2e8a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-right: 20px; + padding-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="20" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="130" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="130" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html new file mode 100644 index 0000000000..ffb52481a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="80" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="20" data-expected-height="125" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="125" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html new file mode 100644 index 0000000000..34e1c5ec6c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-right: 20px; + margin-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="80" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="20" data-expected-height="110" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html new file mode 100644 index 0000000000..df8749c47b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.grid > div { writing-mode: vertical-lr; } +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 10px 0px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 0px 20px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 20px 10px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="80" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="20" data-expected-height="130" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html new file mode 100644 index 0000000000..00059268fc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-right: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-bottom: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-right: 20px; + padding-bottom: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="80" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="20" data-expected-height="130" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html new file mode 100644 index 0000000000..ad71302aef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html @@ -0,0 +1,61 @@ +<!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 Reference: align/justify-self on range INPUT items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { + margin:0; + padding:0; + border:none; /* NOTE: On Windows, GetWidgetBorder returns 1px on all sides, + so we need the next declaration for the width/height to match: */ + box-sizing: border-box; + width:300px; + height:80px; +} + +.grid { + display: inline-grid; + grid: 80px / 300px; + place-items: stretch; + border:1px solid; +} + +.zero { grid:0/0; } +.zero input { width:0; height:0; } + +.none input { -webkit-appearance:none; } + + </style> +</head> +<body> + +<div class="grid"><input type=range></div> +<br> +<div class="grid zero"><input type=range></div> +<br> +<div class="grid"><input type=range style="place-self:normal"></div> +<br> +<div class="grid zero"><input type=range style="place-self:normal"></div> +<br> + +<div class="none"> +<div class="grid"><input type=range></div> +<br> +<div class="grid zero"><input type=range></div> +<br> +<div class="grid"><input type=range style="place-self:normal"></div> +<br> +<div class="grid zero"><input type=range style="place-self:normal"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html new file mode 100644 index 0000000000..fb17f3a4a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html @@ -0,0 +1,58 @@ +<!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: align/justify-self on range INPUT items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> + <link rel="match" href="grid-self-alignment-stretch-input-range-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { + margin:0; + padding:0; + border:none; +} + +.grid { + display: inline-grid; + grid: 80px / 300px; + place-items: stretch; + border:1px solid; +} + +.zero { grid:0/0; } + +.none input { -webkit-appearance:none; } + + </style> +</head> +<body> + +<div class="grid"><input type=range></div> +<br> +<div class="grid zero"><input type=range></div> +<br> +<div class="grid"><input type=range style="place-self:normal"></div> +<br> +<div class="grid zero"><input type=range style="place-self:normal"></div> +<br> + +<div class="none"> +<div class="grid"><input type=range></div> +<br> +<div class="grid zero"><input type=range></div> +<br> +<div class="grid"><input type=range style="place-self:normal"></div> +<br> +<div class="grid zero"><input type=range style="place-self:normal"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html new file mode 100644 index 0000000000..ac851b2514 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html new file mode 100644 index 0000000000..d1640a5510 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="90" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="130" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="90" data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html new file mode 100644 index 0000000000..6b9563bbdf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 20px 0px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 10px 20px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html new file mode 100644 index 0000000000..05332f1c9a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html new file mode 100644 index 0000000000..ce17538fe9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html new file mode 100644 index 0000000000..ab6282ab4d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="90" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="130" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="90" data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html new file mode 100644 index 0000000000..f960feec88 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 20px 0px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 10px 20px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html new file mode 100644 index 0000000000..fae2519cf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html new file mode 100644 index 0000000000..6fa5073311 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="125" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="125" data-expected-width="125" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html new file mode 100644 index 0000000000..2ca7951bff --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="110" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="110" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="130" data-offset-y="00" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html new file mode 100644 index 0000000000..f15f0c59fb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 20px 0px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 10px 20px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="130" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="130" data-offset-y="0" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html new file mode 100644 index 0000000000..e5077b26e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="130" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="130" data-offset-y="0" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html new file mode 100644 index 0000000000..a7790b60ef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="125" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="125" data-expected-width="125" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html new file mode 100644 index 0000000000..5c7fd92cc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="110" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="110" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="130" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html new file mode 100644 index 0000000000..9265d65728 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 20px 0px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 10px 20px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="130" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="130" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html new file mode 100644 index 0000000000..46370e4dcc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-lr; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="130" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="130" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html new file mode 100644 index 0000000000..b41aeb73f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html new file mode 100644 index 0000000000..36cec785e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-left: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-left: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="90" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="120" data-offset-y="100" data-expected-width="130" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="10" data-offset-y="100" data-expected-width="90" data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html new file mode 100644 index 0000000000..c8e34e484b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 0px 0px 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 0px 20px 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html new file mode 100644 index 0000000000..d88a7300b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-left: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-left: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html new file mode 100644 index 0000000000..d38de47eff --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html new file mode 100644 index 0000000000..36aaff90f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="90" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="130" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="90" data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html new file mode 100644 index 0000000000..d32631e7d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 20px 0px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 10px 20px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html new file mode 100644 index 0000000000..f6616048dd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 100px 150px; + grid-template-rows: 150px 100px; + font: 10px/1 Ahem; + background: grey; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="100" class="firstRowFirstColumn">X XX X</div> + <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html new file mode 100644 index 0000000000..1f852aba4e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="125" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="105" data-offset-y="0" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html new file mode 100644 index 0000000000..e691767589 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-left: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-left: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="110" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="140" data-offset-y="120" data-expected-width="110" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="100" data-offset-y="00" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="10" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html new file mode 100644 index 0000000000..86a02c6026 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 0px 00px 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 0px 20px 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html new file mode 100644 index 0000000000..d99580eecc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-left: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-left: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="80" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html new file mode 100644 index 0000000000..59b953a0af --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="170" data-offset-y="0" data-expected-width="80" data-expected-height="125" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="45" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html new file mode 100644 index 0000000000..4da2cd6c98 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + margin-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + margin-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + margin-bottom: 20px; + margin-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="170" data-offset-y="0" data-expected-width="80" data-expected-height="110" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="120" data-expected-width="110" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html new file mode 100644 index 0000000000..86ed82f66e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.grid > div { border-style: solid; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + border-width: 0px 0px 10px 0px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + border-width: 0px 20px 0px 0px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; + border-width: 0px 0px 0px 0px; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + border-width: 0px 10px 20px 0px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="170" data-offset-y="0" data-expected-width="80" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html new file mode 100644 index 0000000000..57a25d1372 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + font: 20px/1 Ahem; + background: grey; + width: 250px; + height: 250px; + writing-mode: vertical-rl; +} +.grid > div { writing-mode: horizontal-tb; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; + background: green; + justify-self: stretch; + align-self: start; + padding-bottom: 10px; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + background: blue; + justify-self: start; + align-self: stretch; + padding-right: 20px; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; + background: yellow; + justify-self: start; + align-self: start; +} +.secondRowSecondColumn { + grid-row: 2; + grid-column: 2; + background: red; + justify-self: stretch; + align-self: stretch; + padding-bottom: 20px; + padding-right: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> +<div class="grid"> + <div data-offset-x="170" data-offset-y="0" data-expected-width="80" data-expected-height="120" class="firstRowFirstColumn">XX X</div> + <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20" class="firstRowSecondColumn">XX X</div> + <div data-offset-x="40" data-offset-y="0" data-expected-width="80" data-expected-height="20" class="secondRowFirstColumn">XX X</div> + <div data-offset-x="0" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html new file mode 100644 index 0000000000..56ad9c6a12 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html @@ -0,0 +1,249 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<meta name="assert" content="This test checks that the self-start/self-end alignment values are applied correctly in all writing-modes for inflow content."> +<style> +body { + line-height: 30px; +} +.grid { + position: relative; + display: inline-grid; + grid-template-columns: 20px; + grid-template-rows: 20px; + width: 20px; + height: 20px; + border: solid; + vertical-align: bottom; +} +.child { + background: green; + width: 10px; + height: 10px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.child')"> + +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> +</div> +<br> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> +</div> +<br> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> +</div> +<br> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-lr; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> +</div> +<br> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: ltr;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> +</div> +<br> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div> +</div> +<div class="grid" style="writing-mode: vertical-rl; direction: rtl;"> + <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html new file mode 100644 index 0000000000..723f3d3090 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.inline-grid { + position: relative; + border: solid; + text-orientation: sideways; + font-family: Ahem; +} + +.columns { grid-template-columns: 100px 100px; } +.rows { grid-template-rows: 100px 100px; } + +.min-content-columns { grid-template-columns: min-content; } +.max-content-columns { grid-template-columns: max-content; } +.fit-content-columns { grid-template-columns: fit-content; } +.min-content-rows { grid-template-rows: min-content; } +.max-content-rows { grid-template-rows: max-content; } +.fit-content-rows { grid-template-rows: fit-content; } + +.flex-columns { grid-template-columns: 1fr; } +.max-flex-columns { grid-template-columns: minmax(0px, 1fr); } +.flex-rows { grid-template-rows: 1fr; } +.max-flex-rows { grid-template-rows: minmax(0px, 1fr); } +.auto-rows { grid-template-rows: auto 100px; } + +.height25 { height: 25px; } +.height50 { height: 50px; } +.height200 { height: 200px; } +.width25 { width: 25px; } +.width50 { width: 50px; } +.width200 { width: 200px; } + +.height200Percent { height: 200%; } +.width200Percent { width: 200%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })"> +<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. --> +<div style="height: 125px"> + <pre>auto-sized rows - items with relative height</pre> + <div class="inline-grid alignItemsBaseline columns"> + <div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div> + </div> +</div> + +<div style="height: 200px"> + <pre>min-content-sized rows - items with relative height</pre> + <div class="inline-grid alignItemsBaseline columns min-content-rows"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div> + </div> +</div> + +<div style="height: 200px"> + <pre>max-content-sized rows - items with relative height</pre> + <div class="inline-grid alignItemsBaseline columns max-content-rows"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div> + </div> +</div> + +<div style="height: 200px"> + <pre>fit-content-sized rows - items with relative height</pre> + <div class="inline-grid alignItemsBaseline columns fit-content-rows"> + <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div> + </div> +</div> + +<div style="height: 125px"> + <pre>flexible-sized rows - items with relative height</pre> + <div class="inline-grid alignItemsBaseline columns flex-rows"> + <div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div> + </div> +</div> + +<div style="height: 125px"> + <pre>flex max-function rows - items with relative height</pre> + <div class="inline-grid alignItemsBaseline columns max-flex-rows"> + <div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div> + </div> +</div> + +<div style="height: 250px"> + <pre>auto-sized columns - items with relative width</pre> + <div class="inline-grid justifyItemsBaseline rows"> + <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> + </div> +</div> + +<div style="height: 250px"> + <pre>min-content-sized columns - items with relative width</pre> + <div class="inline-grid justifyItemsBaseline rows min-content-columns"> + <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div> + <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> + </div> +</div> + +<div style="height: 250px"> + <pre>max-content-sized columns - items with relative width</pre> + <div class="inline-grid justifyItemsBaseline rows max-content-columns"> + <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div> + <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> + </div> +</div> + +<div style="height: 250px"> + <pre>fit-content-sized columns - items with relative width</pre> + <div class="inline-grid justifyItemsBaseline rows fit-content-columns"> + <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div> + <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> + </div> +</div> + +<div style="height: 250px"> + <pre>flexible-sized columns - items with relative width</pre> + <div class="inline-grid justifyItemsBaseline rows flex-columns"> + <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> + <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> + </div> +</div> + +<div style="height: 250px"> + <pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items in an auto-sized row force repeating the track sizing and height is not indefinite in that phase.</pre> + <!-- https://github.com/w3c/csswg-drafts/issues/3046 --> + <div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns"> + <div class="firstRowFirstColumn verticalLR width50 height50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div class="secondRowFirstColumn verticalLR width200Percent height50" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + <div class="firstRowSpanning2AutoColumn verticalLR width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html new file mode 100644 index 0000000000..462daece10 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html @@ -0,0 +1,238 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.inline-grid { + position: relative; + border: solid; + text-orientation: sideways; + font-family: Ahem; +} + +.columns { grid-template-columns: 100px 100px; } +.rows { grid-template-rows: 100px 100px; } + +.min-content-columns { grid-template-columns: min-content; } +.max-content-columns { grid-template-columns: max-content; } +.fit-content-columns { grid-template-columns: fit-content; } +.flex-columns { grid-template-columns: 1fr; } +.max-flex-columns { grid-template-columns: minmax(0px, 1fr); } +.auto-columns { grid-template-columns: auto 100px; } + +.min-content-rows { grid-template-rows: min-content; } +.max-content-rows { grid-template-rows: max-content; } +.fit-content-rows { grid-template-rows: fit-content; } +.flex-rows { grid-template-rows: 1fr; } +.max-flex-rows { grid-template-rows: minmax(0px, 1fr); } +.auto-rows { grid-template-rows: auto 100px; } + +.height25 { height: 25px; } +.height50 { height: 50px; } +.height200 { height: 200px; } +.width25 { width: 25px; } +.width50 { width: 50px; } +.width200 { width: 200px; } + +.bigFont { font-size: 50px; } +.paddingLeft { padding-left: 25px; } +.paddingBottom { padding-bottom: 25px; } +.paddingRight { padding-right: 25px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })"> + +<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. --> +<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> +<div class="inline-grid alignItemsBaseline columns height200"> + <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="97" data-expected-width="100" data-expected-height="75">É</div> + <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="137">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="137" data-expected-width="200" data-expected-height="25"></div> +</div> + +<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> +<div class="inline-grid alignItemsBaseline columns min-content-rows"> + <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" data-expected-width="100" data-expected-height="75">É</div> + <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" data-expected-width="200" data-expected-height="25"></div> +</div> + +<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> +<div class="inline-grid alignItemsBaseline columns max-content-rows"> + <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" data-expected-width="100" data-expected-height="75">É</div> + <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" data-expected-width="200" data-expected-height="25"></div> +</div> + +<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> +<div class="inline-grid alignItemsBaseline columns fit-content-rows"> + <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" data-expected-width="100" data-expected-height="75">É</div> + <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" data-expected-width="200" data-expected-height="25"></div> +</div> + +<pre>flex-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> +<div class="inline-grid alignItemsBaseline columns flex-rows"> + <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" data-expected-width="100" data-expected-height="75">É</div> + <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" data-expected-width="200" data-expected-height="25"></div> +</div> + +<pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre> +<!-- https://github.com/w3c/csswg-drafts/issues/3046 --> +<div class="inline-grid alignItemsBaseline columns auto-rows"> + <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="59" data-expected-width="100" data-expected-height="75">É</div> + <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="99">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="99" data-expected-width="200" data-expected-height="25"></div> +</div> + +<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre> +<div class="inline-grid justifyItemsBaseline rows width200"> + <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSpanning2AutoColumn width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre> +<div class="inline-grid justifyItemsBaseline rows min-content-columns"> + <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSpanning2AutoColumn width25" data-offset-x="99" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre> +<div class="inline-grid justifyItemsBaseline rows max-content-columns"> + <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSpanning2AutoColumn width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre> +<div class="inline-grid justifyItemsBaseline rows fit-content-columns"> + <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSpanning2AutoColumn width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>flex-sized columns - horizontal grid item - row-axis baseline</pre> +<div class="inline-grid justifyItemsBaseline rows flex-columns"> + <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSpanning2AutoColumn width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre> +<!-- https://github.com/w3c/csswg-drafts/issues/3046 --> +<div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns"> + <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> + <div class="secondRowFirstColumn verticalLR" data-offset-x="32" data-offset-y="50" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="firstRowSpanning2AutoColumn width25" data-offset-x="112" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> +</div> + +<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> +<div class="inline-grid verticalLR alignItemsBaseline columns width200"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> +<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="99" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> +<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> +<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>flex-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> +<div class="inline-grid verticalLR alignItemsBaseline columns flex-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="451" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre> +<!-- https://github.com/w3c/csswg-drafts/issues/3046 --> +<div class="inline-grid verticalLR alignItemsBaseline auto-columns max-flex-rows"> + <div class="firstRowFirstColumn bigFont" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">É</div> + <div class="firstRowSecondColumn horizontalBT" data-offset-x="7" data-offset-y="50" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="87" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> +</div> + +<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> +<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> +<div class="inline-grid verticalRL alignItemsBaseline columns width200"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="28" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="63" data-offset-y="100" data-expected-width="137" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="38" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> +<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> +<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> +<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> +<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> +</div> + +<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> +<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> +<div class="inline-grid verticalRL alignItemsBaseline auto-columns fit-content-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> +</div> + +<pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> +<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> +<div class="inline-grid verticalRL alignItemsBaseline auto-columns flex-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> +</div> + +<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> +<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> +<div class="inline-grid verticalRL alignItemsBaseline auto-columns max-flex-rows"> + <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> + <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="99" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> + <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html new file mode 100644 index 0000000000..d50263320c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<!-- https://github.com/w3c/csswg-drafts/issues/3046 --> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + background: grey; + text-orientation: sideways; + font-family: Ahem; +} +.row { grid: minmax(0px, 1fr) / auto 50px 100px } +.column { grid: auto 50px 100px / minmax(0px, 1fr); } +.item1 { + font-size: 30px; + background: blue; +} +.item2 { + font-size: 20px; + background: red; +} +.item3 { + font-size: 80px; + background: green; +} +.height50 { height: 50px; } +.relativeHeight { height: 50%; } +.relativeWidth { width: 50%; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. --> +<pre>flex row</pre> +<div class="grid row alignItemsBaseline"> + <div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="30" data-expected-height="30">É</div> + <div class="item2" data-offset-x="30" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div> + <div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div> +</div> + +<pre>flex row</pre> +<div class="grid row alignItemsBaseline"> + <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="56" data-expected-width="30" data-expected-height="43">É</div> + <div class="item2" data-offset-x="30" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div> + <div class="item3 verticalLR" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div> +</div> + +<pre>flex row</pre> +<div class="grid row alignItemsBaseline"> + <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="30" data-expected-height="40">É</div> + <div class="item2 verticalLR" data-offset-x="30" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div> + <div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div> +</div> + +<pre>flex column - all items share a baseline group</pre> +<div class="grid column justifyItemsBaseline"> + <div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="30">É</div> + <div class="item2 verticalLR" data-offset-x="12" data-offset-y="30" data-expected-width="20" data-expected-height="50">É</div> + <div class="item3 verticalLR" data-offset-x="0" data-offset-y="80" data-expected-width="80" data-expected-height="100">É</div> +</div> + +<pre>flex column - all items share a baseline group</pre> +<div class="grid column justifyItemsBaseline"> + <div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div> + <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div> + <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div> +</div> + +<pre>flex column - all items share a baseline group</pre> +<div class="grid column justifyItemsBaseline"> + <div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div> + <div class="item2" data-offset-x="16" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div> + <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html new file mode 100644 index 0000000000..6a02ae4796 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html @@ -0,0 +1,205 @@ +<!DOCTYPE html> +<html> +<style> +body { + margin: 0; +} +.inline-flexbox { + display: inline-flex; + background-color: lightgrey; + margin-top: 5px; +} +.flexbox { + display: flex; + background-color: grey; + margin-top: 10px; +} +.empty { + border-style: solid; + border-width: 5px 0px 10px; + padding: 2px 0px 4px; + margin: 10px 0px 20px; +} +.column { + flex-flow: column; +} +.column-reverse { + flex-flow: column-reverse; +} +</style> + +<body style="position: relative"> + +<!-- If any of the flex items on the flex container's first line participate +in baseline alignment, the flex container's main-axis baseline is the baseline +of those flex items. --> +<div> +before text +<div class="inline-flexbox" style="height: 50px;"> + <div style="align-self: flex-end">below</div> + <div style="align-self: baseline; margin-top: 15px">baseline</div> + <div style="align-self: flex-start">above</div> +</div> +after text +</div> + +<!-- This grid has a baseline item, it's orthogonal but it still participates +in baseline alignment. --> +<div> +before text +<div class="inline-flexbox" style="height: 40px"> + <div style="align-self: flex-end">below</div> + <div style="align-self: baseline; margin-top: 20px"></div> + <div style="align-self: flex-start">above</div> +</div> +after text +</div> + +<div> +before text +<div class="inline-flexbox"> + <h2>h2 baseline</h2> + <div>above</div> +</div> +after text +</div> + +<div> +before text +<div class="inline-flexbox"> + <div>baseline</div> + <h2>h2 below</h2> +</div> +after text +</div> + +<!-- If the first flex item has an orthogonal baseline, use the synthesized +baseline (bottom of the content box of the first item). --> +<div> +should align with the middle +<div class="inline-flexbox" style="width: 40px; height: 40px"> + <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div> +</div> +of the grey box +</div> + +<!-- If there are no flexitems, align to the bottom of the margin box. --> +<div> +should align below the bottom +<div class="empty inline-flexbox" style="width: 30px; height: 30px"> +</div> +of the black line +</div> + +<!-- If the griditem has not a natural baseline, align to the bottom of the box. --> +<div> +should align with the bottom +<div class="inline-flexbox" style="width: 40px; height: 40px;"> + <div style="width: 20px; height: 20px; border: 5px solid; background: red; "></div> +</div> +of the red box +</div> + +<!-- cross-axis (column) test cases. --> +<div> +before text +<div class="inline-flexbox column"> + <div>baseline</div> + <div>below</div> +</div> +after text +</div> + +<!-- If the first flex item has an orthogonal baseline, use the synthesized +baseline (bottom of the content box of the first item). --> +<div> +should align with the middle +<div class="inline-flexbox column" style="width: 40px; height: 40px;"> + <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div> + <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div> +</div> +of the grey box +</div> + +<!-- More tests on the right side of the page. --> +<div style="position: absolute; top: 0; left: 400px; width: 360px"> + +<!-- Ignore absolutely positioned flex items. --> +<div> +before text +<div class="inline-flexbox"> + <div style="position: absolute">absolute</div> + <div style="margin-top: 30px">baseline</div> +</div> +after text +</div> + +<!-- We don't participate in baseline alignment if there's an auto margin. --> +<div> +before text +<div class="inline-flexbox" style="height: 40px;"> + <div>baseline</div> + <div style="align-self: baseline; margin-top: auto">below</div> +</div> +after text +</div> + +<div> +before text +<div style="display: inline-block"> +<div class="inline-flexbox" style="height: 40px;"> + <div>above</div> + <div style="align-self: baseline; margin-top: 10px">baseline</div> + <div>above</div> +</div> +after +</div> +text +</div> + +<!-- The spec is a little unclear what should happen here. For now, align to +the last line box. --> +<div> +before text +<div style="display: inline-block"> +<div class="flexbox" style="height: 30px;"> + baseline +</div> +</div> +after text +</div> + +<table style="background-color: lightgrey; margin-top: 5px"> +<tr style="height: 50px"> + <td style="vertical-align: bottom">bottom</td> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: baseline"><div class="flexbox"> + <h2>h2 baseline</h2> + <div>above</div> + </div></td> +</table> + +<!-- If a box contributing a baseline has a scrollbar, the box must be treated +as being in its initial scroll position when computing the baseline. --> +<div> +before text +<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px"> + <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;"> + The baseline is based on<br> + the non-scrolled position;<br> + this won't line up. + </div> +</div> +after text +</div> + +</div> + +<script> +document.getElementById("flexitem-with-scrollbar").scrollTop = 999; +document.getElementById("flexbox-with-scrollbar").style.width = "auto"; +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html new file mode 100644 index 0000000000..43634e58c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<style> +.flexbox { + display: flex; +} +.inline-flexbox { + display: inline-flex; +} +.flex-one { + flex: 1; +} +.inline-block { display: inline-block; } +.flexbox, .inline-flexbox { background-color: lightgrey; } +.border { border: 11px solid pink; } +.padding { padding: 13px; } +.margin { margin: 8px 0; } +.flexbox > div { + min-width: 0; + min-height: 0; +} +</style> +<div> +before text +<div class="border" style="display: inline-block; background-color: lightgrey"> +<div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;"> + baseline +</div> +</div> +after text +</div> + +<div> +Should align +<div class="inline-block border"> + <div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink"> + <div class="flex-one" style="background-color: lightgrey"></div> + </div> +</div> +with the +<div class="inline-block margin"> + <div class="flexbox border" style="width: 50px; height: 50px; background-color: pink"> + <div class="flex-one" style="background-color: lightgrey"></div> + </div> +</div> +bottom of +<div class="inline-block padding" style="padding-left: 0; padding-right: 0"> + <div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink"> + <div class="flex-one" style="background-color: lightgrey;"></div> + </div> +</div> +the grey box. +</div> + +<div> +Should align with the +<div class="inline-block"> + <div class="flexbox" style="background-color: white"> + <div class="flex-one border padding margin" style="background-color: lightgrey;"></div> + </div> +</div> +bottom of the pink box. +</div> + +<div> +Should align 8px +<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div> +below the bottom +<div class="inline-flexbox margin border padding"></div> +of the pink box. +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html new file mode 100644 index 0000000000..446c42f1a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<style> +.flexbox { + display: flex; +} +.inline-flexbox { + display: inline-flex; +} +.flex-one { + flex: 1; +} +.inline-block { display: inline-block; } +.flexbox, .inline-flexbox { background-color: lightgrey; } +.border { border: 11px solid pink; } +.padding { padding: 13px; } +.margin { margin: 8px 0; } +.flexbox > div { + min-width: 0; + min-height: 0; +} +</style> + +<div> +Should align with the bottom +<div class="inline-block border margin padding" style="background-color: pink"> + <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink"> + <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div> + </div> +</div> +of the horizontal scrollbar. +</div> + +<div> +Should align 10px below the +<div class="inline-block" style="background-color: pink"> + <div class="flexbox" style="width: 100px; height: 100px; background-color: pink"> + <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div> + </div> +</div> +horizontal scrollbar, if one is visible. +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html new file mode 100644 index 0000000000..7f8bb12cd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<title> + Reference for Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items +</title> + +<style> + @import "/fonts/ahem.css"; + .grid { + border: solid silver; + margin: 1em 2px; + font: 20px/1 Ahem; + + display: inline-block; + vertical-align: top; + } + .grid > div { + border: black 10px; + border-style: solid none; + color: orange; + } + div + div { + font-size: 2em; + } + div + div + div { + font-size: 50%; + } + + .ref { + position: relative; + width: 80px; + height: 96px; + } + .ref > div { + position: absolute; + } + .ref1 { top: 16px; } + .ref2 { left: 20px; } + .ref3 { top: 24px; + left: 60px; } + .ref4 { right: 0px; + top: 0px; + bottom: 0px; + width: 10px; } + + .ref.content > div:not(.stripe) { + border-color: transparent; + } + .stripe { + width: 80px; + height: 76px; + } +</style> + +<p>Test passes if each pair of boxes is identical.</p> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<br> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> + + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html new file mode 100644 index 0000000000..e8932cba9f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions Reference File +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + border: solid silver; + margin: 1em 0.25em; + display: inline-grid; + grid-template-columns: repeat(3, auto); + font: 20px/1 Ahem; + height: 5em; + } + .grid > div { + border: 1em aqua; + border-style: solid none; + } + .index { + padding: 1em 0; + } + .percent, .orthogonal { + height: 1em; + } + + .self > div { + align-self: start; + } + .content > div { + align-content: start; + } + .self.ref > div { + align-self: start; + } + .content.ref > div { + align-content: start; + } +</style> + +<p>Test passes if the upper set of boxes is identical to the lower set. + +<div class="grid self"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid self"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<div class="grid content"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid content"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<br> + +<div class="grid self ref"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid self ref"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<div class="grid content ref"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid content ref"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html new file mode 100644 index 0000000000..d4db58e090 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<title> + Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items +</title> + +<style> + @import "/fonts/ahem.css"; + .grid { + border: solid silver; + margin: 1em 2px; + font: 20px/1 Ahem; + + display: inline-block; + vertical-align: top; + } + .grid > div { + border: black 10px; + border-style: none solid; + color: orange; + writing-mode: vertical-rl; + } + div + div { + font-size: 2em; + } + div + div + div { + font-size: 50%; + } + + .ref { + position: relative; + width: 96px; + height: 80px; + } + .ref > div { + position: absolute; + } + .ref1 { right: 16px; } + .ref2 { top: 20px; + right: 0px; } + .ref3 { right: 24px; + top: 60px; } + .ref4 { bottom: 0px; + right: 0px; + left: 0px; + height: 10px; } + + .ref.content > div:not(.stripe) { + border-color: transparent; + } + .stripe { + width: 76px; + height: 80px; + } +</style> + +<p>Test passes if each pair of boxes is identical.</p> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<br> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html new file mode 100644 index 0000000000..d7ab97b9ec --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="If stretch alignment is applied to one axis the aspect-ratio of a replaced element is preserved."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 200px; width: 100px; height: 100px; background: red;"> + <canvas width=10 height=10 style="background: green; align-self: stretch;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html new file mode 100644 index 0000000000..1a4e344dd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="If stretch alignment is applied to one axis the aspect-ratio of a replaced element is preserved."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 200px / 100px; width: 100px; height: 100px; background: red;"> + <canvas width=10 height=10 style="background: green; justify-self: stretch;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html new file mode 100644 index 0000000000..2c27480d5a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;"> + <canvas width=10 height=20 style="background: green; align-self: stretch; justify-self: stretch;"></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html new file mode 100644 index 0000000000..437b379332 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;"> + <img src="support/25x50-green.png" width=25 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html new file mode 100644 index 0000000000..b14c45d0c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;"> + <img src="support/25x50-green.png" width=25 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; writing-mode: vertical-lr;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html new file mode 100644 index 0000000000..ed14e36057 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored, but not when auto margins are present."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; grid-template: 100px / 500px; width: 100px; height: 100px; background: red;"> + <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; margin-right: auto;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html new file mode 100644 index 0000000000..0c841c7654 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored, but not when auto margins are present."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; grid-template: 500px / 100px; width: 100px; height: 100px; background: red;"> + <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; margin-bottom: auto;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html new file mode 100644 index 0000000000..9227332851 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="Stretch alignment in one axis should apply aspect-ratio in the other"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;"> + <img src="support/50x50-green.png" width=50 height=50 style="background: green; justify-self: stretch; width: auto; height: auto;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html new file mode 100644 index 0000000000..ff721b8f19 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713"> +<meta name="assert" content="Stretch alignment in one axis should apply aspect-ratio in the other"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;"> + <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; width: auto; height: auto;"></img> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html new file mode 100644 index 0000000000..c85fd77ef9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + display: inline-block; + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.area { display: inline-block; } +.area:nth-child(1) { width: 60px; } +.area:nth-child(2) { width: 60px; } +.area:nth-child(3) { width: 75px; } +.area:nth-child(4) { width: 100px; } +.verticalLR.area, .verticalRL.area { width: auto; } +.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; } +.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; } +.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; } +.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; } +.block { height: 125px; } +.block.verticalLR, .block.verticalRL { + width: 125px; + height: auto; +} +</style> + +<p>1x4 with parallel items.</p> +<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> + +<br clear="all"> + +<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html new file mode 100644 index 0000000000..2473bb5d4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.grid { grid: 125px / 60px 60px 75px 100px; } +</style> + +<p>1x4 with parallel items.</p> +<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> + +<br clear="all"> + +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html new file mode 100644 index 0000000000..1b563f1f42 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 175px; + height: 300px; + font-family: Ahem; +} +.block1 > :nth-child(1) { font-size:24px; } +.block1 > :nth-child(2) { font-size:32px; } +.block2 > :nth-child(1) { font-size:48px; } +.block2 > :nth-child(2) { font-size:64px; } +.item { + display: inline-block; + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.area { display: inline-block; } +.block1 > .area:nth-child(1) { height: 60px; } +.block1 > .area:nth-child(2) { height: 60px; } +.block2 > .area:nth-child(1) { height: 75px; } +.block2 > .area:nth-child(2) { height: 100px; } +.block1 { float: left; } +.block2 { float: left; } +</style> + +<p>4x1 with orthogonal items, but opposite block-flow direction.</p> +<div class="block verticalLR"> + <div class="block1"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> + <div class="block2 verticalRL" style="margin-left: 23px;"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> +</div> +<div class="block verticalLR"> + <div class="block1"> + <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div> + </div> + <div class="block2 verticalRL" style="margin-left: 23px;"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html new file mode 100644 index 0000000000..7d9ebecb8c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-002-b-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 175px; + height: 300px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.column { grid-auto-flow: row; } +.grid { grid: 60px 60px 75px 100px / 125px; } +</style> + +<p>4x1 with orthogonal items, but opposite block-flow direction.</p> +<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div> +<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html new file mode 100644 index 0000000000..8593ea1abc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 175px; + font-family: Ahem; +} +.block1 > :nth-child(1) { font-size:24px; } +.block1 > :nth-child(2) { font-size:32px; } +.block2 > :nth-child(1) { font-size:48px; } +.block2 > :nth-child(2) { font-size:64px; } +.item { + display: inline-block; + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.area { display: inline-block; } +.block1 > .area:nth-child(1) { height: 60px; } +.block1 > .area:nth-child(2) { height: 60px; } +.block2 > .area:nth-child(1) { height: 75px; } +.block2 > .area:nth-child(2) { height: 100px; } +.block1 { float: left; } +.block2 { float: left; } +</style> + +<p>1x4 with parallel items, but opposite block-flow direction.</p> +<div class="block verticalLR"> + <div class="block1"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> + <div class="block2 verticalRL" style="margin-left: 73px;"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> +</div> +<div class="block verticalLR"> + <div class="block1"> + <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div> + </div> + <div class="block2 verticalRL" style="margin-left: 73px;"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> +</div> +<div class="block verticalRL"> + <div class="block1"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> + <div class="block2 verticalLR" style="margin-right: 73px;"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> +</div> +<div class="block verticalRL"> + <div class="block1"> + <div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div> + </div> + <div class="block2 verticalLR" style="margin-right: 73px;"> + <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html new file mode 100644 index 0000000000..700fd26097 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.grid { grid: 175px / 60px 60px 75px 100px; } +</style> + +<p>1x4 with parallel items, but opposite block-flow direction.</p> +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html new file mode 100644 index 0000000000..cd097c1d48 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.area:nth-child(1) { width: 70px; } +.area:nth-child(2) { width: 80px; } +.area:nth-child(3) { width: 100px; } +.area:nth-child(4) { width: 125px; } +.area { display: inline-block; } +.block.verticalLR > .area { float: left; } +.verticalLR > .area, .verticalRL > .area { width: auto; } +.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; } +.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; } +.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; } +.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; } +.block { + width: 375px; + height: 100px; +} +.block.verticalLR, .block.verticalRL { + width: 125px; + height: auto; +} +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div> +<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div> + +<br clear="all"> + +<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item ">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block verticalRL"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html new file mode 100644 index 0000000000..2372ac1931 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-003-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.grid { grid: 100px / 70px 80px 100px 125px; } +.block.verticalLR, .block.verticalRL { + width: 125px; +} +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> +<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> + +<br clear="all"> + +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> + +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html new file mode 100644 index 0000000000..d589acb374 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + display: inline-block; + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.area.verticalLR > .item { margin: 10px 6px 0px 12px; } +.area.horizontalTB > .item { margin: 10px 6px 4px 0px; } +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.area { display: inline-block; } +.area:nth-child(1) { width: 60px; } +.area:nth-child(2) { width: 75px; } +.area:nth-child(3) { width: 75px; } +.area:nth-child(4) { width: 125px; } +.verticalLR > .area, .verticalRL > .area { width: auto; } +.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; } +.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; } +.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; } +.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; } +.block { height: 125px; } +.block.verticalLR, .block.verticalRL { + width: 150px; + height: auto; +} +</style> + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block"><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div> +<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR top"><div class="item">É</div></div></div> + +<br clear="all"> + +<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html new file mode 100644 index 0000000000..c7f49bf24a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-004-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.grid { grid: 125px / 60px 75px 75px 125px; } +.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; } +</style> + + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div> +<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div> + +<br clear="all"> + +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item horizontalTB extraLeftPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html new file mode 100644 index 0000000000..75a366fc40 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + display: inline-block; + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.area { display: inline-block; } +.area:nth-child(1) { width: 60px; } +.area:nth-child(2) { width: 60px; } +.area:nth-child(3) { width: 75px; } +.area:nth-child(4) { width: 100px; } +.verticalLR.area, .verticalRL.area { width: auto; } +.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; } +.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; } +.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; } +.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; } +.block { height: 140px; } +.block.verticalLR, .block.verticalRL { + width: 140px; + height: auto; +} +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> + +<br clear="all"> + +<div style="direction: rtl;" class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html new file mode 100644 index 0000000000..3bfa2d2079 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-005-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.grid { grid: 60px 60px 75px 100px / 140px; } +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> +<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> +<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> + +<br clear="all"> + +<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html new file mode 100644 index 0000000000..610b2ad0a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.extraRightPadding { padding-right: 30px; } +.area { display: inline-block; } +.block.verticalLR > .area { float: left; } +.area:nth-child(1) { width: 65px; } +.area:nth-child(2) { width: 75px; } +.area:nth-child(3) { width: 100px; } +.area:nth-child(4) { width: 125px; } +.verticalLR > .area, .verticalRL > .area { width: auto; } +.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; } +.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; } +.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; } +.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; } +.block { height: 100px; } +.block.verticalLR, .block.verticalRL { + width: 100px; + height: auto; +} +</style> + +<p>4x1 with parallel items.</p> +<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div> +<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div> +<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div> +<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div> +<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html new file mode 100644 index 0000000000..34edced2b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-006-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.extraRightPadding { padding-right: 30px; } +.grid { grid: 65px 75px 100px 125px / 100px; } +</style> + +<p>4x1 with parallel items.</p> +<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html new file mode 100644 index 0000000000..59a0e33959 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + display: inline-block; + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; } +.area.horizontalTB > .item { margin: 10px 6px 4px 0px; } +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.area { display: inline-block; } +.area:nth-child(1) { width: 65px; } +.area:nth-child(2) { width: 60px; } +.area:nth-child(3) { width: 100px; } +.area:nth-child(4) { width: 100px; } +.verticalLR > .area, .verticalRL > .area { width: auto; } +.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; } +.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; } +.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; } +.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; } +.block { height: 125px; } +.block.verticalLR, .block.verticalRL { + width: 150px; + height: auto; +} +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> + +<br clear="all"> + +<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> +<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html new file mode 100644 index 0000000000..e0966bb6e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-007-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.grid { grid: 65px 60px 100px 100px / 150px; } +.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; } +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div> +<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item verticalLR">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> + +<br clear="all"> + +<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> +<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html new file mode 100644 index 0000000000..7876656c20 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +div { + float: left; + width: 200px; + height: 200px; + background: green; +} +</style> +<div></div> +<div style="margin-top: 100px"></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html new file mode 100644 index 0000000000..5398b7e9c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121761"> +<link rel="match" href="grid-self-baseline-008-ref.html"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<meta name="assert" content="Test baseline alignment with percentage track sizing functions and grid items being or containing replaced elements with aspect ratio and percentage sizes." /> +<style> +.grid { + display: grid; + width: 400px; + grid-template-columns: 25% 25% 25% 25%; + line-height: 0; +} +.percent { + width: 100%; +} +canvas { + background: green; +} +</style> +<div class="grid alignItemsBaseline"> + <canvas width="100" height="200"></canvas> + <canvas width="200" height="400" class="percent"></canvas> + <div> + <canvas width="100" height="100" class="percent"></canvas> + <canvas width="100" height="100" class="percent"></canvas> + </div> + <div class="percent"> + <canvas width="100" height="100" class="percent"></canvas> + <canvas width="100" height="100" class="percent"></canvas> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html new file mode 100644 index 0000000000..5b2ecaaab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on a fixed grid."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: grid; + width: 100px; + height: 100px; + color: green; + grid-auto-columns: 50px; + align-items: baseline; + align-content: start; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div> + <div style="top: 0px; left: 50px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="firstRowSecondColumn big">X</div> + <div class="secondRowFirstColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html new file mode 100644 index 0000000000..fb4e3f1a4c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and content-distribution."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: grid; + width: 100px; + height: 100px; + color: green; + grid-auto-columns: 50px; + align-items: baseline; + align-content: space-evenly; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 25px; left: 0px;">XX<br>XXXX<br>XX</div> + <div style="top: 73px; left: 0px;">XX X</div> + <div style="top: 17px; left: 50px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="firstRowSecondColumn big">X</div> + <div class="secondRowFirstColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html new file mode 100644 index 0000000000..c06394ad58 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and empty items ."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: grid; + width: 100px; + height: 100px; + color: green; + grid-auto-columns: 50px; + align-items: baseline; + align-content: start; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; + font: 20px/1 Ahem; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div> + <div style="top: 24px; left: 50px" class="big">X</div> + <div style="top: 44px; left: 0px;">XX X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div> + <div class="firstRowSecondColumn big">X</div> + <div class="secondRowFirstColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html new file mode 100644 index 0000000000..e882ea9a9c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: inline-grid; + color: green; + grid-auto-columns: 50px; + align-items: baseline; + align-content: start; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div> + <div style="top: 0px; left: 50px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="firstRowSecondColumn big">X</div> + <div class="secondRowFirstColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html new file mode 100644 index 0000000000..8c91c67a9e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and gutters."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: inline-grid; + color: green; + grid-auto-columns: 50px; + align-items: baseline; + grid-row-gap: 20px; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX</div> + <div style="top: 58px; left: 0px;">XX X</div> + <div style="top: 0px; left: 50px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="firstRowSecondColumn big">X</div> + <div class="secondRowFirstColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html new file mode 100644 index 0000000000..ed3449babe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and empty items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: inline-grid; + font: 10px/1 Ahem; + color: green; + grid-auto-columns: 50px; + align-items: baseline; +} +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div> + <div style="top: 24px; left: 50px" class="big">X</div> + <div style="top: 44px; left: 0px;">XX X</div> +</div> +<div class="grid""> + <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div> + <div class="firstRowSecondColumn big">X</div> + <div class="secondRowFirstColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html new file mode 100644 index 0000000000..4b854119b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: grid; + width: 100px; + height: 100px; + color: green; + grid-auto-rows: 50px; + justify-items: baseline; + justify-content: start; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div> + <div style="top: 20px; left: 15px;">X</div> + <div style="top: 30px; left: 15px;">X X</div> + <div style="top: 50px; left: 0px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="secondRowFirstColumn big">X</div> + <div class="firstRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html new file mode 100644 index 0000000000..6eb65039e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and content-distribution."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: grid; + width: 100px; + height: 100px; + color: green; + grid-auto-rows: 50px; + justify-items: baseline; + justify-content: space-evenly; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 23px;">XXX<br>XXX</div> + <div style="top: 0px; left: 72px;">X</div> + <div style="top: 10px; left: 72px;">X</div> + <div style="top: 20px; left: 33px;">X</div> + <div style="top: 30px; left: 33px;">X</div> + <div style="top: 30px; left: 72px;">X</div> + <div style="top: 50px; left: 18px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="secondRowFirstColumn big">X</div> + <div class="firstRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html new file mode 100644 index 0000000000..a173d290ea --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and empty items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: grid; + width: 100px; + height: 100px; + color: green; + grid-auto-rows: 50px; + justify-items: baseline; + justify-content: start; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div> + <div style="top: 0px; left: 50px;">X</div> + <div style="top: 10px; left: 50px;">X</div> + <div style="top: 30px; left: 50px;">X</div> + <div style="top: 50px; left: 0px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div> + <div class="secondRowFirstColumn big">X</div> + <div class="firstRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html new file mode 100644 index 0000000000..0c1c1dbb36 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: inline-grid; + color: green; + grid-auto-rows: 50px; + justify-items: baseline; + justify-content: start; +} +.grid > div { writing-mode: vertical-lr; } +.big { font-size: 20px; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div> + <div style="top: 20px; left: 15px;">X</div> + <div style="top: 30px; left: 15px;">X X</div> + <div style="top: 50px; left: 0px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="secondRowFirstColumn big">X</div> + <div class="firstRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html new file mode 100644 index 0000000000..dba173a439 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and gutters."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: inline-grid; + color: green; + grid-auto-rows: 50px; + justify-items: baseline; + grid-column-gap: 20px; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 5px;">XXX<br>XXX</div> + <div style="top: 0px; left: 55px;">X</div> + <div style="top: 10px; left: 55px;">X</div> + <div style="top: 20px; left: 15px;">X</div> + <div style="top: 30px; left: 15px;">X</div> + <div style="top: 30px; left: 55px;">X</div> + <div style="top: 50px; left: 0px" class="big">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn">XX XXXX XX</div> + <div class="secondRowFirstColumn big">X</div> + <div class="firstRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html new file mode 100644 index 0000000000..ff5903459b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and empty items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.block, .grid { font: 10px/1 Ahem; } +.big { font-size: 20px; } +.block { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.block > div { + position: absolute; + color: red; +} +.grid { + display: inline-grid; + color: green; + grid-auto-rows: 50px; + justify-items: baseline; + justify-content: start; +} +.grid > div { writing-mode: vertical-lr; } +.firstRowFirstColumn { + grid-row: 1; + grid-column: 1; +} +.secondRowFirstColumn { + grid-row: 2; + grid-column: 1; +} +.firstRowSecondColumn { + grid-row: 1; + grid-column: 2; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="block"> + <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div> + <div style="top: 0px; left: 50px;">X</div> + <div style="top: 10px; left: 50px;">X</div> + <div style="top: 30px; left: 50px;">X</div> + <div style="top: 50px; left: 0px;">X</div> +</div> +<div class="grid"> + <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div> + <div class="secondRowFirstColumn big">X</div> + <div class="firstRowSecondColumn">XX X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html new file mode 100644 index 0000000000..1b8130d7b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +</style> + +<p>1x4 with parallel items.</p> +<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div class="item"> +<div class="block"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html new file mode 100644 index 0000000000..556009dfde --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-horiz-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel items.</p> +<div class="block grid row contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> +<div class="block grid row contentStart itemsBaseline"> + <div class="item extraBottomPadding">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html new file mode 100644 index 0000000000..735ea55786 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +.item.verticalLR, .item.verticalRL { margin-bottom: 0px; } +</style> + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div> +<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div> + +<br clear="all"> + +<div class="block"><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div></div> +<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html new file mode 100644 index 0000000000..c196cd35c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-horiz-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block grid row contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item verticalLR">É</div> + <div class="item">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid row contentStart itemsBaseline"> + <div class="item extraBottomPadding">É</div> + <div class="item verticalLR extraTopPadding">É</div> + <div class="item">É</div> + <div class="item verticalLR">É</div> +</div> + +<br clear="all"> + +<div class="block grid row contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item verticalRL">É</div> + <div class="item">É</div> + <div class="item verticalRL">É</div> +</div> +<div class="block grid row contentStart itemsBaseline"> + <div class="item extraBottomPadding">É</div> + <div class="item verticalRL extraTopPadding">É</div> + <div class="item">É</div> + <div class="item verticalRL">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html new file mode 100644 index 0000000000..fd966d16a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 375px; + height: 100px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +.item.verticalLR, .item.verticalRL { margin-bottom: 0px; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> +<div class="block" ><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div></div> +<div class="block"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div> +<div class="block" ><div class="item verticalRL extraTopPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html new file mode 100644 index 0000000000..287cb80fd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-horiz-003-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 375px; + height: 100px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block grid row contentStart itemsBaseline"> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid row contentStart itemsBaseline"> + <div class="item verticalLR extraTopPadding">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR extraBottomPadding">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid row contentStart itemsBaseline"> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> +</div> +<div class="block grid row contentStart itemsBaseline"> + <div class="item verticalRL extraTopPadding">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL extraBottomPadding">É</div> + <div class="item verticalRL">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html new file mode 100644 index 0000000000..be610d4f7f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 150px; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraRightPadding { padding-right: 30px; } +.extraLeftPadding { padding-left: 30px; } +.item { display: inline; } +.left { vertical-align: bottom; } +</style> + +<p>4x1 with parallel items.</p> +<div class="block verticalLR"><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div></div> +<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB extraLeftPadding left">É</div><div class="item horizontalTB left">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html new file mode 100644 index 0000000000..673c9ff208 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-horiz-004-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 150px; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraRightPadding { padding-right: 30px; } +.extraLeftPadding { padding-left: 30px; } +.column { grid-auto-flow: row; } +</style> + +<p>4x1 with parallel items.</p> +<div class="block grid column contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item extraRightPadding">É</div> + <div class="item">É</div> + <div class="item extraLeftPadding">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html new file mode 100644 index 0000000000..c38b6c7611 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + position: relative; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.inline { display: inline-block; } +.item { display: inline-block; } +.item.horizontalTB:not(.bottom) { margin-left: 0px; } +.bottom { vertical-align: bottom; } +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div> +<div class="block verticalLR"><div class="item horizontalTB extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div> +<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div> +<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html new file mode 100644 index 0000000000..f816e893ca --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-horiz-005-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.column { grid-auto-flow: row } +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block grid column contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item verticalLR">É</div> + <div class="item">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item extraRightPadding">É</div> + <div class="item verticalLR extraLeftPadding">É</div> + <div class="item">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item verticalRL">É</div> + <div class="item">É</div> + <div class="item verticalRL">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item extraRightPadding">É</div> + <div class="item verticalRL extraLeftPadding">É</div> + <div class="item">É</div> + <div class="item verticalRL">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html new file mode 100644 index 0000000000..6053b38a6f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { display: inline-block; } +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html new file mode 100644 index 0000000000..c034040b5f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-horiz-006-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.column { grid-auto-flow: row } +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block grid column contentStart itemsBaseline"> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item verticalLR extraLeftPadding">É</div> + <div class="item verticalLR extraRightPadding ">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item verticalRL extraLeftPadding">É</div> + <div class="item verticalRL extraRightPadding ">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html new file mode 100644 index 0000000000..cba725f425 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 200px; + height: 300px; + font-family: Ahem; +} +.block1 > :nth-child(1) { font-size:24px; } +.block1 > :nth-child(2) { font-size:32px; } +.block2 > :nth-child(1) { font-size:48px; } +.block2 > :nth-child(2) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { display: inline-block; } +.block1, .block2 { float: left; } +</style> + +<p>4x1 with orthogonal items, but opposite block-flow direction.</p> +<div class="block verticalLR"> + <div class="block1"> + <div class="item">É</div><div class="item">É</div> + </div> + <div class="block2 verticalRL"> + <div class="item">É</div><div class="item">É</div> + </div> +</div> +<div class="block verticalLR"> + <div class="block1"> + <div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div> + </div> + <div class="block2 verticalRL" style="margin-left: 10px;"> + <div class="item">É</div><div class="item">É</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html new file mode 100644 index 0000000000..6018514242 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-horiz-007-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 200px; + height: 300px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.column { grid-auto-flow: row } +</style> + +<p>4x1 with orthogonal items, but opposite block-flow direction.</p> +<div class="block grid column contentStart itemsBaseline"> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> +</div> +<div class="block grid column contentStart itemsBaseline"> + <div class="item verticalLR extraRightPadding">É</div> + <div class="item verticalLR extraLeftPadding">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html new file mode 100644 index 0000000000..cf19544be8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.item { display: inline-block; } +</style> + +<p>1x4 with parallel items.</p> +<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html new file mode 100644 index 0000000000..801474df57 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-lr-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel items.</p> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item extraLeftPadding">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html new file mode 100644 index 0000000000..9a7a53969d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { display: inline-block; } +.item.horizontalTB { margin-left: 0px; } +</style> + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div> +<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html new file mode 100644 index 0000000000..6dd235a7b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html @@ -0,0 +1,54 @@ + <!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-lr-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item horizontalTB">É</div> + <div class="item">É</div> + <div class="item horizontalTB">É</div> + <div class="item">É</div> +</div> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item horizontalTB extraLeftPadding">É</div> + <div class="item extraRightPadding">É</div> + <div class="item horizontalTB">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html new file mode 100644 index 0000000000..795926615f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 150px; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { float: left; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> +<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html new file mode 100644 index 0000000000..18f581620d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-lr-003-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 150px; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item horizontalTB extraLeftPadding">É</div> + <div class="item horizontalTB extraRightPadding">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html new file mode 100644 index 0000000000..1ce8267ee7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + height: 100px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.item { display: inline-block; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> +<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html new file mode 100644 index 0000000000..1f2e3860b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html @@ -0,0 +1,54 @@ + <!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-lr-004-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + height: 100px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block grid column verticalLR contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> +<div class="block grid column verticalLR contentStart itemsBaseline"> + <div class="item extraTopPadding">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html new file mode 100644 index 0000000000..fb68579d9a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; } +.item.horizontalTB { margin: 10px 6px 4px 0px; } +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block"><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div></div> +<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html new file mode 100644 index 0000000000..a27cb67898 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-lr-005-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.column { grid-auto-flow: row } +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block grid column verticalLR contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item horizontalTB">É</div> + <div class="item">É</div> + <div class="item horizontalTB">É</div> +</div> +<div class="block grid column verticalLR contentStart itemsBaseline"> + <div class="item extraTopPadding">É</div> + <div class="item horizontalTB extraBottomPadding">É</div> + <div class="item">É</div> + <div class="item horizontalTB">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html new file mode 100644 index 0000000000..51c5f77da3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html new file mode 100644 index 0000000000..654c17cd9e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-lr-006-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.column { grid-auto-flow: row } +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block grid column verticalLR contentStart itemsBaseline"> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> +<div class="block grid column verticalLR contentStart itemsBaseline"> + <div class="item horizontalTB extraBottomPadding">É</div> + <div class="item horizontalTB extraTopPadding">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html new file mode 100644 index 0000000000..6f5641448d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 200px; + font-family: Ahem; +} +.block1 > :nth-child(1) { font-size:24px; } +.block1 > :nth-child(2) { font-size:32px; } +.block2 > :nth-child(1) { font-size:48px; } +.block2 > :nth-child(2) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { display: inline-block; } +.block1, .block2 { float: left; } +</style> + +<p>1x4 with parallel items, but opposite block-flow direction.</p> +<div class="block verticalLR"> + <div class="block1"> + <div class="item">É</div><div class="item">É</div> + </div> + <div class="block2 verticalRL"> + <div class="item">É</div><div class="item">É</div> + </div> +</div> +<div class="block verticalLR"> + <div class="block1"> + <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div> + </div> + <div class="block2 verticalRL" style="margin-left:15.5px;"> + <div class="item">É</div><div class="item">É</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html new file mode 100644 index 0000000000..ae7b6bf36e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-lr-007-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 200px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel items, but opposite block-flow direction.</p> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> +</div> +<div class="block grid row verticalLR contentStart itemsBaseline"> + <div class="item extraLeftPadding">É</div> + <div class="item extraRightPadding">É</div> + <div class="item verticalRL">É</div> + <div class="item verticalRL">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html new file mode 100644 index 0000000000..02d3feb126 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.item { display: inline-block; } +</style> + +<p>1x4 with parallel items.</p> +<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html new file mode 100644 index 0000000000..af7ca16d63 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-rl-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel items.</p> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item extraLeftPadding">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html new file mode 100644 index 0000000000..ef6b45c9c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { display: inline-block; } +.item.horizontalTB { margin-left: 0px; } +</style> + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div> +<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html new file mode 100644 index 0000000000..9aa00a7114 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-rl-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context. No item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel and orthogonal items.</p> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item horizontalTB">É</div> + <div class="item">É</div> + <div class="item horizontalTB">É</div> + <div class="item">É</div> +</div> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item horizontalTB extraLeftPadding">É</div> + <div class="item extraRightPadding">É</div> + <div class="item horizontalTB">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html new file mode 100644 index 0000000000..b72fc8817a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 150px; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { display: inline-block; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> +<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html new file mode 100644 index 0000000000..2ae2f4fba6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-rl-003-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 150px; + height: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with orthogonal items.</p> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item horizontalTB extraLeftPadding">É</div> + <div class="item horizontalTB extraRightPadding">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html new file mode 100644 index 0000000000..bab3592266 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + height: 100px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +</style> + +<p>4x1 with parallel items.</p> +<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div> +<div class="block directionRTL"><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html new file mode 100644 index 0000000000..d2f08642fc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-rl-004-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + height: 100px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraBottomPadding { padding-bottom: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>4x1 with parallel items.</p> +<div class="block grid column verticalRL contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> +<div class="block grid column verticalRL contentStart itemsBaseline"> + <div class="item extraBottomPadding">É</div> + <div class="item">É</div> + <div class="item">É</div> + <div class="item">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html new file mode 100644 index 0000000000..da72a5f017 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +.item.verticalRL { margin-bottom: 0px; } +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div></div> +<div class="block directionRTL"><div class="item verticalRL extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html new file mode 100644 index 0000000000..0d40ce288d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-rl-005-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.column { grid-auto-flow: row } +</style> + +<p>4x1 with parallel and orthogonal items.</p> +<div class="block grid column verticalRL contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item horizontalTB">É</div> + <div class="item">É</div> + <div class="item horizontalTB">É</div> +</div> +<div class="block grid column verticalRL contentStart itemsBaseline"> + <div class="item extraTopPadding">É</div> + <div class="item horizontalTB extraBottomPadding">É</div> + <div class="item">É</div> + <div class="item horizontalTB">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html new file mode 100644 index 0000000000..4011c69142 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.item { display: inline-block; } +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block directionRTL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div> +<div class="block directionRTL"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html new file mode 100644 index 0000000000..40f1e0796e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-rl-006-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 30px; } +.extraBottomPadding { padding-bottom: 30px; } +.column { grid-auto-flow: row } +</style> + +<p>4x1 with orthogonal items.</p> +<div class="block grid column verticalRL contentStart itemsBaseline"> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> +<div class="block grid column verticalRL contentStart itemsBaseline"> + <div class="item horizontalTB extraBottomPadding">É</div> + <div class="item horizontalTB extraTopPadding">É</div> + <div class="item horizontalTB">É</div> + <div class="item horizontalTB">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html new file mode 100644 index 0000000000..30658b8cc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 200px; + font-family: Ahem; +} +.block1 > :nth-child(1) { font-size:24px; } +.block1 > :nth-child(2) { font-size:32px; } +.block2 > :nth-child(1) { font-size:48px; } +.block2 > :nth-child(2) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.item { display: inline-block; } +.block1, .block2 { float: left; } +</style> + +<p>1x4 with parallel items, but opposite block-flow direction.</p> +<div class="block verticalRL"> + <div class="block1"> + <div class="item">É</div><div class="item">É</div> + </div> + <div class="block2 verticalLR"> + <div class="item">É</div><div class="item">É</div> + </div> +</div> +<div class="block verticalRL"> + <div class="block1"> + <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div> + </div> + <div class="block2 verticalLR" style="margin-right: 16px;"> + <div class="item">É</div><div class="item">É</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html new file mode 100644 index 0000000000..49bab61ca0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410"> +<link rel="match" href="grid-self-baseline-vertical-rl-007-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." /> + +<style> +body { margin: 0; } +.block { + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 200px; + font-family: Ahem; +} +.block > :nth-child(1) { font-size:24px; } +.block > :nth-child(2) { font-size:32px; } +.block > :nth-child(3) { font-size:48px; } +.block > :nth-child(4) { font-size:64px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 30px; } +.extraRightPadding { padding-right: 30px; } +.row { grid-auto-flow: column; } +</style> + +<p>1x4 with parallel items, but opposite block-flow direction.</p> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item">É</div> + <div class="item">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> +</div> +<div class="block grid row verticalRL contentStart itemsBaseline"> + <div class="item extraLeftPadding">É</div> + <div class="item extraRightPadding">É</div> + <div class="item verticalLR">É</div> + <div class="item verticalLR">É</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png Binary files differnew file mode 100644 index 0000000000..25b76c3c6f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png Binary files differnew file mode 100644 index 0000000000..6ab02fce0f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png Binary files differnew file mode 100644 index 0000000000..6c1406b7df --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js b/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js new file mode 100644 index 0000000000..766d140d2b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js @@ -0,0 +1,14 @@ +function evaluateStyleChange(element, phase, expectedProperty, expectedResult) { + element.className += " " + phase; + element.setAttribute(expectedProperty, expectedResult); + checkLayout("." + phase, false); +} +function evaluateStyleChangeMultiple(phase, expectedResult) { + for (var item in expectedResult) { + var element = document.getElementById(item); + element.className += " " + phase; + for (var key in expectedResult[item]) + element.setAttribute(key, expectedResult[item][key]); + } + checkLayout("." + phase, false); +} |
