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/reference | |
| 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/reference')
32 files changed, 1620 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/reference/anonymous-grid-items-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/anonymous-grid-items-001-ref.html new file mode 100644 index 0000000000..20302c2f1a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/anonymous-grid-items-001-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<body> + <div>The test passes if it has the same output than the reference.</div> + <div> + <div>anonymous item</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/display-grid-ref.html b/testing/web-platform/tests/css/css-grid/reference/display-grid-ref.html new file mode 100644 index 0000000000..8008359a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/display-grid-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Grid Layout: Reference File</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 --> + <style type="text/css"> + #container { + position:relative; + width:400px; + height:100px; + } + + .error { + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + z-index:-1; + } + + #table { + width:100%; + height:100%; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:last-child td { + height:30px; + } + </style> +</head> +<body> +<p>Test passes if there are 4 green rectangles and no red.</p> + +<div id="container"> + <div class="error"> + <table id="table"> + <tbody> + <tr> + <td style="background-color:green">cell1</td> + <td style="background-color:limegreen">cell2</td> + </tr> + <tr> + <td style="background-color:limegreen">cell3</td> + <td style="background-color:green">cell4</td> + </tr> + </tbody> + </table> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/display-inline-grid-ref.html b/testing/web-platform/tests/css/css-grid/reference/display-inline-grid-ref.html new file mode 100644 index 0000000000..422185a8e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/display-inline-grid-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Grid Layout: Reference File</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 --> + <style type="text/css"> + #container { + position:relative; + } + + #table { + width:400px; + height:100px; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:last-child td { + height:30px; + } + + #table-wrapper { + display:inline-block; + clear:right; + } + + span { + vertical-align:top; + } + </style> +</head> +<body> +<p>Test passes if there are 4 green rectangles and no red.</p> + +<div id="container"> + <div id="table-wrapper"> + <table id="table"> + <tbody> + <tr> + <td style="background-color:green">cell1</td> + <td style="background-color:limegreen">cell2</td> + </tr> + <tr> + <td style="background-color:limegreen">cell3</td> + <td style="background-color:green">cell4</td> + </tr> + </tbody> + </table> + </div> + <span>Inline</span> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/flex-item-grid-container-percentage-rows-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/flex-item-grid-container-percentage-rows-001-ref.html new file mode 100644 index 0000000000..1f4b23952e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/flex-item-grid-container-percentage-rows-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +.wrapper { + width: 200px; + border: 5px solid; +} + +.wrapper > div { + height: 100px; +} + +.magenta { + background: magenta; +} + +.cyan { + background: cyan; +} +</style> + +<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p> + +<div class="wrapper"> + <div class="cyan"></div> + <div class="magenta"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/reference/fr-unit-ref.html b/testing/web-platform/tests/css/css-grid/reference/fr-unit-ref.html new file mode 100644 index 0000000000..e7999ae7d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/fr-unit-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS3 Grid Layout: Reference File</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 --> + <style type="text/css"> + #container { + position:relative; + width:400px; + height:100px; + } + + .error { + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + z-index:-1; + } + + #table { + width:100%; + height:100%; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:first-child td { + height:30px; + } + </style> +</head> +<body> +<p>Test passes if there is a green square and no red.</p> + +<div id="container"> + <div class="error"> + <table id="table"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + </tr> + <tr> + <td>cell3</td> + <td style="background-color:green">cell4</td> + </tr> + </tbody> + </table> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/fr-unit-with-percentage-ref.html b/testing/web-platform/tests/css/css-grid/reference/fr-unit-with-percentage-ref.html new file mode 100644 index 0000000000..e7999ae7d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/fr-unit-with-percentage-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS3 Grid Layout: Reference File</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 --> + <style type="text/css"> + #container { + position:relative; + width:400px; + height:100px; + } + + .error { + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + z-index:-1; + } + + #table { + width:100%; + height:100%; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:first-child td { + height:30px; + } + </style> +</head> +<body> +<p>Test passes if there is a green square and no red.</p> + +<div id="container"> + <div class="error"> + <table id="table"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + </tr> + <tr> + <td>cell3</td> + <td style="background-color:green">cell4</td> + </tr> + </tbody> + </table> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-2x2-blue-yellow-lime-magenta.html b/testing/web-platform/tests/css/css-grid/reference/grid-2x2-blue-yellow-lime-magenta.html new file mode 100644 index 0000000000..1ea45f8585 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-2x2-blue-yellow-lime-magenta.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 50px/1 Ahem; + } + + #blue { + color: blue; + } + + #yellow { + color: yellow; + } + + #lime { + color: lime; + } + + #magenta { + color: magenta; + } +</style> +<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> +<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + +<div> + <span id="blue">B</span><span id="yellow">Y</span> + <br /> + <span id="lime">L</span><span id="magenta">M</span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-auto-repeat-multiple-values-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-auto-repeat-multiple-values-001-ref.html new file mode 100644 index 0000000000..0b8ef6d39b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-auto-repeat-multiple-values-001-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: Auto Repaeat with Multiple Tracks and Gutters</title> + <link rel="author" title="Yu Shen" href="shenyu.tcv@gmail.com"> + <style> + .match-container { + border: solid thick black; + position: relative; + margin: 10px; + } + + .column { + width: 300px; + } + + .row { + width: min-content; + height: 300px; + } + + .item { + background: lime; + width: 50px; + height: 50px; + } + + .column-second { + position: absolute; + top: 0; + left: 150px; + } + + .row-second { + position: absolute; + top: 150px; + left: 0px; + } + </style> +</head> + +<body> + <p>The test passes if it has the same visual effect as reference.</p> + <div class="match-container column"> + <div class="item"></div> + <div class="item column-second"></div> + </div> + <div class="match-container row"> + <div class="item"></div> + <div class="item row-second"></div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html new file mode 100644 index 0000000000..474f16b5fa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #grid { + display: grid; + position: relative; + background: grey; + grid-template-columns: 100px; + grid-template-rows: 40% 60%; + height: 50vh; + width: auto; + align-items: center; + } + #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/reference/grid-container-auto-margins-scrollbars-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-auto-margins-scrollbars-001-ref.html new file mode 100644 index 0000000000..9ce866acef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-auto-margins-scrollbars-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<style> +body { + position: relative; + height: 100vh; +} +.item1 { + width: fit-content; + margin: 0px auto; +} +.item2 { + position: absolute; + bottom: 0; + background-color: cyan; + height: 50px; + width: 100%; +} +</style> +<div class="item1">item1</div> +<div class="item2">item2</div> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-container-baseline-synthesized-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-baseline-synthesized-001-ref.html new file mode 100644 index 0000000000..88faddd22a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-baseline-synthesized-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Grid Reference</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +:root { + font: 20px/1 Ahem; +} +.container { + display:inline-block; + width: 60px; + height: 60px; + background: cyan; + box-sizing: border-box; + border: 3px solid black; +} +</style> +X +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<br><br> +X +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<br><br> +X +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<br><br> +X +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<br><br> +X +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> +<div class="container"></div> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-001-ref.html new file mode 100644 index 0000000000..a090f79559 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<style> +html { + overflow-x: scroll; +} +.grid { + float: left; + overflow-y: scroll; + overflow-x: scroll; +} +.item { + background: lime; + width: 100px; + height: 100px; +} +</style> +<p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p> +<div class="grid"> + <div class="item">item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-002-ref.html new file mode 100644 index 0000000000..d95ab37f98 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-002-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<style> +.grid { + display: block; + background-color: grey; + overflow: scroll; +} +.inline-grid { + display: inline-block; + background-color: grey; + overflow: scroll; +} +.gridItem { + display: block; + width: 100px; + height: 100px; + background: green; +} +.fit-content { + width: fit-content; +} +</style> +<body> +<div class='grid fit-content'> + <span class='gridItem'></span> +</div> +<div class='grid fit-content' style='overflow-y: hidden'> + <span class='gridItem'></span> +</div> +<div class='inline-grid fit-content'> + <span class='gridItem'></span> +</div> +<div class='inline-grid fit-content' style='overflow-y: hidden'> + <span class='gridItem'></span> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-different-gutters-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-different-gutters-ref.html new file mode 100644 index 0000000000..57d27ff3aa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-different-gutters-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: a square with a green cross</title> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" /> +<style> + #grid { + width:200px; + height: 220px; + background-color: green; + position: relative; + } + + #grid > div { + background-color: silver; + width: 90px; + height: 90px; + position: absolute; + } + + #grid :nth-child(1) { + top: 0; + left: 0; + } + + #grid :nth-child(2) { + top: 0; + left: 110px; + } + + #grid :nth-child(3) { + top: 130px; + left: 0; + } + + #grid :nth-child(4) { + top: 130px; + left: 110px; + } +</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/reference/grid-equal-gutters-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-equal-gutters-ref.html new file mode 100644 index 0000000000..caea89a8be --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-equal-gutters-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: a square with a green cross</title> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" /> +<style> + #grid { + width:200px; + height: 200px; + background-color: green; + position: relative; + } + + #grid > div { + background-color: silver; + width: 90px; + height: 90px; + position: absolute; + } + + #grid :nth-child(1) { + top: 0; + left: 0; + } + + #grid :nth-child(2) { + top: 0; + left: 110px; + } + + #grid :nth-child(3) { + top: 110px; + left: 0; + } + + #grid :nth-child(4) { + top: 110px; + left: 110px; + } +</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/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html b/testing/web-platform/tests/css/css-grid/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html new file mode 100644 index 0000000000..e3b19211d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + #main { + position: relative; + } + + #main div { + width: 100px; + height: 100px; + } + + .blue { + background-color: blue; + position: absolute; + left: 0px; + top: 0px; + } + + .yellow { + background-color: yellow; + position: absolute; + left: 25px; + top: 25px; + } + + .green { + background-color: green; + position: absolute; + left: 50px; + top: 50px; + } +</style> +<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> + +<div id="main"> + <div class="blue"></div> + <div class="yellow"></div> + <div class="green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-first-letter-green-margin-no-collapse-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-first-letter-green-margin-no-collapse-ref.html new file mode 100644 index 0000000000..cf3c6f28b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-first-letter-green-margin-no-collapse-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Reference file text first letter should be green and margins do not collapse</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + p { + /* Prevent collapsing body and paragraph margins. */ + float: left; + } + + .green { + color: green; + } +</style> +<p> + <span class="green">T</span>he <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>. + In addition, body and paragraph margins should <strong>not collapse</strong>. +</p> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html new file mode 100644 index 0000000000..d5f993d051 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<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; + justify-items: center; + align-items: start; + } + #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/reference/grid-inline-baseline-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-inline-baseline-ref.html new file mode 100644 index 0000000000..dd8fa7a3a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-inline-baseline-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<p>Test passes if the text is aligned.</p> +<div style="writing-mode: vertical-lr; text-orientation: sideways;"> + before + <div style="display: inline-block; background: green; width: 100px; height: 50px;">grid</div> + after +</div> + diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-item-script-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-item-script-001-ref.html new file mode 100644 index 0000000000..2574678a8b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-item-script-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="background: grey;">Test passes if it doesn't crash.</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-auto-tracks-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-auto-tracks-ref.html new file mode 100644 index 0000000000..9f2f91cf7f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-auto-tracks-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Reference</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <style> + body { + margin: 0; + padding: 0; + border: 0 none; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + margin: 0; + width: 300px; + } + .a { + background: blue; + width: 100px; + float: left; + } + .b { + background: yellow; + width: 50px; + float: left; + } + .c { + background: pink; + width: 100px; + clear: both; + float: left; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"> </div> + <div class="c"> </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-basic-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-basic-ref.html new file mode 100644 index 0000000000..39a84ca498 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-basic-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Reference</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <style> + body { + margin: 0; + padding: 0; + border: 0 none; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + margin: 0; + width: 150px; + } + .a { + background: blue; + width: 100px; + float:left + } + .b { + background: yellow; + width: 50px; + float:left; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"> </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-grid-in-grid-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-grid-in-grid-ref.html new file mode 100644 index 0000000000..bd6ebd710b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-grid-in-grid-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Reference</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <style> + body { + margin: 0; + padding: 0; + border: 0 none; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + margin: 0; + height: 150px; + width: 150px; + background: yellow; + position: relative; + } + .a { + background: blue; + height: 100px; + width: 50px; + position: absolute; + top: 0; + left: 0; + } + .b1 { + background: orange; + width: 50px; + height: 50px; + position: absolute; + top: 0; + left: 50px; + } + .b2 { + background: cyan; + width: 50px; + height: 50px; + position: absolute; + top: 50px; + left: 100px; + } + .c { + background: pink; + width: 100px; + height: 50px; + position: absolute; + top: 100px; + left: 50px; + } + .d { + background: #eee; + width: 50px; + height: 50px; + position: absolute; + top: 100px; + left: 0 + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"></div> + + <div class="b1"></div> + <div class="b2"></div> + <div class="c"></div> + <div class="d"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-repeat-notation-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-repeat-notation-ref.html new file mode 100644 index 0000000000..b52074169c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-repeat-notation-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Reference</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <style> + body { + margin: 0; + padding: 0; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + width: 450px; + position: relative; + } + .a { + background: blue; + width: 100px; + float:left + } + .b { + background: yellow; + width: 100px; + float:left + } + .c { + background: orange; + width: 100px; + float:left + } + .d { + background: cyan; + width: 100px; + float:left + } + .e { + background: pink; + width: 50px; + float:left + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"> </div> + <div class="c"> </div> + <div class="d"> </div> + <div class="e"> </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-z-order-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-z-order-ref.html new file mode 100644 index 0000000000..0b2bc0c8bd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-z-order-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Reference</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <style> + body { + margin: 0; + padding: 0; + border: 0 none; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + margin: 0; + width: 150px; + color:white; + } + .a { + background: blue; + width: 100px; + float:left + } + .b { + background: yellow; + width: 50px; + float:left; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a">up</div> + <div class="b"> </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-percentage-gap-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-percentage-gap-ref.html new file mode 100644 index 0000000000..f3616f7d07 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-percentage-gap-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: percentage grid gaps</title> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" /> +<style> + .grid { + width:200px; + height: 180px; + background-color: green; + position: relative; + margin-bottom: 30px; + } + + .grid > div { + background-color: silver; + width: 90px; + height: 90px; + position: absolute; + } +</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 class="grid"> + <div style="top:0; left:0"></div> + <div style="top:0; left:110px"></div> + <div style="top:108px; left:0"></div> + <div style="top:108px; left:110px"></div> +</div> +<div class="grid" style="height:200px"> + <div style="top:0; left:0"></div> + <div style="top:0; left:120px"></div> + <div style="top:120px; left:0"></div> + <div style="top:120px; left:120px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-001-ref.html new file mode 100644 index 0000000000..7e4e3d2688 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-001-ref.html @@ -0,0 +1,43 @@ +<!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="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/> + <style> + #grid { + position: relative; + } + .position { + position: absolute; + top: 0; + left: 0; + } + #first-column-first-row { + width: 30px; + height: 30px; + background-color: purple; + } + #third-column-first-and-second-rows { + left: 60px; + width: 30px; + height: 60px; + background-color: orange + } + #first-and-second-columns-second-row { + top: 30px; + width: 60px; + height: 30px; + background-color: blue; + } + </style> + </head> + <body> + <p>The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="position" id="first-column-first-row"></div> + <div class="position" id="third-column-first-and-second-rows"></div> + <div class="position" id="first-and-second-columns-second-row"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-002-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-002-ref.html new file mode 100644 index 0000000000..4a21823429 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-002-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties accepting track listing as value</title> +<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" /> +<style> + #grid { + position: relative; + } + + .absolute { + position: absolute; + top: 0; + left: 0; + } + + #first-column-first-row { + width: 25px; + height: 40px; + background-color: purple; + } + + #second-column-first-row { + width: 50px; + height: 40px; + left: 25px; + background-color: orange; + } + + #first-column-second-row { + width: 25px; + height: 30px; + top: 40px; + background-color: green; + } + + #second-column-second-row { + width: 50px; + height: 30px; + top: 40px; + left: 25px; + background-color: pink; + } + + #first-and-second-column-third-row { + width: 75px; + height: 40px; + top: 70px; + background-color: silver; + } + + #third-column-all-rows { + left: 75px; + height: 110px; + width: 25px; + background-color: blue; + } +</style> + +<p>The test passes if it has the same visual effect as reference.</p> +<div id="grid"> + <div class="absolute" id="first-column-first-row"></div> + <div class="absolute" id="second-column-first-row"></div> + <div class="absolute" id="first-column-second-row"></div> + <div class="absolute" id="second-column-second-row"></div> + <div class="absolute" id="first-and-second-column-third-row"></div> + <div class="absolute" id="third-column-all-rows"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html new file mode 100644 index 0000000000..5489a9bffe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html @@ -0,0 +1,453 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test Reference: Support for 'grid-auto-columns' and + 'grid-auto-rows' properties with implicit tracks after and before the + explicit grid</title> + <style> + #wrapper { + display: grid; + grid-template-columns: 50px 50px 50px 50px; + } + + div { position: relative; } + + .item-left3 { + width: 3px; + height: 3px; + background: #ff0; + } + .item-left2 { + width: 2px; + height: 2px; + background: #ff0; + } + .item-left1 { + width: 3px; + height: 3px; + background: #ff0; + } + .item-explicit { + width: 5px; + height: 5px; + background: #f0f; + } + .item-right1 { + width: 2px; + height: 2px; + background: #0ff; + } + .item-right2 { + width: 3px; + height: 3px; + background: #0ff; + } + .item-right3 { + width: 2px; + height: 2px; + background: #0ff; + } + + #zero .item-explicit { + width: 2px; + height: 2px; + } + #two .item-explicit { + width: 10px; + height: 10px; + } + #three .item-explicit { + width: 15px; + height: 15px; + } + </style> + </head> + <body> + <div id="wrapper"> + <div id="zero"> + <div> + <div class="item-right1"></div> + </div> + <div> + <div class="item-right1"></div> + <div class="item-right2" style="left:2px;"></div> + </div> + <div> + <div class="item-right1"></div> + <div class="item-right2" style="left:2px;"></div> + <div class="item-right3" style="left:5px;"></div> + </div> + + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-right1" style="left:3px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-right1" style="left:3px;"></div> + <div class="item-right2" style="left:5px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-right1" style="left:3px;"></div> + <div class="item-right2" style="left:5px;"></div> + <div class="item-right3" style="left:8px;"></div> + </div> + + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-right1" style="left:5px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-right1" style="left:5px;"></div> + <div class="item-right2" style="left:7px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-right1" style="left:5px;"></div> + <div class="item-right2" style="left:7px;"></div> + <div class="item-right3" style="left:10px;"></div> + </div> + + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-right1" style="left:8px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-right1" style="left:8px;"></div> + <div class="item-right2" style="left:10px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-right1" style="left:8px;"></div> + <div class="item-right2" style="left:10px;"></div> + <div class="item-right3" style="left:13px;"></div> + </div> + </div> + + <div id="one"> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:5px;"></div> + </div> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:5px;"></div> + <div class="item-right2" style="left:7px;"></div> + </div> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:5px;"></div> + <div class="item-right2" style="left:7px;"></div> + <div class="item-right3" style="left:10px;"></div> + </div> + + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:8px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:8px;"></div> + <div class="item-right2" style="left:10px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:8px;"></div> + <div class="item-right2" style="left:10px;"></div> + <div class="item-right3" style="left:13px;"></div> + </div> + + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:10px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:10px;"></div> + <div class="item-right2" style="left:12px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:10px;"></div> + <div class="item-right2" style="left:12px;"></div> + <div class="item-right3" style="left:15px;"></div> + </div> + + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:13px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:13px;"></div> + <div class="item-right2" style="left:15px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:13px;"></div> + <div class="item-right2" style="left:15px;"></div> + <div class="item-right3" style="left:18px;"></div> + </div> + </div> + + <div id="two"> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:10px;"></div> + </div> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:10px;"></div> + <div class="item-right2" style="left:12px;"></div> + </div> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:10px;"></div> + <div class="item-right2" style="left:12px;"></div> + <div class="item-right3" style="left:15px;"></div> + </div> + + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:13px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:13px;"></div> + <div class="item-right2" style="left:15px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:13px;"></div> + <div class="item-right2" style="left:15px;"></div> + <div class="item-right3" style="left:18px;"></div> + </div> + + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:15px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:15px;"></div> + <div class="item-right2" style="left:17px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:15px;"></div> + <div class="item-right2" style="left:17px;"></div> + <div class="item-right3" style="left:20px;"></div> + </div> + + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:18px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:18px;"></div> + <div class="item-right2" style="left:20px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:18px;"></div> + <div class="item-right2" style="left:20px;"></div> + <div class="item-right3" style="left:23px;"></div> + </div> + </div> + + <div id="three"> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:15px;"></div> + </div> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:15px;"></div> + <div class="item-right2" style="left:17px;"></div> + </div> + <div> + <div class="item-explicit"></div> + <div class="item-right1" style="left:15px;"></div> + <div class="item-right2" style="left:17px;"></div> + <div class="item-right3" style="left:20px;"></div> + </div> + + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:18px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:18px;"></div> + <div class="item-right2" style="left:20px;"></div> + </div> + <div> + <div class="item-left1"></div> + <div class="item-explicit" style="left:3px;"></div> + <div class="item-right1" style="left:18px;"></div> + <div class="item-right2" style="left:20px;"></div> + <div class="item-right3" style="left:23px;"></div> + </div> + + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:20px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:20px;"></div> + <div class="item-right2" style="left:22px;"></div> + </div> + <div> + <div class="item-left2"></div> + <div class="item-left1" style="left:2px;"></div> + <div class="item-explicit" style="left:5px;"></div> + <div class="item-right1" style="left:20px;"></div> + <div class="item-right2" style="left:22px;"></div> + <div class="item-right3" style="left:25px;"></div> + </div> + + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:23px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:23px;"></div> + <div class="item-right2" style="left:25px;"></div> + </div> + <div> + <div class="item-left3"></div> + <div class="item-left2" style="left:3px;"></div> + <div class="item-left1" style="left:5px;"></div> + <div class="item-explicit" style="left:8px;"></div> + <div class="item-right1" style="left:23px;"></div> + <div class="item-right2" style="left:25px;"></div> + <div class="item-right3" style="left:28px;"></div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-template-areas-must-keep-named-columns-order-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-template-areas-must-keep-named-columns-order-001-ref.html new file mode 100644 index 0000000000..7ea26011b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-template-areas-must-keep-named-columns-order-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.grid { + display: inline-grid; + background: grey; + grid-template-columns: 50px 50px 50px 50px; + grid-template-rows: 50px 50px; +} +.grid > :nth-child(1) { background: magenta; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: green; } +.grid > :nth-child(5) { background: black; } +</style> +<p>This test passes if the black item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p> +<div class="grid"> + <div style="grid-row: 1; grid-column: 1"></div> + <div style="grid-row: 1; grid-column: 2"></div> + <div style="grid-row: 1; grid-column: 3"></div> + <div style="grid-row: 1; grid-column: 4"></div> + <div style="grid-row: 2; grid-column: 1"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-text-green-margin-no-collapse-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-text-green-margin-no-collapse-ref.html new file mode 100644 index 0000000000..9dcba3f28f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/grid-text-green-margin-no-collapse-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + p { + color: green; + /* Prevent collapsing body and paragraph margins. */ + float: left; + } +</style> +<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p> diff --git a/testing/web-platform/tests/css/css-grid/reference/replaced-element-015-ref.html b/testing/web-platform/tests/css/css-grid/reference/replaced-element-015-ref.html new file mode 100644 index 0000000000..aa1434172a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/reference/replaced-element-015-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<p>Test passes if it matches the reference.</p> +<div style="display: inline-grid; width: 100px;"> + <div id="target" style="height: 100%;"> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='green'/></svg>" + style="height: 100%"> + </div> +</div> |