third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-auto-rows: 50px;
   7     grid-auto-columns: 100px;
   8 }
   9
  10 .autoRowFirstColumnSpanning3 {
  11     background-color: teal;
  12     grid-column: 1 / span 3;
  13     grid-row: auto;
  14 }
  15
  16 .firstRowSpanning3AutoColumn {
  17     background-color: teal;
  18     grid-column: auto;
  19     grid-row: 1 / span 3;
  20     height: 100%;
  21 }
  22 </style>
  23 <script src="../../resources/check-layout.js"></script>
  24 <body onload="checkLayout('.grid');">
  25
  26 <p>Thist test checks that span is supported in auto-placement for definite positions.</p>
  27
  28 <div style="position: relative">
  29     <div class="grid gridAutoFlowRowDense">
  30         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
  31         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
  32         <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
  33         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  34         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  35     </div>
  36 </div>
  37
  38 <div style="position: relative">
  39     <div class="grid gridAutoFlowRowDense">
  40         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
  41         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
  42         <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
  43         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  44         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
  45     </div>
  46 </div>
  47
  48 <div style="position: relative">
  49     <div class="grid gridAutoFlowColumnDense">
  50         <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
  51         <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
  52         <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
  53         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
  54         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  55     </div>
  56 </div>
  57
  58 <div style="position: relative">
  59     <div class="grid gridAutoFlowColumnDense">
  60         <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
  61         <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
  62         <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
  63         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
  64         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  65     </div>
  66 </div>
  67
  68 </body>
  69 </html>