<!DOCTYPE HTML>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.grid {
    font: 50px/1 Ahem;
    position: relative;
}

.singleNamedGridLines {
    grid-template-columns: [a] auto [b];
    grid-template-rows: [x] auto [y];
}

.multipleNamedGridLines {
    grid-template-columns: [a b c] auto [d e];
    grid-template-rows: [x y z] auto [v w];
}
</style>
<script src="../../resources/js-test.js"></script>

<div class="grid singleNamedGridLines justifyContentStart" id="gridOneColumnSingle">
    <div>XXXX</div>
    <div>XXX</div>
    <div>XX</div>
    <div>X</div>
</div>

<div class="grid singleNamedGridLines justifyContentStart" id="gridTwoColumnsSingle">
    <div class="firstRowAutoColumn">XXXX</div>
    <div class="firstRowAutoColumn">XXX</div>
    <div>XX</div>
    <div>X</div>
</div>

<div class="grid singleNamedGridLines justifyContentStart" id="gridThreeColumnsSingle">
    <div class="firstRowAutoColumn">XXXX</div>
    <div class="firstRowAutoColumn">XXX</div>
    <div class="firstRowAutoColumn">XX</div>
    <div>X</div>
</div>

<div class="grid singleNamedGridLines justifyContentStart" id="gridFourColumnsSingle">
    <div class="firstRowAutoColumn">XXXX</div>
    <div class="firstRowAutoColumn">XXX</div>
    <div class="firstRowAutoColumn">XX</div>
    <div class="firstRowAutoColumn">X</div>
</div>

<div class="grid multipleNamedGridLines justifyContentStart" id="gridOneColumnMultiple">
    <div>XXXX</div>
    <div>XXX</div>
    <div>XX</div>
    <div>X</div>
</div>

<div class="grid multipleNamedGridLines justifyContentStart" id="gridTwoColumnsMultiple">
    <div class="firstRowAutoColumn">XXXX</div>
    <div class="firstRowAutoColumn">XXX</div>
    <div>XX</div>
    <div>X</div>
</div>

<div class="grid multipleNamedGridLines justifyContentStart" id="gridThreeColumnsMultiple">
    <div class="firstRowAutoColumn">XXXX</div>
    <div class="firstRowAutoColumn">XXX</div>
    <div class="firstRowAutoColumn">XX</div>
    <div>X</div>
</div>

<div class="grid multipleNamedGridLines justifyContentStart" id="gridFourColumnsMultiple">
    <div class="firstRowAutoColumn">XXXX</div>
    <div class="firstRowAutoColumn">XXX</div>
    <div class="firstRowAutoColumn">XX</div>
    <div class="firstRowAutoColumn">X</div>
</div>

<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
    function testSizeAndPositionOfItems(element, expectedItemData) {
        window.element = element;
        var elementID = element.id || "element";
        shouldBeEqualToNumber(elementID + ".childElementCount", expectedItemData.length);
        var props = ["offsetWidth", "offsetTop", "offsetHeight"];
        for (var i = 0; i < expectedItemData.length; ++i)
            for (let prop of props)
                shouldBeEqualToNumber(elementID + ".children[" + i + "]." + prop, expectedItemData[i][prop]);
    }

    function testGrid(element, columnValue, rowValue, expectedItemData) {
        testGridTemplatesValues(element, columnValue, rowValue);
        testSizeAndPositionOfItems(element, expectedItemData);
    }

    description("Test that computed style for grid-template-columns and grid-template-rows works as expected, with named grid lines but without implicit tracks. Also test the size and position of the items, since the size of implicit tracks is not exposed");

    testGrid(document.getElementById("gridOneColumnSingle"), "[a] 200px [b]", "[x] 50px [y]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 100, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 150, offsetHeight: 50},
    ]);
    testGrid(document.getElementById("gridTwoColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 50, offsetHeight: 50},
    ]);
    testGrid(document.getElementById("gridThreeColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
    ]);
    testGrid(document.getElementById("gridFourColumnsSingle"), "[a] 200px [b]", "[x] 50px [y]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 450, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
    ]);

    testGrid(document.getElementById("gridOneColumnMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 100, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 150, offsetHeight: 50},
    ]);
    testGrid(document.getElementById("gridTwoColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 50, offsetHeight: 50},
    ]);
    testGrid(document.getElementById("gridThreeColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 50, offsetHeight: 50},
    ]);
    testGrid(document.getElementById("gridFourColumnsMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w]", [
      {offsetLeft: 0, offsetWidth: 200, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 200, offsetWidth: 150, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 350, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
      {offsetLeft: 450, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
    ]);
</script>