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

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .smallGrid {
   6     grid-template-columns: 50px 100px;
   7     grid-template-rows: 50px 100px;
   8 }
   9
  10 .bigGrid {
  11     grid-template-columns: 50px 100px 150px 200px;
  12     grid-template-rows: 50px 100px 150px 200px;
  13 }
  14
  15 .overflowingRowFirstColumn {
  16     grid-row: auto / 10;
  17     grid-column: 1;
  18 }
  19
  20 .secondRowOverflowingColumn {
  21     grid-row: 2;
  22     grid-column: auto / 8;
  23 }
  24
  25 /* These 2 classes forces the grid to be sized after the grid-{end|after}, thus end up in the
  26    first row / columns. */
  27 .negativeOverflowingRowFirstColumn {
  28     grid-row: auto / -10;
  29     grid-column: 1;
  30 }
  31
  32 .secondRowNegativeOverflowingColumn {
  33     grid-row: 2;
  34     grid-column: auto / -8;
  35 }
  36
  37 .unconstrainedContainer {
  38     /* For accurate x / y offset. */
  39     position: relative;
  40 }
  41 </style>
  42 <script src="../../resources/check-layout.js"></script>
  43 <body onload="checkLayout('.grid')">
  44
  45 <p>This test checks that the tracks' auto positions are properly resolved on a static grid.</p>
  46
  47 <div class="unconstrainedContainer">
  48     <div class="grid smallGrid gridAutoFlowStack" id="gridAutoFlowStack">
  49         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  50         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  51         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  52         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  53         <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
  54         <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="0" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  55     </div>
  56 </div>
  57
  58 <div class="unconstrainedContainer">
  59     <div class="grid bigGrid gridAutoFlowColumnDense">
  60         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  61         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  62         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  63         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  64         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
  65     </div>
  66 </div>
  67
  68 <div class="unconstrainedContainer">
  69     <div class="grid bigGrid gridAutoFlowRowDense">
  70         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  71         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  72         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  73         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  74         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  75     </div>
  76 </div>
  77
  78 <div class="unconstrainedContainer">
  79     <div class="grid bigGrid gridAutoFlowColumnDense">
  80         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  81         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  82         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  83         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  84         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
  85     </div>
  86 </div>
  87
  88 <div class="unconstrainedContainer">
  89     <div class="grid bigGrid gridAutoFlowRowDense">
  90         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
  91         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  92         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  93         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  94         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  95     </div>
  96 </div>
  97
  98 <!-- Using some 2 positions non-spanning fixed grid-{row|column} -->
  99 <div class="unconstrainedContainer">
 100     <div class="grid bigGrid gridAutoFlowColumnDense">
 101         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
 102         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 103         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 104         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 105         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 106     </div>
 107 </div>
 108
 109 <div class="unconstrainedContainer">
 110     <div class="grid bigGrid gridAutoFlowRowDense">
 111         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
 112         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 113         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 114         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 115         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 116     </div>
 117 </div>
 118
 119 <div class="unconstrainedContainer">
 120     <div class="grid bigGrid gridAutoFlowColumnDense">
 121         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
 122         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 123     </div>
 124 </div>
 125
 126 <div class="unconstrainedContainer">
 127     <div class="grid bigGrid gridAutoFlowRowDense">
 128         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
 129         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 130     </div>
 131 </div>
 132
 133 <div class="unconstrainedContainer">
 134     <div class="grid bigGrid gridAutoFlowColumnDense">
 135         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 136         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 137     </div>
 138 </div>
 139
 140 <div class="unconstrainedContainer">
 141     <div class="grid bigGrid gridAutoFlowRowDense">
 142         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 143         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 144     </div>
 145 </div>
 146
 147 </body>
 148 </html>