288 lines
16 KiB
HTML
288 lines
16 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<link href="resources/grid-alignment.css" rel="stylesheet">
|
|
<style>
|
|
#gridTemplateWithNone {
|
|
grid-template: none;
|
|
}
|
|
#gridTemplateSimpleForm {
|
|
grid-template: 15px / 10px;
|
|
}
|
|
#gridTemplateSimpleFormWithNoneColumns {
|
|
grid-template: 15px / none;
|
|
}
|
|
#gridTemplateSimpleFormWithNoneRows {
|
|
grid-template: none / 10px;
|
|
}
|
|
#gridTemplateSimpleFormWithNone {
|
|
grid-template: none / none;
|
|
}
|
|
#gridTemplateComplexForm {
|
|
grid-template: "a" 15px / 10px;
|
|
}
|
|
#gridTemplateComplexFormWithLineNames {
|
|
grid-template: [head] "a" 15px [tail] / 10px;
|
|
}
|
|
#gridTemplateComplexFormWithLineNamesWithoutRowSize {
|
|
grid-template: [head] "a" [tail] / 10px;
|
|
}
|
|
#gridTemplateComplexFormWithLineNamesMultipleColumns {
|
|
grid-template: [head] "a b" 15px [tail] / 10px 20px;
|
|
}
|
|
#gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize {
|
|
grid-template: [head] "a b" [tail] / 10px 20px;
|
|
}
|
|
#gridTemplateComplexFormWithLineNamesMultipleRows {
|
|
grid-template: [head1] "a" 15px [tail1]
|
|
[head2] "b" 20px [tail2] / 10px;
|
|
}
|
|
#gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes {
|
|
grid-template: [head1] "a" [tail1]
|
|
[head2] "b" [tail2] / 10px;
|
|
}
|
|
#gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
|
|
grid-template: "a b c" 100px [nav]
|
|
[nav2] "d e f" 25px [nav]
|
|
[nav2] "g h i" 25px [last] / [first] 10px [nav nav2] 15px [nav] 15px [last];
|
|
}
|
|
#gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes {
|
|
grid-template: "a b c" [nav]
|
|
[nav2] "d e f" [nav]
|
|
[nav2] "g h i" [last] / [first] 10px [nav nav2] 15px [nav] 15px [last];
|
|
}
|
|
#gridTemplateComplexFormWithAuto {
|
|
grid-template: "a" / 10px;
|
|
}
|
|
#gridTemplateComplexFormOnlyAreas {
|
|
grid-template: "a";
|
|
}
|
|
#gridTemplateNoColumnsRowWithEmptyTrailingLineNames {
|
|
grid-template: [first] "a" auto [];
|
|
}
|
|
|
|
/* Bad values. */
|
|
|
|
#gridTemplateMultipleSlash {
|
|
grid-template: 10px / 20px / 30px;
|
|
}
|
|
#gridTemplateSimpleFormJustColumns {
|
|
grid-template: 10px;
|
|
}
|
|
#gridTemplateSimpleFormNoRows {
|
|
grid-template: / 10px;
|
|
}
|
|
#gridTemplateSimpleFormNoColumns {
|
|
grid-template: 10px /;
|
|
}
|
|
#gridTemplateSimpleFormNoColumnSize {
|
|
grid-template: 10px / [line];
|
|
}
|
|
#gridTemplateSimpleFormWithFitContent {
|
|
grid-template: 10px / fit-content;
|
|
}
|
|
#gridTemplateSimpleFormWithWrongRepeat {
|
|
grid-template: 10px / repeat(2, 50% [title] a);
|
|
}
|
|
#gridTemplateSimpleFormWithMisplacedNone1 {
|
|
grid-template: none 20px / 10px;
|
|
}
|
|
#gridTemplateSimpleFormWithMisplacedNone2 {
|
|
grid-template: 20px none / 10px;
|
|
}
|
|
#gridTemplateSimpleFormWithMisplacedNone3 {
|
|
grid-template: 20px / none 10px;
|
|
}
|
|
#gridTemplateSimpleFormWithMisplacedNone4 {
|
|
grid-template: 20px / 10px none;
|
|
}
|
|
#gridTemplateComplexFormWithRepeat {
|
|
grid-template: "a" repeat(2, 50% [title]) / 10px;
|
|
}
|
|
#gridTemplateComplexFormWithWrongRepeat {
|
|
grid-template: "a" / repeat(2, 50% [title] a);
|
|
}
|
|
#griTemplateComplexFormdWithFitAvailable {
|
|
grid-template: "a" / -webkit-fit-available;
|
|
}
|
|
#gridTemplateComplexFormNoColumnSize {
|
|
grid-template: "a" / [line];
|
|
}
|
|
#gridTemplateComplexFormMisplacedRowsSize1 {
|
|
grid-template: 10px "a" / 25px;
|
|
}
|
|
#gridTemplateComplexFormMisplacedRowsSize2 {
|
|
grid-template: "a" [name] 10px / 25px;
|
|
}
|
|
#gridTemplateComplexFormMisplacedRowsSize3 {
|
|
grid-template: [head] "a" [tail] 10px / 10px;
|
|
}
|
|
#gridTemplateComplexFormMisplacedRowsSize4 {
|
|
grid-template: [head1] "a" [tail1]
|
|
[head2] "a" [tail2] 100px / 10px;
|
|
}
|
|
#gridTemplateComplexFormColumnsNotParsing1 {
|
|
grid-template: "a" [name] 10px / a;
|
|
}
|
|
#gridTemplateComplexFormColumnsNotParsing2 {
|
|
grid-template: "a" [name] 10px / "B";
|
|
}
|
|
#gridTemplateComplexFormWithNoneColumns {
|
|
grid-template: "a" [name] 10px / none;
|
|
}
|
|
#gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames {
|
|
grid-template: [first] "a" auto [] [];
|
|
}
|
|
#gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames {
|
|
grid-template: [first] "a" auto [] [tail];
|
|
}
|
|
#gridTemplateRepeat {
|
|
grid-template: "a" / repeat(1, 100px);
|
|
}
|
|
#gridTemplateRepeatAutoFill {
|
|
grid-template: "a" / repeat(auto-fill, 100px);
|
|
}
|
|
#gridTemplateRepeatAutoFit {
|
|
grid-template: "a" / repeat(auto-fit, 100px);
|
|
}
|
|
|
|
</style>
|
|
<script src="../../resources/js-test.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="grid" id="gridTemplateWithNone"></div>
|
|
<div class="grid" id="gridTemplateSimpleForm"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithNoneColumns"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithNoneRows"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithNone"></div>
|
|
<div class="grid" id="gridTemplateComplexForm"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNames"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNamesWithoutRowSize"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumns"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRows"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithAuto"></div>
|
|
<div class="grid justifyContentStart" id="gridTemplateComplexFormOnlyAreas"></div>
|
|
<div class="grid justifyContentStart" id="gridTemplateNoColumnsRowWithEmptyTrailingLineNames"></div>
|
|
<div class="grid" id="gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames"></div>
|
|
<div class="grid" id="gridTemplateNoColumnsRowWithNonEmptyLeadingLineNamesAndEmptyTrailingLineNames"></div>
|
|
<div class="grid" id="gridTemplateMultipleSlash"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormJustColumns"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormNoRows"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormNoColumns"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormNoColumnSize"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithFitContent"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithWrongRepeat"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithMisplacedNone1"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithMisplacedNone2"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithMisplacedNone3"></div>
|
|
<div class="grid" id="gridTemplateSimpleFormWithMisplacedNone4"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithRepeat"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithWrongRepeat"></div>
|
|
<div class="grid" id="griTemplateComplexFormdWithFitAvailable"></div>
|
|
<div class="grid" id="gridTemplateComplexFormNoColumnSize"></div>
|
|
<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize1"></div>
|
|
<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize2"></div>
|
|
<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize3"></div>
|
|
<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize4"></div>
|
|
<div class="grid" id="gridTemplateComplexFormColumnsNotParsing1"></div>
|
|
<div class="grid" id="gridTemplateComplexFormColumnsNotParsing2"></div>
|
|
<div class="grid" id="gridTemplateComplexFormWithNoneColumns"></div>
|
|
<div class="grid" id="gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames"></div>
|
|
<div class="grid" id="gridTemplateRepeat"></div>
|
|
<div class="grid" id="gridTemplateRepeatAutoFill"></div>
|
|
<div class="grid" id="gridTemplateRepeatAutoFit"></div>
|
|
<script src="resources/grid-template-shorthand-parsing-utils.js"></script>
|
|
<script>
|
|
description("This test checks that the 'grid-template' shorthand is properly parsed and the longhand properties correctly assigned.");
|
|
|
|
debug("Test getting grid-template-areas set through CSS.");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateWithNone"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleForm"), "10px", "15px", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNoneColumns"), "none", "15px", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNoneRows"), "10px", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNone"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm"), "10px", "15px", '"a"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "[head] 15px [tail]", '"a"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesWithoutRowSize"), "10px", "[head] 0px [tail]", '"a"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px 20px", "[head] 15px [tail]", '"a b"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"), "10px 20px", "[head] 0px [tail]", '"a b"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "[head1] 15px [tail1 head2] 20px [tail2]", '"a" "b"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes"), "10px", "[head1] 0px [tail1 head2] 0px [tail2]", '"a" "b"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"), "[first] 10px [nav nav2] 15px [nav] 15px [last]", "100px [nav nav2] 25px [nav nav2] 25px [last]", '"a b c" "d e f" "g h i"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes"), "[first] 10px [nav nav2] 15px [nav] 15px [last]", "0px [nav nav2] 0px [nav nav2] 0px [last]", '"a b c" "d e f" "g h i"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithAuto"), "10px", "0px", '"a"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "0px", "0px", '"a"');
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "0px", "[first] 0px", '"a"');
|
|
|
|
debug("");
|
|
debug("Test getting wrong values for grid-template shorthand through CSS (they should resolve to the default: 'none')");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJustColumns"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoRows"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoColumns"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoColumnSize"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithFitContent"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithWrongRepeat"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone1"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone2"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone3"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithMisplacedNone4"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithRepeat"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithWrongRepeat"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("griTemplateComplexFormdWithFitAvailable"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormNoColumnSize"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize1"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize2"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize3"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize4"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing1"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing2"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithNoneColumns"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateRepeat"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateRepeatAutoFill"), "none", "none", "none");
|
|
testGridDefinitionsValues(document.getElementById("gridTemplateRepeatAutoFit"), "none", "none", "none");
|
|
|
|
debug("");
|
|
debug("Test the initial value");
|
|
var element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
testGridDefinitionsValues(element, "none", "none", "none");
|
|
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
|
|
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
|
|
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
|
|
|
|
debug("");
|
|
debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
|
|
testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"");
|
|
testGridDefinitionsSetJSValues("none", "none", "none", "none");
|
|
|
|
debug("");
|
|
debug("Test getting and setting grid-template shorthand through JS");
|
|
testGridDefinitionsSetJSValues("66px / 18px", "18px", "66px", "none");
|
|
testGridDefinitionsSetJSValues("[head] 'a' 15px [tail] / 10px", "10px", "[head] 15px [tail]", "\"a\"");
|
|
testGridDefinitionsSetJSValues("[foo1 bar1] 'a' 50px [foo2 bar2] [foo3 bar3] 'b' 50px [foo4 bar4] / 100px", "100px", "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]", "\"a\" \"b\"", "100px", "[foo1 bar1] 50px [foo2 bar2 foo3 bar3] 50px [foo4 bar4]");
|
|
testGridDefinitionsSetJSValues("'a'", "0px", "0px", "\"a\"", "none", "auto");
|
|
|
|
debug("");
|
|
debug("Test setting grid-template shorthand to bad values through JS");
|
|
testGridDefinitionsSetBadJSValues("'a' / none");
|
|
testGridDefinitionsSetBadJSValues("'a' [name] 10px / 25px");
|
|
testGridDefinitionsSetBadJSValues("'b' / 'a'");
|
|
testGridDefinitionsSetBadJSValues("15px");
|
|
testGridDefinitionsSetBadJSValues("20px none / 15px");
|
|
testGridDefinitionsSetBadJSValues("10px 'a' / 25px");
|
|
testGridDefinitionsSetBadJSValues("'a b' / 100px repeat(1, 200px)");
|
|
testGridDefinitionsSetBadJSValues("'a b c' / repeat(2, 200px) 100px");
|
|
testGridDefinitionsSetBadJSValues("'a b c d' / 100px repeat(auto-fill, 200px) 100px");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|