summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html')
-rw-r--r--testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html358
1 files changed, 358 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html
new file mode 100644
index 0000000000..28238178f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html
@@ -0,0 +1,358 @@
+<!DOCTYPE HTML>
+<html>
+ <link rel="author" title="Mozilla" href="https://mozilla.org">
+ <link rel="match" href="repeat-auto-fill-008-ref.html">
+ <link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list">
+ <head>
+ <style>
+html,body {
+ color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+ display: inline-grid;
+ grid-auto-columns: 15px;
+ border: 1px solid;
+}
+
+.subgrid {
+ display: grid;
+ grid-column: 3 / span 4;
+ grid-auto-rows: 8px;
+ background: grey;
+}
+
+.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y] [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */
+.fill-0b { grid-template-columns: subgrid [z] repeat(auto-fill, [z] [z] [z]) [z] } /* [z] [z] [z] [z] [z] */
+.fill-0c { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [y] [y]) [z] } /* [x] [y] [y] [y] [z] */
+.fill-0d { grid-template-columns: subgrid [x] repeat(auto-fill, [z] [z]) } /* [x] [z] [z] [z] [z] */
+.fill-0e { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] } /* [x] [x] [x] [x] [z] */
+.fill-0f { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */
+.fill-0g { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */
+.fill-0h { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] } /* [x] [y] [x] [y] [z] */
+.fill-0i { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) } /* [x] [y] [x] [y] [] */
+.fill-0j { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */
+.fill-0k { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */
+.fill-0l { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) [z] } /* [z] [x] [y] [z] [] */
+.fill-0m { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) } /* [z] [x] [y] [x] [y] */
+.fill-0n { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) repeat(100, [z])} /* [z] [z] [z] [z] [z] */
+.fill-0o { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) } /* [z] [x] [y] [z] [] */
+.fill-0p { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) [x] } /* [z] [x] [y] [z] [x] */
+.fill-0q { grid-template-columns: subgrid repeat(auto-fill, [x] [y] [z]) [x] } /* [x] [y] [z] [x] [] */
+.fill-0r { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [z]) } /* [x] [y] [z] [y] [z] */
+
+/* With span of 5... */
+.fill-0s {
+ grid-column: 2 / span 5;
+ grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] */
+}
+
+/* With span of 6, same as fill-0s but with room for a partial additional repetition */
+.fill-0t {
+ grid-column: 1 / span 6;
+ grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] [] */
+}
+
+.subgrid > :nth-child(2n) { background: black; }
+.subgrid > :nth-child(2n+1) { background: pink; }
+
+ </style>
+ </head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0k">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0l">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0m">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0n">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0o">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0p">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0q">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0r">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0s">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0t">
+ <div style="grid-column:y 5"></div>
+ <div style="grid-column:y 4"></div>
+ <div style="grid-column:y 3"></div>
+ <div style="grid-column:y 2"></div>
+ <div style="grid-column:y 1"></div>
+ <div style="grid-column:y -1"></div>
+ <div style="grid-column:y -2"></div>
+ <div style="grid-column:y -3"></div>
+ <div style="grid-column:y -4"></div>
+ <div style="grid-column:y -5"></div>
+</div></div>
+
+<script>
+ const expectedResults = [
+ "subgrid [z] [z] [z] [z] [z]",
+ "subgrid [z] [z] [z] [z] [z]",
+ "subgrid [x] [y] [y] [y] [z]",
+ "subgrid [x] [z] [z] [z] [z]",
+ "subgrid [x] [x] [x] [x] [z]",
+ "subgrid [x] [x] [z] [z] [z]",
+ "subgrid [x] [y] [z] [z] []",
+ "subgrid [x] [y] [x] [y] [z]",
+ "subgrid [x] [y] [x] [y] []",
+ "subgrid [y] [y] [y] [z] [z]",
+ "subgrid [x] [y] [z] [z] []",
+ "subgrid [z] [x] [y] [z] []",
+ "subgrid [z] [x] [y] [x] [y]",
+ "subgrid [z] [z] [z] [z] [z]",
+ "subgrid [z] [x] [y] [z] []",
+ "subgrid [z] [x] [y] [z] [x]",
+ "subgrid [x] [y] [z] [x] []",
+ "subgrid [x] [y] [z] [y] [z]",
+ "subgrid [w] [y] [z] [y] [z] [x]",
+ "subgrid [w] [y] [z] [y] [z] [x] []",
+ ];
+ [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+ let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+ let expected = expectedResults[i];
+ if (actual != expected) {
+ let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+ " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+ document.body.appendChild(document.createTextNode(err));
+ document.body.appendChild(document.createElement("br"));
+ }
+ });
+</script>
+
+</body>