diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/placement')
20 files changed, 951 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-auto-flow-sparse-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-auto-flow-sparse-001.html new file mode 100644 index 0000000000..373371ac2b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-auto-flow-sparse-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-auto-placement-implicit-tracks-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-auto-placement-implicit-tracks-001.html new file mode 100644 index 0000000000..546336a6ce --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-auto-placement-implicit-tracks-001.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid items auto-placement implicit tracks</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-placement-algo"> +<meta name="assert" content="This test checks that auto-placement works properly even when implicit tracks have been created during the first steps of the placement algorithm."> +<style> +.grid { + display: grid; + position: relative; + grid-auto-columns: 100px; + grid-auto-rows: 50px; + margin: 10px; +} +.gridAutoFlowColumn { grid-auto-flow: column; } +.gridAutoFlowColumnDense { grid-auto-flow: column dense; } +.gridAutoFlowRowDense { grid-auto-flow: row dense; } +.grid > div { border: solid; } +</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"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: span 2;" + data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="100">i2</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: 1; grid-row: span 2;" + data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100">i2</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid"> + <div data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div> + <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowRowDense"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: span 2;" + data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="100">i2</div> + <div data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowRowDense"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: 1; grid-row: span 2;" + data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100">i2</div> + <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowRowDense"> + <div data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div> + <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowColumn"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: span 2;" + data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">i2</div> + <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="300" data-offset-y="50" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowColumn"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: 1; grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">i2</div> + <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowColumn"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: 1;" + data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div> + <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowColumnDense"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: span 2;" + data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">i2</div> + <div data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowColumnDense"> + <div data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: 1; grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">i2</div> + <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +<div class="grid gridAutoFlowColumnDense"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div> + <div style="grid-column: span 2; grid-row: 1;" + data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div> + <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div> + <div data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-container-change-grid-tracks-recompute-child-positions-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-grid-tracks-recompute-child-positions-001.html new file mode 100644 index 0000000000..a2485142e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-grid-tracks-recompute-child-positions-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-container-change-named-grid-recompute-child-positions-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-named-grid-recompute-child-positions-001.html new file mode 100644 index 0000000000..d702d30b3b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-named-grid-recompute-child-positions-001.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> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-grid-span.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-grid-span.html new file mode 100644 index 0000000000..21aad99708 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-grid-span.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: grid span</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/#grid-span"> + <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: 50px 50px 50px; + } + .a { + background: blue; + grid-column: 1 / span 2; + grid-row: 1; + } + .b { + background: yellow; + grid-column: 3; + 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"> </div> + <div class="b"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines-shorthands.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines-shorthands.html new file mode 100644 index 0000000000..756e08c447 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines-shorthands.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: grid lines shorthands</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/#common-uses-named-lines"> + <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: [left] 100px [center] 50px [right]; + } + .a { + background: blue; + grid-column: left / center; + } + .b { + background: yellow; + grid-column: center / right; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines.html new file mode 100644 index 0000000000..62bfc8d7bd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: grid lines</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/#common-uses-named-lines"> + <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: [left] 100px [center] 50px [right]; + } + .a { + background: blue; + grid-column-start: left; + grid-column-end: center; + } + .b { + background: yellow; + grid-column-start: center; + grid-column-end: right; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-placement-shorthands.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-placement-shorthands.html new file mode 100644 index 0000000000..be98679815 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-placement-shorthands.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: placement shorthand</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/#placement-shorthands"> + <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: 50px 50px 50px; + } + .a { + background: blue; + grid-column: 1 / span 2; + grid-row: 1; + } + .b { + background: yellow; + grid-column: 3; + 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"> </div> + <div class="b"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-001.html new file mode 100644 index 0000000000..de6398e324 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Placement of grid items spanning multiple rows</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#auto-placement-algo" title="8.5. Grid Item Placement Algorithm"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1237036"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + width: 100px; + display: grid; + background: red; + grid-auto-rows: 25px; + grid-template-columns: 50px 50px; +} +.grid > div { + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div style="grid-row: span 4"></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-002.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-002.html new file mode 100644 index 0000000000..f055340a3a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Placement of grid items spanning multiple rows</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#auto-placement-algo" title="8.5. Grid Item Placement Algorithm"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255298"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.grid { + width: 100px; + height: 100px; + display: grid; + background: red; + grid-auto-rows: 5px; + grid-template-columns: repeat(4, 25px); +} +.grid > div { + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div style="grid-row: span 7"></div> + <div style="grid-row: span 9"></div> + <div style="grid-row: span 11"></div> + <div style="grid-row: span 10"></div> + <div style="grid-row: span 10"></div> + <div style="grid-row: span 9"></div> + <div style="grid-row: span 10"></div> + <div style="grid-row: span 9"></div> + <div style="grid-row: span 3"></div> + <div style="grid-row: span 2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-001.html new file mode 100644 index 0000000000..12fdd78204 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement mixing named grid areas and lines</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-placement-slot"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-grid-area"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Line placement algorithm selects the first matching column when using a grid line name associated to several columns and no integer is specified within the custom-ident."> +<style> +.grid { + display: inline-grid; + background: red; + grid-template-columns: [C] 25px [C] 25px [C] 25px [C] 25px; + grid-auto-rows: 50px; + grid-template-areas: "A1 A2 A3 A4" + ". A2 A3 A4"; +} +.grid > div { background: green; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div style="grid-area: A1"></div> + <div style="grid-area: A2"></div> + <div style="grid-area: A3"></div> + <div style="grid-area: A4"></div> + <div style="grid-column: C; grid-row: 2;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html new file mode 100644 index 0000000000..625401d7cf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with named line and auto repeat()</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid placement algorithm is able to select the 1st line by name when the 1st track is defined with auto repeat()."> +<style> +.grid { + display: grid; + width: 100px; + height: 100px; + background: red; + grid-template-columns: [area-start] repeat(auto-fill, 10px) [area-end]; + grid-template-rows: [area-start] repeat(auto-fill, 10px [area-start]) [area-end]; +} +.grid > div { + grid-area: area; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-003.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-003.html new file mode 100644 index 0000000000..31173e0a45 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with named line and auto repeat()</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid placement algorithm is able to select the right line when there is an auto repeat()."> +<style> +.grid { + display: grid; + width: 300px; + height: 300px; + position: relative; + top: -200px; + left: -200px; + grid-template-columns: repeat(auto-fill, 100px 100px) [area-start] 100px [area-end]; + grid-template-rows: repeat(auto-fill, 100px 100px [area-start]) [area-start] 100px [area-end]; +} +.grid > div { + grid-area: area; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-004.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-004.html new file mode 100644 index 0000000000..c33b1a9ee9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with '<integer> && <custom-ident>' and auto repeat()</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid placement algorithm is able to select the right line when using the '<integer> && <custom-ident>' syntax and there is an auto repeat()."> +<style> +.grid { + display: grid; + width: 300px; + height: 300px; + grid-template-columns: [foo] repeat(auto-fill, 100px [foo]); + grid-template-rows: repeat(auto-fill, [foo] 100px); +} +.grid > div { + grid-area: 1 foo / 1 foo; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-005.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-005.html new file mode 100644 index 0000000000..20d9298955 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-005.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with implicit named line and auto repeat()</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid placement algorithm is able to select the right line when defined implicitly with grid-template-areas."> +<style> +.grid { + display: grid; + width: 300px; + height: 300px; + grid-template-areas: "area"; + grid-template-columns: repeat(auto-fill, 100px); + grid-template-rows: repeat(auto-fill, 100px) [area-end] 100px; +} +.grid > div { + grid-area: area; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-006.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-006.html new file mode 100644 index 0000000000..405858f73c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with implicit named line, '<integer> && <custom-ident>', and auto repeat()</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid placement algorithm is able to select the right line when defined implicitly with grid-template-areas, referenced using the '<integer> && <custom-ident>' syntax, and with auto repeat()."> +<style> +.grid { + display: grid; + width: 300px; + height: 300px; + margin-left: -100px; + margin-top: -100px; + grid-template-areas: ". ." ". foo"; + grid-template-columns: repeat(auto-fill, 100px) [foo-start]; + grid-template-rows: repeat(auto-fill, 100px) [foo-start]; +} +.grid > div { + grid-area: 1 foo-start / 1 foo-start; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html new file mode 100644 index 0000000000..4e6c4cceb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with dynamically named grid lines</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-300px-square.html"> +<meta name="assert" content="Grid item placement is updated when the names of the grid lines change dynamically."> +<style> +.container { + display: grid; + width: 300px; + height: 100px; + background: red; +} +.container::before { + content: ""; + grid-area: main; + background: green; +} +.explicit { + grid-template-columns: [quux-start] 100% [quux-end]; + grid-template-rows: [quux-start] 100% [quux-end]; +} +.explicit.changed { + grid-template-columns: [main-start] 100% [main-end]; + grid-template-rows: [main-start] 100% [main-end]; +} +.auto-repeat { + grid-template-columns: repeat(auto-fill, [quux-start] 100% [quux-end]); + grid-template-rows: repeat(auto-fill, [quux-start] 100% [quux-end]); +} +.auto-repeat.changed { + grid-template-columns: repeat(auto-fill, [main-start] 100% [main-end]); + grid-template-rows: repeat(auto-fill, [main-start] 100% [main-end]); +} +.implicit { + grid-template-columns: 100%; + grid-template-rows: 100%; + grid-template-areas: "quux"; +} +.implicit.changed { + grid-template-areas: "main"; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container explicit"></div> +<div class="container auto-repeat"></div> +<div class="container implicit"></div> +<script> +// Force layout +document.body.offsetLeft; + +// Change the grid line names +for (let container of document.querySelectorAll(".container")) { + container.classList.add("changed"); +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-008.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-008.html new file mode 100644 index 0000000000..6ee48448ae --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-008.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with inherited grid-template-areas</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Grid placement algorithm is able to select the right line when defined implicitly with an inherited grid-template-areas."> +<style> +.wrapper { + grid-template-areas: "a b" "a c"; +} +.grid { + display: grid; + grid-template-areas: inherit; + width: 100px; + height: 100px; + background: red; +} +.item { + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="wrapper"> + <div class="grid"> + <div class="item" style="grid-area: a"></div> + <div class="item" style="grid-area: b"></div> + <div class="item" style="grid-area: c"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html new file mode 100644 index 0000000000..10cb140ebc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item placement with non-inherited grid-template-areas</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that inheriting grid-template-columns and grid-template-rows doesn't also inherit grid-template-areas."> +<style> +.wrapper { + grid-template-areas: "area"; +} +.grid { + display: grid; + width: 100px; + height: 100px; + grid-auto-columns: 0px 100%; + grid-auto-rows: 0px 100%; + grid-template-columns: inherit; + grid-template-rows: inherit; + background: red; +} +.item { + grid-area: area; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="wrapper"> + <div class="grid"> + <div class="item"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-template-areas-must-keep-named-columns-order-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-template-areas-must-keep-named-columns-order-001.html new file mode 100644 index 0000000000..8b0736b87f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/placement/grid-template-areas-must-keep-named-columns-order-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-slot"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column"> +<link rel="help" href="https://crbug.com/733577"> +<link rel="match" href="../reference/grid-template-areas-must-keep-named-columns-order-001-ref.html"> +<meta name="assert" content="A grid item located in a named line will be placed in the first one associated to that name"/> +<style> +.grid { + display: inline-grid; + background: grey; + grid-template-columns: [col] 50px [col] 50px [col] 50px [col] 50px; + grid-auto-rows: 50px; + grid-template-areas: "A . . ."; +} +.grid > :nth-child(1) { background: magenta; } +.grid > :nth-child(2) { background: blue; } +.grid > :nth-child(3) { background: yellow; } +.grid > :nth-child(4) { background: green; } +.grid > :nth-child(5) { background: black; } +</style> +<p>This test passes if the black item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p> +<div class="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="grid-column: col"></div> +</div> |