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

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