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

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