third_party/WebKit/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .gridMinMinContent {
   6     grid-template-columns: 30px;
   7     grid-template-rows: minmax(min-content, 40px);
   8 }
   9
  10 .gridMaxMinContent {
  11     grid-template-columns: 30px;
  12     grid-template-rows: minmax(30px, min-content);
  13 }
  14
  15 .firstRowFirstColumn {
  16     font: 10px/1 Ahem;
  17     /* Make us fit our grid area. */
  18     width: 100%;
  19     height: 100%;
  20 }
  21 </style>
  22 <script src="../../resources/check-layout.js"></script>
  23 <body onload="checkLayout('.gridMinMinContent'); checkLayout('.gridMaxMinContent')">
  24
  25 <p>Test that resolving minmax function with min-content on grid items works properly.</p>
  26
  27 <div class="constrainedContainer">
  28     <div class="grid gridMinMinContent" style="height: 100%">
  29         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX</div>
  30     </div>
  31 </div>
  32
  33 <div class="constrainedContainer">
  34     <div class="grid gridMinMinContent">
  35         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
  36     </div>
  37 </div>
  38
  39 <div class="constrainedContainer">
  40     <div class="grid gridMinMinContent">
  41         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
  42     </div>
  43 </div>
  44
  45 <div class="constrainedContainer">
  46     <div class="grid gridMinMinContent" style="height: 100%">
  47         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
  48     </div>
  49 </div>
  50
  51 <div class="constrainedContainer">
  52     <div class="grid gridMinMinContent">
  53         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
  54     </div>
  55 </div>
  56
  57 <!-- Allow the extra logical space distribution to occur. -->
  58 <div style="width: 30px; height: 100px">
  59     <div class="grid gridMinMinContent">
  60         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
  61     </div>
  62 </div>
  63
  64 <div style="width: 30px; height: 100px">
  65     <div class="grid gridMinMinContent" style="height: 100%">
  66         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
  67     </div>
  68 </div>
  69
  70 <div style="width: 30px; height: 100px">
  71     <div class="grid gridMinMinContent">
  72         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
  73     </div>
  74 </div>
  75
  76 <div class="constrainedContainer">
  77     <div class="grid gridMaxMinContent">
  78         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
  79         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
  80     </div>
  81 </div>
  82
  83 <div class="constrainedContainer">
  84     <div class="grid gridMaxMinContent">
  85         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX XXX</div>
  86     </div>
  87 </div>
  88
  89 <!-- Allow the extra logical space distribution to occur. -->
  90
  91 <div style="width: 30px; height: 100px">
  92     <div class="grid gridMaxMinContent">
  93         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
  94     </div>
  95 </div>
  96
  97 <div style="width: 30px; height: 100px">
  98     <div class="grid gridMaxMinContent">
  99         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
 100         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
 101     </div>
 102 </div>
 103
 104 </body>
 105 </html>