non-grid-element-repeat-get-set.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.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="singleSingleTrackRepeat" id="singleSingleTrackRepeat"></div>
<div class="twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
<div class="twoDoubleTrackRepeat" id="twoDoubleTrackRepeat"></div>
<div class="twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat"></div>
<div class="twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
<div class="trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
<div class="leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
<div class="mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat"></div>
<div class="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("singleSingleTrackRepeat"), "repeat(1, 15%)", "repeat(1, 18px)");
    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "repeat(2, minmax(15px, 50%))", "repeat(2, auto)");
    testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "repeat(2, auto minmax(100px, 120px))", "repeat(2, minmax(5px, 10px) auto)");
    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "repeat(2, auto [middle] 250px [end])", "repeat(2, 10px [start] auto [end])");
    testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "repeat(2, [before] auto)", "repeat(2, [before] 10px)");
    testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "repeat(1, 250px) [end]", "repeat(1, 10px) [end]");
    testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "[start] repeat(2, 250px)", "[start] repeat(2, 10px)");
    testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "[start] 140px repeat(2, 250px)", "auto repeat(2, 10px)");
    testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "repeat(2, 250px) 15% [last]", "repeat(2, 10px) [end] auto");

    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)");
    // Nesting is no allowed.
    testInvalidSyntax("repeat(2, repeat(1, auto))");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css-grid-layout/non-grid-element-repeat-get-set.html
