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