third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .gridAutoContent {
   6     grid-template-columns: auto;
   7     grid-template-rows: auto;
   8 }
   9
  10 .gridMinContentFixed {
  11     grid-template-columns: minmax(min-content, 100px);
  12     grid-template-rows: minmax(min-content, 40px);
  13 }
  14
  15 .gridMaxContentFixed {
  16     grid-template-columns: minmax(max-content, 150px);
  17     grid-template-rows: minmax(max-content, 40px);
  18 }
  19
  20 .gridFixedMinContent {
  21     grid-template-columns: minmax(100px, min-content);
  22     grid-template-rows: minmax(40px, min-content);
  23 }
  24
  25 .gridFixedMaxContent {
  26     grid-template-columns: minmax(100px, max-content);
  27     grid-template-rows: minmax(40px, max-content);
  28 }
  29
  30 .lessConstrainedContainer {
  31     width: 60px;
  32     height: 20px;
  33 }
  34
  35 .firstRowFirstColumn {
  36     font: 10px/1 Ahem;
  37     /* Make us fit our grid area. */
  38     width: 100%;
  39     height: 100%;
  40 }
  41 </style>
  42 <script src="../../resources/check-layout.js"></script>
  43 <script>
  44 function testRemoval(gridElementID, size1, size2, size3)
  45 {
  46     var testOutput = document.getElementById("test-output");
  47     var gridElement = document.getElementById(gridElementID);
  48     var gridItem1 = gridElement.firstChild.nextSibling;
  49     var gridItem2 = gridItem1.nextSibling.nextSibling;
  50     var gridItem3 = gridItem2.nextSibling.nextSibling;
  51     gridItem1.setAttribute("data-expected-width", size1.width);
  52     gridItem1.setAttribute("data-expected-height", size1.height);
  53     gridItem2.setAttribute("data-expected-width", size1.width);
  54     gridItem2.setAttribute("data-expected-height", size1.height);
  55     gridItem3.setAttribute("data-expected-width", size1.width);
  56     gridItem3.setAttribute("data-expected-height", size1.height);
  57     checkLayout("#" + gridElementID, testOutput);
  58
  59     gridElement.removeChild(gridItem1);
  60     gridItem2.setAttribute("data-expected-width", size2.width);
  61     gridItem2.setAttribute("data-expected-height", size2.height);
  62     gridItem3.setAttribute("data-expected-width", size2.width);
  63     gridItem3.setAttribute("data-expected-height", size2.height);
  64     checkLayout("#" + gridElementID, testOutput);
  65
  66     gridElement.removeChild(gridItem2);
  67     gridItem3.setAttribute("data-expected-width", size3.width);
  68     gridItem3.setAttribute("data-expected-height", size3.height);
  69     checkLayout("#" + gridElementID, testOutput);
  70 }
  71
  72 function testRemovals()
  73 {
  74     testRemoval("constrainedAutoGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
  75     testRemoval("constrainedMinContentFixedGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
  76     testRemoval("constrainedMinContentFixedGridUndefinedHeight", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '40' });
  77     testRemoval("constrainedMaxContentFixedGrid", { 'width': '190', 'height': '10' }, { 'width': '190', 'height': '10' }, { 'width': '110', 'height': '10' });
  78     testRemoval("constrainedMaxContentFixedGridUndefinedHeight", { 'width': '190', 'height': '40' }, { 'width': '190', 'height': '40' }, { 'width': '110', 'height': '40' });
  79     testRemoval("constrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
  80     testRemoval("constrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
  81
  82     testRemoval("unconstrainedAutoGrid", { 'width': '390', 'height': '10' }, { 'width': '350', 'height': '10' }, { 'width': '170', 'height': '10' });
  83     testRemoval("unconstrainedMinContentFixedGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
  84     testRemoval("unconstrainedMinContentFixedGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
  85     testRemoval("unconstrainedMaxContentFixedGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
  86     testRemoval("unconstrainedFixedMinContentGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
  87     testRemoval("unconstrainedFixedMaxContentGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
  88
  89     testRemoval("lessConstrainedAutoGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
  90     testRemoval("lessConstrainedMinContentFixedGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
  91     testRemoval("lessConstrainedMinContentFixedGridUndefinedHeight", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '40' });
  92     testRemoval("lessConstrainedMaxContentFixedGrid", { 'width': '350', 'height': '20' }, { 'width': '350', 'height': '20' }, { 'width': '170', 'height': '20' });
  93     testRemoval("lessConstrainedMaxContentFixedGridUndefinedHeight", { 'width': '350', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
  94     testRemoval("lessConstrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
  95     testRemoval("lessConstrainedFixedMinContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
  96     testRemoval("lessConstrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
  97     testRemoval("lessConstrainedFixedMaxContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
  98 }
  99 window.addEventListener("load", testRemovals, false);
 100 </script>
 101 <body>
 102
 103 <p>This test checks that the tracks' breadth are recomputed after removing a grid item.</p>
 104
 105 <div class="constrainedContainer">
 106     <div class="grid gridAutoContent" id="constrainedAutoGrid">
 107         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
 108         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
 109         <div class="firstRowFirstColumn">XXX XXX XXX</div>
 110     </div>
 111 </div>
 112
 113 <div class="constrainedContainer">
 114     <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGrid" style="height: 100%">
 115         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
 116         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
 117         <div class="firstRowFirstColumn">XXX XXX XXX</div>
 118     </div>
 119 </div>
 120
 121 <div class="constrainedContainer">
 122     <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGridUndefinedHeight">
 123         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
 124         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
 125         <div class="firstRowFirstColumn">XXX XXX XXX</div>
 126     </div>
 127 </div>
 128
 129 <div class="constrainedContainer">
 130     <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGrid" style="height: 100%">
 131         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
 132         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
 133         <div class="firstRowFirstColumn">XXX XXX XXX</div>
 134     </div>
 135 </div>
 136
 137 <div class="constrainedContainer">
 138     <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGridUndefinedHeight">
 139         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
 140         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
 141         <div class="firstRowFirstColumn">XXX XXX XXX</div>
 142     </div>
 143 </div>
 144
 145 <div class="constrainedContainer">
 146     <div class="grid gridFixedMinContent" id="constrainedFixedMinContentGrid">
 147         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
 148         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
 149         <div class="firstRowFirstColumn">XXX XXX XXX</div>
 150     </div>
 151 </div>
 152
 153 <div class="constrainedContainer">
 154     <div class="grid gridFixedMaxContent" id="constrainedFixedMaxContentGrid">
 155         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
 156         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
 157         <div class="firstRowFirstColumn">XXX XXX XXX</div>
 158     </div>
 159 </div>
 160
 161 <!-- The container is big enough to allow all the extra space distribution we want. -->
 162 <div class="unconstrainedContainer">
 163     <div class="grid gridAutoContent" id="unconstrainedAutoGrid">
 164         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 165         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 166         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 167     </div>
 168 </div>
 169
 170 <div class="unconstrainedContainer">
 171     <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGrid" style="height: 100%">
 172         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 173         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 174         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 175     </div>
 176 </div>
 177
 178 <div class="unconstrainedContainer">
 179     <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGridUndefinedHeight">
 180         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 181         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 182         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 183     </div>
 184 </div>
 185
 186 <div class="unconstrainedContainer">
 187     <div class="grid gridMaxContentFixed" id="unconstrainedMaxContentFixedGrid">
 188         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 189         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 190         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 191     </div>
 192 </div>
 193
 194 <div class="unconstrainedContainer">
 195     <div class="grid gridFixedMinContent" id="unconstrainedFixedMinContentGrid">
 196         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 197         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 198         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 199     </div>
 200 </div>
 201
 202 <div class="unconstrainedContainer">
 203     <div class="grid gridFixedMaxContent" id="unconstrainedFixedMaxContentGrid">
 204         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 205         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 206         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 207     </div>
 208 </div>
 209
 210 <!-- The container allows some expansion but also constrain the growth. -->
 211 <div class="lessConstrainedContainer">
 212     <div class="grid gridAutoContent" id="lessConstrainedAutoGrid">
 213         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 214         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 215         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 216     </div>
 217 </div>
 218
 219 <div class="lessConstrainedContainer">
 220     <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGrid" style="height: 100%">
 221         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 222         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 223         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 224     </div>
 225 </div>
 226
 227 <div class="lessConstrainedContainer">
 228     <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGridUndefinedHeight">
 229         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 230         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 231         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 232     </div>
 233 </div>
 234
 235 <div class="lessConstrainedContainer">
 236     <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGrid" style="height: 100%">
 237         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 238         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 239         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 240     </div>
 241 </div>
 242
 243 <div class="lessConstrainedContainer">
 244     <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGridUndefinedHeight">
 245         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 246         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 247         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 248     </div>
 249 </div>
 250
 251 <div class="lessConstrainedContainer">
 252     <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGrid" style="height: 100%">
 253         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 254         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 255         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 256     </div>
 257 </div>
 258
 259 <div class="lessConstrainedContainer">
 260     <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGridUndefinedHeight">
 261         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 262         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 263         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 264     </div>
 265 </div>
 266
 267 <div class="lessConstrainedContainer">
 268     <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGrid" style="height: 100%">
 269         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 270         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 271         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 272     </div>
 273 </div>
 274
 275 <div class="lessConstrainedContainer">
 276     <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGridUndefinedHeight">
 277         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
 278         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 279         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
 280     </div>
 281 </div>
 282
 283 <div id="test-output"></div>
 284
 285 </body>
 286 </html>