Skip to content

GitLab

T
tangled
Commit 1920fb5b authored by Oriol Brufau's avatar Oriol Brufau Committed by Commit Bot
Browse files
Options

[css-grid] Upstream grid-change-auto-repeat-tracks.html to WPT 

This test includes checks for bug 961407, they can be useful for other
browsers like WebKit.

I have refactored the test a bit to avoid checking the grids twice after
each change, this was superfluous work.

BUG=767015

Change-Id: I46c50b4bedcd4852fcc71fe4e37c63bbd37cb8a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1607061
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#659094}
parent 8a731744
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 157 deletions
third_party/blink/web_tests/external/wpt/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html 0 → 100644
View file @ 1920fb5b
<!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>
third_party/blink/web_tests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html deleted 100644 → 0
View file @ 8a731744
<!DOCTYPE html>
<link href="resources/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, #i21 {
grid-row: auto;
grid-column: 1;
background-color: orange;
}
#i2, #i22 {
grid-row: 1;
grid-column: auto;
background-color: green;
}
#i3, #i23 {
grid-row: auto;
grid-column: auto;
background-color: blue;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<script>
function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
{
var gridElement = document.getElementById(id);
gridElement.style.gridTemplateRows = gridTemplateRows;
gridElement.style.gridTemplateColumns = gridTemplateColumns;
}
function setGridSize(id, width, height)
{
var gridElement = document.getElementById(id);
gridElement.style.width = width;
gridElement.style.height = height;
}
function setGridItemPlacement(id, gridRow, gridColumn) {
var gridItem = document.getElementById(id);
gridItem.style.gridRow = gridRow;
gridItem.style.gridColumn = gridColumn;
}
function testGridDefinitions(firstGridItemData, secondGridItemData, thirdGridItemData)
{
var i1 = document.getElementById(firstGridItemData.id);
i1.setAttribute("data-expected-width", firstGridItemData.width);
i1.setAttribute("data-expected-height", firstGridItemData.height);
i1.setAttribute("data-offset-x", firstGridItemData.x);
i1.setAttribute("data-offset-y", firstGridItemData.y);
var i2 = document.getElementById(secondGridItemData.id);
i2.setAttribute("data-expected-width", secondGridItemData.width);
i2.setAttribute("data-expected-height", secondGridItemData.height);
i2.setAttribute("data-offset-x", secondGridItemData.x);
i2.setAttribute("data-offset-y", secondGridItemData.y);
var i3 = document.getElementById(thirdGridItemData.id);
i3.setAttribute("data-expected-width", thirdGridItemData.width);
i3.setAttribute("data-expected-height", thirdGridItemData.height);
i3.setAttribute("data-offset-x", thirdGridItemData.x);
i3.setAttribute("data-offset-y", thirdGridItemData.y);
checkLayout(".grid", false);
}
function testChangingGridDefinitions()
{
// Test changing the number of auto-repeat tracks.
setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
testGridDefinitions({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
setGridTemplate('grid1', 'none', 'none');
testGridDefinitions({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '0', 'y': '50' });
setGridTemplate('grid2', 'none', 'none');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '50', 'y': '0' });
setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
testGridDefinitions({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '20', 'height': '25', 'x': '5', 'y': '25' });
setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '20', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '20', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '20', 'x': '25', 'y': '20' });
setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
testGridDefinitions({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '22', 'height': '25', 'x': '5', 'y': '25' });
setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '18', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '18', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '18', 'x': '25', 'y': '18' });
setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '0', 'y': '50' });
setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '45', 'x': '50', 'y': '0' });
// Test changing the size of the grid.
setGridSize('grid1', '100px', 'auto');
testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '45', 'y': '25' });
setGridSize('grid2', '100px', '100px');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', '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('i3', 'auto', '3');
testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '90', 'y': '25' });
setGridItemPlacement('i23', '3', 'auto');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', '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)');
testGridDefinitions({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '45', 'y': '25' });
setGridTemplate('grid2', 'repeat(auto-fit, 45px)', 'none');
testGridDefinitions({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '45' });
done();
}
window.addEventListener("load", testChangingGridDefinitions, false);
</script>
<div>This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.</div>
<div id="log"></div>
<div style="position: relative">
<div id="grid1" class="grid fixedWidth">
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
</div>
</div>
<div style="position: relative">
<div id="grid2" class="grid fixedHeight">
<div id="i21"></div>
<div id="i22"></div>
<div id="i23"></div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment