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

Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

Browse source
This commit is contained in:
Josh Matthews 2017-10-31 08:58:31 -04:00
parent 43a4f01647
commit 64e0a52537
12717 changed files with 59835 additions and 59820 deletions
Download patch file Download diff file Expand all files Collapse all files

102
tests/wpt/web-platform-tests/css/css-grid/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/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>

72
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Change fit-content() argument</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
<meta name="assert" content="This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified.">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="../support/grid.css">
<style>
.grid {
width: fit-content;
position: relative;
justify-content: start;
align-content: start;
font: 25px/1 Ahem;
}
.verticalLR {
writing-mode: vertical-lr;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js">"></script>
<script>
function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
{
var gridElement = document.getElementById(id);
gridElement.style.gridTemplateRows = gridTemplateRows;
gridElement.style.gridTemplateColumns = gridTemplateColumns;
}
function testGridItemDefinitions(gridItemData)
{
var item = document.getElementById(gridItemData.id);
item.setAttribute("data-expected-width", gridItemData.width);
item.setAttribute("data-expected-height", gridItemData.height);
item.setAttribute("data-offset-x", gridItemData.x);
item.setAttribute("data-offset-y", gridItemData.y);
checkLayout(".grid", false);
}
function testChangingGridDefinitions()
{
// Test changing the argument of fit-content() tracks.
setGridTemplate("grid1", "none", "fit-content(100px)");
testGridItemDefinitions({"id": "item1", "width": "100", "height": "100", "x": "0", "y": "0" });
setGridTemplate("grid1", "none", "fit-content(150px)");
testGridItemDefinitions({"id": "item1", "width": "150", "height": "75", "x": "0", "y": "0" });
setGridTemplate("grid2", "fit-content(100px)", "none");
testGridItemDefinitions({"id": "item2", "width": "100", "height": "100", "x": "0", "y": "0" });
setGridTemplate("grid2", "fit-content(150px)", "none");
testGridItemDefinitions({"id": "item2", "width": "75", "height": "150", "x": "0", "y": "0" });
done();
}
window.addEventListener("load", testChangingGridDefinitions, false);
</script>
<div id="grid1" class="grid">
<div id="item1" class="autoRowAutoColumn">XXXX XXX XX X X</div>
</div>
<div id="grid2" class="grid">
<div id="item2" class="autoRowAutoColumn verticalLR">XXXX XXX XX X X</div>
</div>

100
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div>GRID ITEM</div>
</div>
<script>
// 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>

72
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
#grid {
display: inline-grid;
}
</style>
<div id="log"></div>
<div id="inline-grid"></div>
<script>
// 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>

84
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<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>
// 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>

118
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html Normal file
View file

@ -0,0 +1,118 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<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>
// 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>

78
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<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>
// 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>

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

@ -0,0 +1,102 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.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>
<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>
// 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>

51
tests/wpt/web-platform-tests/css/css-grid/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/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/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>

37
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-shorthand-001.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'grid' shorthand does not reset gutter properties</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-shorthand">
<meta name="flags" content="dom">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#grid {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 20px;
}
</style>
<div id="grid"></div>
<script>
var grid = document.getElementById("grid");
test(
() => {
assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "none");
assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "none");
assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px");
assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px");
}, "Check gutter properties initial values");
grid.style.grid = "100px / 200px";
test(
() => {
assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "200px");
assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "100px");
assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px");
assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px");
}, "Check gutter properties after setting 'grid' shorthand");
</script>

100
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div>GRID ITEM</div>
</div>
<script>
// 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>

72
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
#grid {
display: grid;
}
</style>
<div id="log"></div>
<div id="grid"></div>
<script>
// 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>

84
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script>
// 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>

118
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html Normal file
View file

@ -0,0 +1,118 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script>
// 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>

78
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-repeat-001.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script>
// 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>

351
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html Normal file
View file

@ -0,0 +1,351 @@
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-template-columns fit-content() reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" href="../support/grid.css">
<meta name="flags" content="ahem">
<style>
.grid {
justify-content: start;
width: 100px;
position: relative;
padding-top: 10px;
margin-bottom: 5px;
grid-column-gap: 5px;
}
.fc0 { grid-template-columns: minmax(auto, 0px);}
.fc40 { grid-template-columns: minmax(auto, 40px); }
.fc80 { grid-template-columns: minmax(auto, 80px); }
.fc110 { grid-template-columns: auto; }
.fc0x2 { grid-template-columns: repeat(2, minmax(auto, 0px));}
.fc40x2 { grid-template-columns: repeat(2, minmax(auto, 40px)); }
.fc80x2 { grid-template-columns: repeat(2, minmax(auto, 80px)); }
.fc110x2 { grid-template-columns: auto auto; }
.fc0p { grid-template-columns: minmax(auto, 0%); }
.fc30p { grid-template-columns: minmax(auto, 30%); }
.fc90p { grid-template-columns: minmax(auto, 90%); }
.fc110p { grid-template-columns: auto; }
.fc0px2 { grid-template-columns: repeat(2, minmax(auto, 0%)); }
.fc30px2 { grid-template-columns: repeat(2, minmax(auto, 30%)); }
.fc90px2 { grid-template-columns: repeat(2, minmax(auto, 90%)); }
.fc110px2 { grid-template-columns: auto auto; }
.item {
font: 10px/1 Ahem;
background: cyan;
}
.spanningItem {
font: 10px/1 Ahem;
grid-column: 1 / -1;
grid-row: 2;
background: salmon;
}
.test {
position: absolute;
left: 0; right: 0; top: 0;
height: 5px;
background: purple;
}
.test:nth-child(2n) { background: orange; }
.floatLeft {
float: left;
width: 190px;
}
h3 { font-size: 1em; }
</style>
<p>The test passes if it has the same output than the reference.</p>
<div class="floatLeft">
<h3>Only fit-content() and with fixed size tracks.</h3>
<div class="grid fc0">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc0x2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc40">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto auto;">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(auto, 40px) auto;">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc80">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc80x2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto minmax(auto, 80px)">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(auto, 20px) 50%;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(10px, 40px) minmax(auto, 40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto minmax(10%, 200px);">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>fit-content() with other content-sized tracks.</h3>
<div class="grid" style="grid-template-columns: minmax(auto, 40px) max-content;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(auto, 40px) max-content;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(auto, 40px) max-content;">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content minmax(auto, 40px);">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content minmax(auto, 40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content minmax(auto, 40px);">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(auto, 30px) min-content max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content minmax(auto, 30px) max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content max-content minmax(auto, 30px)">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(auto, 30px) min-content max-content">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content minmax(auto, 30px) max-content">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content max-content minmax(auto, 30px)">
<div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>fit-content() with percentage arguments.</h3>
<div class="grid fc0p">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc0px2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc30p">
<div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc30px2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc30px2">
<div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc90p">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc90px2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto minmax(auto, 90%)">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>max-content < fit-content() argument.</h3>
<div class="grid fc110">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc110x2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc110x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto auto;">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto auto;">
<div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: max-content auto;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: max-content auto max-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content auto min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto auto auto;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
</div>

355
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html Normal file
View file

@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-template-columns fit-content()</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
<link rel="match" href="grid-template-columns-fit-content-001-ref.html">
<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-columns, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="../support/grid.css">
<style>
.grid {
justify-content: start;
width: 100px;
position: relative;
padding-top: 10px;
margin-bottom: 5px;
grid-column-gap: 5px;
}
.fc0 { grid-template-columns: fit-content(0px);}
.fc40 { grid-template-columns: fit-content(40px); }
.fc80 { grid-template-columns: fit-content(80px); }
.fc110 { grid-template-columns: fit-content(110px); }
.fc0x2 { grid-template-columns: repeat(2, fit-content(0px));}
.fc40x2 { grid-template-columns: repeat(2, fit-content(40px)); }
.fc80x2 { grid-template-columns: repeat(2, fit-content(80px)); }
.fc110x2 { grid-template-columns: repeat(2, fit-content(110px)); }
.fc0p { grid-template-columns: fit-content(0%); }
.fc30p { grid-template-columns: fit-content(30%); }
.fc90p { grid-template-columns: fit-content(90%); }
.fc110p { grid-template-columns: fit-content(110%); }
.fc0px2 { grid-template-columns: repeat(2, fit-content(0%)); }
.fc30px2 { grid-template-columns: repeat(2, fit-content(30%)); }
.fc90px2 { grid-template-columns: repeat(2, fit-content(90%)); }
.fc110px2 { grid-template-columns: repeat(2, fit-content(110%)); }
.item {
font: 10px/1 Ahem;
background: cyan;
}
.spanningItem {
font: 10px/1 Ahem;
grid-column: 1 / -1;
grid-row: 2;
background: salmon;
}
.test {
position: absolute;
left: 0; right: 0; top: 0;
height: 5px;
background: purple;
}
.test:nth-child(2n) { background: orange; }
.floatLeft {
float: left;
width: 190px;
}
h3 { font-size: 1em; }
</style>
<p>The test passes if it has the same output than the reference.</p>
<div class="floatLeft">
<h3>Only fit-content() and with fixed size tracks.</h3>
<div class="grid fc0">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc0x2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc40">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc40x2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc40x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc80">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc80x2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc80x2">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(20px) 50%;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-content(40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(40px) minmax(10%, 200px);">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>fit-content() with other content-sized tracks.</h3>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(40px);">
<div class="item autoRowSecondColumn">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
<div class="item" style="grid-column: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
<div class="item" style="grid-column: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>fit-content() with percentage arguments.</h3>
<div class="grid fc0p">
<div class="item">XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc0px2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc30p">
<div class="item">XX XX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc30px2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc30px2">
<div class="item autoRowSecondColumn">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc90p">
<div class="item">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc90px2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc90px2">
<div class="item autoRowSecondColumn">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
</div>
<div class="floatLeft">
<h3>max-content < fit-content() argument.</h3>
<div class="grid fc110">
<div class="item">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
</div>
<div class="grid fc110x2">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid fc110x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
<div class="item autoRowSecondColumn">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: max-content fit-content(110px);">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: fit-content(110px) min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
</div>
<div class="grid" style="grid-template-columns: max-content fit-content(110px) max-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: min-content fit-content(110px) min-content;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
<div class="grid" style="grid-template-columns: auto fit-content(110px) auto;">
<div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test autoRowFirstColumn"></div>
<div class="test autoRowSecondColumn"></div>
<div class="test autoRowThirdColumn"></div>
</div>
</div>

102
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html Normal file
View file

@ -0,0 +1,102 @@
<!DOCTYPE html>
<meta charset="utf-8">
<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"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
<style>
.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>
<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>
// 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>

348
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-ref.html Normal file
View file

@ -0,0 +1,348 @@
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-template-rows fit-content() reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" href="../support/grid.css">
<meta name="flags" content="ahem">
<style>
.grid {
justify-content: start;
align-content: start;
height: 100px;
width: 40px;
position: relative;
padding-left: 10px;
margin-right: 5px;
grid-row-gap: 5px;
float: left;
}
.fc0 { grid-template-rows: minmax(auto, 0px);}
.fc40 { grid-template-rows: minmax(auto, 40px); }
.fc80 { grid-template-rows: minmax(auto, 80px); }
.fc110 { grid-template-rows: auto; }
.fc0x2 { grid-template-rows: repeat(2, minmax(auto, 0px));}
.fc40x2 { grid-template-rows: repeat(2, minmax(auto, 40px)); }
.fc80x2 { grid-template-rows: repeat(2, minmax(auto, 80px)); }
.fc110x2 { grid-template-rows: auto auto; }
.fc0p { grid-template-rows: minmax(auto, 0%); }
.fc30p { grid-template-rows: minmax(auto, 30px); }
.fc90p { grid-template-rows: minmax(auto, 90px); }
.fc110p { grid-template-rows: auto; }
.fc0px2 { grid-template-rows: repeat(2, minmax(auto, 0%)); }
.fc30px2 { grid-template-rows: repeat(2, minmax(auto, 30px)); }
.fc90px2 { grid-template-rows: repeat(2, minmax(auto, 90px)); }
.fc110px2 { grid-template-rows: auto auto; }
.item {
font: 10px/1 Ahem;
background: cyan;
}
.spanningItem {
font: 10px/1 Ahem;
grid-row: 1 / -1;
grid-column: 2;
background: salmon;
}
.test {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
background: purple;
}
.test:nth-child(2n) { background: orange; }
.firstRow { grid-row: 1 / 2; }
.secondRow { grid-row: 2 / 3; }
.thirdRow { grid-row: 3 / 4; }
div.grid > div { writing-mode: vertical-lr; }
</style>
<p>The test passes if it has the same output than the reference.</p>
<div class="grid fc0">
<div class="item">XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc0x2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc40">
<div class="item">XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto auto;">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(auto, 40px) auto;">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc80">
<div class="item">XXX XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc80x2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto minmax(auto, 80px)">
<div class="item secondRow">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(auto, 20px) 50%;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(10px, 40px) minmax(auto, 40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto minmax(10%, 200px);">
<div class="item secondRow">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<br clear="all">
<br clear="all">
<div class="grid" style="grid-template-rows: minmax(auto, 40px) max-content;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(auto, 40px) max-content;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(auto, 40px) max-content;">
<div class="item secondRow">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content minmax(auto, 40px);">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content minmax(auto, 40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content minmax(auto, 40px);">
<div class="item secondRow">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(auto, 30px) min-content max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content minmax(auto, 30px) max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content max-content minmax(auto, 30px)">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(auto, 30px) min-content max-content">
<div class="item" style="grid-row: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content minmax(auto, 30px) max-content">
<div class="item" style="grid-row: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content max-content minmax(auto, 30px)">
<div class="item" style="grid-row: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<br clear="all">
<br clear="all">
<div class="grid fc0p">
<div class="item">XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc0px2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc30p">
<div class="item">XX XX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc30px2">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc30px2">
<div class="item secondRow">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc90p">
<div class="item">XXX XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc90px2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto minmax(auto, 90px)">
<div class="item secondRow">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<br clear="all">
<br clear="all">
<div class="grid fc110">
<div class="item">XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc110x2">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc110x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto auto;">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto auto;">
<div class="item secondRow">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: max-content auto;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto min-content;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: max-content auto max-content;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content auto min-content;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto auto auto;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>

355
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html Normal file
View file

@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid-template-rows fit-content()</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
<link rel="match" href="grid-template-rows-fit-content-001-ref.html">
<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-rows, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="../support/grid.css">
<style>
.grid {
justify-content: start;
align-content: start;
height: 100px;
width: 40px;
position: relative;
padding-left: 10px;
margin-right: 5px;
grid-row-gap: 5px;
float: left;
}
.fc0 { grid-template-rows: fit-content(0px);}
.fc40 { grid-template-rows: fit-content(40px); }
.fc80 { grid-template-rows: fit-content(80px); }
.fc110 { grid-template-rows: fit-content(110px); }
.fc0x2 { grid-template-rows: repeat(2, fit-content(0px));}
.fc40x2 { grid-template-rows: repeat(2, fit-content(40px)); }
.fc80x2 { grid-template-rows: repeat(2, fit-content(80px)); }
.fc110x2 { grid-template-rows: repeat(2, fit-content(110px)); }
.fc0p { grid-template-rows: fit-content(0%); }
.fc30p { grid-template-rows: fit-content(30%); }
.fc90p { grid-template-rows: fit-content(90%); }
.fc110p { grid-template-rows: fit-content(110%); }
.fc0px2 { grid-template-rows: repeat(2, fit-content(0%)); }
.fc30px2 { grid-template-rows: repeat(2, fit-content(30%)); }
.fc90px2 { grid-template-rows: repeat(2, fit-content(90%)); }
.fc110px2 { grid-template-rows: repeat(2, fit-content(110%)); }
div.grid > div { writing-mode: vertical-lr; }
.item {
font: 10px/1 Ahem;
background: cyan;
}
.spanningItem {
font: 10px/1 Ahem;
grid-row: 1 / -1;
grid-column: 2;
background: salmon;
}
.test {
position: absolute;
left: 0; bottom: 0; top: 0;
width: 5px;
background: purple;
}
.test:nth-child(2n) { background: orange; }
.firstRow { grid-row: 1 / 2; }
.secondRow { grid-row: 2 / 3; }
.thirdRow { grid-row: 3 / 4; }
h3 { font-size: 1em; }
.container { float: left; height: 110px;}
</style>
<p>The test passes if it has the same output than the reference.</p>
<div class="grid fc0">
<div class="item">XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc0x2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc40">
<div class="item">XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc40x2">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc40x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc80">
<div class="item">XXX XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc80x2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc80x2">
<div class="item secondRow">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(20px) 50%;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: minmax(10px, 40px) fit-content(40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(40px) minmax(10%, 200px);">
<div class="item secondRow">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
</div>
<br clear ="all">
<br clear ="all">
<div class="grid" style="grid-template-rows: fit-content(40px) max-content;">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(40px) max-content;">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(40px) max-content;">
<div class="item secondRow">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content fit-content(40px);">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content fit-content(40px);">
<div class="item">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content fit-content(40px);">
<div class="item secondRow">XXXXX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)">
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content">
<div class="item" style="grid-row: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content">
<div class="item" style="grid-row: 1">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)">
<div class="item" style="grid-row: 2">XXX XX</div>
<div class="spanningItem">XXX XX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<br clear="all">
<br clear="all">
<div class="grid fc0p">
<div class="item">XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc0px2">
<div class="item">XXX</div>
<div class="spanningItem">XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc30p">
<div class="item">XX XX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc30px2">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc30px2">
<div class="item secondRow">X X X</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc90p">
<div class="item">XXX XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc90px2">
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc90px2">
<div class="item secondRow">XXX XXX XXX</div>
<div class="spanningItem">XXX XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<br clear="all">
<br clear="all">
<div class="grid fc110">
<div class="item">XXX XXX</div>
<div class="test firstRow"></div>
</div>
<div class="grid fc110x2">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid fc110x2">
<div class="item">XXX XXX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);">
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);">
<div class="item secondRow">XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: max-content fit-content(110px);">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: fit-content(110px) min-content;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
</div>
<div class="grid" style="grid-template-rows: max-content fit-content(110px) max-content;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: min-content fit-content(110px) min-content;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>
<div class="grid" style="grid-template-rows: auto fit-content(110px) auto;">
<div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
<div class="spanningItem">XXX XXX</div>
<div class="test firstRow"></div>
<div class="test secondRow"></div>
<div class="test thirdRow"></div>
</div>

37
tests/wpt/web-platform-tests/css/css-grid/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
}
})();