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

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