diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/mozilla/tests/css/css-grid | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/mozilla/tests/css/css-grid')
6 files changed, 538 insertions, 0 deletions
diff --git a/testing/web-platform/mozilla/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-003.html b/testing/web-platform/mozilla/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-003.html new file mode 100644 index 0000000000..af0fc54e1d --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-003.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> +<!-- NOTE(dholbert) This should maybe move to the shared WPT directory, but I'm + putting it in the internal directory for now because tables with captions + and aspect-ratio behave extremely differently in each engine right now, + and I'm not sure the behavior is well-specified. --> +<meta name="assert" content="For a grid item with display:table, a caption, an 'aspect-ratio', a resolvable percent height, and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio' (after subtracting away the space needed for the caption)"> +<style> + .group { margin-bottom: 20px;} + .group.orthog .item { writing-mode: vertical-rl } + .grid { + height: 32px; + width: 24px; + display: inline-grid; + border: 2px solid black; + vertical-align: top; + background: cyan; + } + + .item { + display: table; + height: 100%; + background: fuchsia; + box-sizing: border-box; + aspect-ratio: 1/2; + } + cap { + display: table-caption; + height: 4px; + width: 6px; + background: orange; + } + .center { justify-self: center; } + .start { justify-self: start; } + .end { justify-self: end; } + .self-start { justify-self: self-start; } + .self-end { justify-self: self-end; } + .flex-start { justify-self: flex-start; } + .flex-end { justify-self: flex-end; } + .left { justify-self: left; } + .right { justify-self: right; } + .normal { justify-self: normal; } + .stretch { justify-self: stretch; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + <div class="group"> + <div class="grid"> + <div class="item start" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item end" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item self-start" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item self-end" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item flex-start" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item flex-end" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item left" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item right" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item center" + data-expected-width="14" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item normal" + data-expected-width="24" data-expected-height="52"><cap></cap></div> + </div> + <div class="grid"> + <div class="item stretch" + data-expected-width="24" data-expected-height="52"><cap></cap></div> + </div> + </div> + + <!-- For these ones, the item's writing-mode will be orthogonal to the + grid container's writing-mode --> + <div class="group orthog"> + <div class="grid"> + <div class="item start" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item end" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item self-start" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item self-end" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item flex-start" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item flex-end" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item left" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item right" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item center" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item normal" + data-expected-width="22" data-expected-height="32"><cap></cap></div> + </div> + <div class="grid"> + <div class="item stretch" + data-expected-width="24" data-expected-height="32"><cap></cap></div> + </div> + </div> +</body> diff --git a/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-005.html b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-005.html new file mode 100644 index 0000000000..d4c754c910 --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-005.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<!-- TODO: Remove this test once bug 1871719 is addressed. This test is just a + modified copy of a more-robust WPT test, with several forms of padding + removed to provide test coverage while working around bug 1871719. --> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 3px; + margin-block-end: 5px; +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid;"> + <div data-offset-y="3" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="95" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-y="153" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="245" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="303" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="395" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="8" class="item small first"></div> + <div data-offset-y="120" class="item small last"></div> + <div data-offset-y="158" class="item small first"></div> + <div data-offset-y="270" class="item small last"></div> + <div data-offset-y="308" class="item small first"></div> + <div data-offset-y="420" class="item small last"></div> +</div> diff --git a/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-006.html b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-006.html new file mode 100644 index 0000000000..4b9cd746da --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-006.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<!-- TODO: Remove this test once bug 1871719 is addressed. This test is just a + modified copy of a more-robust WPT test, with several forms of padding + removed to provide test coverage while working around bug 1871719. --> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 3px; + margin-block-end: 5px; +} +.small { + width: 30px; + height: 30px; + border: solid 5px cyan; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid;"> + <div data-offset-x="547" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="455" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-x="397" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="305" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="247" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="155" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="567" class="item small first"></div> + <div data-offset-x="455" class="item small last"></div> + <div data-offset-x="417" class="item small first"></div> + <div data-offset-x="305" class="item small last"></div> + <div data-offset-x="267" class="item small first"></div> + <div data-offset-x="155" class="item small last"></div> +</div> diff --git a/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-007.html b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-007.html new file mode 100644 index 0000000000..43739a65be --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-007.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<!-- TODO: Remove this test once bug 1871719 is addressed. This test is just a + modified copy of a more-robust WPT test, with several forms of padding + removed to provide test coverage while working around bug 1871719. --> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + /* Note: the original test has margins here on every .item that we don't + handle properly for the items-in-the-subgrid for some reason, but we do + handle the margins properly on the items that aren't in a subgrid, so + I've just moved the margin declaration over to .small which + more-specifically-targets those items where we do handle things properly. + */ +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; + margin-block-start: 3px; + margin-block-end: 5px; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +.item.small.first { + block-size: 50px; +} +.item.small.last { + block-size: 100px; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid;"> + <div data-offset-y="28" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="58" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-y="136" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="166" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="244" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-y="274" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-y="3" class="item small first"></div> + <div data-offset-y="3" class="item small last"></div> + <div data-offset-y="111" class="item small first"></div> + <div data-offset-y="111" class="item small last"></div> + <div data-offset-y="219" class="item small first"></div> + <div data-offset-y="219" class="item small last"></div> +</div> diff --git a/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-008.html b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-008.html new file mode 100644 index 0000000000..dbffc18ad0 --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-008.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- TODO: Remove this test once bug 1871719 is addressed. This test is just a + modified copy of a more-robust WPT test, with several forms of padding + removed to provide test coverage while working around bug 1871719. --> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + inline-size: 40px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 3px; + margin-block-end: 5px; +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; +} +.first { + align-self: baseline; +} +.last { + align-self: last baseline; +} +.item.small.first { + block-size: 50px; +} +.item.small.last { + block-size: 100px; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 3; + grid-template: subgrid / subgrid;"> + <div style="display: grid; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid;"> + <div data-offset-x="537" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="440" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-x="337" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="240" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="137" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="40" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="547" class="item small first"></div> + <div data-offset-x="405" class="item small last"></div> + <div data-offset-x="347" class="item small first"></div> + <div data-offset-x="205" class="item small last"></div> + <div data-offset-x="147" class="item small first"></div> + <div data-offset-x="5" class="item small last"></div> +</div> diff --git a/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-009.html b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-009.html new file mode 100644 index 0000000000..1e5e1d7e4e --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/css-grid/subgrid/subgrid-baseline-009.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- TODO: Remove this test once bug 1871719 is addressed. This test is just a + modified copy of a more-robust WPT test, with several forms of padding + removed to provide test coverage while working around bug 1871719. --> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/"> +<style> +.item { + writing-mode: vertical-rl; + block-size: 80px; + box-sizing: border-box; + border: solid 5px hotpink; + line-height: 0; + margin-block-start: 10px; + margin-block-end: 15px; +} +.small { + width: 20px; + height: 20px; + border: solid 5px cyan; +} +.first { + justify-self: baseline; +} +.last { + justify-self: last baseline; +} +span { + width: 20px; + height: 20px; + box-sizing: border-box; + border: solid 5px orange; + display: inline-block; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.item')"> + +<div style="width: 600px; position: relative; display: grid; grid-auto-flow: column; grid-template: 100px 100px 100px 100px / auto auto auto;"> + <div style="display: grid; + grid-auto-flow: column; + grid-column: 1 / span 3; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid;"> + <div style="display: grid; + direction: rtl; + grid-auto-flow: column; + grid-column: 1 / span 2; + grid-row: 1 / span 2; + grid-template: subgrid / subgrid;"> + <div data-offset-x="305" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="215" class="item last"> + <span></span><br><span></span> + </div> + <div data-offset-x="105" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="15" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="505" class="item first"> + <span></span><br><span></span> + </div> + <div data-offset-x="415" class="item last"> + <span></span><br><span></span> + </div> + </div> + <div data-offset-x="170" class="item small first"></div> + <div data-offset-x="60" class="item small last"></div> + <div data-offset-x="370" class="item small first"></div> + <div data-offset-x="260" class="item small last"></div> + <div data-offset-x="570" class="item small first"></div> + <div data-offset-x="460" class="item small last"></div> +</div> |