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: 0px; |
| 9 } |
| 10 |
| 11 .grid { |
| 12 grid-auto-columns: 20px; |
| 13 grid-auto-rows: 40px; |
| 14 position: relative; |
| 15 width: 300px; |
| 16 height: 200px; |
| 17 } |
| 18 |
| 19 .stretchedGrid { |
| 20 grid-auto-columns: auto; |
| 21 } |
| 22 |
| 23 .justifyContentSpaceBetween { |
| 24 justify-content: space-between; |
| 25 } |
| 26 |
| 27 .justifyContentSpaceAround { |
| 28 justify-content: space-around; |
| 29 } |
| 30 |
| 31 .justifyContentSpaceEvenly { |
| 32 justify-content: space-evenly; |
| 33 } |
| 34 |
| 35 .justifyContentStretch { |
| 36 justify-content: stretch; |
| 37 } |
| 38 |
| 39 .firstRowThirdColumn { |
| 40 background-color: magenta; |
| 41 grid-column: 3; |
| 42 grid-row: 1; |
| 43 } |
| 44 |
| 45 .secondRowThirdColumn { |
| 46 background-color: navy; |
| 47 grid-column: 3; |
| 48 grid-row: 2; |
| 49 } |
| 50 |
| 51 .firstRowFourthColumn { |
| 52 background-color: green; |
| 53 grid-column: 4; |
| 54 grid-row: 1; |
| 55 } |
| 56 |
| 57 .secondRowFourthColumn { |
| 58 background-color: pink; |
| 59 grid-column: 4; |
| 60 grid-row: 2; |
| 61 } |
| 62 </style> |
| 63 </head> |
| 64 <body onload="checkLayout('.grid')"> |
| 65 |
| 66 <p>This test checks that the justify-content property is applied correctly when
using content-distribution values.</p> |
| 67 |
| 68 <div style="position: relative"> |
| 69 <p>direction: LTR | justify-content: 'space-between'</p> |
| 70 <div class="grid justifyContentSpaceBetween" data-expected-width="300" data-
expected-height="200"> |
| 71 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="20" data-expected-height="40"></div> |
| 72 <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 73 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="20" data-expected-height="40"></div> |
| 74 <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 75 </div> |
| 76 </div> |
| 77 |
| 78 <div style="position: relative"> |
| 79 <p>direction: LTR | justify-content: 'space-around'</p> |
| 80 <div class="grid justifyContentSpaceAround" data-expected-width="300" data-e
xpected-height="200"> |
| 81 <div class="firstRowFirstColumn" data-offset-x="65" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 82 <div class="firstRowSecondColumn" data-offset-x="215" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 83 <div class="secondRowFirstColumn" data-offset-x="65" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 84 <div class="secondRowSecondColumn" data-offset-x="215" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 85 </div> |
| 86 </div> |
| 87 |
| 88 <div style="position: relative"> |
| 89 <p>direction: LTR | justify-content: 'space-evenly'</p> |
| 90 <div class="grid justifyContentSpaceEvenly" data-expected-width="300" data-e
xpected-height="200"> |
| 91 <div class="firstRowFirstColumn" data-offset-x="87" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 92 <div class="firstRowSecondColumn" data-offset-x="193" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 93 <div class="secondRowFirstColumn" data-offset-x="87" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 94 <div class="secondRowSecondColumn" data-offset-x="193" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 95 </div> |
| 96 </div> |
| 97 |
| 98 <div style="position: relative"> |
| 99 <p>direction: LTR | justify-content: 'stretch'</p> |
| 100 <div class="grid stretchedGrid justifyContentStretch" data-expected-width="3
00" data-expected-height="200"> |
| 101 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="150" data-expected-height="40"></div> |
| 102 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="150" data-expected-height="40"></div> |
| 103 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="150" data-expected-height="40"></div> |
| 104 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="40
" data-expected-width="150" data-expected-height="40"></div> |
| 105 </div> |
| 106 </div> |
| 107 |
| 108 <div style="position: relative"> |
| 109 <p>direction: LTR | justify-content: 'space-between'</p> |
| 110 <div class="grid justifyContentSpaceBetween" data-expected-width="300" data-
expected-height="200"> |
| 111 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="20" data-expected-height="40"></div> |
| 112 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 113 <div class="firstRowThirdColumn" data-offset-x="280" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 114 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="20" data-expected-height="40"></div> |
| 115 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 116 <div class="secondRowThirdColumn" data-offset-x="280" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 117 </div> |
| 118 </div> |
| 119 |
| 120 <div style="position: relative"> |
| 121 <p>direction: LTR | justify-content: 'space-around'</p> |
| 122 <div class="grid justifyContentSpaceAround" data-expected-width="300" data-e
xpected-height="200"> |
| 123 <div class="firstRowFirstColumn" data-offset-x="40" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 124 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 125 <div class="firstRowThirdColumn" data-offset-x="240" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 126 <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 127 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 128 <div class="secondRowThirdColumn" data-offset-x="240" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 129 </div> |
| 130 </div> |
| 131 |
| 132 <div style="position: relative"> |
| 133 <p>direction: LTR | justify-content: 'space-evenly'</p> |
| 134 <div class="grid justifyContentSpaceEvenly" data-expected-width="300" data-e
xpected-height="200"> |
| 135 <div class="firstRowFirstColumn" data-offset-x="60" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 136 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 137 <div class="firstRowThirdColumn" data-offset-x="220" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 138 <div class="secondRowFirstColumn" data-offset-x="60" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 139 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 140 <div class="secondRowThirdColumn" data-offset-x="220" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 141 </div> |
| 142 </div> |
| 143 |
| 144 <div style="position: relative"> |
| 145 <p>direction: LTR | justify-content: 'stretch'</p> |
| 146 <div class="grid stretchedGrid justifyContentStretch" data-expected-width="3
00" data-expected-height="200"> |
| 147 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="100" data-expected-height="40"></div> |
| 148 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="100" data-expected-height="40"></div> |
| 149 <div class="firstRowThirdColumn" data-offset-x="200" data-offset-y="0" d
ata-expected-width="100" data-expected-height="40"></div> |
| 150 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="100" data-expected-height="40"></div> |
| 151 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="40
" data-expected-width="100" data-expected-height="40"></div> |
| 152 <div class="secondRowThirdColumn" data-offset-x="200" data-offset-y="40"
data-expected-width="100" data-expected-height="40"></div> |
| 153 </div> |
| 154 </div> |
| 155 |
| 156 <div style="position: relative"> |
| 157 <p>direction: LTR | justify-content: 'space-between'</p> |
| 158 <div class="grid justifyContentSpaceBetween" data-expected-width="300" data-
expected-height="200"> |
| 159 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="20" data-expected-height="40"></div> |
| 160 <div class="firstRowSecondColumn" data-offset-x="93" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 161 <div class="firstRowThirdColumn" data-offset-x="187" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 162 <div class="firstRowFourthColumn" data-offset-x="280" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 163 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="20" data-expected-height="40"></div> |
| 164 <div class="secondRowSecondColumn" data-offset-x="93" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 165 <div class="secondRowThirdColumn" data-offset-x="187" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 166 <div class="secondRowFourthColumn" data-offset-x="280" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 167 </div> |
| 168 </div> |
| 169 |
| 170 <div style="position: relative"> |
| 171 <p>direction: LTR | justify-content: 'space-around'</p> |
| 172 <div class="grid justifyContentSpaceAround" data-expected-width="300" data-e
xpected-height="200"> |
| 173 <div class="firstRowFirstColumn" data-offset-x="28" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 174 <div class="firstRowSecondColumn" data-offset-x="103" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 175 <div class="firstRowThirdColumn" data-offset-x="178" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 176 <div class="firstRowFourthColumn" data-offset-x="253" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 177 <div class="secondRowFirstColumn" data-offset-x="28" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 178 <div class="secondRowSecondColumn" data-offset-x="103" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 179 <div class="secondRowThirdColumn" data-offset-x="178" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 180 <div class="secondRowFourthColumn" data-offset-x="253" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 181 </div> |
| 182 </div> |
| 183 |
| 184 <div style="position: relative"> |
| 185 <p>direction: LTR | justify-content: 'space-evenly'</p> |
| 186 <div class="grid justifyContentSpaceEvenly" data-expected-width="300" data-e
xpected-height="200"> |
| 187 <div class="firstRowFirstColumn" data-offset-x="44" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 188 <div class="firstRowSecondColumn" data-offset-x="108" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 189 <div class="firstRowThirdColumn" data-offset-x="172" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 190 <div class="firstRowFourthColumn" data-offset-x="236" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 191 <div class="secondRowFirstColumn" data-offset-x="44" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 192 <div class="secondRowSecondColumn" data-offset-x="108" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 193 <div class="secondRowThirdColumn" data-offset-x="172" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 194 <div class="secondRowFourthColumn" data-offset-x="236" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 195 </div> |
| 196 </div> |
| 197 |
| 198 <div style="position: relative"> |
| 199 <p>direction: LTR | justify-content: 'stretch'</p> |
| 200 <div class="grid stretchedGrid justifyContentStretch" data-expected-width="3
00" data-expected-height="200"> |
| 201 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="75" data-expected-height="40"></div> |
| 202 <div class="firstRowSecondColumn" data-offset-x="75" data-offset-y="0" d
ata-expected-width="75" data-expected-height="40"></div> |
| 203 <div class="firstRowThirdColumn" data-offset-x="150" data-offset-y="0" d
ata-expected-width="75" data-expected-height="40"></div> |
| 204 <div class="firstRowFourthColumn" data-offset-x="225" data-offset-y="0"
data-expected-width="75" data-expected-height="40"></div> |
| 205 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="75" data-expected-height="40"></div> |
| 206 <div class="secondRowSecondColumn" data-offset-x="75" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 207 <div class="secondRowThirdColumn" data-offset-x="150" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 208 <div class="secondRowFourthColumn" data-offset-x="225" data-offset-y="40
" data-expected-width="75" data-expected-height="40"></div> |
| 209 </div> |
| 210 </div> |
| 211 |
| 212 <!-- RTL direction. --> |
| 213 <div style="position: relative"> |
| 214 <p>direction: RTL | justify-content: 'space-between'</p> |
| 215 <div class="grid justifyContentSpaceBetween directionRTL" data-expected-widt
h="300" data-expected-height="200"> |
| 216 <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 217 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 218 <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 219 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 220 </div> |
| 221 </div> |
| 222 |
| 223 <div style="position: relative"> |
| 224 <p>direction: RTL | justify-content: 'space-around'</p> |
| 225 <div class="grid justifyContentSpaceAround directionRTL" data-expected-width
="300" data-expected-height="200"> |
| 226 <div class="firstRowFirstColumn" data-offset-x="215" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 227 <div class="firstRowSecondColumn" data-offset-x="65" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 228 <div class="secondRowFirstColumn" data-offset-x="215" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 229 <div class="secondRowSecondColumn" data-offset-x="65" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 230 </div> |
| 231 </div> |
| 232 |
| 233 <div style="position: relative"> |
| 234 <p>direction: RTL | justify-content: 'space-evenly'</p> |
| 235 <div class="grid justifyContentSpaceEvenly directionRTL" data-expected-width
="300" data-expected-height="200"> |
| 236 <div class="firstRowFirstColumn" data-offset-x="193" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 237 <div class="firstRowSecondColumn" data-offset-x="87" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 238 <div class="secondRowFirstColumn" data-offset-x="193" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 239 <div class="secondRowSecondColumn" data-offset-x="87" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 240 </div> |
| 241 </div> |
| 242 |
| 243 <div style="position: relative"> |
| 244 <p>direction: RTL | justify-content: 'stretch'</p> |
| 245 <div class="grid stretchedGrid justifyContentStretch directionRTL" data-expe
cted-width="300" data-expected-height="200"> |
| 246 <div class="firstRowFirstColumn" data-offset-x="150" data-offset-y="0" d
ata-expected-width="150" data-expected-height="40"></div> |
| 247 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="150" data-expected-height="40"></div> |
| 248 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="40"
data-expected-width="150" data-expected-height="40"></div> |
| 249 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="40"
data-expected-width="150" data-expected-height="40"></div> |
| 250 </div> |
| 251 </div> |
| 252 |
| 253 <div style="position: relative"> |
| 254 <p>direction: RTL | justify-content: 'space-between'</p> |
| 255 <div class="grid justifyContentSpaceBetween directionRTL" data-expected-wid
th="300" data-expected-height="200"> |
| 256 <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 257 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 258 <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="20" data-expected-height="40"></div> |
| 259 <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 260 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 261 <div class="secondRowThirdColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="20" data-expected-height="40"></div> |
| 262 </div> |
| 263 </div> |
| 264 |
| 265 <div style="position: relative"> |
| 266 <p>direction: RTL | justify-content: 'space-around'</p> |
| 267 <div class="grid justifyContentSpaceAround directionRTL" data-expected-width
="300" data-expected-height="200"> |
| 268 <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 269 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 270 <div class="firstRowThirdColumn" data-offset-x="40" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 271 <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 272 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 273 <div class="secondRowThirdColumn" data-offset-x="40" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 274 </div> |
| 275 </div> |
| 276 |
| 277 <div style="position: relative"> |
| 278 <p>direction: RTL | justify-content: 'space-evenly'</p> |
| 279 <div class="grid justifyContentSpaceEvenly directionRTL" data-expected-width
="300" data-expected-height="200"> |
| 280 <div class="firstRowFirstColumn" data-offset-x="220" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 281 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 282 <div class="firstRowThirdColumn" data-offset-x="60" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 283 <div class="secondRowFirstColumn" data-offset-x="220" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 284 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 285 <div class="secondRowThirdColumn" data-offset-x="60" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 286 </div> |
| 287 </div> |
| 288 |
| 289 <div style="position: relative"> |
| 290 <p>direction: RTL | justify-content: 'stretch'</p> |
| 291 <div class="grid stretchedGrid justifyContentStretch directionRTL" data-expe
cted-width="300" data-expected-height="200"> |
| 292 <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" d
ata-expected-width="100" data-expected-height="40"></div> |
| 293 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="100" data-expected-height="40"></div> |
| 294 <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="100" data-expected-height="40"></div> |
| 295 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="40"
data-expected-width="100" data-expected-height="40"></div> |
| 296 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="40
" data-expected-width="100" data-expected-height="40"></div> |
| 297 <div class="secondRowThirdColumn" data-offset-x="0" data-offset-y="40" d
ata-expected-width="100" data-expected-height="40"></div> |
| 298 </div> |
| 299 </div> |
| 300 |
| 301 <div style="position: relative"> |
| 302 <p>direction: RTL | justify-content: 'space-between'</p> |
| 303 <div class="grid justifyContentSpaceBetween directionRTL" data-expected-widt
h="300" data-expected-height="200"> |
| 304 <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 305 <div class="firstRowSecondColumn" data-offset-x="187" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 306 <div class="firstRowThirdColumn" data-offset-x="93" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 307 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="20" data-expected-height="40"></div> |
| 308 <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 309 <div class="secondRowSecondColumn" data-offset-x="187" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 310 <div class="secondRowThirdColumn" data-offset-x="93" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 311 <div class="secondRowFourthColumn" data-offset-x="0" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 312 </div> |
| 313 </div> |
| 314 |
| 315 <div style="position: relative"> |
| 316 <p>direction: RTL | justify-content: 'space-around'</p> |
| 317 <div class="grid justifyContentSpaceAround directionRTL" data-expected-width
="300" data-expected-height="200"> |
| 318 <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 319 <div class="firstRowSecondColumn" data-offset-x="178" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 320 <div class="firstRowThirdColumn" data-offset-x="103" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 321 <div class="firstRowFourthColumn" data-offset-x="28" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 322 <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 323 <div class="secondRowSecondColumn" data-offset-x="178" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 324 <div class="secondRowThirdColumn" data-offset-x="103" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 325 <div class="secondRowFourthColumn" data-offset-x="28" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 326 </div> |
| 327 </div> |
| 328 |
| 329 <div style="position: relative"> |
| 330 <p>direction: RTL | justify-content: 'space-evenly'</p> |
| 331 <div class="grid justifyContentSpaceEvenly directionRTL" data-expected-width
="300" data-expected-height="200"> |
| 332 <div class="firstRowFirstColumn" data-offset-x="236" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 333 <div class="firstRowSecondColumn" data-offset-x="172" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> |
| 334 <div class="firstRowThirdColumn" data-offset-x="108" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 335 <div class="firstRowFourthColumn" data-offset-x="44" data-offset-y="0" d
ata-expected-width="20" data-expected-height="40"></div> |
| 336 <div class="secondRowFirstColumn" data-offset-x="236" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 337 <div class="secondRowSecondColumn" data-offset-x="172" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> |
| 338 <div class="secondRowThirdColumn" data-offset-x="108" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 339 <div class="secondRowFourthColumn" data-offset-x="44" data-offset-y="40"
data-expected-width="20" data-expected-height="40"></div> |
| 340 </div> |
| 341 </div> |
| 342 |
| 343 <div style="position: relative"> |
| 344 <p>direction: RTL | justify-content: 'stretch'</p> |
| 345 <div class="grid stretchedGrid justifyContentStretch directionRTL" data-expe
cted-width="300" data-expected-height="200"> |
| 346 <div class="firstRowFirstColumn" data-offset-x="225" data-offset-y="0" d
ata-expected-width="75" data-expected-height="40"></div> |
| 347 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="75" data-expected-height="40"></div> |
| 348 <div class="firstRowThirdColumn" data-offset-x="75" data-offset-y="0" da
ta-expected-width="75" data-expected-height="40"></div> |
| 349 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="75" data-expected-height="40"></div> |
| 350 <div class="secondRowFirstColumn" data-offset-x="225" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 351 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="40
" data-expected-width="75" data-expected-height="40"></div> |
| 352 <div class="secondRowThirdColumn" data-offset-x="75" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 353 <div class="secondRowFourthColumn" data-offset-x="0" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 354 </div> |
| 355 </div> |
| 356 |
| 357 </body> |
| 358 </html> |
OLD | NEW |