third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 40% 60%;
   7     grid-template-rows: 30% 70%;
   8     width: 400px;
   9     height: 300px;
  10 }
  11
  12 #bigGrid {
  13     grid-template-columns: 25% 25% 25% 25%;
  14     grid-template-rows: 25% 25% 25% 25%;
  15     height: 100px;
  16     width: 200px;
  17 }
  18
  19 #fixedGrid {
  20     grid-template-columns: 10px 20px 40px 80px;
  21     grid-template-rows: 15px 30px 60px 120px;
  22 }
  23
  24 .negativeOverflowRowFirstColumn {
  25     grid-row: 1 / -5;
  26     grid-column: 1;
  27 }
  28
  29 .overflowRowFirstColumn {
  30     grid-row: 1 / 5;
  31     grid-column: 1;
  32 }
  33
  34 .firstRowNegativeOverflowColumn {
  35     grid-row: 1;
  36     grid-column: 1 / -5;
  37 }
  38
  39 .firstRowOverflowColumn {
  40     grid-row: 1;
  41     grid-column: 1 / 5;
  42 }
  43
  44 .secondRowSecondColumnNoSpan {
  45     grid-column: 2 / 3;
  46     grid-row: 2 / 3;
  47 }
  48
  49 .thirdRowThirdColumnNoSpan {
  50     grid-column: 3 / 4;
  51     grid-row: 3 / 4;
  52 }
  53
  54 .firstRowSpanning3SecondColumn {
  55     grid-column: 2;
  56     grid-row: 1 / span 3;
  57 }
  58
  59 .thirdRowSecondColumnSpanning2 {
  60     grid-column: 2 / span 2;
  61     grid-row: 3;
  62 }
  63
  64 .spanning3Row5SecondColumn {
  65     grid-column: 2;
  66     grid-row: span 3 / 5;
  67 }
  68
  69 .thirdRowSpanning2Column3 {
  70     grid-column: span 2 / 3;
  71     grid-row: 3;
  72 }
  73
  74 .underflowSpanning {
  75     grid-column: span 3 / 3;
  76     grid-row: span 8 / 4;
  77 }
  78
  79 .doubleSpan {
  80     grid-column: span 2 / span 2;
  81     grid-row: span 3 / span 1;
  82 }
  83
  84 .spanAndAuto {
  85     grid-column: auto / span 2;
  86     grid-row: span 3 / auto;
  87 }
  88
  89 </style>
  90 <script src="../../resources/check-layout.js"></script>
  91 <body onload="checkLayout('.grid');">
  92
  93 <p>Test that spannig rows / columns inside percentage sized grid areas get properly sized.</p>
  94
  95 <div style="position: relative">
  96 <div class="grid" data-expected-width="400" data-expected-height="300">
  97     <div class="sizedToGridArea firstRowBothColumn" data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="90"></div>
  98 </div>
  99 </div>
 100
 101 <div style="position: relative">
 102 <div class="grid" data-expected-width="400" data-expected-height="300">
 103     <div class="sizedToGridArea secondRowBothColumn" data-offset-x="0" data-offset-y="90" data-expected-width="400" data-expected-height="210"></div>
 104 </div>
 105 </div>
 106
 107 <div style="position: relative">
 108 <div class="grid" data-expected-width="400" data-expected-height="300">
 109     <div class="sizedToGridArea bothRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="300"></div>
 110 </div>
 111 </div>
 112
 113 <div style="position: relative">
 114 <div class="grid" data-expected-width="400" data-expected-height="300">
 115     <div class="sizedToGridArea bothRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="240" data-expected-height="300"></div>
 116 </div>
 117 </div>
 118
 119 <div style="position: relative">
 120 <div class="grid" data-expected-width="400" data-expected-height="300">
 121     <div class="sizedToGridArea bothRowBothColumn" data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="300"></div>
 122 </div>
 123 </div>
 124
 125 <div style="position: relative">
 126 <div class="grid" data-expected-width="400" data-expected-height="300">
 127     <div class="sizedToGridArea negativeOverflowRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="90"></div>
 128 </div>
 129 </div>
 130
 131 <div style="position: relative">
 132 <div class="grid" data-expected-width="400" data-expected-height="300">
 133     <div class="sizedToGridArea overflowRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="300"></div>
 134 </div>
 135 </div>
 136
 137 <div style="position: relative">
 138 <div class="grid" data-expected-width="400" data-expected-height="300">
 139     <div class="sizedToGridArea firstRowNegativeOverflowColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="90"></div>
 140 </div>
 141 </div>
 142
 143 <div style="position: relative">
 144 <div class="grid" data-expected-width="400" data-expected-height="300">
 145     <div class="sizedToGridArea firstRowOverflowColumn" data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="90"></div>
 146 </div>
 147 </div>
 148
 149 <div style="position: relative">
 150 <div class="grid" data-expected-width="400" data-expected-height="300">
 151     <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="160" data-offset-y="0" data-expected-width="240" data-expected-height="90"></div>
 152 </div>
 153 </div>
 154
 155 <div style="position: relative">
 156 <div class="grid" data-expected-width="400" data-expected-height="300">
 157     <div class="sizedToGridArea autoSecondRowAutoFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="90"></div>
 158 </div>
 159 </div>
 160
 161 <div style="position: relative">
 162 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 163     <div class="sizedToGridArea secondRowSecondColumnNoSpan" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="25"></div>
 164     <div class="sizedToGridArea thirdRowThirdColumnNoSpan" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="25"></div>
 165 </div>
 166
 167 <div style="position: relative">
 168 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 169     <div class="sizedToGridArea firstRowSpanning3SecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="75"></div>
 170 </div>
 171 </div>
 172
 173 <div style="position: relative">
 174 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 175     <div class="sizedToGridArea thirdRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="25"></div>
 176 </div>
 177
 178 <div style="position: relative">
 179 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 180     <div class="sizedToGridArea spanning3Row5SecondColumn" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="75"></div>
 181 </div>
 182 </div>
 183
 184 <div style="position: relative">
 185 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 186     <div class="sizedToGridArea thirdRowSpanning2Column3" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="25"></div>
 187 </div>
 188
 189 <div style="position: relative">
 190 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
 191     <div class="sizedToGridArea underflowSpanning" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75"></div>
 192 </div>
 193
 194 <!-- Check that the end span is ignored when two opposing spans are specified-->
 195 <div style="position: relative">
 196 <div class="grid" id="fixedGrid" style="grid-auto-flow: row;">
 197     <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
 198     <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0" data-expected-width="60" data-expected-height="105"></div>
 199 </div>
 200
 201 <div style="position: relative">
 202 <div class="grid" id="fixedGrid" style="grid-auto-flow: column;">
 203     <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
 204     <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15" data-expected-width="30" data-expected-height="210"></div>
 205 </div>
 206 </body>
 207 </html>