src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-resolution.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <script>
   5 if (window.testRunner)
   6     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   7 </script>
   8 <link href="resources/grid.css" rel="stylesheet">
   9 <style>
  10 .grid {
  11     grid-template-rows: 20px;
  12     grid-template-columns: 10px;
  13 }
  14
  15 .gridAutoFixedFixed {
  16     grid-auto-rows: 30px;
  17     grid-auto-columns: 50px;
  18 }
  19
  20 .gridAutoMinMax {
  21     height: 1000px;
  22     grid-auto-rows: minmax(10%, 15px);
  23     grid-auto-columns: minmax(30%, 100px);
  24 }
  25
  26 .gridAutoMinMaxContent {
  27     grid-auto-rows: min-content;
  28     grid-auto-columns: max-content;
  29 }
  30 </style>
  31 </head>
  32 <script src="../../resources/check-layout.js"></script>
  33 <body onload="checkLayout('.grid');">
  34
  35 <div>This test checks that implicit rows / columns obey grid-auto-{rows|columns}.</div>
  36
  37 <div class="unconstrainedContainer" style="position: relative">
  38     <div class="grid gridAutoFixedFixed">
  39         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
  40     </div>
  41 </div>
  42
  43 <div class="unconstrainedContainer" style="position: relative">
  44     <div class="grid gridAutoMinMax">
  45         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="300" data-expected-height="100">XXXXX XXXXXX</div>
  46     </div>
  47 </div>
  48
  49 <div class="unconstrainedContainer" style="position: relative">
  50     <div class="grid gridAutoMinMaxContent">
  51         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="120" data-expected-height="10">XXXXX XXXXXX</div>
  52     </div>
  53 </div>
  54
  55 </body>
  56 </html>