3 <link href="resources/grid.css" rel="stylesheet">
6 grid-template-columns: 50px 100px;
7 grid-template-rows: 50px 100px;
10 <script src="../../resources/check-layout.js"></script>
12 function testAddition(gridElementID, position, autoFlowElementID, size)
14 var gridElement = document.getElementById(gridElementID);
16 var gridItem = document.createElement("div");
17 gridItem.style.gridRow = position.row;
18 gridItem.style.gridColumn = position.column;
19 gridElement.appendChild(gridItem);
21 var autoFlowElement = document.getElementById(autoFlowElementID);
22 autoFlowElement.setAttribute("data-expected-width", size.width);
23 autoFlowElement.setAttribute("data-expected-height", size.height);
24 checkLayout("#" + autoFlowElementID, document.getElementById("test-output"));
27 function testAdditions()
29 var testOutput = document.getElementById("test-output");
30 checkLayout("#autoFlowColumnElement", testOutput);
31 testAddition("gridAutoFlowColumnDense", { 'row': '1', 'column': '1' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
32 testAddition("gridAutoFlowColumnDense", { 'row': '1', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
33 testAddition("gridAutoFlowColumnDense", { 'row': '2', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
34 testAddition("gridAutoFlowColumnDense", { 'row': '2', 'column': '1' }, "autoFlowColumnElement", { 'width': '170', 'height': '50' });
36 checkLayout("#autoFlowRowElement", testOutput);
37 testAddition("gridAutoFlowRowDense", { 'row': '1', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
38 testAddition("gridAutoFlowRowDense", { 'row': '2', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
39 testAddition("gridAutoFlowRowDense", { 'row': '2', 'column': '2' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
40 testAddition("gridAutoFlowRowDense", { 'row': '1', 'column': '2' }, "autoFlowRowElement", { 'width': '50', 'height': '30' });
42 checkLayout("#gridAutoFlowColumnWithAuto", testOutput);
43 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' });
44 testAddition("gridAutoFlowColumnWithAuto", { 'row': '1', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '50' });
45 testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '100' });
46 testAddition("gridAutoFlowColumnWithAuto", { 'row': '2', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '170', 'height': '50' });
48 checkLayout("#gridAutoFlowRowWithAuto", testOutput);
49 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': 'auto' }, "autoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
50 testAddition("gridAutoFlowRowWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
51 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '2' }, "autoFlowRowElementWithAuto", { 'width': '50', 'height': '100' });
52 testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '1' }, "autoFlowRowElementWithAuto", { 'width': '50', 'height': '100' });
54 window.addEventListener("load", testAdditions, false);
58 <p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p>
60 <div class="unconstrainedContainer">
61 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense">
62 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
66 <div class="unconstrainedContainer">
67 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense">
68 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
72 <div class="unconstrainedContainer">
73 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAuto">
74 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
78 <div class="unconstrainedContainer">
79 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAuto">
80 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
84 <div id="test-output"></div>