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
89 lines
6.4 KiB
HTML
89 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</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/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties">
|
|
<meta name="flags" content="ahem dom">
|
|
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list.">
|
|
<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>
|
|
.inline-grid {
|
|
display: inline-grid;
|
|
width: 800px;
|
|
height: 600px;
|
|
font: 10px/1 Ahem;
|
|
justify-content: start;
|
|
align-content: start;
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
|
|
<div id="emptyGrid" class="inline-grid"></div>
|
|
<div id="grid" class="inline-grid">
|
|
<div id="item">GRID ITEM</div>
|
|
</div>
|
|
|
|
<script>
|
|
setup({explicit_done: true});
|
|
document.fonts.ready.then(()=> {
|
|
// Single values.
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
|
|
|
|
// Multiple values.
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
|
|
|
|
// Reset values.
|
|
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
|
|
document.getElementById("emptyGrid").style.gridTemplateRows = "";
|
|
document.getElementById("grid").style.gridTemplateColumns = "";
|
|
document.getElementById("grid").style.gridTemplateRows = "";
|
|
|
|
// Wrong values.
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
|
|
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
|
|
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
|
|
done();
|
|
});
|
|
</script>
|