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">
  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 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="60">XX XX XX XX XX XX</div>
  46     </div>
  47 </div>
  48
  49 <!-- Allow the extra logical space distribution to occur. -->
  50 <div style="width: 30px; height: 100px">
  51     <div class="grid gridMinMinContent">
  52         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
  53     </div>
  54 </div>
  55
  56 <div style="width: 30px; height: 100px">
  57     <div class="grid gridMinMinContent">
  58         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
  59     </div>
  60 </div>
  61
  62 <div class="constrainedContainer">
  63     <div class="grid gridMaxMinContent">
  64         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
  65         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
  66     </div>
  67 </div>
  68
  69 <div class="constrainedContainer">
  70     <div class="grid gridMaxMinContent">
  71         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX XXX</div>
  72     </div>
  73 </div>
  74
  75 <!-- Allow the extra logical space distribution to occur. -->
  76
  77 <div style="width: 30px; height: 100px">
  78     <div class="grid gridMaxMinContent">
  79         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
  80     </div>
  81 </div>
  82
  83 <div style="width: 30px; height: 100px">
  84     <div class="grid gridMaxMinContent">
  85         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
  86         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
  87     </div>
  88 </div>
  89
  90 </body>
  91 </html>