third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .gridMaxMaxContent {
   6     grid-template-columns: 50px;
   7     grid-template-rows: minmax(10px, max-content) minmax(10px, 1fr);
   8 }
   9
  10 .gridMinMinContent {
  11     grid-template-columns: 50px;
  12     grid-template-rows: minmax(10px, 1fr) minmax(min-content, 50px);
  13 }
  14
  15 .gridWithIntrinsicSizeBiggerThanFlex {
  16     grid-template-columns: 50px;
  17     grid-template-rows: minmax(min-content, 0.5fr) minmax(18px, 2fr);
  18 }
  19
  20 .gridShrinkBelowItemsIntrinsicSize {
  21     grid-template-columns: 50px;
  22     grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
  23 }
  24
  25 .gridWithNonFlexingItems {
  26     grid-template-columns: 50px;
  27     grid-template-rows: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
  28 }
  29
  30 .thirdRowFirstColumn {
  31     grid-column: 1;
  32     grid-row: 3;
  33 }
  34 .fourthRowFirstColumn {
  35     grid-column: 1;
  36     grid-row: 4;
  37 }
  38 </style>
  39 <script src="../../resources/check-layout.js"></script>
  40 <body onload="checkLayout('.grid');">
  41
  42 <p>Test that resolving auto tracks on grid items works properly.</p>
  43
  44 <div class="constrainedContainer">
  45     <div class="grid gridMaxMaxContent">
  46         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
  47         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
  48     </div>
  49 </div>
  50
  51 <!-- Allow the extra logical space distribution to occur. -->
  52 <div style="width: 10px; height: 40px">
  53     <div class="grid gridMaxMaxContent" style="height: 100%">
  54         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
  55         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
  56     </div>
  57 </div>
  58
  59 <div style="width: 10px; height: 40px">
  60     <div class="grid gridMaxMaxContent">
  61         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
  62         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
  63     </div>
  64 </div>
  65
  66 <div style="width: 10px; height: 110px;">
  67     <div class="grid gridMaxMaxContent" style="height: 100%">
  68         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
  69         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
  70     </div>
  71 </div>
  72
  73 <div style="width: 10px; height: 110px;">
  74     <div class="grid gridMaxMaxContent">
  75         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
  76         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
  77     </div>
  78 </div>
  79
  80 <div class="constrainedContainer">
  81     <div class="grid gridMinMinContent" style="height: 100%">
  82         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
  83         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
  84     </div>
  85 </div>
  86
  87 <div class="constrainedContainer">
  88     <div class="grid gridMinMinContent">
  89         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
  90         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
  91     </div>
  92 </div>
  93
  94 <!-- Allow the extra logical space distribution to occur. -->
  95 <div style="width: 10px; height: 40px">
  96     <div class="grid gridMinMinContent" style="height: 100%">
  97         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
  98         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
  99     </div>
 100 </div>
 101
 102 <div style="width: 10px; height: 40px">
 103     <div class="grid gridMinMinContent">
 104         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
 105         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
 106     </div>
 107 </div>
 108
 109 <div style="width: 10px; height: 110px;">
 110     <div class="grid gridMinMinContent" style="height: 100%">
 111         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
 112         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
 113     </div>
 114 </div>
 115
 116 <div style="width: 10px; height: 110px;">
 117     <div class="grid gridMinMinContent">
 118         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
 119         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
 120     </div>
 121 </div>
 122
 123 <div style="width: 10px; height: 60px;">
 124     <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
 125         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 126         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 127     </div>
 128 </div>
 129
 130 <div style="width: 10px; height: 60px;">
 131     <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
 132         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 133         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="160"></div>
 134     </div>
 135 </div>
 136
 137 <div style="width: 10px; height: 60px;">
 138     <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%">
 139         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 140         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 141     </div>
 142 </div>
 143
 144 <div style="width: 10px; height: 60px;">
 145     <div class="grid gridShrinkBelowItemsIntrinsicSize">
 146         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 147         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 148     </div>
 149 </div>
 150
 151 <!-- No space available for the <flex> -->
 152 <div style="width: 10px; height: 100px;">
 153     <div class="grid gridWithNonFlexingItems" style="height: 100%">
 154         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 155         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 156         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 157         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 158     </div>
 159 </div>
 160
 161 <div style="width: 10px; height: 100px;">
 162     <div class="grid gridWithNonFlexingItems">
 163         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 164         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 165         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 166         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
 167     </div>
 168 </div>
 169
 170 <!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
 171 <div style="width: 10px; height: 180px;">
 172     <div class="grid gridWithNonFlexingItems" style="height: 100%">
 173         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 174         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 175         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 176         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 177     </div>
 178 </div>
 179
 180 <div style="width: 10px; height: 180px;">
 181     <div class="grid gridWithNonFlexingItems">
 182         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 183         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 184         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 185         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
 186     </div>
 187 </div>
 188
 189 <div style="width: 10px; height: 400px;">
 190     <div class="grid gridWithNonFlexingItems" style="height: 100%">
 191         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 192         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
 193         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 194         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
 195     </div>
 196 </div>
 197
 198 <div style="width: 10px; height: 400px;">
 199     <div class="grid gridWithNonFlexingItems">
 200         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 201         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
 202         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
 203         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
 204     </div>
 205 </div>
 206
 207 </body>
 208 </html>