<!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"), "none", "0px", '"a"');
    testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "none", "[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'", "none", "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>