<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    /* 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;
    width: 33px;
    height: 44px;
}

.gridItem2 {
    grid-column: 2;
    grid-row: 2;
    width: 66px;
    height: 77px;
}

.singleSingleTrackRepeat {
    grid-template-rows: repeat(1, 18px);
    grid-template-columns: repeat(1, 15%);
}

.twoSingleTrackRepeat {
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, minmax(15px, 50%));
}

.twoDoubleTrackRepeat {
    grid-template-rows: repeat(2, minmax(5px, 10px)  auto);
    grid-template-columns: repeat(2, auto minmax(100px, 120px));
}

.twoDoubleTrackWithNamedGridLineRepeat {
    grid-template-rows: repeat(2, 10px (start) auto (end));
    grid-template-columns: repeat(2, auto (middle) 250px (end));
}

.twoDoubleTrackWithTrailingNamedGridLineRepeat {
    grid-template-rows: repeat(2, (before) 10px);
    grid-template-columns: repeat(2, (before) auto);
}

.trailingNamedGridLineRepeat {
    grid-template-rows: repeat(1, 10px) (end);
    grid-template-columns: repeat(1, 250px) (end);
}

.leadingNamedGridLineRepeat {
    grid-template-rows: (start) repeat(2, 10px);
    grid-template-columns: (start) repeat(2, 250px);
}

.mixRepeatAfterNonRepeat {
    grid-template-rows: auto repeat(2, 10px);
    grid-template-columns: (start) 140px repeat(2, 250px);
}

.mixNonRepeatAfterRepeat {
    grid-template-rows: repeat(2, 10px) (end) auto;
    grid-template-columns: repeat(2, 250px) 15% (last);
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
<div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
    <div class="gridItem"></div>
    <div class="gridItem2"></div>
</div>
<div class="grid twoDoubleTrackRepeat" id="twoDoubleTrackRepeat">
    <div class="gridItem"></div>
    <div class="gridItem2"></div>
</div>
<div class="grid twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat">
    <div class="gridItem"></div>
    <div class="gridItem2"></div>
</div>
<div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
<div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
<div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
<div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
    <div class="gridItem"></div>
</div>
<div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>

<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
    description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');

    debug("Test getting grid-template-columns and grid-template-rows set through CSS");
    testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px");
    testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithoutSize"), "0px", "18px");
    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px");
    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");
    testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");
    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (start) 77px (end) 10px (start) 0px (end)");
    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10px");
    testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px (end)", "10px (end)");
    testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "(start) 250px 250px", "(start) 10px 10px");
    testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "(start) 140px 250px 250px", "44px 10px 10px");
    testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px (last)", "10px 10px (end) 0px");

    debug("");
    debug("Test invalid repeat syntax.");
    function testInvalidSyntax(gridColumn) {
        element = document.createElement("div");
        document.body.appendChild(element);
        element.style.gridTemplateColumns = gridColumn;
        shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
        document.body.removeChild(element);
    }
    testInvalidSyntax("repeat(");
    testInvalidSyntax("repeat()");
    testInvalidSyntax("repeat(3 / auto)");
    testInvalidSyntax("repeat(3 , ,)");
    testInvalidSyntax("repeat(0, 15px)");
    testInvalidSyntax("repeat(-1, auto)");
    testInvalidSyntax("repeat(1, (foo))");
    testInvalidSyntax("repeat(1, )");
    testInvalidSyntax("repeat(1)");
    // Nesting is no allowed.
    testInvalidSyntax("repeat(2, repeat(1, auto))");
</script>
</body>
</html>