grid-item-addition-auto-placement-update.html

<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: 50px 100px;
    grid-template-rows: 50px 100px;
}
</style>
<script src="../../resources/check-layout.js"></script>
<script>
function testAddition(gridElementID, position, autoFlowElementID, size)
{
    var gridElement = document.getElementById(gridElementID);

    var gridItem = document.createElement("div");
    gridItem.style.gridRow = position.row;
    gridItem.style.gridColumn = position.column;
    gridElement.appendChild(gridItem);

    var autoFlowElement = document.getElementById(autoFlowElementID);
    autoFlowElement.setAttribute("data-expected-width", size.width);
    autoFlowElement.setAttribute("data-expected-height", size.height);
    checkLayout("#" + autoFlowElementID, document.getElementById("test-output"));
}

function testAdditions()
{
    var testOutput = document.getElementById("test-output");
    checkLayout("#autoFlowColumnElement", testOutput);
    testAddition("gridAutoFlowColumnDense", { 'row': '1', 'column': '1' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
    testAddition("gridAutoFlowColumnDense", { 'row': '1', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
    testAddition("gridAutoFlowColumnDense", { 'row': '2', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
    testAddition("gridAutoFlowColumnDense", { 'row': '2', 'column': '1' }, "autoFlowColumnElement", { 'width': '170', 'height': '50' });

    checkLayout("#autoFlowRowElement", testOutput);
    testAddition("gridAutoFlowRowDense", { 'row': '1', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
    testAddition("gridAutoFlowRowDense", { 'row': '2', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
    testAddition("gridAutoFlowRowDense", { 'row': '2', 'column': '2' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
    testAddition("gridAutoFlowRowDense", { 'row': '1', 'column': '2' }, "autoFlowRowElement", { 'width': '50', 'height': '30' });

    checkLayout("#gridAutoFlowColumnWithAuto", testOutput);
    testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' });
    testAddition("gridAutoFlowColumnWithAuto", { 'row': '1', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '50' });
    testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '100' });
    testAddition("gridAutoFlowColumnWithAuto", { 'row': '2', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '170', 'height': '50' });

    checkLayout("#gridAutoFlowRowWithAuto", testOutput);
    testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': 'auto' }, "autoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
    testAddition("gridAutoFlowRowWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
    testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '2' }, "autoFlowRowElementWithAuto", { 'width': '50', 'height': '100' });
    testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '1' }, "autoFlowRowElementWithAuto", { 'width': '50', 'height': '100' });
}
window.addEventListener("load", testAdditions, false);
</script>
<body>

<p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p>

<div class="unconstrainedContainer">
    <div class="grid gridAutoFlowColumnDense justifyContentStart" id="gridAutoFlowColumnDense">
        <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    </div>
</div>

<div class="unconstrainedContainer">
    <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense">
        <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    </div>
</div>

<div class="unconstrainedContainer">
    <div class="grid gridAutoFlowColumnDense justifyContentStart" id="gridAutoFlowColumnWithAuto">
        <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    </div>
</div>

<div class="unconstrainedContainer">
    <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAuto">
        <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
    </div>
</div>

<div id="test-output"></div>

</body>
</html>
chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html
