third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-auto-columns: 50px;
   7     grid-auto-rows: 50px;
   8 }
   9
  10 .firstRowAutoColumnSpanning2 {
  11     background-color: maroon;
  12     grid-column: span 2;
  13     grid-row: 1;
  14 }
  15
  16 .autoRowSpanning2FirstColumn {
  17     background-color: aqua;
  18     grid-column: 1;
  19     grid-row: span 2;
  20 }
  21
  22 .firstRowFourthColumn {
  23     background-color: salmon;
  24     grid-column: 4;
  25     grid-row: 1;
  26 }
  27
  28 .fourthRowFirstColumn {
  29     background-color: salmon;
  30     grid-column: 1;
  31     grid-row: 4;
  32 }
  33
  34 .secondRowThirdColumn {
  35     background-color: red;
  36     grid-column: 3;
  37     grid-row: 2;
  38 }
  39 </style>
  40 <script src="../../resources/check-layout.js"></script>
  41 <body onload="checkLayout('.grid');">
  42
  43 <p>Thist test checks that sparse and dense packing modes are supported in auto-placement for fixed rows/columns.</p>
  44
  45 <div style="position: relative">
  46     <div class="grid gridAutoFlowRowSparse">
  47         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  48         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  49         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  50         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  51     </div>
  52 </div>
  53
  54 <div style="position: relative">
  55     <div class="grid gridAutoFlowRowSparse">
  56         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  57         <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  58         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  59         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  60         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="350" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  61         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  62     </div>
  63 </div>
  64
  65 <div style="position: relative">
  66     <div class="grid gridAutoFlowRowSparse">
  67         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  68         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
  69         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  70         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  71         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
  72         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  73     </div>
  74 </div>
  75
  76 <div style="position: relative">
  77     <div class="grid gridAutoFlowRowSparse">
  78         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
  79         <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
  80         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  81         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
  82         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  83         <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
  84         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  85     </div>
  86 </div>
  87
  88 <div style="position: relative">
  89     <div class="grid gridAutoFlowRowDense">
  90         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  91         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  92         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  93         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
  94     </div>
  95 </div>
  96
  97 <div style="position: relative">
  98     <div class="grid gridAutoFlowRowDense">
  99         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 100         <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 101         <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 102         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 103         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 104         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 105     </div>
 106 </div>
 107
 108 <div style="position: relative">
 109     <div class="grid gridAutoFlowRowDense">
 110         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 111         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 112         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 113         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 114         <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 115         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
 116     </div>
 117 </div>
 118
 119 <div style="position: relative">
 120     <div class="grid gridAutoFlowRowDense">
 121         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 122         <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
 123         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
 124         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
 125         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 126         <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
 127         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 128     </div>
 129 </div>
 130
 131 <div style="position: relative">
 132     <div class="grid gridAutoFlowColumnSparse">
 133         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 134         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 135         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="50"></div>
 136         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 137     </div>
 138 </div>
 139
 140 <div style="position: relative">
 141     <div class="grid gridAutoFlowColumnSparse">
 142         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 143         <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
 144         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
 145         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="50"></div>
 146         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="50"></div>
 147         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 148     </div>
 149 </div>
 150
 151 <div style="position: relative">
 152     <div class="grid gridAutoFlowColumnSparse">
 153         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 154         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 155         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 156         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
 157         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 158         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 159     </div>
 160 </div>
 161
 162 <div style="position: relative">
 163     <div class="grid gridAutoFlowColumnSparse">
 164         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 165         <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 166         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 167         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 168         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
 169         <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 170         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 171     </div>
 172 </div>
 173
 174 <div style="position: relative">
 175     <div class="grid gridAutoFlowColumnDense">
 176         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 177         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
 178         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 179         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 180     </div>
 181 </div>
 182
 183 <div style="position: relative">
 184     <div class="grid gridAutoFlowColumnDense">
 185         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 186         <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
 187         <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
 188         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 189         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
 190         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 191     </div>
 192 </div>
 193
 194 <div style="position: relative">
 195     <div class="grid gridAutoFlowColumnDense">
 196         <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 197         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 198         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 199         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 200         <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 201         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 202     </div>
 203 </div>
 204
 205 <div style="position: relative">
 206     <div class="grid gridAutoFlowColumnDense">
 207         <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 208         <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
 209         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
 210         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 211         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 212         <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 213         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
 214     </div>
 215 </div>
 216
 217 </body>
 218 </html>