mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Update web-platform-tests to revision 20a217cb8488e4339e0c9610aba99e2654b676c3
This commit is contained in:
WPT Sync Bot
parent
3ca86eeba5
commit
21de781e2a
285 changed files with 5707 additions and 670 deletions
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-placement with 'grid-auto-flow: column'</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-placement-algo">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=384099">
|
||||
<meta name="assert" content="Check that the auto-placement algorithm is sparse by default.">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-columns: 50px 100px 150px 200px;
|
||||
grid-template-rows: 50px 100px 150px 200px;
|
||||
}
|
||||
|
||||
.unconstrainedContainer {
|
||||
/* For accurate x / y offset. */
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-offset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height="350"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="300" data-expected-width="100" data-expected-height="200"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-offset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height="450"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unconstrainedContainer">
|
||||
<div class="grid gridAutoFlowColumnSparse">
|
||||
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid tracks changes recomputed child positions.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#placement"/>
|
||||
<meta name="assert" content="Checks that grid-template-{rows|columns} dynamic updates recomputes the positions of automatically placed grid items."/>
|
||||
<link rel="issue" href="https://crbug.com/248151"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 5px;
|
||||
grid-auto-columns: 5px;
|
||||
}
|
||||
#firstGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#secondGridItem {
|
||||
grid-row: 1;
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
#thirdGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function testGridDefinitions(gridTemplateRows, gridTemplateColumns, gridTemplateAreas, firstGridItemData, secondGridItemData, thirdGridItemData)
|
||||
{
|
||||
var gridElement = document.getElementsByClassName("grid")[0];
|
||||
gridElement.style.gridTemplateRows = gridTemplateRows;
|
||||
gridElement.style.gridTemplateColumns = gridTemplateColumns;
|
||||
gridElement.style.gridTemplateAreas = gridTemplateAreas;
|
||||
|
||||
var firstGridItem = document.getElementById("firstGridItem");
|
||||
firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
|
||||
firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
|
||||
firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
|
||||
firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
|
||||
|
||||
var secondGridItem = document.getElementById("secondGridItem");
|
||||
secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
|
||||
secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
|
||||
secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
|
||||
secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
|
||||
|
||||
var thirdGridItem = document.getElementById("thirdGridItem");
|
||||
thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
|
||||
thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
|
||||
thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
|
||||
thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
|
||||
|
||||
checkLayout(".grid", false);
|
||||
}
|
||||
|
||||
function testChangingGridDefinitions()
|
||||
{
|
||||
testGridDefinitions('10px 20px', '10px', '', { 'width': '10', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '30' });
|
||||
testGridDefinitions('10px', '10px', '"a"', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '15' });
|
||||
testGridDefinitions('10px', '10px', '"a ."', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '5', 'height': '10', 'x': '10', 'y': '0' });
|
||||
testGridDefinitions('50px', '30px 40px', '', { 'width': '30', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '30', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '40', 'height': '50', 'x': '30', 'y': '0' });
|
||||
testGridDefinitions('50px', '60px', '', { 'width': '60', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '5', 'x': '0', 'y': '55' });
|
||||
testGridDefinitions('50px 100px 150px', '60px', '', { 'width': '60', 'height': '100', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '150', 'x': '0', 'y': '150' });
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
|
||||
<div style="position: relative">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea" id="firstGridItem"></div>
|
||||
<div class="sizedToGridArea" id="secondGridItem"></div>
|
||||
<div class="sizedToGridArea" id="thirdGridItem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Change named grid lines.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#placement"/>
|
||||
<meta name="assert" content="Checks that updating the named grid lines definitions in grid-template-{rows|columns} recomputes the positions of automatically placed grid items."/>
|
||||
<link rel="issue" href="https://crbug.com/248151"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link href="/css/support/alignment.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
#firstGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: column;
|
||||
}
|
||||
|
||||
#secondGridItem {
|
||||
grid-row: row;
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
#thirdGridItem {
|
||||
grid-row: auto;
|
||||
grid-column: auto;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridItemData, secondGridItemData, thirdGridItemData)
|
||||
{
|
||||
var gridElement = document.getElementsByClassName("grid")[0];
|
||||
gridElement.style.gridTemplateRows = gridTemplateRows;
|
||||
gridElement.style.gridTemplateColumns = gridTemplateColumns;
|
||||
|
||||
var firstGridItem = document.getElementById("firstGridItem");
|
||||
firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
|
||||
firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
|
||||
firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
|
||||
firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
|
||||
|
||||
var secondGridItem = document.getElementById("secondGridItem");
|
||||
secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
|
||||
secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
|
||||
secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
|
||||
secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
|
||||
|
||||
var thirdGridItem = document.getElementById("thirdGridItem");
|
||||
thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
|
||||
thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
|
||||
thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
|
||||
thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
|
||||
|
||||
checkLayout(".grid", false);
|
||||
}
|
||||
|
||||
function testChangingGridDefinitions()
|
||||
{
|
||||
testGridDefinitions('10px [row] 20px', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
testGridDefinitions('10px [row] 20px', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
testGridDefinitions('10px 20px [row]', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
testGridDefinitions('10px 20px [row]', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
|
||||
done();
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
|
||||
<div style="position: relative">
|
||||
<div class="grid justifyContentStart">
|
||||
<div class="sizedToGridArea" id="firstGridItem"></div>
|
||||
<div class="sizedToGridArea" id="secondGridItem"></div>
|
||||
<div class="sizedToGridArea" id="thirdGridItem"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue