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