OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <link href="resources/grid.css" rel="stylesheet"> |
| 5 <script src="../../resources/check-layout.js"></script> |
| 6 <style> |
| 7 body { |
| 8 margin: 0; |
| 9 } |
| 10 |
| 11 .grid { |
| 12 grid: 50px 50px / 100px 100px; |
| 13 position: relative; |
| 14 width: 200px; |
| 15 height: 300px; |
| 16 } |
| 17 |
| 18 .verticalGrid { |
| 19 width: 300px; |
| 20 height: 200px; |
| 21 } |
| 22 |
| 23 .cell { |
| 24 width: 20px; |
| 25 height: 40px; |
| 26 } |
| 27 |
| 28 .justifyContentBaseline { |
| 29 justify-content: baseline; |
| 30 } |
| 31 |
| 32 .justifyContentLastBaseline { |
| 33 justify-content: last-baseline; |
| 34 } |
| 35 |
| 36 .justifyContentStart { |
| 37 justify-content: start; |
| 38 } |
| 39 |
| 40 .justifyContentEnd { |
| 41 justify-content: end; |
| 42 } |
| 43 |
| 44 .justifyContentCenter { |
| 45 justify-content: center; |
| 46 } |
| 47 |
| 48 .justifyContentLeft { |
| 49 justify-content: left; |
| 50 } |
| 51 |
| 52 .justifyContentRight { |
| 53 justify-content: right; |
| 54 } |
| 55 |
| 56 .justifyContentFlexStart { |
| 57 justify-content: flex-start; |
| 58 } |
| 59 |
| 60 .justifyContentFlexEnd { |
| 61 justify-content: flex-end; |
| 62 } |
| 63 |
| 64 .justifyContentEndTrue { |
| 65 justify-content: end true; |
| 66 } |
| 67 |
| 68 .justifyContentCenterTrue { |
| 69 justify-content: center true; |
| 70 } |
| 71 |
| 72 .justifyContentRightSafe { |
| 73 justify-content: right safe; |
| 74 } |
| 75 |
| 76 .justifyContentLeftTrue { |
| 77 justify-content: left true; |
| 78 } |
| 79 |
| 80 .justifyContentFlexStartTrue { |
| 81 justify-content: flex-start true; |
| 82 } |
| 83 |
| 84 .justifyContentFlexEndSafe { |
| 85 justify-content: flex-end safe; |
| 86 } |
| 87 |
| 88 .justifyContentSpaceBetween { |
| 89 justify-content: space-between; |
| 90 } |
| 91 |
| 92 .justifyContentSpaceAround { |
| 93 justify-content: space-around; |
| 94 } |
| 95 |
| 96 .justifyContentSpaceEvenly { |
| 97 justify-content: space-evenly; |
| 98 } |
| 99 |
| 100 .justifyContentStretch { |
| 101 justify-content: stretch; |
| 102 } |
| 103 |
| 104 .justifyContentSpaceBetweenLeft { |
| 105 justify-content: space-between left; |
| 106 } |
| 107 |
| 108 .justifyContentSpaceAroundCenter { |
| 109 justify-content: space-around center; |
| 110 } |
| 111 |
| 112 .justifyContentSpaceEvenlyRight { |
| 113 justify-content: space-evenly right; |
| 114 } |
| 115 |
| 116 .justifyContentStretchStart { |
| 117 justify-content: stretch start; |
| 118 } |
| 119 |
| 120 </style> |
| 121 </head> |
| 122 <body onload="checkLayout('.grid')"> |
| 123 |
| 124 <p>This test checks that the justify-content property is applied correctly when
using content-position values.</p> |
| 125 |
| 126 <div style="position: relative"> |
| 127 <div class="grid justifyContentCenter" data-expected-width="200" data-expect
ed-height="300"> |
| 128 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> |
| 129 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 130 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 131 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 132 </div> |
| 133 </div> |
| 134 |
| 135 <div style="position: relative"> |
| 136 <div class="grid justifyContentLeft" data-expected-width="200" data-expected
-height="300"> |
| 137 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 138 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 139 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 140 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 141 </div> |
| 142 </div> |
| 143 |
| 144 <div style="position: relative"> |
| 145 <div class="grid justifyContentRight" data-expected-width="200" data-expecte
d-height="300"> |
| 146 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 147 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 148 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 149 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 150 </div> |
| 151 </div> |
| 152 |
| 153 <div style="position: relative"> |
| 154 <div class="grid justifyContentStart" data-expected-width="200" data-expecte
d-height="300"> |
| 155 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 156 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 157 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 158 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 159 </div> |
| 160 </div> |
| 161 |
| 162 <div style="position: relative"> |
| 163 <div class="grid justifyContentEnd" data-expected-width="200" data-expected-
height="300"> |
| 164 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 165 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 166 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 167 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 168 </div> |
| 169 </div> |
| 170 |
| 171 <div style="position: relative"> |
| 172 <div class="grid justifyContentFlexStart" data-expected-width="200" data-exp
ected-height="300"> |
| 173 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 174 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 175 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 176 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 177 </div> |
| 178 </div> |
| 179 |
| 180 <div style="position: relative"> |
| 181 <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expec
ted-height="300"> |
| 182 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 183 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 184 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 185 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 186 </div> |
| 187 </div> |
| 188 |
| 189 <!-- content-distribution values always fallback to content-position. --> |
| 190 <div style="position: relative"> |
| 191 <div class="grid justifyContentSpaceBetween" data-expected-width="200" data-
expected-height="300"> |
| 192 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 193 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 194 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 195 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 196 </div> |
| 197 </div> |
| 198 |
| 199 <div style="position: relative"> |
| 200 <div class="grid justifyContentSpaceAround" data-expected-width="200" data-e
xpected-height="300"> |
| 201 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> |
| 202 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 203 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 204 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 205 </div> |
| 206 </div> |
| 207 |
| 208 <div style="position: relative"> |
| 209 <div class="grid justifyContentSpaceEvenly" data-expected-width="200" data-e
xpected-height="300"> |
| 210 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> |
| 211 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 212 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 213 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 214 </div> |
| 215 </div> |
| 216 |
| 217 <div style="position: relative"> |
| 218 <div class="grid justifyContentStretch" data-expected-width="200" data-expec
ted-height="300"> |
| 219 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 220 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 221 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 222 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 223 </div> |
| 224 </div> |
| 225 |
| 226 <div style="position: relative"> |
| 227 <div class="grid justifyContentSpaceBetweenLeft" data-expected-width="200" d
ata-expected-height="300"> |
| 228 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 229 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 230 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 231 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 232 </div> |
| 233 </div> |
| 234 |
| 235 <div style="position: relative"> |
| 236 <div class="grid justifyContentSpaceAroundCenter" data-expected-width="200"
data-expected-height="300"> |
| 237 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> |
| 238 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 239 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 240 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 241 </div> |
| 242 </div> |
| 243 |
| 244 <div style="position: relative"> |
| 245 <div class="grid justifyContentSpaceEvenlyRight" data-expected-width="200" d
ata-expected-height="300"> |
| 246 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 247 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 248 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 249 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 250 </div> |
| 251 </div> |
| 252 |
| 253 <div style="position: relative"> |
| 254 <div class="grid justifyContentStretchStart" data-expected-width="200" data-
expected-height="300"> |
| 255 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 256 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 257 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 258 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 259 </div> |
| 260 </div> |
| 261 |
| 262 <!-- Default alignment and initial values. --> |
| 263 <div style="position: relative"> |
| 264 <div class="grid" data-expected-width="200" data-expected-height="300"> |
| 265 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 266 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 267 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 268 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 269 </div> |
| 270 </div> |
| 271 |
| 272 <!-- RTL direction. --> |
| 273 <div style="position: relative"> |
| 274 <div class="grid directionRTL justifyContentCenter" data-expected-width="200"
data-expected-height="300"> |
| 275 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> |
| 276 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 277 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 278 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 279 </div> |
| 280 </div> |
| 281 |
| 282 <div style="position: relative"> |
| 283 <div class="grid directionRTL justifyContentLeft" data-expected-width="200"
data-expected-height="300"> |
| 284 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 285 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 286 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 287 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 288 </div> |
| 289 </div> |
| 290 |
| 291 <div style="position: relative"> |
| 292 <div class="grid directionRTL justifyContentRight" data-expected-width="200"
data-expected-height="300"> |
| 293 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 294 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 295 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 296 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 297 </div> |
| 298 </div> |
| 299 |
| 300 <div style="position: relative"> |
| 301 <div class="grid directionRTL justifyContentStart" data-expected-width="200"
data-expected-height="300"> |
| 302 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 303 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 304 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 305 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 306 </div> |
| 307 </div> |
| 308 |
| 309 <div style="position: relative"> |
| 310 <div class="grid directionRTL justifyContentEnd" data-expected-width="200" d
ata-expected-height="300"> |
| 311 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 312 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 313 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 314 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 315 </div> |
| 316 </div> |
| 317 |
| 318 <!-- Vertical RL writing mode. --> |
| 319 <div style="position: relative"> |
| 320 <div class="grid verticalGrid verticalRL justifyContentCenter" data-expected
-width="300" data-expected-height="200"> |
| 321 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"50" data-expected-width="20" data-expected-height="40"></div> |
| 322 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 323 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="50" data-expected-width="20" data-expected-height="40"></div> |
| 324 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 325 </div> |
| 326 </div> |
| 327 |
| 328 <div style="position: relative"> |
| 329 <div class="grid verticalGrid verticalRL justifyContentLeft" data-expected-w
idth="300" data-expected-height="200"> |
| 330 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 331 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="50" data-expected-width="20" data-expected-height="40"></div> |
| 332 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 333 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 334 </div> |
| 335 </div> |
| 336 |
| 337 <div style="position: relative"> |
| 338 <div class="grid verticalGrid verticalRL justifyContentRight" data-expected-
width="300" data-expected-height="200"> |
| 339 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 340 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="50" data-expected-width="20" data-expected-height="40"></div> |
| 341 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 342 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 343 </div> |
| 344 </div> |
| 345 |
| 346 <div style="position: relative"> |
| 347 <div class="grid verticalGrid verticalRL justifyContentStart" data-expected-
width="300" data-expected-height="200"> |
| 348 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 349 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="50" data-expected-width="20" data-expected-height="40"></div> |
| 350 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 351 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 352 </div> |
| 353 </div> |
| 354 |
| 355 <div style="position: relative"> |
| 356 <div class="grid verticalGrid verticalRL justifyContentEnd" data-expected-wi
dth="300" data-expected-height="200"> |
| 357 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 358 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="150" data-expected-width="20" data-expected-height="40"></div> |
| 359 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 360 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 361 </div> |
| 362 </div> |
| 363 |
| 364 <div style="position: relative"> |
| 365 <div class="grid verticalGrid verticalRL directionRTL justifyContentLeft" da
ta-expected-width="300" data-expected-height="200"> |
| 366 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 367 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="150" data-expected-width="20" data-expected-height="40"></div> |
| 368 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 369 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 370 </div> |
| 371 </div> |
| 372 |
| 373 <div style="position: relative"> |
| 374 <div class="grid verticalGrid verticalRL directionRTL justifyContentRight" d
ata-expected-width="300" data-expected-height="200"> |
| 375 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 376 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="150" data-expected-width="20" data-expected-height="40"></div> |
| 377 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 378 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 379 </div> |
| 380 </div> |
| 381 |
| 382 <div style="position: relative"> |
| 383 <div class="grid verticalGrid verticalRL directionRTL justifyContentStart" d
ata-expected-width="300" data-expected-height="200"> |
| 384 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
| 385 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="150" data-expected-width="20" data-expected-height="40"></div> |
| 386 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 387 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 388 </div> |
| 389 </div> |
| 390 |
| 391 <div style="position: relative"> |
| 392 <div class="grid verticalGrid verticalRL directionRTL justifyContentEnd" dat
a-expected-width="300" data-expected-height="200"> |
| 393 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
| 394 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y
="50" data-expected-width="20" data-expected-height="40"></div> |
| 395 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 396 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 397 </div> |
| 398 </div> |
| 399 |
| 400 |
| 401 <!-- Vertical LR writing mode. --> |
| 402 <div style="position: relative"> |
| 403 <div class="grid verticalGrid verticalLR justifyContentCenter" data-expected
-width="300" data-expected-height="200"> |
| 404 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="20" data-expected-height="40"></div> |
| 405 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
100" data-expected-width="20" data-expected-height="40"></div> |
| 406 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="50" data-expected-width="20" data-expected-height="40"></div> |
| 407 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
| 408 </div> |
| 409 </div> |
| 410 |
| 411 <div style="position: relative"> |
| 412 <div class="grid verticalGrid verticalLR justifyContentLeft" data-expected-w
idth="300" data-expected-height="200"> |
| 413 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 414 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
50" data-expected-width="20" data-expected-height="40"></div> |
| 415 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 416 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 417 </div> |
| 418 </div> |
| 419 |
| 420 <div style="position: relative"> |
| 421 <div class="grid verticalGrid verticalLR justifyContentRight" data-expected-
width="300" data-expected-height="200"> |
| 422 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 423 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
50" data-expected-width="20" data-expected-height="40"></div> |
| 424 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 425 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 426 </div> |
| 427 </div> |
| 428 |
| 429 <div style="position: relative"> |
| 430 <div class="grid verticalGrid verticalLR justifyContentStart" data-expected-
width="300" data-expected-height="200"> |
| 431 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 432 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
50" data-expected-width="20" data-expected-height="40"></div> |
| 433 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 434 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 435 </div> |
| 436 </div> |
| 437 |
| 438 <div style="position: relative"> |
| 439 <div class="grid verticalGrid verticalLR justifyContentEnd" data-expected-wi
dth="300" data-expected-height="200"> |
| 440 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1
00" data-expected-width="20" data-expected-height="40"></div> |
| 441 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
150" data-expected-width="20" data-expected-height="40"></div> |
| 442 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 443 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 444 </div> |
| 445 </div> |
| 446 |
| 447 <div style="position: relative"> |
| 448 <div class="grid verticalGrid verticalLR directionRTL justifyContentLeft" da
ta-expected-width="300" data-expected-height="200"> |
| 449 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1
00" data-expected-width="20" data-expected-height="40"></div> |
| 450 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
150" data-expected-width="20" data-expected-height="40"></div> |
| 451 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 452 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 453 </div> |
| 454 </div> |
| 455 |
| 456 <div style="position: relative"> |
| 457 <div class="grid verticalGrid verticalLR directionRTL justifyContentRight" d
ata-expected-width="300" data-expected-height="200"> |
| 458 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1
00" data-expected-width="20" data-expected-height="40"></div> |
| 459 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
150" data-expected-width="20" data-expected-height="40"></div> |
| 460 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 461 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 462 </div> |
| 463 </div> |
| 464 |
| 465 <div style="position: relative"> |
| 466 <div class="grid verticalGrid verticalLR directionRTL justifyContentStart" d
ata-expected-width="300" data-expected-height="200"> |
| 467 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1
00" data-expected-width="20" data-expected-height="40"></div> |
| 468 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
150" data-expected-width="20" data-expected-height="40"></div> |
| 469 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
| 470 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="150" data-expected-width="20" data-expected-height="40"></div> |
| 471 </div> |
| 472 </div> |
| 473 |
| 474 <div style="position: relative"> |
| 475 <div class="grid verticalGrid verticalLR directionRTL justifyContentEnd" dat
a-expected-width="300" data-expected-height="200"> |
| 476 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
| 477 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y="
50" data-expected-width="20" data-expected-height="40"></div> |
| 478 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
| 479 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="50" data-expected-width="20" data-expected-height="40"></div> |
| 480 </div> |
| 481 </div> |
| 482 |
| 483 |
| 484 </body> |
| 485 </html> |
OLD | NEW |