mirror of
https://github.com/servo/servo.git
synced 2025-08-11 00:15:32 +01:00
Update web-platform-tests to revision d7afcb8708eac08a614d161d5622a48172daf7e3
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
6f8bb4dd40
commit
edff458e23
791 changed files with 17647 additions and 10322 deletions
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks and max sizes</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
|
||||
<meta name="assert" content="This test checks that auto repeat tracks use max size when size is indefinite to compute the number of tracks.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
}
|
||||
.border {
|
||||
border: 10px solid;
|
||||
}
|
||||
.border-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item {
|
||||
background: lime;
|
||||
/* Place item on the last cell. */
|
||||
grid-column: -2;
|
||||
grid-row: -2;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid');">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
|
||||
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="220" data-expected-height="120">
|
||||
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" data-expected-width="300" data-expected-height="170">
|
||||
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
|
||||
<div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170">
|
||||
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170">
|
||||
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks and percentage max sizes</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
|
||||
<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
|
||||
max-width: 50%;
|
||||
max-height: 80%;
|
||||
}
|
||||
.wrapper {
|
||||
width: 600px;
|
||||
height: 250px;
|
||||
}
|
||||
.item {
|
||||
background: lime;
|
||||
/* Place item on the last cell. */
|
||||
grid-column: -2;
|
||||
grid-row: -2;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid');">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
|
||||
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks with min and max sizes</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
|
||||
<meta name="assert" content="This test checks that auto repeat tracks don't overflow the grid container size when max size is definite, even if min size is bigger than that.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
|
||||
max-width: 100px;
|
||||
min-width: 250px;
|
||||
max-height: 50px;
|
||||
min-height: 125px;
|
||||
float: left;
|
||||
}
|
||||
.border {
|
||||
border: 10px solid;
|
||||
}
|
||||
.border-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item {
|
||||
background: lime;
|
||||
/* Place item on the last cell. */
|
||||
grid-column: -2;
|
||||
grid-row: -2;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid');">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid" data-expected-width="250" data-expected-height="125">
|
||||
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125">
|
||||
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125">
|
||||
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125">
|
||||
<div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks and min sizes</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
|
||||
<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
|
||||
min-width: 300px;
|
||||
min-height: 200px;
|
||||
float: left;
|
||||
}
|
||||
.border {
|
||||
border: 10px solid;
|
||||
}
|
||||
.border-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item {
|
||||
background: lime;
|
||||
/* Place item on the last cell. */
|
||||
grid-column: -2;
|
||||
grid-row: -2;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid');">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
|
||||
<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
|
||||
min-width: 50%;
|
||||
min-height: 80%;
|
||||
float: left;
|
||||
}
|
||||
.wrapper {
|
||||
width: 600px;
|
||||
height: 250px;
|
||||
}
|
||||
.item {
|
||||
background: lime;
|
||||
/* Place item on the last cell. */
|
||||
grid-column: -2;
|
||||
grid-row: -2;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid');">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
|
||||
<div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<!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="Oriol Brufau" href="mailto:obrufau@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="assert" content="This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.">
|
||||
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.grid {
|
||||
grid-auto-rows: 25px;
|
||||
grid-auto-columns: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.fixedWidth {
|
||||
width: 50px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: repeat(auto-fill, 25px);
|
||||
}
|
||||
.fixedHeight {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
grid-auto-flow: column;
|
||||
grid-template-rows: repeat(auto-fill, 25px);
|
||||
}
|
||||
#i1-1, #i2-1 {
|
||||
grid-row: auto;
|
||||
grid-column: 1;
|
||||
background-color: orange;
|
||||
}
|
||||
#i1-2, #i2-2 {
|
||||
grid-row: 1;
|
||||
grid-column: auto;
|
||||
background-color: green;
|
||||
}
|
||||
#i1-3, #i2-3 {
|
||||
grid-row: auto;
|
||||
grid-column: auto;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div style="position: relative">
|
||||
<div id="grid1" class="grid fixedWidth">
|
||||
<div id="i1-1"></div>
|
||||
<div id="i1-2"></div>
|
||||
<div id="i1-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative">
|
||||
<div id="grid2" class="grid fixedHeight">
|
||||
<div id="i2-1"></div>
|
||||
<div id="i2-2"></div>
|
||||
<div id="i2-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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) {
|
||||
let gridElement = document.getElementById(id);
|
||||
gridElement.style.gridTemplateRows = gridTemplateRows;
|
||||
gridElement.style.gridTemplateColumns = gridTemplateColumns;
|
||||
}
|
||||
|
||||
function setGridSize(id, width, height) {
|
||||
let gridElement = document.getElementById(id);
|
||||
gridElement.style.width = width;
|
||||
gridElement.style.height = height;
|
||||
}
|
||||
|
||||
function setGridItemPlacement(id, gridRow, gridColumn) {
|
||||
let gridItem = document.getElementById(id);
|
||||
gridItem.style.gridRow = gridRow;
|
||||
gridItem.style.gridColumn = gridColumn;
|
||||
}
|
||||
|
||||
function testGridDefinitions(...gridItemDataList) {
|
||||
for (let gridItemData of gridItemDataList) {
|
||||
let gridItem = document.getElementById(gridItemData.id);
|
||||
gridItem.setAttribute("data-expected-width", gridItemData.width);
|
||||
gridItem.setAttribute("data-expected-height", gridItemData.height);
|
||||
gridItem.setAttribute("data-offset-x", gridItemData.x);
|
||||
gridItem.setAttribute("data-offset-y", gridItemData.y);
|
||||
}
|
||||
checkLayout(".grid", false);
|
||||
}
|
||||
|
||||
// Test changing the number of auto-repeat tracks.
|
||||
setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
|
||||
setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '25', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '25', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '25', height: '25', x: '25', y: '25' },
|
||||
{ id: 'i2-1', width: '25', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '25', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '25', x: '25', y: '25' });
|
||||
|
||||
setGridTemplate('grid1', 'none', 'none');
|
||||
setGridTemplate('grid2', 'none', 'none');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '25', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '25', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '25', height: '25', x: '0', y: '50' },
|
||||
{ id: 'i2-1', width: '25', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '25', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '25', x: '50', y: '0' });
|
||||
|
||||
setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
|
||||
setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '5', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '5', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '20', height: '25', x: '5', y: '25' },
|
||||
{ id: 'i2-1', width: '25', height: '20', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '20', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '20', x: '25', y: '20' });
|
||||
|
||||
setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
|
||||
setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '5', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '5', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '22', height: '25', x: '5', y: '25' },
|
||||
{ id: 'i2-1', width: '25', height: '18', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '18', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '18', x: '25', y: '18' });
|
||||
|
||||
setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
|
||||
setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '45', height: '25', x: '0', y: '50' },
|
||||
{ id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '45', x: '50', y: '0' });
|
||||
|
||||
// Test changing the size of the grid.
|
||||
setGridSize('grid1', '100px', 'auto');
|
||||
setGridSize('grid2', '100px', '100px');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '45', height: '25', x: '45', y: '25' },
|
||||
{ id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '45', x: '25', y: '45' });
|
||||
|
||||
// Move the third item so that there is an empty track between it and the others.
|
||||
setGridItemPlacement('i1-3', 'auto', '3');
|
||||
setGridItemPlacement('i2-3', '3', 'auto');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '25', height: '25', x: '90', y: '25' },
|
||||
{ id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '25', x: '25', y: '90' });
|
||||
|
||||
// Set the same templates, but using auto-fit instead of auto-fill. The empty track should collapse.
|
||||
setGridTemplate('grid1', 'none', 'repeat(auto-fit, 45px)');
|
||||
setGridTemplate('grid2', 'repeat(auto-fit, 45px)', 'none');
|
||||
testGridDefinitions(
|
||||
{ id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
|
||||
{ id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
|
||||
{ id: 'i1-3', width: '25', height: '25', x: '45', y: '25' },
|
||||
{ id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
|
||||
{ id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
|
||||
{ id: 'i2-3', width: '25', height: '25', x: '25', y: '45' });
|
||||
|
||||
done();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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="Oriol Brufau" href="mailto:obrufau@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="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, and that their declared value serializes correctly.">
|
||||
<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="grid">
|
||||
<div>GRID ITEM</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
var {style} = document.getElementById("grid");
|
||||
|
||||
function testGridTemplateColumnsRows(assignedValue, expectedValue = assignedValue) {
|
||||
test(function() {
|
||||
style.gridTemplateColumns = assignedValue;
|
||||
style.gridTemplateRows = assignedValue;
|
||||
assert_equals(style.gridTemplateColumns, expectedValue, "gridTemplateColumns");
|
||||
assert_equals(style.gridTemplateRows, expectedValue, "gridTemplateRows");
|
||||
}, `grid-template-columns: ${assignedValue}; and grid-template-rows: ${assignedValue};`);
|
||||
}
|
||||
|
||||
// Valid values.
|
||||
testGridTemplateColumnsRows("repeat(1, auto)");
|
||||
testGridTemplateColumnsRows("repeat(2, auto)");
|
||||
testGridTemplateColumnsRows("repeat(2, minmax(50px, calc(50% + 50px)))");
|
||||
testGridTemplateColumnsRows("repeat(5, 10%)");
|
||||
testGridTemplateColumnsRows("max-content repeat(2, 25%) 1fr");
|
||||
testGridTemplateColumnsRows("repeat(2, min-content 50px)");
|
||||
testGridTemplateColumnsRows("repeat(2, [a] minmax(50px, 100px) [b] 25em [c])");
|
||||
testGridTemplateColumnsRows("[a] repeat(2, auto [b] 100px) [c]");
|
||||
testGridTemplateColumnsRows("[a] auto repeat(2, [b] 100px) [c]");
|
||||
testGridTemplateColumnsRows("[a] repeat(2, auto [b]) 100px [c]");
|
||||
testGridTemplateColumnsRows("[a] repeat(2, [b] 100px)");
|
||||
testGridTemplateColumnsRows("[a] repeat(2, [b] auto [c]) [d]");
|
||||
testGridTemplateColumnsRows("[a] min-content repeat(2, [b] 1fr [c] calc(10% + 20px)) [d] minmax(30em, 50em) [e]");
|
||||
|
||||
// Reset values.
|
||||
style.gridTemplateColumns = "";
|
||||
style.gridTemplateRows = "";
|
||||
|
||||
// Wrong values.
|
||||
testGridTemplateColumnsRows("repeat(-1, auto)", "");
|
||||
testGridTemplateColumnsRows("repeat(auto, 2)", "");
|
||||
testGridTemplateColumnsRows("repeat 2, auto", "");
|
||||
testGridTemplateColumnsRows("repeat(2 auto)", "");
|
||||
testGridTemplateColumnsRows("100px (repeat 2, auto)", "");
|
||||
testGridTemplateColumnsRows("repeat(2, 50px repeat(2, 100px))", "");
|
||||
testGridTemplateColumnsRows("100px repeat(2, [a])", "");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue