third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .gridMinMaxMinMax {
   6     grid-template-columns: 50px 100px;
   7     grid-template-rows: minmax(10px, min-content) minmax(50px, 100px);
   8 }
   9
  10 .gridAutoAuto {
  11     grid-template-columns: 50px 100px;
  12     grid-template-rows: auto auto;
  13 }
  14
  15 .sizedToGridAreaMinSizes {
  16     font: 10px/1 Ahem;
  17     min-width: 100%;
  18     min-height: 100%;
  19 }
  20
  21 .sizedToGridAreaMaxSizes {
  22     font: 10px/1 Ahem;
  23     max-width: 100%;
  24     max-height: 100%;
  25 }
  26 </style>
  27 <script src="../../resources/check-layout.js"></script>
  28 <body onload="checkLayout('.grid')">
  29
  30 <p>Test that grid items with a percentage logical height inside a grid without explicit sizes resolve their size properly.</p>
  31
  32 <div class="unconstrainedContainer" style="position: relative">
  33 <div class="grid gridMinMaxMinMax">
  34     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
  35     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
  36     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
  37     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
  38 </div>
  39 </div>
  40
  41 <div style="position: relative; height: 100px;">
  42 <div class="grid gridMinMaxMinMax">
  43     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
  44     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
  45     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
  46     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
  47 </div>
  48 </div>
  49
  50 <div style="position: relative;">
  51 <div class="grid gridMinMaxMinMax" style="height: 100px;">
  52     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
  53     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
  54     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
  55     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
  56 </div>
  57 </div>
  58
  59 <div class="unconstrainedContainer" style="position: relative">
  60 <div class="grid gridAutoAuto">
  61     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
  62     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
  63     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
  64     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
  65 </div>
  66 </div>
  67
  68 <div class="unconstrainedContainer" style="position: relative">
  69 <div class="grid gridMinMaxMinMax">
  70     <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
  71     <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
  72     <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
  73     <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
  74 </div>
  75 </div>
  76
  77 <div style="position: relative; height: 100px;">
  78 <div class="grid gridMinMaxMinMax">
  79     <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
  80     <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
  81     <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
  82     <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
  83 </div>
  84 </div>
  85
  86 <div style="position: relative;">
  87 <div class="grid gridMinMaxMinMax" style="height: 100px;">
  88     <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
  89     <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
  90     <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
  91     <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
  92 </div>
  93 </div>
  94
  95 <div class="unconstrainedContainer" style="position: relative">
  96 <div class="grid gridAutoAuto">
  97     <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
  98     <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
  99     <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
 100     <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
 101 </div>
 102 </div>
 103
 104 <div class="unconstrainedContainer" style="position: relative">
 105 <div class="grid gridMinMaxMinMax">
 106     <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
 107     <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
 108     <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
 109     <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
 110 </div>
 111 </div>
 112
 113 <div style="position: relative; height: 100px;">
 114 <div class="grid gridMinMaxMinMax">
 115     <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
 116     <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
 117     <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
 118     <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
 119 </div>
 120 </div>
 121
 122 <div style="position: relative;">
 123 <div class="grid gridMinMaxMinMax" style="height: 100px;">
 124     <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
 125     <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
 126     <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
 127     <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
 128 </div>
 129 </div>
 130
 131 <div class="unconstrainedContainer" style="position: relative">
 132 <div class="grid gridAutoAuto">
 133     <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
 134     <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
 135     <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
 136     <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
 137 </div>
 138 </div>
 139
 140 </body>
 141 </html>