third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-height-auto.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 5px;
   7     grid-template-rows: 5px;
   8 }
   9
  10 .container {
  11     width: 200px;
  12     height: 100px;
  13 }
  14
  15 .ahem {
  16     font: 25px/1 Ahem;
  17 }
  18
  19 .minSmaller {
  20     min-width: 10px;
  21     min-height: 10px;
  22 }
  23
  24 .minBigger {
  25     min-width: 150px;
  26     min-height: 75px;
  27 }
  28
  29 .maxSmaller {
  30     max-width: 10px;
  31     max-height: 10px;
  32 }
  33
  34 .maxBigger {
  35     max-width: 150px;
  36     max-height: 75px;
  37 }
  38
  39 .noStretch {
  40     align-items: start;
  41     justify-items: start;
  42 }
  43 </style>
  44 <script src="../../resources/check-layout.js"></script>
  45 <body onload="checkLayout('.grid')">
  46
  47 <p>This test checks min-width|height auto behavior for grids</p>
  48
  49 <div class="container">
  50     <div class="grid">
  51         <div class="ahem" data-expected-width="100" data-expected-height="25">XXXX</div>
  52     </div>
  53 </div>
  54
  55 <div class="container">
  56     <div class="grid">
  57         <div class="ahem minSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
  58     </div>
  59 </div>
  60
  61 <div class="container">
  62     <div class="grid">
  63         <div class="ahem minBigger" data-expected-width="150" data-expected-height="75">XXXX</div>
  64     </div>
  65 </div>
  66
  67 <div class="container">
  68     <div class="grid">
  69         <div class="ahem maxSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
  70     </div>
  71 </div>
  72
  73 <div class="container">
  74     <div class="grid">
  75         <div class="ahem maxBigger" data-expected-width="100" data-expected-height="25">XXXX</div>
  76     </div>
  77 </div>
  78
  79 <!-- Verify that the same cases without 'stretch' work as expected as well. -->
  80 <div class="container">
  81     <div class="grid noStretch">
  82         <div class="ahem" data-expected-width="100" data-expected-height="25">XXXX</div>
  83     </div>
  84 </div>
  85
  86 <div class="container">
  87     <div class="grid noStretch">
  88         <div class="ahem minSmaller" data-expected-width="100" data-expected-height="25">XXXX</div>
  89     </div>
  90 </div>
  91
  92 <div class="container">
  93     <div class="grid noStretch">
  94         <div class="ahem minBigger" data-expected-width="150" data-expected-height="75">XXXX</div>
  95     </div>
  96 </div>
  97
  98 <div class="container">
  99     <div class="grid noStretch">
 100         <div class="ahem maxSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
 101     </div>
 102 </div>
 103
 104 <div class="container">
 105     <div class="grid noStretch">
 106         <div class="ahem maxBigger" data-expected-width="100" data-expected-height="25">XXXX</div>
 107     </div>
 108 </div>
 109
 110 <!-- Verify we are applying correctly the min-content size. -->
 111 <div class="container">
 112     <div class="grid">
 113         <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div>
 114     </div>
 115 </div>
 116
 117 <div class="container">
 118     <div class="grid noStretch">
 119         <div class="ahem" data-expected-width="75" data-expected-height="50">XXX X</div>
 120     </div>
 121 </div>
 122
 123 </body>
 124 </html>