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     -webkit-grid-template-columns: 50px 100px;
   7     -webkit-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);
  24 }
  25
  26 function testRemovals()
  27 {
  28     checkLayout("#gridAutoFlowColumn");
  29     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
  30     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
  31     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
  32     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
  33
  34     checkLayout("#gridAutoFlowRow");
  35     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '100' });
  36     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '50' });
  37     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
  38     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
  39
  40     checkLayout("#gridAutoFlowColumnWithAutoItems");
  41     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '100' });
  42     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '50' });
  43     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '100' });
  44     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '50' });
  45
  46     checkLayout("#gridAutoFlowRowWithAutoAndFixedItems");
  47     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '100' });
  48     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
  49     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
  50     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '50', 'height': '50' });
  51 }
  52 window.addEventListener("load", testRemovals, false);
  53 </script>
  54 <body>
  55
  56 <p>This test checks that the tracks' auto positions are recomputed after removing a grid item.</p>
  57
  58 <div class="unconstrainedContainer">
  59     <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn">
  60         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
  61         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
  62         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
  63         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
  64         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  65     </div>
  66 </div>
  67
  68 <div class="unconstrainedContainer">
  69     <div class="grid gridAutoFlowRow" id="gridAutoFlowRow">
  70         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
  71         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
  72         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
  73         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
  74         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
  75     </div>
  76 </div>
  77
  78 <div class="unconstrainedContainer">
  79     <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItems">
  80         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
  81         <div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
  82         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
  83         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
  84         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  85     </div>
  86 </div>
  87
  88 <div class="unconstrainedContainer">
  89     <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAutoAndFixedItems">
  90         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
  91         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
  92         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
  93         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
  94         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  95     </div>
  96 </div>
  97
  98 </body>
  99 </html>