src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.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 .gridMinMaxAutoWithColumnMinMaxAuto {
  10     grid-template-columns: minmax(50px, 180px) auto;
  11     grid-template-rows: auto minmax(50px, 100px);
  12 }
  13 </style>
  14 <script src="../../resources/check-layout.js"></script>
  15 <body onload="checkLayout('.grid')">
  16
  17 <p>Test that several different grid items along with several minmax tracks are properly sized.</p>
  18
  19 <div class="unconstrainedContainer" style="position: relative;">
  20 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
  21     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="180" data-expected-height="10">XXXXX XXXXX</div>
  22     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="170" data-expected-height="10">XXXXX XXXXX XXXXX</div>
  23     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="180" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
  24     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="170" data-expected-height="100">XXXXX XXXXX</div>
  25 </div>
  26 </div>
  27
  28 <div class="constrainedContainer" style="position: relative;">
  29 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto" style="height: 100%">
  30     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX</div>
  31     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
  32     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX</div>
  33     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
  34 </div>
  35 </div>
  36
  37 <div class="constrainedContainer" style="position: relative;">
  38 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
  39     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX</div>
  40     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
  41     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX</div>
  42     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
  43 </div>
  44 </div>
  45
  46 <div style="height: 100px; width: 220px; position: relative;">
  47 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
  48     <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX</div>
  49     <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX XXXXX</div>
  50     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110" data-expected-height="100">XXXXX XXXXX</div>
  51     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
  52 </div>
  53 </div>
  54
  55 </body>
  56 </html>