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     -webkit-grid-template-columns: 50px 100px;
   7     -webkit-grid-template-rows: 50px 100px;
   8 }
   9
  10 .bigGrid {
  11     -webkit-grid-template-columns: 50px 100px 150px 200px;
  12     -webkit-grid-template-rows: 50px 100px 150px 200px;
  13 }
  14
  15 .overflowingRowFirstColumn {
  16     -webkit-grid-row: auto / 10;
  17     -webkit-grid-column: 1;
  18 }
  19
  20 .secondRowOverflowingColumn {
  21     -webkit-grid-row: 2;
  22     -webkit-grid-column: auto / 8;
  23 }
  24
  25 /* These 2 classes forces the grid to be sized after the grid-{column|row}-end, thus end up in the
  26    first row / columns. */
  27 .negativeOverflowingRowFirstColumn {
  28     -webkit-grid-row: auto / -10;
  29     -webkit-grid-column: 1;
  30 }
  31
  32 .secondRowNegativeOverflowingColumn {
  33     -webkit-grid-row: 2;
  34     -webkit-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">
  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 gridAutoFlowColumnSparse">
  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 gridAutoFlowRowSparse">
  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 gridAutoFlowColumnSparse">
  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="150" data-offset-y="50" data-expected-width="150" data-expected-height="100">XXXXX XXXXX XXXXX</div>
  85     </div>
  86 </div>
  87
  88 <div class="unconstrainedContainer">
  89     <div class="grid bigGrid gridAutoFlowColumnDense">
  90         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  91         <div class="sizedToGridArea autoRowSecondColumn" 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="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
  94         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
  95     </div>
  96 </div>
  97
  98 <div class="unconstrainedContainer">
  99     <div class="grid bigGrid gridAutoFlowRowSparse">
 100         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 101         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 102         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 103         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 104         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 105     </div>
 106 </div>
 107
 108 <div class="unconstrainedContainer">
 109     <div class="grid bigGrid gridAutoFlowRowDense">
 110         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 111         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 112         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 113         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 114         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 115     </div>
 116 </div>
 117
 118 <!-- Using some 2 positions non-spanning fixed grid-{row|column} -->
 119 <div class="unconstrainedContainer">
 120     <div class="grid bigGrid gridAutoFlowColumnSparse">
 121         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
 122         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 123         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 124         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 125         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
 126     </div>
 127 </div>
 128
 129 <div class="unconstrainedContainer">
 130     <div class="grid bigGrid gridAutoFlowRowSparse">
 131         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
 132         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 133         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 134         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 135         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 136     </div>
 137 </div>
 138
 139 <div class="unconstrainedContainer">
 140     <div class="grid bigGrid gridAutoFlowColumnSparse">
 141         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
 142         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 143     </div>
 144 </div>
 145
 146 <div class="unconstrainedContainer">
 147     <div class="grid bigGrid gridAutoFlowRowSparse">
 148         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
 149         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 150     </div>
 151 </div>
 152
 153 <div class="unconstrainedContainer">
 154     <div class="grid bigGrid gridAutoFlowColumnSparse">
 155         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 156         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 157     </div>
 158 </div>
 159
 160 <div class="unconstrainedContainer">
 161     <div class="grid bigGrid gridAutoFlowRowSparse">
 162         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
 163         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
 164     </div>
 165 </div>
 166
 167 </body>
 168 </html>