src/third_party/WebKit/LayoutTests/fast/css-grid-layout/minmax-max-content-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 .gridMinMaxContent {
  10     grid-template-columns: 20px;
  11     grid-template-rows: minmax(max-content, 50px);
  12 }
  13
  14 .gridMaxMaxContent {
  15     grid-template-columns: 20px;
  16     grid-template-rows: minmax(30px, max-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
  26 .verticalRL {
  27     -webkit-writing-mode: vertical-rl;
  28 }
  29 </style>
  30 <script src="../../resources/check-layout.js"></script>
  31 <body onload="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
  32
  33 <p>Test that resolving minmax function with max-content on grid items works properly.</p>
  34
  35 <div class="constrainedContainer">
  36     <div class="grid gridMinMaxContent" style="height: 100%">
  37         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
  38     </div>
  39 </div>
  40
  41 <div class="constrainedContainer">
  42     <div class="grid gridMinMaxContent">
  43         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
  44     </div>
  45 </div>
  46
  47 <div class="constrainedContainer">
  48     <div class="grid gridMinMaxContent">
  49         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
  50     </div>
  51 </div>
  52
  53 <div class="constrainedContainer">
  54     <div class="grid gridMinMaxContent" style="height: 100%">
  55         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
  56         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
  57     </div>
  58 </div>
  59
  60 <div class="constrainedContainer">
  61     <div class="grid gridMinMaxContent">
  62         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
  63     </div>
  64 </div>
  65
  66 <!-- Allow the extra logical space distribution to occur. -->
  67 <div style="width: 10px; height: 100px;">
  68     <div class="grid gridMinMaxContent">
  69         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
  70     </div>
  71 </div>
  72
  73 <div style="width: 10px; height: 100px;">
  74     <div class="grid gridMinMaxContent" style="height: 100%">
  75         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
  76         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
  77     </div>
  78 </div>
  79
  80 <div style="width: 10px; height: 100px;">
  81     <div class="grid gridMinMaxContent">
  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="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
  84     </div>
  85 </div>
  86
  87 <div class="constrainedContainer">
  88     <div class="grid gridMaxMaxContent">
  89         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX</div>
  90     </div>
  91 </div>
  92
  93 <div class="constrainedContainer">
  94     <div class="grid gridMaxMaxContent">
  95         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
  96     </div>
  97 </div>
  98
  99 <div class="constrainedContainer">
 100     <div class="grid gridMaxMaxContent" style="height: 100%">
 101         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
 102     </div>
 103 </div>
 104
 105 <div class="constrainedContainer">
 106     <div class="grid gridMaxMaxContent">
 107         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
 108     </div>
 109 </div>
 110
 111 <!-- Allow the extra logical space distribution to occur. -->
 112
 113 <div style="width: 100px; height: 20px">
 114     <div class="grid gridMaxMaxContent">
 115         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
 116     </div>
 117 </div>
 118
 119 <div style="width: 100px; height: 20px">
 120     <div class="grid gridMaxMaxContent" style="height: 100%">
 121         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
 122         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
 123     </div>
 124 </div>
 125
 126 <div style="width: 100px; height: 20px">
 127     <div class="grid gridMaxMaxContent">
 128         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
 129     </div>
 130 </div>
 131
 132 </body>
 133 </html>