third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-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 testRemoval(gridElementID, autoFlowElementID, size)
  13 {
  14     var gridElement = document.getElementById(gridElementID);
  15     var autoFlowElement = document.getElementById(autoFlowElementID);
  16
  17     // Remove the white space and the first grid item.
  18     gridElement.removeChild(gridElement.firstChild);
  19     gridElement.removeChild(gridElement.firstChild);
  20
  21     autoFlowElement.setAttribute("data-expected-width", size.width);
  22     autoFlowElement.setAttribute("data-expected-height", size.height);
  23     checkLayout("#" + gridElementID, document.getElementById("test-output"));
  24 }
  25
  26 function testRemovals()
  27 {
  28     var testOutput = document.getElementById("test-output");
  29     checkLayout("#autoFlowColumnElement", testOutput);
  30     testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
  31     testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
  32     testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
  33     testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
  34
  35     checkLayout("#autoFlowRowElement", testOutput);
  36     testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '100', 'height': '100' });
  37     testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '100', 'height': '50' });
  38     testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '50', 'height': '50' });
  39     testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '50', 'height': '50' });
  40
  41     checkLayout("#gridAutoFlowColumnWithAutoItems", testOutput);
  42     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '100' });
  43     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '50' });
  44     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '100' });
  45     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '50' });
  46
  47     checkLayout("#gridAutoFlowRowWithAutoAndFixedItems", testOutput);
  48     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '100' });
  49     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
  50     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
  51     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '50', 'height': '50' });
  52 }
  53 window.addEventListener("load", testRemovals, false);
  54 </script>
  55 <body>
  56
  57 <p>This test checks that the tracks' auto positions are recomputed after removing a grid item.</p>
  58
  59 <div class="unconstrainedContainer">
  60     <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense">
  61         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
  62         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
  63         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
  64         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
  65         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  66     </div>
  67 </div>
  68
  69 <div class="unconstrainedContainer">
  70     <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense">
  71         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
  72         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
  73         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
  74         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
  75         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
  76     </div>
  77 </div>
  78
  79 <div class="unconstrainedContainer">
  80     <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItems">
  81         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
  82         <div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
  83         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
  84         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
  85         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  86     </div>
  87 </div>
  88
  89 <div class="unconstrainedContainer">
  90     <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAutoAndFixedItems">
  91         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
  92         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
  93         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
  94         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
  95         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  96     </div>
  97 </div>
  98
  99 <div id="test-output"></div>
 100
 101 </body>
 102 </html>