<!DOCTYPE HTML>
<html>
<head>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.definite {
/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
width: 800px;
height: 600px;
}
.gridItem {
grid-column: 1;
grid-row: 1;
height: 22px;
width: 77px;
}
.gridWithFixed {
grid-template-columns: [first] 10px;
grid-template-rows: [first] 15px;
}
.gridWithPercent {
grid-template-columns: 50% [last];
grid-template-rows: 25% [last];
}
.gridWithAuto {
grid-template-columns: [first] auto;
grid-template-rows: auto [last];
}
.gridWithMinMax {
grid-template-columns: [first] minmax(10%, 15px);
grid-template-rows: minmax(20px, 50%) [last];
}
.gridWithFixedMultiple {
grid-template-columns: [first nav] 10px [last];
grid-template-rows: [first nav] 15px [last];
}
.gridWithPercentageSameStringMultipleTimes {
grid-template-columns: [first nav] 10% [nav] 15% [last];
grid-template-rows: [first nav2] 25% [nav2] 75% [last];
}
.gridWithRepeat {
grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
}
.gridWithEmptyBrackets {
grid-template-columns: [] 10px;
grid-template-rows: 20px [ ] 50px [];
}
.gridWithoutBrackets {
grid-template-columns: first nav 10px;
grid-template-rows: first 50% last;
}
.gridWithInvalidNestedBrackets {
grid-template-columns: [first [nav]] 10px [last];
grid-template-rows: [first] 50% [last [nav] nav2];
}
.gridWithUnbalancedBrackets {
grid-template-columns: [first nav 10px;
grid-template-rows: [first] 50% last];
}
.gridWithMisplacedBrackets {
grid-template-columns: [first 10px] 50%;
grid-template-rows: [first] [nav 50%];
}
.gridWithContiguousBrackets {
grid-template-columns: [first] [nav] 10px;
grid-template-rows: 50px [nav nav2] [middle] 10px;
}
.gridWithInvalidCustomIdents {
grid-template-columns: [first span] 10px;
grid-template-rows: 50px [inherit] 10px;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></div>
<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
<div class="gridItem"></div>
</div>
<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"></div>
<div class="grid definite gridWithAuto contentStart" id="gridWithAutoWithChildrenElement">
<div class="gridItem"></div>
</div>
<div class="grid definite gridWithMinMax" id="gridWithMinMax"></div>
<div class="grid definite gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
<div class="grid definite gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
<div class="grid definite gridWithRepeat" id="gridWithRepeatElement"></div>
<div class="grid definite gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
<div class="grid definite gridWithoutBrackets" id="gridWithoutBrackets"></div>
<div class="grid definite gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
<div class="grid definite gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
<div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
<div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
<div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustomIdents"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
debug("Test getting grid-template-columns and grid-template-rows set through CSS");
testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "400px [last]", "150px [last]");
testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "38.5px [last]", "5.5px [last]");
testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[first] 0px", "0px [last]");
testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "[first] 77px", "22px [last]");
testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first] 80px", "300px [last]");
testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [nav2] 450px [last]");
testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav nav2] 150px [last]");
testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
debug("");
debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
testGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
testGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 440px", "240px [last]", "[first] 55%", "40% [last]");
testGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] 0px", "0px [last]", "[first] auto", "auto [last]");
testGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] 0px", "0px [last]", "[first] min-content", "min-content [last]");
testGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] 0px", "0px [last]", "[first] max-content", "max-content [last]");
testGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] 440px", "240px [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
testGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]");
testGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]");
testGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] 0px", "0px [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] 0px [last]", "[first nav] 0px [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] 0px [nav] 0px [last]", "[first nav2] 0px [nav2] 15px [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");
testGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
testGridDefinitionsSetJSValues("[first] auto repeat(2, [foo bar] 20px)", "220px [foo] repeat(1, 50% [baz]", "[first] 0px [foo bar] 20px [foo bar] 20px", "220px [foo] 300px [baz]", "[first] auto repeat(2, [foo bar] 20px)", "220px [foo] repeat(1, 50% [baz])");
debug("");
debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS");
testGridDefinitionsValues(document.getElementById("gridWithoutBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithUnbalancedBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithMisplacedBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithContiguousBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithInvalidCustomIdents"), "none", "none");
debug("");
debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
testGridDefinitionsSetBadJSValues("[foo]", "[bar");
testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]");
testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2em");
testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em");
testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]");
testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]");
</script>
</body>
</html>
Codebase Browser
chromium