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/tests/css/css-grid/implicit-grids | |
| 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/tests/css/css-grid/implicit-grids')
3 files changed, 229 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-001.html new file mode 100644 index 0000000000..e61ced340c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties</title> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#auto-tracks"> + <link rel="match" href="../reference/grid-support-grid-auto-columns-rows-001-ref.html"> + <link rel="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/> + <style> + #grid { + display: grid; + grid-auto-columns: 30px; + grid-auto-rows: 30px; + } + #first-column-first-row { + grid-column: 1; + grid-row: 1; + background-color: purple; + } + #third-column-first-and-second-rows { + grid-column: 3; + grid-row: 1 / span 2; + background-color: orange + } + #first-and-second-columns-second-row { + grid-column: 1 / span 2; + grid-row: 2; + background-color: blue; + } + </style> + </head> + <body> + <p>The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div id="first-column-first-row"></div> + <div id="third-column-first-and-second-rows"></div> + <div id="first-and-second-columns-second-row"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-002.html b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-002.html new file mode 100644 index 0000000000..2e90b46019 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' accepting track listing as value</title> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#auto-tracks"> +<link rel="match" href="../reference/grid-support-grid-auto-columns-rows-002-ref.html"> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" /> +<style> + #grid { + display: grid; + grid-auto-columns: 25px 50px; + grid-auto-rows: 40px 30px; + } + + #first-column-first-row { + grid-column: 1; + grid-row: 1; + background-color: purple; + } + + #second-column-first-row { + grid-column: 2; + grid-row: 1; + background-color: orange; + } + + #first-column-second-row { + grid-column: 1; + grid-row: 2; + background-color: green; + } + + #second-column-second-row { + grid-column: 2; + grid-row: 2; + background-color: pink; + } + + #first-and-second-column-third-row { + grid-column: 1 / span 2; + grid-row: 3; + background-color: silver; + } + + #third-column-all-rows { + grid-column: 3; + grid-row: 1 / span 3; + background-color: blue; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div id="first-column-first-row"></div> + <div id="second-column-first-row"></div> + <div id="first-column-second-row"></div> + <div id="second-column-second-row"></div> + <div id="first-and-second-column-third-row"></div> + <div id="third-column-all-rows"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-003.html b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-003.html new file mode 100644 index 0000000000..452eb494b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-003.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and + 'grid-auto-rows' properties with implicit tracks after and before the + explicit grid</title> + <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-tracks"> + <link rel="match" href="../reference/grid-support-grid-auto-columns-rows-003-ref.html"> + <style> + #wrapper { + display: grid; + grid-template-columns: 50px 50px 50px 50px; + } + + /* Implicit and explicit grid track sizes */ + .grid { + display: grid; + grid-auto-rows: 2px 3px; + grid-auto-columns: 2px 3px; + } + #one .grid { grid-template: 5px / 5px; } + #two .grid { grid-template: 5px 5px / 5px 5px; } + #three .grid { grid-template: 5px 5px 5px / 5px 5px 5px; } + + /* Grid item positions. */ + .item-left1 { grid-area: auto / auto / 1 / 1; } + .item-explicit { grid-area: 1 / 1 / -1 / -1; } + .item-right1 { grid-area: -1 / -1; } + + #zero .item-left3 { grid-area: auto / auto / -3 / -3; } + #zero .item-left2 { grid-area: auto / auto / -2 / -2; } + #zero .item-right2 { grid-area: 2 / 2; } + #zero .item-right3 { grid-area: 3 / 3; } + #one .item-left3 { grid-area: auto / auto / -4 / -4; } + #one .item-left2 { grid-area: auto / auto / -3 / -3; } + #one .item-right2 { grid-area: 3 / 3; } + #one .item-right3 { grid-area: 4 / 4; } + #two .item-left3 { grid-area: auto / auto / -5 / -5; } + #two .item-left2 { grid-area: auto / auto / -4 / -4; } + #two .item-right2 { grid-area: 4 / 4; } + #two .item-right3 { grid-area: 5 / 5; } + #three .item-left3 { grid-area: auto / auto / -6 / -6; } + #three .item-left2 { grid-area: auto / auto / -5 / -5; } + #three .item-right2 { grid-area: 5 / 5; } + #three .item-right3 { grid-area: 6 / 6; } + + /* Colors */ + .item-left3 { background: #ff0; } + .item-left2 { background: #ff0; } + .item-left1 { background: #ff0; } + .item-explicit { background: #f0f; } + .item-right1 { background: #0ff; } + .item-right2 { background: #0ff; } + .item-right3 { background: #0ff; } + </style> + <script> + function createDivWithClass(className, parent) { + let element = document.createElement('div'); + element.className = className || ''; + if (!parent) { + parent = document.body; + } + parent.appendChild(element); + return element; + } + + function generate(parentId) { + let parent = document.getElementById(parentId); + + for (let leftNum = 0; leftNum <= 3; ++leftNum) { + for (let rightNum = 0; rightNum <= 3; ++rightNum) { + let grid = leftNum + rightNum > 0 + ? createDivWithClass("grid", parent) + : null; + + for (let i = 1; i <= leftNum; ++i) { + createDivWithClass("item-left" + i, grid); + } + + if (leftNum + rightNum > 0) { + createDivWithClass("item-explicit", grid); + } + + for (let i = 1; i <= rightNum; ++i) { + createDivWithClass("item-right" + i, grid); + } + } + } + } + + function run() { + // This is equal to something like this: + // <div class="grid"> + // <div class="item-left3"></div> + // <div class="item-left2"></div> + // <div class="item-left1"></div> + // <div class="item-explicit"></div> + // <div class="item-right1"></div> + // <div class="item-right2"></div> + // <div class="item-right3"></div> + // </div> + // Generate the grid examples with 0~3 left items and 0~3 right items. + // The item-explicit is placed inside the 0x0 ~ 3x3 explicit tracks. + generate("zero"); + generate("one"); + generate("two"); + generate("three"); + + document.documentElement.offsetHeight; + document.documentElement.classList.remove('reftest-wait'); + } + </script> + </head> + <body onload="run()"> + <div id="wrapper"> + <!-- Zero explicit track --> + <div id="zero"></div> + + <!-- One explicit track --> + <div id="one"></div> + + <!-- Two explicit tracks --> + <div id="two"></div> + + <!-- Three explicit tracks --> + <div id="three"></div> + </div> + </body> +</html> |