OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 <style> | 6 <style> |
7 body { | 7 body { |
8 margin: 0; | 8 margin: 0; |
9 } | 9 } |
10 | 10 |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
75 } | 75 } |
76 | 76 |
77 </style> | 77 </style> |
78 </head> | 78 </head> |
79 <body onload="checkLayout('.grid')"> | 79 <body onload="checkLayout('.grid')"> |
80 | 80 |
81 <p>This test checks that the align-self property is applied correctly.</p> | 81 <p>This test checks that the align-self property is applied correctly.</p> |
82 | 82 |
83 <div style="position: relative"> | 83 <div style="position: relative"> |
84 <div class="grid" data-expected-width="200" data-expected-height="400"> | 84 <div class="grid" data-expected-width="200" data-expected-height="400"> |
85 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data
-offset-y="0" data-expected-width="100" data-expected-height="0"></div> | 85 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data
-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
86 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100
" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 86 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100
" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
87 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100"
data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> | 87 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100"
data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> |
88 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0"
data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> | 88 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0"
data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> |
89 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="10
0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> | 89 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="10
0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> |
90 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100
" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> | 90 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100
" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> |
91 </div> | 91 </div> |
92 </div> | 92 </div> |
93 | 93 |
94 <div style="position: relative"> | 94 <div style="position: relative"> |
95 <div class="grid" data-expected-width="200" data-expected-height="400"> | 95 <div class="grid" data-expected-width="200" data-expected-height="400"> |
96 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0"
data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> | 96 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0"
data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> |
97 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x=
"100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div
> | 97 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x=
"100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div
> |
98 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div
> | 98 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div
> |
99 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di
v> | 99 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di
v> |
100 </div> | 100 </div> |
101 </div> | 101 </div> |
102 | 102 |
103 <!-- Default alignment and initial values. --> | 103 <!-- Default alignment and initial values. --> |
104 <div style="position: relative"> | 104 <div style="position: relative"> |
105 <div class="grid alignItemsCenter" data-expected-width="200" data-expected-h
eight="400"> | 105 <div class="grid alignItemsCenter" data-expected-width="200" data-expected-h
eight="400"> |
106 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div> | 106 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div> |
107 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="80" data-expected-width="20" data-expected-height="40"></div> | 107 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="80" data-expected-width="20" data-expected-height="40"></div> |
108 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div
> | 108 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div
> |
109 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di
v> | 109 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di
v> |
110 </div> | 110 </div> |
111 </div> | 111 </div> |
112 | 112 |
113 <div style="position: relative"> | 113 <div style="position: relative"> |
114 <div class="grid" data-expected-width="200" data-expected-height="400"> | 114 <div class="grid" data-expected-width="200" data-expected-height="400"> |
115 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 115 <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-of
fset-y="0" data-expected-width="100" data-expected-height="200"></div> |
116 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> | 116 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y
="0" data-expected-width="20" data-expected-height="40"></div> |
117 <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0"
data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> | 117 <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0"
data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> |
118 <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100"
data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> | 118 <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100"
data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> |
119 </div> | 119 </div> |
120 </div> | 120 </div> |
121 | 121 |
122 <!-- RTL direction (it should not affect the block-flow direction). --> | 122 <!-- RTL direction (it should not affect the block-flow direction). --> |
123 <div style="position: relative"> | 123 <div style="position: relative"> |
124 <div class="grid directionRTL" data-expected-width="200" data-expected-heig
ht="400"> | 124 <div class="grid directionRTL" data-expected-width="200" data-expected-heig
ht="400"> |
125 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" dat
a-offset-y="0" data-expected-width="100" data-expected-height="0"></div> | 125 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" dat
a-offset-y="0" data-expected-width="100" data-expected-height="200"></div> |
126 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="10
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 126 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="10
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
127 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100"
data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> | 127 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100"
data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> |
128 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0
" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> | 128 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0
" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> |
129 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="1
00" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div
> | 129 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="1
00" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div
> |
130 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="10
0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> | 130 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="10
0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> |
131 </div> | 131 </div> |
132 </div> | 132 </div> |
133 | 133 |
134 <div style="position: relative"> | 134 <div style="position: relative"> |
135 <div class="grid directionRTL" data-expected-width="200" data-expected-heig
ht="400"> | 135 <div class="grid directionRTL" data-expected-width="200" data-expected-heig
ht="400"> |
136 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0
" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> | 136 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0
" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> |
137 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x
="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></di
v> | 137 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x
="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></di
v> |
138 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x
="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></di
v> | 138 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x
="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></di
v> |
139 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=
"100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></d
iv> | 139 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=
"100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></d
iv> |
140 </div> | 140 </div> |
141 </div> | 141 </div> |
142 | 142 |
143 <!-- RTL direction (it should not affect the block-flow) with opposite direction
s grid container vs grid item. --> | 143 <!-- RTL direction (it should not affect the block-flow) with opposite direction
s grid container vs grid item. --> |
144 <div style="position: relative"> | 144 <div style="position: relative"> |
145 <div class="grid" data-expected-width="200" data-expected-height="400"> | 145 <div class="grid" data-expected-width="200" data-expected-height="400"> |
146 <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-off
set-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"><
/div> | 146 <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-off
set-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"
></div> |
147 <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data
-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height=
"40"></div> | 147 <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data
-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height=
"40"></div> |
148 <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-o
ffset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height=
"40"></div> | 148 <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-o
ffset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height=
"40"></div> |
149 <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" dat
a-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height
="40"></div> | 149 <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" dat
a-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height
="40"></div> |
150 <div class="cell alignSelfRight secondRowSecondColumn directionRTL" dat
a-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heig
ht="40"></div> | 150 <div class="cell alignSelfRight secondRowSecondColumn directionRTL" dat
a-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heig
ht="40"></div> |
151 <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data
-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heigh
t="40"></div> | 151 <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data
-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heigh
t="40"></div> |
152 </div> | 152 </div> |
153 </div> | 153 </div> |
154 | 154 |
155 <div style="position: relative"> | 155 <div style="position: relative"> |
156 <div class="grid" data-expected-width="200" data-expected-height="400"> | 156 <div class="grid" data-expected-width="200" data-expected-height="400"> |
157 <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" dat
a-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height
="40"></div> | 157 <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" dat
a-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height
="40"></div> |
158 <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL"
data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-hei
ght="40"></div> | 158 <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL"
data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-hei
ght="40"></div> |
159 <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL"
data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-hei
ght="40"></div> | 159 <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL"
data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-hei
ght="40"></div> |
160 <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" d
ata-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-he
ight="40"></div> | 160 <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" d
ata-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-he
ight="40"></div> |
161 </div> | 161 </div> |
162 </div> | 162 </div> |
163 | 163 |
164 <!-- Vertical RL writing mode. --> | 164 <!-- Vertical RL writing mode. --> |
165 <div style="position: relative"> | 165 <div style="position: relative"> |
166 <div class="grid verticalRL" data-expected-width="400" data-expected-height=
"200"> | 166 <div class="grid verticalRL" data-expected-width="400" data-expected-height=
"200"> |
167 <!-- FIXME: Why is offset-x 400? --> | 167 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" da
ta-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
168 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="400" da
ta-offset-y="0" data-expected-width="0" data-expected-height="100"></div> | |
169 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380
" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 168 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380
" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
170 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200"
data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 169 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200"
data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
171 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90
" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 170 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90
" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
172 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="18
0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 171 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="18
0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
173 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="180
" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 172 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="180
" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
174 </div> | 173 </div> |
175 </div> | 174 </div> |
176 | 175 |
177 <div style="position: relative"> | 176 <div style="position: relative"> |
178 <div class="grid verticalRL" data-expected-width="400" data-expected-height=
"200"> | 177 <div class="grid verticalRL" data-expected-width="400" data-expected-height=
"200"> |
179 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="20
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 178 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="20
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
180 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x=
"380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></d
iv> | 179 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x=
"380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></d
iv> |
181 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div
> | 180 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div
> |
182 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 181 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
183 </div> | 182 </div> |
184 </div> | 183 </div> |
185 | 184 |
186 <!-- Vertical LR writing mode. --> | 185 <!-- Vertical LR writing mode. --> |
187 <div style="position: relative"> | 186 <div style="position: relative"> |
188 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> | 187 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> |
189 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data
-offset-y="0" data-expected-width="0" data-expected-height="100"></div> | 188 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data
-offset-y="0" data-expected-width="200" data-expected-height="100"></div> |
190 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0"
data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 189 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0"
data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
191 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180"
data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 190 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180"
data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
192 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="29
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 191 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="29
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
193 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="20
0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 192 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="20
0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
194 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="200
" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> | 193 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="200
" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> |
195 </div> | 194 </div> |
196 </div> | 195 </div> |
197 | 196 |
198 <div style="position: relative"> | 197 <div style="position: relative"> |
199 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> | 198 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> |
200 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="18
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 199 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="18
0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
201 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x=
"0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div
> | 200 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x=
"0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div
> |
202 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div
> | 201 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x=
"200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div
> |
203 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></di
v> | 202 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="
380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></di
v> |
204 </div> | 203 </div> |
205 </div> | 204 </div> |
206 | 205 |
207 <!-- Vertical RL writing mode with opposite block-flow directions grid container
vs grid item. --> | 206 <!-- Vertical RL writing mode with opposite block-flow directions grid container
vs grid item. --> |
208 <div style="position: relative"> | 207 <div style="position: relative"> |
209 <div class="grid verticalRL" data-expected-width="400" data-expected-height=
"200"> | 208 <div class="grid verticalRL" data-expected-width="400" data-expected-height=
"200"> |
210 <!-- FIXME: Why is offset-x 400? --> | 209 <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset
-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"> |
211 <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset
-x="400" data-offset-y="0" data-expected-width="0" data-expected-height="100"> | |
212 </div> | 210 </div> |
213 <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-of
fset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="
40"> | 211 <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-of
fset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="
40"> |
214 <div class="item"></div> | 212 <div class="item"></div> |
215 </div> | 213 </div> |
216 <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offs
et-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40
"> | 214 <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offs
et-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40
"> |
217 <div class="item"></div> | 215 <div class="item"></div> |
218 </div> | 216 </div> |
219 <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-o
ffset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40
"> | 217 <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-o
ffset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40
"> |
220 <div class="item"></div> | 218 <div class="item"></div> |
221 </div> | 219 </div> |
(...skipping 19 matching lines...) Expand all Loading... |
241 </div> | 239 </div> |
242 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data
-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-heigh
t="40"> | 240 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data
-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-heigh
t="40"> |
243 <div class="item"></div> | 241 <div class="item"></div> |
244 </div> | 242 </div> |
245 </div> | 243 </div> |
246 </div> | 244 </div> |
247 | 245 |
248 <!-- Vertical LR writing mode with opposite block-flow directions grid container
vs grid item. --> | 246 <!-- Vertical LR writing mode with opposite block-flow directions grid container
vs grid item. --> |
249 <div style="position: relative"> | 247 <div style="position: relative"> |
250 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> | 248 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> |
251 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset
-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="100"> | 249 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset
-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> |
252 </div> | 250 </div> |
253 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of
fset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40
"> | 251 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of
fset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40
"> |
254 <div class="item"></div> | 252 <div class="item"></div> |
255 </div> | 253 </div> |
256 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs
et-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40
"> | 254 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs
et-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40
"> |
257 <div class="item"></div> | 255 <div class="item"></div> |
258 </div> | 256 </div> |
259 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o
ffset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="4
0"> | 257 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o
ffset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="4
0"> |
260 <div class="item"></div> | 258 <div class="item"></div> |
261 </div> | 259 </div> |
(...skipping 18 matching lines...) Expand all Loading... |
280 <div class="item"></div> | 278 <div class="item"></div> |
281 </div> | 279 </div> |
282 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data
-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-heigh
t="40"> | 280 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data
-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-heigh
t="40"> |
283 <div class="item"></div> | 281 <div class="item"></div> |
284 </div> | 282 </div> |
285 </div> | 283 </div> |
286 </div> | 284 </div> |
287 | 285 |
288 </body> | 286 </body> |
289 </html> | 287 </html> |
OLD | NEW |