third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-min-max-height.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .minHeightGrid {
   6     min-height: 100px;
   7     grid-template-columns: 40px;
   8     grid-template-rows: 50px;
   9 }
  10 .maxHeightGrid {
  11     max-height: 100px;
  12     grid-template-columns: 40px;
  13     grid-template-rows: 150px 50px;
  14 }
  15
  16 .minHeightAutoGrid {
  17     min-height: 100px;
  18 }
  19
  20 .maxHeightAutoGrid {
  21     max-height: 100px;
  22 }
  23 </style>
  24 <script src="../../resources/check-layout.js"></script>
  25 <body onload="checkLayout('.grid')">
  26
  27 <p>Test that min-height and max-height are accounted for when computing the grid element's height.</p>
  28
  29 <div class="constrainedContainer">
  30     <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="10"></div>
  31     <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="10"></div>
  32     <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="10"></div>
  33     <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="10"></div>
  34
  35     <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="10">
  36         <div style="height: 150px"></div>
  37     </div>
  38     <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="10">
  39         <div style="height: 300px"></div>
  40     </div>
  41 </div>
  42
  43 <div class="unconstrainedContainer">
  44     <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="1000"></div>
  45     <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="1000"></div>
  46     <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="1000"></div>
  47     <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="1000"></div>
  48
  49     <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="1000">
  50         <div style="height: 150px"></div>
  51     </div>
  52     <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="1000">
  53         <div style="height: 300px"></div>
  54     </div>
  55 </div>
  56
  57 </body>
  58 </html>