third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 50px 100px;
   7     grid-template-rows: 50px 100px;
   8 }
   9 </style>
  10 <script src="../../resources/check-layout.js"></script>
  11 <script>
  12 function testAddition(gridElementID, position, autoFlowElementID, size)
  13 {
  14     var gridElement = document.getElementById(gridElementID);
  15
  16     var gridItem = document.createElement("div");
  17     gridItem.style.gridRow = position.row;
  18     gridItem.style.gridColumn = position.column;
  19     gridElement.appendChild(gridItem);
  20
  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"));
  25 }
  26
  27 function testAdditions()
  28 {
  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' });
  35
  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' });
  41
  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' });
  47
  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' });
  53 }
  54 window.addEventListener("load", testAdditions, false);
  55 </script>
  56 <body>
  57
  58 <p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p>
  59
  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>
  63     </div>
  64 </div>
  65
  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>
  69     </div>
  70 </div>
  71
  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>
  75     </div>
  76 </div>
  77
  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>
  81     </div>
  82 </div>
  83
  84 <div id="test-output"></div>
  85
  86 </body>
  87 </html>