third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html

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