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

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .gridMinFlexContent {
   6     grid-template-columns: 50px;
   7     grid-template-rows: minmax(1fr, 50px);
   8 }
   9 .gridMaxFlexContent {
  10     grid-template-columns: 50px;
  11     grid-template-rows: minmax(30px, 2fr);
  12 }
  13 .gridTwoMaxFlexContent {
  14     grid-template-columns: 50px;
  15     grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
  16 }
  17 .gridTwoDoubleMaxFlexContent {
  18     grid-template-columns: 50px;
  19     grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
  20 }
  21 </style>
  22 <script src="../../resources/check-layout.js"></script>
  23 <body onload="checkLayout('.grid');">
  24
  25 <p>Test that resolving auto tracks on grid items works properly.</p>
  26
  27 <div style="height: 0px">
  28     <div class="grid gridMinFlexContent" style="height: 100%">
  29         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
  30     </div>
  31 </div>
  32
  33 <div style="height: 0px">
  34     <div class="grid gridMinFlexContent">
  35         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
  36     </div>
  37 </div>
  38
  39 <!-- Allow the extra logical space distribution to occur. -->
  40 <div style="width: 10px; height: 40px">
  41     <div class="grid gridMinFlexContent" style="height: 100%">
  42         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
  43     </div>
  44 </div>
  45
  46 <div style="width: 10px; height: 40px">
  47     <div class="grid gridMinFlexContent">
  48         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
  49     </div>
  50 </div>
  51
  52 <div style="width: 10px; height: 100px;">
  53     <div class="grid gridMinFlexContent">
  54         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
  55     </div>
  56 </div>
  57
  58
  59 <div class="constrainedContainer">
  60     <div class="grid gridMaxFlexContent">
  61         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
  62     </div>
  63 </div>
  64
  65 <!-- Allow the extra logical space distribution to occur. -->
  66 <div style="width: 10px; height: 40px">
  67     <div class="grid gridMaxFlexContent" style="height: 100%;">
  68         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
  69     </div>
  70 </div>
  71
  72 <div style="width: 10px; height: 40px">
  73     <div class="grid gridMaxFlexContent">
  74         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
  75     </div>
  76 </div>
  77
  78 <div style="width: 10px; height: 100px;">
  79     <div class="grid gridMaxFlexContent" style="height: 100%;">
  80         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
  81     </div>
  82 </div>
  83
  84 <div style="width: 10px; height: 100px;">
  85     <div class="grid gridMaxFlexContent">
  86         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
  87     </div>
  88 </div>
  89
  90 <div class="constrainedContainer">
  91     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
  92         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
  93         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
  94     </div>
  95 </div>
  96
  97 <div class="constrainedContainer">
  98     <div class="grid gridTwoMaxFlexContent">
  99         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 100         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 101     </div>
 102 </div>
 103
 104 <!-- Allow the extra logical space distribution to occur. -->
 105 <div style="width: 10px; height: 60px">
 106     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
 107         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 108         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 109     </div>
 110 </div>
 111
 112 <div style="width: 10px; height: 60px">
 113     <div class="grid gridTwoMaxFlexContent">
 114         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 115         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 116     </div>
 117 </div>
 118
 119 <div style="width: 10px; height: 120px;">
 120     <div class="grid gridTwoMaxFlexContent" style="height: 100%">
 121         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 122         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
 123     </div>
 124 </div>
 125
 126 <div style="width: 10px; height: 120px;">
 127     <div class="grid gridTwoMaxFlexContent">
 128         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 129         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
 130     </div>
 131 </div>
 132
 133 <div class="constrainedContainer">
 134     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
 135         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 136         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 137     </div>
 138 </div>
 139
 140 <div class="constrainedContainer">
 141     <div class="grid gridTwoDoubleMaxFlexContent">
 142         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 143         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 144     </div>
 145 </div>
 146
 147 <!-- Allow the extra logical space distribution to occur. -->
 148 <div style="width: 10px; height: 60px">
 149     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
 150         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
 151         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
 152     </div>
 153 </div>
 154
 155 <div style="width: 10px; height: 60px">
 156     <div class="grid gridTwoDoubleMaxFlexContent">
 157         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 158         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 159     </div>
 160 </div>
 161
 162 <div style="width: 10px; height: 120px;">
 163     <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
 164         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
 165         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
 166     </div>
 167 </div>
 168
 169 <div style="width: 10px; height: 120px;">
 170     <div class="grid gridTwoDoubleMaxFlexContent">
 171         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
 172         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
 173     </div>
 174 </div>
 175
 176 </body>
 177 </html>