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

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     grid-template-rows: 5px;
   8     grid-template-columns: 10px;
   9 }
  10
  11 .gridAutoFixedFixed {
  12     grid-auto-rows: 30px;
  13     grid-auto-columns: 50px;
  14 }
  15
  16 .gridAutoMinMax {
  17     font: 10px/1 Ahem;
  18     width: 1000px;
  19     grid-auto-rows: minmax(10em, 15px);
  20     grid-auto-columns: minmax(30%, 100px);
  21 }
  22
  23 .gridAutoMinMaxContent {
  24     grid-auto-rows: min-content;
  25     grid-auto-columns: max-content;
  26 }
  27 </style>
  28 </head>
  29 <script src="../../resources/check-layout.js"></script>
  30 <body onload="checkLayout('.grid');">
  31
  32 <div>This test checks that grid rows / columns created via the auto-placement algorithm do follow, grid-auto-{rows|columns}.</div>
  33
  34 <div class="unconstrainedContainer" style="position: relative">
  35     <div class="grid gridAutoFixedFixed gridAutoFlowRowDense">
  36         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div>
  37         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  38     </div>
  39 </div>
  40
  41 <div class="unconstrainedContainer" style="position: relative">
  42     <div class="grid gridAutoFixedFixed gridAutoFlowColumnDense">
  43         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div>
  44         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  45     </div>
  46 </div>
  47
  48 <div class="unconstrainedContainer" style="position: relative">
  49     <div class="grid gridAutoFixedFixed gridAutoFlowRowDense">
  50         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div>
  51         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  52     </div>
  53 </div>
  54
  55 <div class="unconstrainedContainer" style="position: relative">
  56     <div class="grid gridAutoFixedFixed gridAutoFlowColumnDense">
  57         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div>
  58         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  59     </div>
  60 </div>
  61
  62 <div class="unconstrainedContainer" style="position: relative">
  63     <div class="grid gridAutoMinMax gridAutoFlowRowDense">
  64         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</div>
  65         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  66     </div>
  67 </div>
  68
  69 <div class="unconstrainedContainer" style="position: relative">
  70     <div class="grid gridAutoMinMax gridAutoFlowColumnDense">
  71         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</div>
  72         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  73     </div>
  74 </div>
  75
  76 <div class="unconstrainedContainer" style="position: relative">
  77     <div class="grid gridAutoMinMax gridAutoFlowRowDense">
  78         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</div>
  79         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  80     </div>
  81 </div>
  82
  83 <div class="unconstrainedContainer" style="position: relative">
  84     <div class="grid gridAutoMinMax gridAutoFlowColumnDense">
  85         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</div>
  86         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  87     </div>
  88 </div>
  89
  90 <div class="unconstrainedContainer" style="position: relative">
  91     <div class="grid gridAutoMinMaxContent gridAutoFlowRowDense">
  92         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</div>
  93         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
  94     </div>
  95 </div>
  96
  97 <div class="unconstrainedContainer" style="position: relative">
  98     <div class="grid gridAutoMinMaxContent gridAutoFlowColumnDense">
  99         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div>
 100         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
 101     </div>
 102 </div>
 103
 104 <div class="unconstrainedContainer" style="position: relative">
 105     <div class="grid gridAutoMinMaxContent gridAutoFlowRowDense">
 106         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div>
 107         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
 108     </div>
 109 </div>
 110
 111 <div class="unconstrainedContainer" style="position: relative">
 112     <div class="grid gridAutoMinMaxContent gridAutoFlowColumnDense">
 113         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</div>
 114         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
 115     </div>
 116 </div>
 117
 118 </body>
 119 </html>