forked from mirrors/gecko-dev
69b28b9b1a
Automatic update from web-platform-tests Revert WPT from "[css-grid] Exclude implicit grid tracks from the resolved value" The layout changes from r728894 were reverted in r758566. It doesn't seem that we will be able to reland that soon, so this patch reverts the WPT tests. Some modifications are kept as new tentative tests. BUG=1024927 Change-Id: I36e59f192dac713fe1799c14cbd4f8c83ee39bb7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2207241 Commit-Queue: Oriol Brufau <obrufau@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#770289} -- wpt-commits: f1d5495cf140d0ab5e83ae9a3abe08bbea976d48 wpt-pr: 23675
107 lines
7.1 KiB
HTML
107 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title>
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
|
|
<meta name="flags" content="ahem dom">
|
|
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/testing-utils.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
width: 800px;
|
|
height: 600px;
|
|
font: 10px/1 Ahem;
|
|
justify-content: start;
|
|
align-content: start;
|
|
}
|
|
|
|
.fifthColumn {
|
|
grid-column: 5;
|
|
}
|
|
|
|
.fourthRow {
|
|
grid-row: 4;
|
|
}
|
|
|
|
.gridAutoFlowColumn {
|
|
grid-auto-flow: column;
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
|
|
<div id="grid" class="grid">
|
|
<div>FIRST ITEM</div>
|
|
<div>SECOND ITEM</div>
|
|
<div>THIRD<br />ITEM</div>
|
|
</div>
|
|
|
|
<div id="gridItemsPositions" class="grid">
|
|
<div class="fifthColumn">FIRST ITEM</div>
|
|
<div class="fourthRow">SECOND ITEM</div>
|
|
<div>THIRD<br />ITEM</div>
|
|
</div>
|
|
|
|
<div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn">
|
|
<div>FIRST ITEM</div>
|
|
<div>SECOND ITEM</div>
|
|
<div>THIRD<br />ITEM</div>
|
|
</div>
|
|
|
|
<div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn">
|
|
<div class="fifthColumn">FIRST ITEM</div>
|
|
<div class="fourthRow">SECOND ITEM</div>
|
|
<div>THIRD<br />ITEM</div>
|
|
</div>
|
|
|
|
<script>
|
|
setup({explicit_done: true});
|
|
document.fonts.ready.then(()=> {
|
|
// Valid values.
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
|
|
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
|
|
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
|
|
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
|
|
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
|
|
done();
|
|
});
|
|
</script>
|