Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 00:15:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/wpt/web-platform-tests/css/css-grid-1/OWNERS Normal file
View file

@ -0,0 +1,7 @@
@mrego
@tomalec
@plinss
@jxs
@tabatkins
@fantasai
@atanassov

36
tests/wpt/web-platform-tests/css/css-grid-1/README.md Normal file
View file

@ -0,0 +1,36 @@
CSS Grid Layout Module Level 1 Test Suite
-----------------------------------------
Directory containing the CSS Grid Layout spec test suite.
This suite is structured in different folders for each section of the spec
(the name of the folders corresponds to the "id" of each section):
* [3 Grid Containers](https://drafts.csswg.org/css-grid-1/#grid-model):
`grid-model`
* [4 Grid Items](https://drafts.csswg.org/css-grid-1/#grid-items):
`grid-items`
* [5 The Explicit Grid](https://drafts.csswg.org/css-grid-1/#grid-definition):
`grid-definition`
* [6 The Implicit Grid](https://drafts.csswg.org/css-grid-1/#implicit-grids):
`implicit-grids`
* [7 Grid Definition Shorthand](https://drafts.csswg.org/css-grid-1/#grid-shorthand):
`grid-shorthand`
* [8 Clamping Overlarge Grids](https://drafts.csswg.org/css-grid-1/#overlarge-grids):
`overlarge-grids`
* [9 Placing Grid Items](https://drafts.csswg.org/css-grid-1/#placement):
`placement`
* [10 Absolute Positioning](https://drafts.csswg.org/css-grid-1/#abspos):
`abspos`
* [11 Alignment and Spacing](https://drafts.csswg.org/css-grid-1/#alignment):
`alignment`
* [12 Grid Sizing](https://drafts.csswg.org/css-grid-1/#layout-algorithm):
`layout-algorithm`
* [13 Fragmenting Grid Layout](https://drafts.csswg.org/css-grid-1/#pagination):
`pagination`
Links:
* [Spec Editor's Draft](https://drafts.csswg.org/css-grid-1/)
* [Test Plan](http://test.csswg.org/source/css-grid-1/test-plan/)
* [Test Suite](http://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/)

102
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/fr-unit-with-percentage.html Normal file
View file

@ -0,0 +1,102 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3 Grid Layout: Flexible Lenght</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 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/>
<link rel="match" href="../reference/fr-unit-with-percentage-ref.html">
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
#grid {
display:grid;
grid-template-columns:1fr 75%;
grid-template-rows:1fr 70%;
width:100%;
height:100%;
}
#cell1 {
grid-column:1;
grid-row:1;
}
#cell2 {
grid-column:2;
grid-row:1;
}
#cell3 {
grid-column:1;
grid-row:2;
height:100%;
}
#cell4 {
grid-column:2;
grid-row:2;
background-color:green;
height:100%;
}
.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 id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
<div id="cell3">cell3</div>
<div id="cell4">cell4</div>
</div>
<div class="error">
<table id="table">
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="background-color:red">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

105
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/fr-unit.html Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3 Grid Layout: Flexible Length</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 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/>
<link rel="match" href="../reference/fr-unit-ref.html">
<meta name="assert" content="'fr' unit represents a fraction of the free space in the grid container."/>
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
#grid {
display:grid;
grid-template-columns:100px 1fr;
grid-template-rows:30px 1fr;
width:100%;
height:100%;
}
#cell1 {
grid-column:1;
grid-row:1;
height:30px;
}
#cell2 {
grid-column:2;
grid-row:1;
height:30px;
}
#cell3 {
grid-column:1;
grid-row:2;
height:100%;
}
#cell4 {
grid-column:2;
grid-row:2;
background-color:green;
height:100%;
}
.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 id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
<div id="cell3">cell3</div>
<div id="cell4">cell4</div>
</div>
<div class="error">
<table id="table">
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="background-color:red">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

105
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-inline-support-flexible-lengths-001.xht Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div>GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
]]></script>
</body>
</html>

77
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-inline-support-grid-template-areas-001.xht Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support for 'grid-template-ares' property within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
#grid {
display: inline-grid;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="inline-grid"></div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateAreas('inline-grid', 'none', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a"', '"a"');
TestingUtils.testGridTemplateAreas('inline-grid', '"."', '"."');
TestingUtils.testGridTemplateAreas('inline-grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"', '"a b"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', ['"a b" "c d"', '"a b" "c d"']);
TestingUtils.testGridTemplateAreas('inline-grid', '"a b""c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\t"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\n"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "a b"', '"a b" "a b"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a a" "b b"', '"a a" "b b"');
TestingUtils.testGridTemplateAreas('inline-grid', '". a ." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('inline-grid', '".. a ..." "b a c"', ['". a ." "b a c"', '".. a ..." "b a c"']);
TestingUtils.testGridTemplateAreas('inline-grid', '".a..." "b a c"', ['". a ." "b a c"', '".a..." "b a c"']);
TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot ...."']);
TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot."']);
TestingUtils.testGridTemplateAreas('inline-grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('inline-grid', '"... header header ...." "nav main main main" "nav footer footer ...."', ['". header header ." "nav main main main" "nav footer footer ."', '"... header header ...." "nav main main main" "nav footer footer ...."']);
TestingUtils.testGridTemplateAreas('inline-grid', '"...header header...." "nav main main main" "nav footer footer...."', ['". header header ." "nav main main main" "nav footer footer ."', '"...header header...." "nav main main main" "nav footer footer...."']);
TestingUtils.testGridTemplateAreas('inline-grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
TestingUtils.testGridTemplateAreas('inline-grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
TestingUtils.testGridTemplateAreas('inline-grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('inline-grid', '".. a" "b a" "... a"', ['". a" "b a" ". a"', '".. a" "b a" "... a"']);
TestingUtils.testGridTemplateAreas('inline-grid', '"..a" "b a" ".a"', ['". a" "b a" ". a"', '"..a" "b a" ".a"']);
TestingUtils.testGridTemplateAreas('inline-grid', '"a a a" "b b b"', '"a a a" "b b b"');
TestingUtils.testGridTemplateAreas('inline-grid', '". ." "a a"', '". ." "a a"');
TestingUtils.testGridTemplateAreas('inline-grid', '"... ...." "a a"', ['". ." "a a"', '"... ...." "a a"']);
// Reset values.
document.getElementById('inline-grid').style.gridTemplateAreas = '';
// Wrong values.
TestingUtils.testGridTemplateAreas('inline-grid', 'a', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b c"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"-"c d"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" - "c d"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" . "c d"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b" "a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b b"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"b a" "b b"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a ." ". a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '","', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"10%"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"USD$"', 'none');
]]></script>
</body>
</html>

89
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-inline-support-grid-template-columns-rows-001.xht Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
// Multiple values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
]]></script>
</body>
</html>

123
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-inline-support-named-grid-lines-001.xht Normal file
View file

@ -0,0 +1,123 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
]]></script>
</body>
</html>

83
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-inline-support-repeat-001.xht Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
]]></script>
</body>
</html>

107
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-inline-template-columns-rows-resolved-values-001.xht Normal file
View file

@ -0,0 +1,107 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
.fifthColumn {
grid-column: 5;
}
.fourthRow {
grid-row: 4;
}
.gridAutoFlowColumn {
grid-auto-flow: column;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="grid" class="inline-grid">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridItemsPositions" class="inline-grid">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
]]></script>
</body>
</html>

51
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-layout-auto-tracks.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: auto tracks</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing">
<link rel="match" href="../reference/grid-layout-auto-tracks-ref.html">
<meta name="assert" content="the layout should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
height: auto;
width: 100px;
background: #eee;
display: grid;
grid-template-columns: 100px;
grid-template-rows: auto;
}
.a {
background: blue;
grid-column: 1;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 2;
grid-row: 1;
}
.c {
background: pink;
grid-column: 1;
grid-row: 2;
}
</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">&nbsp;</div>
<div class="b"><div style="width:50px">&nbsp;</div></div>
<div class="c">&nbsp;</div>
</div>
</body>
</html>

43
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-layout-basic.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: basic</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing">
<link rel="match" href="../reference/grid-layout-basic-ref.html">
<meta name="assert" content="the layout should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-template-columns: 100px 50px;
}
.a {
background: blue;
grid-column: 1;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 2;
grid-row: 1;
}
</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">&nbsp;</div>
<div class="b">&nbsp;</div>
</div>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-layout-repeat-notation.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: repeat notation</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation">
<link rel="match" href="../reference/grid-layout-repeat-notation-ref.html">
<meta name="assert" content="the subgrid layout should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 450px;
background: #eee;
display: grid;
grid-template-columns: repeat(4, 100px) 50px;
}
.a {
background: blue;
grid-column: 1;
}
.b {
background: yellow;
grid-column: 2;
}
.c {
background: orange;
grid-column: 3;
}
.d {
background: cyan;
grid-column: 4;
}
.e {
background: pink;
grid-column: 5;
}
</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">&nbsp;</div>
<div class="b">&nbsp;</div>
<div class="c">&nbsp;</div>
<div class="d">&nbsp;</div>
<div class="e">&nbsp;</div>
</div>
</body>
</html>

105
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-support-flexible-lengths-001.xht Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div>GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
]]></script>
</body>
</html>

77
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-support-grid-template-areas-001.xht Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support for 'grid-template-ares' property</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
#grid {
display: grid;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="grid"></div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateAreas('grid', 'none', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"');
TestingUtils.testGridTemplateAreas('grid', '"."', '"."');
TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"');
TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', ['"a b" "c d"', '"a b" "c d"']);
TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"');
TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"');
TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', ['". a ." "b a c"', '".. a ..." "b a c"']);
TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', ['". a ." "b a c"', '".a..." "b a c"']);
TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot ...."']);
TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot."']);
TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', ['". header header ." "nav main main main" "nav footer footer ."', '"... header header ...." "nav main main main" "nav footer footer ...."']);
TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', ['". header header ." "nav main main main" "nav footer footer ."', '"...header header...." "nav main main main" "nav footer footer...."']);
TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', ['". a" "b a" ". a"', '".. a" "b a" "... a"']);
TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', ['". a" "b a" ". a"', '"..a" "b a" ".a"']);
TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"');
TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"');
TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', ['". ." "a a"', '"... ...." "a a"']);
// Reset values.
document.getElementById('grid').style.gridTemplateAreas = '';
// Wrong values.
TestingUtils.testGridTemplateAreas('grid', 'a', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '","', 'none');
TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none');
]]></script>
</body>
</html>

89
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-support-grid-template-columns-rows-001.xht Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
// Multiple values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
]]></script>
</body>
</html>

123
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-support-named-grid-lines-001.xht Normal file
View file

@ -0,0 +1,123 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
]]></script>
</body>
</html>

83
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-support-repeat-001.xht Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
]]></script>
</body>
</html>

107
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/grid-template-columns-rows-resolved-values-001.xht Normal file
View file

@ -0,0 +1,107 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
.fifthColumn {
grid-column: 5;
}
.fourthRow {
grid-row: 4;
}
.gridAutoFlowColumn {
grid-auto-flow: column;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="grid" class="grid">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridItemsPositions" class="grid">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
]]></script>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-definition/support/testing-utils.js Normal file
View file

@ -0,0 +1,37 @@
var TestingUtils = (function() {
function checkGridTemplateColumns(element, value) {
assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns");
}
function checkGridTemplateRows(element, value) {
assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows");
}
function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue) {
test(function() {
var grid = document.getElementById(gridId);
grid.style.gridTemplateColumns = columnsStyle;
grid.style.gridTemplateRows = rowsStyle;
checkGridTemplateColumns(grid, columnsComputedValue);
checkGridTemplateRows(grid, rowsComputedValue);
}, "'" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";");
}
function checkGridTemplateAreas(element, value) {
assert_in_array(getComputedStyle(element).gridTemplateAreas, value, "gridTemplateAreas");
}
function testGridTemplateAreas(gridId, style, value) {
test(function() {
var grid = document.getElementById(gridId);
grid.style.gridTemplateAreas = style;
checkGridTemplateAreas(grid, value);
}, "'" + gridId + "' with: grid-template-areas: " + style + ";");
}
return {
testGridTemplateColumnsRows: testGridTemplateColumnsRows,
testGridTemplateAreas: testGridTemplateAreas
}
})();

43
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-items-001.xht Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Regular and anonymous grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-inline-grid-overlapping-green {
display: inline-grid;
font: 25px/1 Ahem;
color: green;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-inline-grid-overlapping-green">
<div>it</div>
em
<div>it</div>
em
</div><div class="test-inline-grid-overlapping-green">
it
<span>em</span>
it
<span>em</span>
</div>
</body>
</html>

55
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-items-002.xht Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Children of grid items do not create new items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items within an inline grid." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-inline-grid-overlapping-green {
display: inline-grid;
font: 25px/1 Ahem;
color: green;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-inline-grid-overlapping-green">
<div>
<div>it</div>
em
</div>
<div>
it
<div>em</div>
</div>
</div><div class="test-inline-grid-overlapping-green">
<span>
<span>i</span>t
</span>
<span>
e<span>m</span>
</span>
<span>
<span>i</span>t
</span>
<span>
e<span>m</span>
</span>
</div>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-items-003.xht Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-inline-grid-overlapping-green {
display: inline-grid;
font: 50px/1 Ahem;
color: green;
}
.display-none-red {
display: none;
color: red;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-inline-grid-overlapping-green two-columns">
<span>it</span>
<span class="display-none-red">hidden</span>
<span>em</span>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-items-inline-blocks-001.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Paint order of grid items within an inline grid is the same as inline blocks</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property" />
<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
}
#reference-overlapped-red {
color: red;
font: 100px/1 Ahem;
grid-row: 1;
grid-column: 1;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
grid-row: 1;
grid-column: 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="reference-overlapped-red">R</div>
<div id="test-overlapping-green"></div>
</div>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-auto-placement-001.xht Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 10;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-auto-placement-002.xht Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -10;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
order: -1;
}
#magenta {
color: magenta;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

57
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-auto-placement-003.xht Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
}
#magenta {
color: magenta;
order: 1;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

58
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-auto-placement-004.xht Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: 1;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="blue">B</div>
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

58
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-auto-placement-005.xht Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -1;
}
#lime {
color: lime;
order: 1;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="yellow">Y</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="lime">L</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-painting-001.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-painting-002.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-painting-003.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 10;
}
#reference-item-overlapped-red {
color: red;
order: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-painting-004.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: -5;
}
#reference-item-overlapped-red {
color: red;
order: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-order-property-painting-005.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-002.xht Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-003.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 10;
}
#reference-item-overlapped-red {
color: red;
z-index: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-004.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: -5;
}
#reference-item-overlapped-red {
color: red;
z-index: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-005.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 1;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.xht Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: 1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 10;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.xht Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -10;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: -1;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 5;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -5;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

53
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.xht Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 2;
grid-row: 2;
margin-top: -25px;
margin-left: -25px;
}
#yellow {
color: yellow;
grid-column: 4;
grid-row: 4;
margin-top: -50px;
margin-left: -50px;
}
#green {
color: green;
z-index: 1;
grid-column: 1;
grid-row: 1;
margin-top: 50px;
margin-left: 50px;
}
]]></style>
</head>
<body>
<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="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-item-containing-block-001.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: 100px;
grid-template-columns: 100px;
}
#test-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-overlapped-red">
<div id="test-overlapping-green"></div>
</div>
</div>
</body>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-item-containing-block-002.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: 50%;
grid-template-columns: 50%;
}
#test-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-overlapped-red">
<div id="test-overlapping-green"></div>
</div>
</div>
</body>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-item-containing-block-003.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
#test-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-overlapped-red">
<div id="test-overlapping-green"></div>
</div>
</div>
</body>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-item-containing-block-004.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing in a positioned grid container</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area that intersects flexible tracks">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
position: absolute;
height: 200px;
width: 200px;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
#test-item-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#reference-overlapping-green{
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapped-red">
<div id="reference-overlapping-green">
</div>
</div>
</div>
</body>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-items-001.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Regular and anonymous grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-grid-overlapping-green {
display: grid;
font: 25px/1 Ahem;
color: green;
grid-template-columns: auto auto;
justify-content: start;
align-content: start;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-grid-overlapping-green">
<div>it</div>
em
<div>it</div>
em
</div>
<div class="test-grid-overlapping-green">
it
<span>em</span>
it
<span>em</span>
</div>
</body>
</html>

56
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-items-002.xht Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Children of grid items do not create new items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-grid-overlapping-green {
display: grid;
font: 25px/1 Ahem;
color: green;
justify-content: start;
align-content: start;
}
.two-columns {
grid-template-columns: auto auto;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-grid-overlapping-green two-columns">
<div>
<div>it</div>
em
</div>
<div>
it
<div>em</div>
</div>
</div>
<div class="test-grid-overlapping-green">
<span>
<span>it</span>em
</span>
<span>
it<span>em</span>
</span>
</div>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-items-003.xht Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-grid-overlapping-green {
display: grid;
font: 50px/1 Ahem;
color: green;
}
.display-none-red {
display: none;
color: red;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-grid-overlapping-green two-columns">
<span>it</span>
<span class="display-none-red">hidden</span>
<span>em</span>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-items-inline-blocks-001.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Paint order of grid items is the same as inline blocks</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property" />
<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
}
#reference-overlapped-red {
color: red;
font: 100px/1 Ahem;
grid-row: 1;
grid-column: 1;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
grid-row: 1;
grid-column: 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="reference-overlapped-red">R</div>
<div id="test-overlapping-green"></div>
</div>
</body>
</html>

13
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-items-sizing-alignment-001-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference: Grid Item Sizing</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<p>Test passes if it has the same output than the reference.</p>
<div id="grid">
<button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="vertical-align: top;">Regular button</button>
<br>
<img style="vertical-align: top; margin-right: 150px;" src="support/50x50-green.png" alt="Image download support must be enabled" /><img src="support/200x200-green.png" alt="Image download support must be enabled" /><img style="vertical-align: top;" src="support/50x50-green.png" alt="Image download support must be enabled" />
</div>

28
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-items-sizing-alignment-001.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid Item Sizing</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">
<link rel="match" href="grid-items-sizing-alignment-001-ref.html" />
<meta name="assert" content="Checks how alignment properties affect the size of the non-replaced vs replaced grid items.">
<style>
#grid {
display: grid;
grid-auto-rows: 200px;
grid-template-columns: repeat(3, 200px);
}
</style>
<p>Test passes if it has the same output than the reference.</p>
<div id="grid">
<button style="align-self: normal; justify-self: normal;">Stretched button (200x200)</button>
<button style="align-self: stretch; justify-self: stretch;">Stretched button (200x200)</button>
<button style="align-self: start; justify-self: start;">Regular button</button>
<img src="support/50x50-green.png" alt="Image download support must be enabled"
style="align-self: normal; justify-self: normal;" />
<img src="support/50x50-green.png" alt="Image download support must be enabled"
style="align-self: stretch; justify-self: stretch;" />
<img src="support/50x50-green.png" alt="Image download support must be enabled"
style="align-self: start; justify-self: start;" />
</div>

67
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-layout-grid-in-grid.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: grid in grid</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
<link rel="match" href="../reference/grid-layout-grid-in-grid-ref.html">
<meta name="assert" content="the nested grid should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
height: 150px;
width: 150px;
background: #eee;
display: grid;
grid-template-columns: 50px 100px;
grid-template-rows: 100px 50px;
}
.a {
background: blue;
grid-column: 1;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 2;
grid-row: 1;
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
}
.b1 {
background: orange;
grid-column: 1;
grid-row: 1;
}
.b2 {
background: cyan;
grid-column: 2;
grid-row: 2;
}
.c {
background: pink;
grid-column: 2;
grid-row: 2;
}
</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 style="height:100px;">&nbsp;</div></div>
<div class="b">
<div class="b1"><div style="height:50px;">&nbsp;</div></div>
<div class="b2"><div style="height:50px;">&nbsp;</div></div>
</div>
<div class="c"><div style="height:50px;">&nbsp;</div></div>
</div>
</body>
</html>

46
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-layout-z-order-a.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: z order</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
<link rel="match" href="../reference/grid-layout-z-order-ref.html">
<meta name="assert" content="the layout should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-template-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-row: 1;
grid-column: 1 / span 2;
z-index:10
}
.b {
background: yellow;
grid-row: 1;
grid-column: 2 / span 2;
z-index:1
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="b">down</div>
<div class="a">up</div>
</div>
</body>
</html>

46
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-layout-z-order-b.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: z order</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
<link rel="match" href="../reference/grid-layout-z-order-ref.html">
<meta name="assert" content="the layout should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-template-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-row: 1;
grid-column: 1 / 3;
z-index:10
}
.b {
background: yellow;
grid-row: 1;
grid-column: 2 / 4;
z-index:1
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="b">down</div>
<div class="a">up</div>
</div>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-001.xht Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that minimum size for grid items is the content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
color: green;
background-color: green;
font: 50px/1 Ahem;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">IT E</div>
</div>
</body>
</html>

45
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-002.xht Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimum size for grid items is the content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-100x100 {
width: 100px;
height: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-003.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
#content-500x500 {
width: 500px;
height: 500px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-500x500"></div>
</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-004.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
#content-50x50 {
width: 50px;
height: 50px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-50x50"></div>
</div>
</div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-005.xht Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="ref-filled-green-100px-square-image.html" />
<meta name="flags" content="image" />
<meta name="assert" content="Checks that minimum size for grid items is the content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img src="support/100x100-green.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-006.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="ref-filled-green-100px-square-image.html" />
<meta name="flags" content="image" />
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size for height (as it's smaller than the content size of the image)." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-007.xht Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="ref-filled-green-100px-square-image.html" />
<meta name="flags" content="image" />
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the content size for height (as it's smaller than the transferred size of the image)." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
width: 100px;
justify-self: stretch;
align-self: stretch;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/50x100-green.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-008.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="ref-filled-green-100px-square-image.html" />
<meta name="flags" content="image" />
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width (as it's smaller than the content size of the image)." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
height: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-009.xht Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items" />
<link rel="match" href="ref-filled-green-100px-square-image.html" />
<meta name="flags" content="image" />
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the content size for width (as it's smaller than the transferred size of the image)." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
height: 100px;
justify-self: stretch;
align-self: stretch;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/100x50-green.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-010.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 100px / 100px;
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-011.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 100px;
height: 100px;
grid: minmax(0px, 500px) / minmax(0px, 500px);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-012.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 100px;
height: 100px;
grid: minmax(0px, auto) / minmax(0px, auto);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-013.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
color: green;
background-color: green;
font: 50px/1 Ahem;
justify-self: start;
align-self: start;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">IT E</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-014.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
justify-self: start;
align-self: start;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-015.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item if it spans some not fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px auto 10px / 10px auto 10px;
justify-content: start;
}
#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-016.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 50px 30px 20px / 50px 30px 20px;
}
#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-017.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
grid: minmax(auto, 0px) / minmax(auto, 0px);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-018.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
grid: minmax(auto, 500px) / minmax(auto, 500px);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-019.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 500px;
height: 200px;
grid: 50% / 20%;
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-minimum-size-grid-items-020.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 200px;
height: 500px;
grid: 10% 30px 20px / 50px 30px 10%;
}
#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

59
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-auto-placement-001.xht Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 10;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

59
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-auto-placement-002.xht Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: -10;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
order: -1;
}
#magenta {
color: magenta;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

59
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-auto-placement-003.xht Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
}
#magenta {
color: magenta;
order: 1;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="grid">
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

60
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-auto-placement-004.xht Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: 1;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="grid">
<div id="blue">B</div>
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

60
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-auto-placement-005.xht Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -1;
}
#lime {
color: lime;
order: 1;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<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 id="reference-overlapped-red"></div>
<div id="grid">
<div id="yellow">Y</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="lime">L</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-painting-001.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-painting-002.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-painting-003.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 10;
}
#reference-item-overlapped-red {
color: red;
order: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-painting-004.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: -5;
}
#reference-item-overlapped-red {
color: red;
order: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-order-property-painting-005.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-002.xht Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-003.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 10;
}
#reference-item-overlapped-red {
color: red;
z-index: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-004.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: -5;
}
#reference-item-overlapped-red {
color: red;
z-index: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-005.xht Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-001.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 1;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-002.xht Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: 1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 10;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-003.xht Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -10;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: -1;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-004.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 5;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-005.xht Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -5;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<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="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

53
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/grid-z-axis-ordering-overlapped-items-006.xht Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 2;
grid-row: 2;
margin-top: -25px;
margin-left: -25px;
}
#yellow {
color: yellow;
grid-column: 4;
grid-row: 4;
margin-top: -50px;
margin-left: -50px;
}
#green {
color: green;
z-index: 1;
grid-column: 1;
grid-row: 1;
margin-top: 50px;
margin-left: 50px;
}
]]></style>
</head>
<body>
<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="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

8
tests/wpt/web-platform-tests/css/css-grid-1/grid-items/ref-filled-green-100px-square-image.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference: 100x100 green square image</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="support/100x100-green.png" alt="Image download support must be enabled" />

Some files were not shown because too many files have changed in this diff Show more