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