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

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: [first] 50px [middle] 100px [last];
   7     grid-template-rows: [first] 50px [middle] 100px [last];
   8     /* To detect how much we extend the grid. */
   9     grid-auto-columns: 200px;
  10     grid-auto-rows: 200px;
  11
  12     /* Make the grid shrink-to-fit. */
  13     position: absolute;
  14 }
  15
  16 .negativeStartPositionGrowGridInColumnDirection {
  17     grid-column: -1 / auto;
  18     grid-row: 1;
  19 }
  20
  21 .negativeStartPositionGrowGridInRowDirection {
  22     grid-column: 1;
  23     grid-row: -1 / auto;
  24 }
  25
  26 .lastNamedGridLineStartPositionGrowGridInRowDirection {
  27     grid-column: 1;
  28     grid-row: -1 / auto;
  29 }
  30
  31 .lastNamedGridLineStartPositionGrowGridInColumnDirection {
  32     grid-column: last / auto;
  33     grid-row: 1;
  34 }
  35
  36 .negativeStartPositionGrowGridInRowDirection {
  37     grid-column: 1;
  38     grid-row: last / auto;
  39 }
  40
  41 .endSpanGrowGridInColumnDirection {
  42     grid-column: -2 / span 3;
  43     grid-row: 1;
  44 }
  45
  46 .endSpanGrowGridInRowDirection {
  47     grid-column: 1;
  48     grid-row: -2 / span 3;
  49 }
  50
  51 .namedEndSpanGrowGridInColumnDirection {
  52     grid-column: -1 middle / span 3;
  53     grid-row: 1;
  54 }
  55
  56 .namedEndSpanGrowGridInRowDirection {
  57     grid-column: 1;
  58     grid-row: 2 middle / span 3;
  59 }
  60
  61 .negativeEndPositionStartSpanInColumnDirection {
  62     grid-column: span / -1;
  63     grid-row: 1;
  64 }
  65
  66 .negativeEndPositionStartSpanInRowDirection {
  67     grid-column: 1;
  68     grid-row: span 5 / -1;
  69 }
  70
  71 .negativeNamedGridLineEndPositionStartSpanInColumnDirection {
  72     grid-column: span / last;
  73     grid-row: 1;
  74 }
  75
  76 .negativeNamedGridLineEndPositionStartSpanInRowDirection {
  77     grid-column: 1;
  78     grid-row: span 5 / last;
  79 }
  80
  81 .negativeEndPositionStartNegativeInColumnDirection {
  82     grid-column: -3 / -1;
  83     grid-row: 1;
  84 }
  85
  86 .negativeEndPositionStartNegativeInRowDirection {
  87     grid-column: -5 / -2;
  88     grid-row: 1;
  89 }
  90
  91 .namedGridLineEndPositionStartNegativeInColumnDirection {
  92     grid-column: -3 / 10 last;
  93     grid-row: 1;
  94 }
  95
  96 .namedGridLineEndPositionStartNegativeInRowDirection {
  97     grid-column: -5 / -2 middle;
  98     grid-row: 1;
  99 }
 100 </style>
 101 <script src="../../resources/check-layout.js"></script>
 102 <body onload="checkLayout('.grid');">
 103
 104 <p>Test that negative grid positions are correctly resolved.</p>
 105
 106 <div style="position: relative">
 107 <div class="grid" data-expected-width="350" data-expected-height="150">
 108     <div class="sizedToGridArea negativeStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 109 </div>
 110 </div>
 111
 112 <div style="position: relative">
 113 <div class="grid" data-expected-width="150" data-expected-height="350">
 114     <div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInRowDirection" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 115 </div>
 116 </div>
 117
 118 <div style="position: relative">
 119 <div class="grid" data-expected-width="350" data-expected-height="150">
 120     <div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
 121 </div>
 122 </div>
 123
 124 <div style="position: relative">
 125 <div class="grid" data-expected-width="150" data-expected-height="350">
 126     <div class="sizedToGridArea negativeStartPositionGrowGridInRowDirection" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
 127 </div>
 128 </div>
 129
 130 <div style="position: relative">
 131 <div class="grid" data-expected-width="550" data-expected-height="150">
 132     <div class="sizedToGridArea endSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div>
 133 </div>
 134 </div>
 135
 136 <div style="position: relative">
 137 <div class="grid" data-expected-width="150" data-expected-height="550">
 138     <div class="sizedToGridArea endSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div>
 139 </div>
 140 </div>
 141
 142 <div style="position: relative">
 143 <div class="grid" data-expected-width="550" data-expected-height="150">
 144     <div class="sizedToGridArea namedEndSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div>
 145 </div>
 146 </div>
 147
 148 <div style="position: relative">
 149 <div class="grid" data-expected-width="150" data-expected-height="550">
 150     <div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div>
 151 </div>
 152 </div>
 153
 154 <div style="position: relative">
 155 <div class="grid" data-expected-width="150" data-expected-height="150">
 156     <div class="sizedToGridArea negativeEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 157 </div>
 158 </div>
 159
 160 <div style="position: relative">
 161 <div class="grid" data-expected-width="150" data-expected-height="150">
 162     <div class="sizedToGridArea negativeEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
 163 </div>
 164 </div>
 165
 166 <div style="position: relative">
 167 <div class="grid" data-expected-width="150" data-expected-height="150">
 168     <div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 169 </div>
 170 </div>
 171
 172 <div style="position: relative">
 173 <div class="grid" data-expected-width="150" data-expected-height="150">
 174     <div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
 175 </div>
 176 </div>
 177
 178 <div style="position: relative">
 179 <div class="grid" data-expected-width="150" data-expected-height="150">
 180     <div class="sizedToGridArea negativeEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
 181 </div>
 182 </div>
 183
 184 <div style="position: relative">
 185 <div class="grid" data-expected-width="150" data-expected-height="150">
 186     <div class="sizedToGridArea negativeEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 187 </div>
 188 </div>
 189
 190 <div style="position: relative">
 191 <div class="grid" data-expected-width="150" data-expected-height="150">
 192     <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
 193 </div>
 194 </div>
 195
 196 <div style="position: relative">
 197 <div class="grid" data-expected-width="150" data-expected-height="150">
 198     <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
 199 </div>
 200 </div>
 201
 202 </body>
 203 </html>