OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <style> |
| 5 |
| 6 .grid { |
| 7 grid-template-columns: 100px 100px 100px 100px; |
| 8 grid-template-rows: 50px 50px; |
| 9 grid-gap: 25px 50px; |
| 10 width: 800px; |
| 11 height: 200px; |
| 12 border: 5px solid black; |
| 13 margin: 30px; |
| 14 padding: 15px; |
| 15 /* Ensures that the grid container is the containing block of the absolutely
positioned grid children. */ |
| 16 position: relative; |
| 17 } |
| 18 |
| 19 .grid > div { |
| 20 position: absolute; |
| 21 width: 100%; |
| 22 height: 100%; |
| 23 background-color: lime; |
| 24 } |
| 25 |
| 26 .offsets { |
| 27 left: 0; |
| 28 top: 0; |
| 29 } |
| 30 |
| 31 </style> |
| 32 <script src="../../resources/testharness.js"></script> |
| 33 <script src="../../resources/testharnessreport.js"></script> |
| 34 <script src="../../resources/check-layout-th.js"></script> |
| 35 <body onload="checkLayout('.grid')"> |
| 36 <div id="log"></div> |
| 37 |
| 38 <p>This test checks the behavior of the positioned items in a grid container wit
h gaps in RTL.</p> |
| 39 |
| 40 <div class="grid directionRTL"> |
| 41 <div style="grid-column: auto / auto; grid-row: auto / auto;" |
| 42 data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-ex
pected-height="230"> |
| 43 </div> |
| 44 </div> |
| 45 |
| 46 <div class="grid directionRTL"> |
| 47 <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;
" |
| 48 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
| 49 </div> |
| 50 </div> |
| 51 |
| 52 <div class="grid directionRTL"> |
| 53 <div style="grid-column: 1 / auto; grid-row: 1 / auto;" |
| 54 data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expe
cted-height="215"> |
| 55 </div> |
| 56 </div> |
| 57 |
| 58 <div class="grid directionRTL"> |
| 59 <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;" |
| 60 data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expe
cted-height="215"> |
| 61 </div> |
| 62 </div> |
| 63 |
| 64 <div class="grid directionRTL"> |
| 65 <div style="grid-column: 1 / 2; grid-row: 1 / 2;" |
| 66 data-offset-x="715" data-offset-y="15" data-expected-width="100" data-ex
pected-height="50"> |
| 67 </div> |
| 68 </div> |
| 69 |
| 70 <div class="grid directionRTL"> |
| 71 <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" |
| 72 data-offset-x="715" data-offset-y="15" data-expected-width="100" data-ex
pected-height="50"> |
| 73 </div> |
| 74 </div> |
| 75 |
| 76 <div class="grid directionRTL"> |
| 77 <div style="grid-column: 1 / 3; grid-row: 1 / 3;" |
| 78 data-offset-x="565" data-offset-y="15" data-expected-width="250" data-ex
pected-height="125"> |
| 79 </div> |
| 80 </div> |
| 81 |
| 82 <div class="grid directionRTL"> |
| 83 <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;" |
| 84 data-offset-x="565" data-offset-y="15" data-expected-width="250" data-ex
pected-height="125"> |
| 85 </div> |
| 86 </div> |
| 87 |
| 88 <div class="grid directionRTL"> |
| 89 <div style="grid-column: 1 / 4; grid-row: 1 / 4;" |
| 90 data-offset-x="415" data-offset-y="15" data-expected-width="400" data-ex
pected-height="215"> |
| 91 </div> |
| 92 </div> |
| 93 |
| 94 <div class="grid directionRTL"> |
| 95 <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;" |
| 96 data-offset-x="415" data-offset-y="15" data-expected-width="400" data-ex
pected-height="215"> |
| 97 </div> |
| 98 </div> |
| 99 |
| 100 <div class="grid directionRTL"> |
| 101 <div style="grid-column: 1 / 5; grid-row: 1 / 5;" |
| 102 data-offset-x="265" data-offset-y="15" data-expected-width="550" data-ex
pected-height="215"> |
| 103 </div> |
| 104 </div> |
| 105 |
| 106 <div class="grid directionRTL"> |
| 107 <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;" |
| 108 data-offset-x="265" data-offset-y="15" data-expected-width="550" data-ex
pected-height="215"> |
| 109 </div> |
| 110 </div> |
| 111 |
| 112 <div class="grid directionRTL"> |
| 113 <div style="grid-column: 1 / 6; grid-row: 1 / 6;" |
| 114 data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expe
cted-height="215"> |
| 115 </div> |
| 116 </div> |
| 117 |
| 118 <div class="grid directionRTL"> |
| 119 <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;" |
| 120 data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expe
cted-height="215"> |
| 121 </div> |
| 122 </div> |
| 123 |
| 124 <div class="grid directionRTL"> |
| 125 <div style="grid-column: 2 / auto; grid-row: 2 / auto;" |
| 126 data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expe
cted-height="140"> |
| 127 </div> |
| 128 </div> |
| 129 |
| 130 <div class="grid directionRTL"> |
| 131 <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" |
| 132 data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expe
cted-height="140"> |
| 133 </div> |
| 134 </div> |
| 135 |
| 136 <div class="grid directionRTL"> |
| 137 <div style="grid-column: 2 / 3; grid-row: 2 / 3;" |
| 138 data-offset-x="565" data-offset-y="90" data-expected-width="100" data-ex
pected-height="50"> |
| 139 </div> |
| 140 </div> |
| 141 |
| 142 <div class="grid directionRTL"> |
| 143 <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" |
| 144 data-offset-x="565" data-offset-y="90" data-expected-width="100" data-ex
pected-height="50"> |
| 145 </div> |
| 146 </div> |
| 147 |
| 148 <div class="grid directionRTL"> |
| 149 <div style="grid-column: 2 / 4; grid-row: 2 / 4;" |
| 150 data-offset-x="415" data-offset-y="90" data-expected-width="250" data-ex
pected-height="140"> |
| 151 </div> |
| 152 </div> |
| 153 |
| 154 <div class="grid directionRTL"> |
| 155 <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;" |
| 156 data-offset-x="415" data-offset-y="90" data-expected-width="250" data-ex
pected-height="140"> |
| 157 </div> |
| 158 </div> |
| 159 |
| 160 <div class="grid directionRTL"> |
| 161 <div style="grid-column: 2 / 5; grid-row: 2 / 5;" |
| 162 data-offset-x="265" data-offset-y="90" data-expected-width="400" data-ex
pected-height="140"> |
| 163 </div> |
| 164 </div> |
| 165 |
| 166 <div class="grid directionRTL"> |
| 167 <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;" |
| 168 data-offset-x="265" data-offset-y="90" data-expected-width="400" data-ex
pected-height="140"> |
| 169 </div> |
| 170 </div> |
| 171 |
| 172 <div class="grid directionRTL"> |
| 173 <div style="grid-column: 2 / 6; grid-row: 2 / 6;" |
| 174 data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expe
cted-height="140"> |
| 175 </div> |
| 176 </div> |
| 177 |
| 178 <div class="grid directionRTL"> |
| 179 <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;" |
| 180 data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expe
cted-height="140"> |
| 181 </div> |
| 182 </div> |
| 183 |
| 184 <div class="grid directionRTL"> |
| 185 <div style="grid-column: 3 / auto; grid-row: 3 / auto;" |
| 186 data-offset-x="0" data-offset-y="140" data-expected-width="515" data-exp
ected-height="90"> |
| 187 </div> |
| 188 </div> |
| 189 |
| 190 <div class="grid directionRTL"> |
| 191 <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;" |
| 192 data-offset-x="0" data-offset-y="140" data-expected-width="515" data-exp
ected-height="90"> |
| 193 </div> |
| 194 </div> |
| 195 |
| 196 <div class="grid directionRTL"> |
| 197 <div style="grid-column: 4 / auto; grid-row: 4 / auto;" |
| 198 data-offset-x="0" data-offset-y="15" data-expected-width="365" data-expe
cted-height="230"> |
| 199 </div> |
| 200 </div> |
| 201 |
| 202 <div class="grid directionRTL"> |
| 203 <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;" |
| 204 data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expec
ted-height="230"> |
| 205 </div> |
| 206 </div> |
| 207 |
| 208 <div class="grid directionRTL"> |
| 209 <div style="grid-column: 5 / auto; grid-row: 5 / auto;" |
| 210 data-offset-x="0" data-offset-y="15" data-expected-width="265" data-expe
cted-height="230"> |
| 211 </div> |
| 212 </div> |
| 213 |
| 214 <div class="grid directionRTL"> |
| 215 <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;" |
| 216 data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expec
ted-height="230"> |
| 217 </div> |
| 218 </div> |
| 219 |
| 220 <div class="grid directionRTL"> |
| 221 <div style="grid-column: 6 / auto; grid-row: 6 / auto;" |
| 222 data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-ex
pected-height="230"> |
| 223 </div> |
| 224 </div> |
| 225 |
| 226 <div class="grid directionRTL"> |
| 227 <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;" |
| 228 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
| 229 </div> |
| 230 </div> |
| 231 |
| 232 <div class="grid directionRTL"> |
| 233 <div style="grid-column: auto / 1; grid-row: auto / 1;" |
| 234 data-offset-x="800" data-offset-y="15" data-expected-width="15" data-exp
ected-height="15"> |
| 235 </div> |
| 236 </div> |
| 237 |
| 238 <div class="grid directionRTL"> |
| 239 <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;" |
| 240 data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expe
cted-height="15"> |
| 241 </div> |
| 242 </div> |
| 243 |
| 244 <div class="grid directionRTL"> |
| 245 <div style="grid-column: auto / 2; grid-row: auto / 2;" |
| 246 data-offset-x="700" data-offset-y="15" data-expected-width="115" data-ex
pected-height="65"> |
| 247 </div> |
| 248 </div> |
| 249 |
| 250 <div class="grid directionRTL"> |
| 251 <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" |
| 252 data-offset-x="715" data-offset-y="0" data-expected-width="115" data-exp
ected-height="65"> |
| 253 </div> |
| 254 </div> |
| 255 |
| 256 <div class="grid directionRTL"> |
| 257 <div style="grid-column: auto / 3; grid-row: auto / 3;" |
| 258 data-offset-x="550" data-offset-y="15" data-expected-width="265" data-ex
pected-height="140"> |
| 259 </div> |
| 260 </div> |
| 261 |
| 262 <div class="grid directionRTL"> |
| 263 <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;" |
| 264 data-offset-x="565" data-offset-y="0" data-expected-width="265" data-exp
ected-height="140"> |
| 265 </div> |
| 266 </div> |
| 267 |
| 268 <div class="grid directionRTL"> |
| 269 <div style="grid-column: auto / 4; grid-row: auto / 4;" |
| 270 data-offset-x="400" data-offset-y="15" data-expected-width="415" data-ex
pected-height="230"> |
| 271 </div> |
| 272 </div> |
| 273 |
| 274 <div class="grid directionRTL"> |
| 275 <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;" |
| 276 data-offset-x="415" data-offset-y="0" data-expected-width="415" data-exp
ected-height="230"> |
| 277 </div> |
| 278 </div> |
| 279 |
| 280 <div class="grid directionRTL"> |
| 281 <div style="grid-column: auto / 5; grid-row: auto / 5;" |
| 282 data-offset-x="250" data-offset-y="15" data-expected-width="565" data-ex
pected-height="230"> |
| 283 </div> |
| 284 </div> |
| 285 |
| 286 <div class="grid directionRTL"> |
| 287 <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;" |
| 288 data-offset-x="265" data-offset-y="0" data-expected-width="565" data-exp
ected-height="230"> |
| 289 </div> |
| 290 </div> |
| 291 |
| 292 <div class="grid directionRTL"> |
| 293 <div style="grid-column: auto / 6; grid-row: auto / 6;" |
| 294 data-offset-x="-15" data-offset-y="15" data-expected-width="830" data-ex
pected-height="230"> |
| 295 </div> |
| 296 </div> |
| 297 |
| 298 <div class="grid directionRTL"> |
| 299 <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;" |
| 300 data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expec
ted-height="230"> |
| 301 </div> |
| 302 </div> |
| 303 |
| 304 </body> |
| 305 </html> |
OLD | NEW |