third_party/WebKit/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .gridAutoAutoContent {
   6     grid-template-columns: auto auto;
   7     grid-template-rows: 50px 100px;
   8 }
   9
  10 .gridFixedAutoContent {
  11     grid-template-columns: 10px auto;
  12     grid-template-rows: 50px 100px;
  13 }
  14
  15 .gridMinMaxMin {
  16     grid-template-columns: minmax(min-content, 50px) minmax(max-content, 140px);
  17     grid-template-rows: 50px 100px;
  18 }
  19
  20 .gridMinMaxMax {
  21     grid-template-columns: minmax(50px, min-content) minmax(40px, max-content);
  22     grid-template-rows: 50px 100px;
  23 }
  24
  25 </style>
  26 <script src="../../resources/check-layout.js"></script>
  27 <body onload="checkLayout('.grid');">
  28
  29 <p>Test that resolving spanning minmax tracks on grid items works properly.</p>
  30
  31 <div class="constrainedContainer">
  32     <div class="grid gridAutoAutoContent">
  33         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
  34         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="15" data-expected-height="50"></div>
  35         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="15" data-expected-height="50"></div>
  36     </div>
  37 </div>
  38
  39 <!-- Allow the extra logical space distribution to occur. -->
  40 <div style="width: 40px; height: 10px">
  41     <div class="grid gridAutoAutoContent">
  42         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
  43         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
  44         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
  45     </div>
  46 </div>
  47
  48 <div style="width: 100px; height: 10px;">
  49     <div class="grid gridAutoAutoContent">
  50         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
  51         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
  52         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div>
  53     </div>
  54 </div>
  55
  56 <div class="constrainedContainer">
  57     <div class="grid gridFixedAutoContent">
  58         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
  59         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
  60         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
  61     </div>
  62 </div>
  63
  64 <div class="constrainedContainer">
  65     <div class="grid gridFixedAutoContent">
  66         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="30" data-expected-height="150">XXX XXX XXX</div>
  67         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
  68         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
  69         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="10" data-expected-height="100"></div>
  70         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="20" data-expected-height="100"></div>
  71     </div>
  72 </div>
  73
  74 <!-- Allow the extra logical space distribution to occur. -->
  75 <div style="width: 40px; height: 10px">
  76     <div class="grid gridFixedAutoContent">
  77         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
  78         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
  79         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50"></div>
  80     </div>
  81 </div>
  82
  83 <div style="width: 100px; height: 10px;">
  84     <div class="grid gridFixedAutoContent">
  85         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
  86         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
  87         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
  88     </div>
  89 </div>
  90
  91 <div style="width: 100px; height: 100px">
  92     <div class="grid gridFixedAutoContent">
  93         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="50" data-expected-height="150">XXXXX</div>
  94         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
  95         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
  96         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="10" data-expected-height="100"></div>
  97         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="40" data-expected-height="100"></div>
  98     </div>
  99 </div>
 100
 101 <div class="constrainedContainer">
 102     <div class="grid gridMinMaxMin">
 103         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="110" data-expected-height="50">XXX XXX XXX</div>
 104         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="15" data-expected-height="50"></div>
 105         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="95" data-expected-height="50"></div>
 106     </div>
 107 </div>
 108
 109 <div class="constrainedContainer">
 110     <div class="grid gridMinMaxMin">
 111         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="110" data-expected-height="150">XXX XXX XXX</div>
 112         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="15" data-expected-height="50"></div>
 113         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="95" data-expected-height="50"></div>
 114         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="15" data-expected-height="100"></div>
 115         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="95" data-expected-height="100"></div>
 116     </div>
 117 </div>
 118
 119 <!-- Allow the extra logical space distribution to occur. -->
 120 <div style="width: 100px; height: 10px">
 121     <div class="grid gridMinMaxMin">
 122         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="100" data-expected-height="50">XX XX XX</div>
 123         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
 124         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
 125     </div>
 126 </div>
 127
 128 <div style="width: 100px; height: 10px">
 129     <div class="grid gridMinMaxMin">
 130         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="100" data-expected-height="150">XX XX XX</div>
 131         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
 132         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
 133         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="20" data-expected-height="100"></div>
 134         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="80" data-expected-height="100"></div>
 135     </div>
 136 </div>
 137
 138 <div class="unconstrainedContainer">
 139     <div class="grid gridMinMaxMin">
 140         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="195" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 141         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 142         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="145" data-expected-height="50"></div>
 143     </div>
 144 </div>
 145
 146 <div class="unconstrainedContainer">
 147     <div class="grid gridMinMaxMin">
 148         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="195" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 149         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 150         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="145" data-expected-height="50"></div>
 151         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
 152         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="145" data-expected-height="100"></div>
 153     </div>
 154 </div>
 155
 156 <div class="constrainedContainer">
 157     <div class="grid gridMinMaxMax">
 158         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="90" data-expected-height="50">XXX XXX XXX</div>
 159         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 160         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
 161     </div>
 162 </div>
 163
 164 <div class="constrainedContainer">
 165     <div class="grid gridMinMaxMax">
 166         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 167         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 168         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
 169         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
 170         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="40" data-expected-height="100"></div>
 171     </div>
 172 </div>
 173
 174 <!-- Allow the extra logical space distribution to occur. -->
 175 <div style="width: 105px; height: 10px">
 176     <div class="grid gridMinMaxMax">
 177         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="105" data-expected-height="50">XXX XXX XXX</div>
 178         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 179         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="55" data-expected-height="50"></div>
 180     </div>
 181 </div>
 182
 183 <div class="constrainedContainer">
 184     <div class="grid gridMinMaxMax">
 185         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 186         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 187         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
 188         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
 189         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="40" data-expected-height="100"></div>
 190     </div>
 191 </div>
 192
 193 <div class="unconstrainedContainer">
 194     <div class="grid gridMinMaxMax">
 195         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="110" data-expected-height="50">XXX XXX XXX</div>
 196         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 197         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div>
 198     </div>
 199 </div>
 200
 201 <div class="constrainedContainer">
 202     <div class="grid gridMinMaxMax">
 203         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 204         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 205         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
 206         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
 207         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="40" data-expected-height="100"></div>
 208     </div>
 209 </div>
 210
 211 <div class="constrainedContainer">
 212     <div class="grid gridMinMaxMax">
 213         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="90" data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>
 214         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 215         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
 216     </div>
 217 </div>
 218
 219 <div class="constrainedContainer">
 220     <div class="grid gridMinMaxMax">
 221         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>
 222         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
 223         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
 224         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
 225         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="40" data-expected-height="100"></div>
 226     </div>
 227 </div>
 228
 229 <!-- Allow the extra logical space distribution to occur. -->
 230 <div style="width: 140px; height: 10px">
 231     <div class="grid gridMinMaxMax">
 232         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="140" data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>
 233         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
 234         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
 235     </div>
 236 </div>
 237
 238 <div style="width: 140px; height: 10px">
 239     <div class="grid gridMinMaxMax">
 240         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="140" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>
 241         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
 242         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
 243         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="65" data-expected-height="100"></div>
 244         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="75" data-expected-height="100"></div>
 245     </div>
 246 </div>
 247
 248 <div class="unconstrainedContainer">
 249     <div class="grid gridMinMaxMax">
 250         <div class="sizedToGridArea firstRowBothColumn" data-expected-width="250" data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>
 251         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
 252         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="185" data-expected-height="50"></div>
 253     </div>
 254 </div>
 255
 256 <div class="unconstrainedContainer">
 257     <div class="grid gridMinMaxMax">
 258         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="250" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>
 259         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65" data-expected-height="50"></div>
 260         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="185" data-expected-height="50"></div>
 261         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="65" data-expected-height="100"></div>
 262         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="185" data-expected-height="100"></div>
 263     </div>
 264 </div>
 265
 266 </body>
 267 </html>