<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-auto-rows: 25px;
    grid-auto-columns: 25px;
    margin-bottom: 10px;
}

.fixedWidth {
    width: 50px;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, 25px);
}

.fixedHeight {
    width: 100px;
    height: 50px;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, 25px);
}

#i1, #i21 {
    grid-row: auto;
    grid-column: 1;
    background-color: orange;
}

#i2, #i22 {
    grid-row: 1;
    grid-column: auto;
    background-color: green;
}

#i3, #i23 {
    grid-row: auto;
    grid-column: auto;
    background-color: blue;
}
</style>
<!-- Explicitly not using layout-th because it does not allow multiple checkLayout(). -->
<script src="../../resources/check-layout.js"></script>
<script>
function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
{
     var gridElement = document.getElementById(id);
     gridElement.style.gridTemplateRows = gridTemplateRows;
     gridElement.style.gridTemplateColumns = gridTemplateColumns;
}

function setGridSize(id, width, height)
{
     var gridElement = document.getElementById(id);
     gridElement.style.width = width;
     gridElement.style.height = height;
}

function testGridTemplates(firstGridItemData, secondGridItemData, thirdGridItemData)
{
    var i1 = document.getElementById(firstGridItemData.id);
    i1.setAttribute("data-expected-width", firstGridItemData.width);
    i1.setAttribute("data-expected-height", firstGridItemData.height);
    i1.setAttribute("data-offset-x", firstGridItemData.x);
    i1.setAttribute("data-offset-y", firstGridItemData.y);

    var i2 = document.getElementById(secondGridItemData.id);
    i2.setAttribute("data-expected-width", secondGridItemData.width);
    i2.setAttribute("data-expected-height", secondGridItemData.height);
    i2.setAttribute("data-offset-x", secondGridItemData.x);
    i2.setAttribute("data-offset-y", secondGridItemData.y);

    var i3 = document.getElementById(thirdGridItemData.id);
    i3.setAttribute("data-expected-width", thirdGridItemData.width);
    i3.setAttribute("data-expected-height", thirdGridItemData.height);
    i3.setAttribute("data-offset-x", thirdGridItemData.x);
    i3.setAttribute("data-offset-y", thirdGridItemData.y);

    checkLayout(".grid");
}

function testChangingGridDefinitions()
{
     // Test changing the number of auto-repeat tracks.
     setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
     testGridTemplates({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
     setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });

     setGridTemplate('grid1', 'none', 'none');
     testGridTemplates({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '0', 'y': '50' });
     setGridTemplate('grid2', 'none', 'none');
     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '50', 'y': '0' });

     setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
     testGridTemplates({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '20', 'height': '25', 'x': '5', 'y': '25' });
     setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '20', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '20', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '20', 'x': '25', 'y': '20' });

     setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
     testGridTemplates({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '22', 'height': '25', 'x': '5', 'y': '25' });
     setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '18', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '18', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '18', 'x': '25', 'y': '18' });

     setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
     testGridTemplates({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '0', 'y': '50' });
     setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '45', 'x': '50', 'y': '0' });

     // Test changing the size of the grid.
     setGridSize('grid1', '100px', 'auto');
     testGridTemplates({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '45', 'y': '25' });
     setGridSize('grid2', '100px', '100px');
     testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '45', 'x': '25', 'y': '45' });
}

window.addEventListener("load", testChangingGridDefinitions, false);
</script>

<div>This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.</div>
<div id="log"></div>

<div style="position: relative">
    <div id="grid1" class="grid fixedWidth">
        <div id="i1"></div>
        <div id="i2"></div>
        <div id="i3"></div>
    </div>
</div>

<div style="position: relative">
    <div id="grid2" class="grid fixedHeight">
        <div id="i21"></div>
        <div id="i22"></div>
        <div id="i23"></div>
    </div>
</div>