<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.gridFixedContent {
    grid-template-columns: 50px minmax(min-content, 50px) minmax(max-content, 50px) minmax(50px, min-content);
    grid-template-rows: 70px minmax(max-content, 70px) minmax(50px, min-content) minmax(65px, max-content);
}

.sizedToGridArea {
    font: 10px/1 Ahem;
    /* Make us fit our grid area. */
    width: 100%;
    height: 100%;
}
</style>
<script src="../../resources/check-layout.js"></script>
<script>
function testPosition(gridElementID, content, position, size)
{
    var gridItem = document.createElement("div");
    gridItem.classList.add("sizedToGridArea");
    gridItem.innerHTML = content;
    gridItem.style.gridColumn = position.column;
    gridItem.style.gridRow = position.row;
    gridItem.setAttribute("data-expected-width", size.width);
    gridItem.setAttribute("data-expected-height", size.height);
    var gridElement = document.getElementById(gridElementID);
    gridElement.classList.add("contentStart");
    gridElement.appendChild(gridItem);
    checkLayout("#" + gridElementID);
}

function updateImplicitGridColumn()
{
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });

    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '30' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });

    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '30' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });

    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '30' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '30' });

    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '30' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });


    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });

    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });

    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });

    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '30' });

    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });

    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });

    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '1' }, { 'width': '130', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '1' }, { 'width': '60', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '1' }, { 'width': '130', 'height': '70' });

    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '2' }, { 'width': '60', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '2' }, { 'width': '130', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '2' }, { 'width': '60', 'height': '70' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '2' }, { 'width': '130', 'height': '70' });

    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '3' }, { 'width': '60', 'height': '50' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '3' }, { 'width': '130', 'height': '50' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '3' }, { 'width': '60', 'height': '50' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '3' }, { 'width': '130', 'height': '50' });

    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '4' }, { 'width': '60', 'height': '65' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '4' }, { 'width': '130', 'height': '65' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '4' }, { 'width': '60', 'height': '65' });
    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '4' }, { 'width': '130', 'height': '65' });
}
window.addEventListener("load", updateImplicitGridColumn, false);
</script>
<body>

<p>This test checks that we properly recompute our grid tracks' sizes when we add more grid items.</p>

<div class="constrainedContainer">
    <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"></div>
</div>

<div class="constrainedContainer">
    <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"></div>
</div>

<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 1000px; height: 1000px">
    <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
</div>

</body>
</html>