Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-08 15:05:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 527a9287825118957bb7d94c098c448cef9d6982

Browse source
This commit is contained in:
WPT Sync Bot 2020-01-08 08:23:30 +00:00
parent b876168721
commit ed25f52f43
289 changed files with 4880 additions and 2539 deletions
Download patch file Download diff file Expand all files Collapse all files

16
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html
View file

@ -85,21 +85,21 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
done();
});
</script>

10
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html
View file

@ -31,7 +31,7 @@ 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("grid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
@ -77,13 +77,13 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "none", "none");
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");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
done();
});
</script>

42
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html
View file

@ -77,47 +77,47 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "none", "none");
done();
});
</script>

14
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html
View file

@ -65,19 +65,19 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
done();
});
</script>

247
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html
View file

@ -4,7 +4,7 @@
<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 in an inline grid.">
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks in an inline grid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
@ -17,6 +17,7 @@
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
position: relative;
}
.fifthColumn {
@ -58,50 +59,218 @@
</div>
<script>
function testSizeAndPositionOfItems(gridId, expectedItemData) {
let grid = document.getElementById(gridId);
assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount");
let props = ["offsetWidth", "offsetTop", "offsetHeight"];
for (let i = 0; i < expectedItemData.length; ++i)
for (let prop of props)
assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop);
}
function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) {
TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue);
test(function() {
testSizeAndPositionOfItems(gridId, expectedItemData);
}, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";");
}
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");
testGrid("grid", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "auto auto", "", "100px 110px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20},
]);
testGrid("grid", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("grid", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
]);
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");
testGrid("gridItemsPositions", "", "", "none", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
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");
testGrid("gridAutoFlowColumn", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
]);
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");
testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
done();
});
</script>

16
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html
View file

@ -85,21 +85,21 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
done();
});
</script>

10
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html
View file

@ -31,7 +31,7 @@ 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("grid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
@ -77,13 +77,13 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "none", "none");
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");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
done();
});
</script>

42
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html
View file

@ -77,47 +77,47 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "none", "none");
done();
});
</script>

14
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-support-repeat-001.html
View file

@ -65,19 +65,19 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
done();
});
</script>

247
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html
View file

@ -4,7 +4,7 @@
<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.">
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
@ -17,6 +17,7 @@
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
position: relative;
}
.fifthColumn {
@ -58,50 +59,218 @@
</div>
<script>
function testSizeAndPositionOfItems(gridId, expectedItemData) {
let grid = document.getElementById(gridId);
assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount");
let props = ["offsetWidth", "offsetTop", "offsetHeight"];
for (let i = 0; i < expectedItemData.length; ++i)
for (let prop of props)
assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop);
}
function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) {
TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue);
test(function() {
testSizeAndPositionOfItems(gridId, expectedItemData);
}, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";");
}
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");
testGrid("grid", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "auto auto", "", "100px 110px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20},
]);
testGrid("grid", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("grid", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
]);
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");
testGrid("gridItemsPositions", "", "", "none", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
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");
testGrid("gridAutoFlowColumn", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
]);
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");
testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
done();
});
</script>

30
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html
View file

@ -11,9 +11,15 @@
<style>
.grid {
display: inline-grid;
grid-template-rows: auto;
grid-template-columns: auto;
font: 25px/1 Ahem;
}
.grid2rows {
grid-template-rows: auto auto;
}
.constrainedGrid {
width: 10px;
height: 10px;
@ -126,32 +132,32 @@
<!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. -->
<div id="grid-7" class="grid">
<div id="grid-7" class="grid grid2rows">
<img id="img-7" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-8" class="grid constrainedGrid">
<div id="grid-8" class="grid grid2rows constrainedGrid">
<img id="img-8" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-9" class="grid width200px">
<div id="grid-9" class="grid grid2rows width200px">
<img id="img-9" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-10" class="grid width200px constrainedGrid">
<div id="grid-10" class="grid grid2rows width200px constrainedGrid">
<img id="img-10" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-11" class="grid width200px justifyContentStart">
<div id="grid-11" class="grid grid2rows width200px justifyContentStart">
<img id="img-11" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-12" class="grid width200px constrainedGrid justifyContentStart">
<div id="grid-12" class="grid grid2rows width200px constrainedGrid justifyContentStart">
<img id="img-12" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
@ -184,32 +190,32 @@
<!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. -->
<div id="grid-19" class="grid">
<div id="grid-19" class="grid grid2rows">
<img id="img-19" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-20" class="grid constrainedGrid">
<div id="grid-20" class="grid grid2rows constrainedGrid">
<img id="img-20" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-21" class="grid width200px">
<div id="grid-21" class="grid grid2rows width200px">
<img id="img-21" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-22" class="grid width200px constrainedGrid">
<div id="grid-22" class="grid grid2rows width200px constrainedGrid">
<img id="img-22" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-23" class="grid width200px justifyContentStart">
<div id="grid-23" class="grid grid2rows width200px justifyContentStart">
<img id="img-23" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-24" class="grid width200px constrainedGrid justifyContentStart">
<div id="grid-24" class="grid grid2rows width200px constrainedGrid justifyContentStart">
<img id="img-24" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>

2
tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html
View file

@ -36,7 +36,7 @@
</div>
</div>
<script>
test_computed_value("grid-template-columns", 'none', '300px'); // "none" without #child
test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width

2
tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html
View file

@ -36,7 +36,7 @@
</div>
</div>
<script>
test_computed_value("grid-template-rows", 'none', '600px'); // "none" without #child
test_computed_value("grid-template-rows", 'none', 'none'); // "none" without #child
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-template-rows", '20%', '120px'); // 20% * height