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

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 if (window.testRunner)
   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   6 </script>
   7 <link href="resources/grid.css" rel="stylesheet">
   8 <style>
   9 .grid {
  10     grid-template-columns: 50px 100px;
  11     grid-template-rows: 50px 100px;
  12 }
  13 </style>
  14 <script src="../../resources/check-layout.js"></script>
  15 <script>
  16 function testAddition(gridElementID, position, autoFlowElementID, size)
  17 {
  18     var gridElement = document.getElementById(gridElementID);
  19
  20     var gridItem = document.createElement("div");
  21     gridItem.style.gridRow = position.row;
  22     gridItem.style.gridColumn = position.column;
  23     gridElement.appendChild(gridItem);
  24
  25     var autoFlowElement = document.getElementById(autoFlowElementID);
  26     autoFlowElement.setAttribute("data-expected-width", size.width);
  27     autoFlowElement.setAttribute("data-expected-height", size.height);
  28     checkLayout("#" + autoFlowElementID);
  29 }
  30
  31 function testAdditions()
  32 {
  33     checkLayout("#autoFlowColumnElement");
  34     testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '1' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
  35     testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
  36     testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
  37     testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '1' }, "autoFlowColumnElement", { 'width': '170', 'height': '50' });
  38
  39     checkLayout("#autoFlowRowElement");
  40     testAddition("gridAutoFlowRow", { 'row': '1', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
  41     testAddition("gridAutoFlowRow", { 'row': '2', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
  42     testAddition("gridAutoFlowRow", { 'row': '2', 'column': '2' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
  43     testAddition("gridAutoFlowRow", { 'row': '1', 'column': '2' }, "autoFlowRowElement", { 'width': '50', 'height': '30' });
  44
  45     checkLayout("#gridAutoFlowColumnWithAuto");
  46     testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' });
  47     testAddition("gridAutoFlowColumnWithAuto", { 'row': '1', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '50' });
  48     testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '100', 'height': '100' });
  49     testAddition("gridAutoFlowColumnWithAuto", { 'row': '2', 'column': '2' }, "autoFlowColumnElementWithAuto", { 'width': '170', 'height': '50' });
  50
  51     checkLayout("#gridAutoFlowRowWithAuto");
  52     testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': 'auto' }, "autoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
  53     testAddition("gridAutoFlowRowWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowRowElementWithAuto", { 'width': '100', 'height': '50' });
  54     testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '2' }, "autoFlowRowElementWithAuto", { 'width': '50', 'height': '100' });
  55     testAddition("gridAutoFlowRowWithAuto", { 'row': '1', 'column': '1' }, "autoFlowRowElementWithAuto", { 'width': '50', 'height': '100' });
  56 }
  57 window.addEventListener("load", testAdditions, false);
  58 </script>
  59 <body>
  60
  61 <p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p>
  62
  63 <div class="unconstrainedContainer">
  64     <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn">
  65         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  66     </div>
  67 </div>
  68
  69 <div class="unconstrainedContainer">
  70     <div class="grid gridAutoFlowRow" id="gridAutoFlowRow">
  71         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  72     </div>
  73 </div>
  74
  75 <div class="unconstrainedContainer">
  76     <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumnWithAuto">
  77         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  78     </div>
  79 </div>
  80
  81 <div class="unconstrainedContainer">
  82     <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAuto">
  83         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  84     </div>
  85 </div>
  86
  87 </body>
  88 </html>