Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(124)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flex-align-new-values.html

Issue 1268753002: [css-flexbox] Implementing new CSS Box Alignment values (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | Source/core/layout/LayoutFlexibleBox.cpp » ('j') | Source/core/layout/LayoutFlexibleBox.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/flexbox.css" rel="stylesheet">
4 <style>
5 body {
6 margin: 0;
7 }
8 .flexbox {
9 width: 600px;
10 height: 300px;
11 background-color: grey;
12 position: relative;
13 }
14 .item {
15 width: 75px;
16 height: 75px;
17 }
18
19 .rowReverse { flex-direction: row-reverse; }
20 .column { flex-direction: column; }
21 .columnReverse { flex-direction: column-reverse; }
22 .wrap { flex-wrap: wrap; }
23 .wrapReverse { flex-wrap: wrap-reverse; }
24 .flexStart { align-self: flex-start; }
25 .flexEnd { align-self: flex-end; }
26 .selfStart { align-self: self-start; }
27 .selfEnd { align-self: self-end; }
28 .start { align-self: start; }
29 .end { align-self: end; }
30 .left { align-self: left; }
31 .right { align-self: right; }
32
33 .horizontalTB { -webkit-writing-mode: horizontal-tb; }
34 .horizontalBT { -webkit-writing-mode: horizontal-bt; }
35 .verticalLR { -webkit-writing-mode: vertical-lr; }
36 .verticalRL { -webkit-writing-mode: vertical-rl; }
37 .directionLTR { direction: ltr; }
38 .directionRTL { direction: rtl; }
39
40 .flexbox > :nth-child(1) { background-color: #FCC; }
41 .flexbox > :nth-child(2) { background-color: #CFC; }
42 .flexbox > :nth-child(3) { background-color: #CCF; }
43 .flexbox > :nth-child(4) { background-color: #C99; }
44 .flexbox > :nth-child(5) { background-color: #9C9; }
45 .flexbox > :nth-child(6) { background-color: #99C; }
46 .flexbox > :nth-child(7) { background-color: #FFC; }
47 .flexbox > :nth-child(8) { background-color: #FCF; }
48 </style>
49 <script src="../../resources/check-layout.js"></script>
50 <body onload="checkLayout('.flexbox')">
51
52 <p>This test checks that the CSS Box Alignment new values work as expected when used in align-self property.</p>
53
54 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>row</b> | fl ex-wrap: <b>wrap</b></p>
55 <div class="flexbox wrap">
56 <div class="item flexStart" data-offset-x="0" data-offset-y="0">item1 <b>fle x-start</b></div>
57 <div class="item flexEnd" data-offset-x="75" data-offset-y="225">item2 <b>fl ex-end</b></div>
58 <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start </b></div>
59 <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</ b></div>
60 <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>s elf-start</b></div>
61 <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>s elf-end</b></div>
62 <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</ b></div>
63 <div class="item right" data-offset-x="525" data-offset-y="0">item8 <b>right </b></div>
64 </div>
65
66 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>row-reverse< /b> | flex-wrap: <b>wrap</b></p>
67 <div class="flexbox rowReverse wrap">
68 <div class="item flexStart" data-offset-x="525" data-offset-y="0">item1 <b>f lex-start</b></div>
69 <div class="item flexEnd" data-offset-x="450" data-offset-y="225">item2 <b>f lex-end</b></div>
70 <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start </b></div>
71 <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</ b></div>
72 <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>s elf-start</b></div>
73 <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>s elf-end</b></div>
74 <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b ></div>
75 <div class="item right" data-offset-x="0" data-offset-y="0">item8 <b>right</ b></div>
76 </div>
77
78 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-flow: <b>row</b> | flex-wr ap: <b>wrap-reverse</b></p>
79 <div class="flexbox wrapReverse">
80 <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>f lex-start</b></div>
81 <div class="item flexEnd" data-offset-x="75" data-offset-y="0">item2 <b>flex -end</b></div>
82 <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start </b></div>
83 <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</ b></div>
84 <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>s elf-start</b></div>
85 <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>s elf-end</b></div>
86 <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</ b></div>
87 <div class="item right" data-offset-x="525" data-offset-y="0">item8 <b>right </b></div>
88 </div>
89
90 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
91 <div class="flexbox rowReverse wrapReverse">
92 <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b >flex-start</b></div>
93 <div class="item flexEnd" data-offset-x="450" data-offset-y="0">item2 <b>fle x-end</b></div>
94 <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start </b></div>
95 <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</ b></div>
96 <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>s elf-start</b></div>
97 <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>s elf-end</b></div>
98 <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b ></div>
99 <div class="item right" data-offset-x="0" data-offset-y="0">item8 <b>right</ b></div>
100 </div>
101
102 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
103 <div class="flexbox column wrap">
104 <div class="item flexStart" data-offset-x="0" data-offset-y="0">item1 <b>fle x-start</b></div>
105 <div class="item flexEnd" data-offset-x="225" data-offset-y="75">item2 <b>fl ex-end</b></div>
106 <div class="item start" data-offset-x="0" data-offset-y="150">item3 <b>start </b></div>
107 <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</ b></div>
108 <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>s elf-start</b></div>
109 <div class="item selfEnd" data-offset-x="525" data-offset-y="75">item6 <b>se lf-end</b></div>
110 <div class="item left" data-offset-x="300" data-offset-y="150">item7 <b>left </b></div>
111 <div class="item right" data-offset-x="525" data-offset-y="225">item8 <b>rig ht</b></div>
112 </div>
113
114 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
115 <div class="flexbox column wrapReverse">
116 <div class="item flexStart" data-offset-x="525" data-offset-y="0">item1 <b>f lex-start</b></div>
117 <div class="item flexEnd" data-offset-x="300" data-offset-y="75">item2 <b>fl ex-end</b></div>
118 <div class="item start" data-offset-x="300" data-offset-y="150">item3 <b>sta rt</b></div>
119 <div class="item end" data-offset-x="525" data-offset-y="225">item4 <b>end</ b></div>
120 <div class="item selfStart" data-offset-x="0" data-offset-y="0">item5 <b>sel f-start</b></div>
121 <div class="item selfEnd" data-offset-x="225" data-offset-y="75">item6 <b>se lf-end</b></div>
122 <div class="item left" data-offset-x="0" data-offset-y="150">item7 <b>left</ b></div>
123 <div class="item right" data-offset-x="225" data-offset-y="225">item8 <b>rig ht</b></div>
124 </div>
125
126 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap</b></p>
127 <div class="flexbox columnReverse wrap">
128 <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>f lex-start</b></div>
129 <div class="item flexEnd" data-offset-x="225" data-offset-y="150">item2 <b>f lex-end</b></div>
130 <div class="item start" data-offset-x="0" data-offset-y="75">item3 <b>start< /b></div>
131 <div class="item end" data-offset-x="225" data-offset-y="0">item4 <b>end</b> </div>
132 <div class="item selfStart" data-offset-x="300" data-offset-y="225">item5 <b >self-start</b></div>
133 <div class="item selfEnd" data-offset-x="525" data-offset-y="150">item6 <b>s elf-end</b></div>
134 <div class="item left" data-offset-x="300" data-offset-y="75">item7 <b>left< /b></div>
135 <div class="item right" data-offset-x="525" data-offset-y="0">item8 <b>right </b></div>
136 </div>
137
138 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap-reverse</b></p>
139 <div class="flexbox columnReverse wrapReverse">
140 <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b >flex-start</b></div>
141 <div class="item flexEnd" data-offset-x="300" data-offset-y="150">item2 <b>f lex-end</b></div>
142 <div class="item start" data-offset-x="300" data-offset-y="75">item3 <b>star t</b></div>
143 <div class="item end" data-offset-x="525" data-offset-y="0">item4 <b>end</b> </div>
144 <div class="item selfStart" data-offset-x="0" data-offset-y="225">item5 <b>s elf-start</b></div>
145 <div class="item selfEnd" data-offset-x="225" data-offset-y="150">item6 <b>s elf-end</b></div>
146 <div class="item left" data-offset-x="0" data-offset-y="75">item7 <b>left</b ></div>
147 <div class="item right" data-offset-x="225" data-offset-y="0">item8 <b>right </b></div>
148 </div>
149
150 <!-- RTL direction -->
151
152 <!-- this is equivalent to LTR and row-reverse -->
153 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row</b> | fl ex-wrap: <b>wrap</b></p>
154 <div class="flexbox directionRTL wrap">
155 <div class="item flexStart" data-offset-x="525" data-offset-y="0">item1 <b>f lex-start</b></div>
156 <div class="item flexEnd" data-offset-x="450" data-offset-y="225">item2 <b>f lex-end</b></div>
157 <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start </b></div>
158 <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</ b></div>
159 <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>s elf-start</b></div>
160 <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>s elf-end</b></div>
161 <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b ></div>
162 <div class="item right" data-offset-x="0" data-offset-y="0">item8 <b>right</ b></div>
163 </div>
164
165 <!-- this is equivalent to LTR and row -->
166 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row-reverse< /b> | flex-wrap: <b>wrap</b></p>
167 <div class="flexbox directionRTL rowReverse wrap">
168 <div class="item flexStart" data-offset-x="0" data-offset-y="0">item1 <b>fle x-start</b></div>
169 <div class="item flexEnd" data-offset-x="75" data-offset-y="225">item2 <b>fl ex-end</b></div>
170 <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start </b></div>
171 <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</ b></div>
172 <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>s elf-start</b></div>
173 <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>s elf-end</b></div>
174 <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</ b></div>
175 <div class="item right" data-offset-x="525" data-offset-y="0">item8 <b>right </b></div>
176 </div>
177
178 <!-- this is equivalent to LTR and row-reverse -->
179 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-flow: <b>row</b> | flex-wr ap: <b>wrap-reverse</b></p>
180 <div class="flexbox directionRTL wrapReverse">
181 <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b >flex-start</b></div>
182 <div class="item flexEnd" data-offset-x="450" data-offset-y="0">item2 <b>fle x-end</b></div>
183 <div class="item start" data-offset-x="375" data-offset-y="0">item3 <b>start </b></div>
184 <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</ b></div>
185 <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>s elf-start</b></div>
186 <div class="item selfEnd" data-offset-x="150" data-offset-y="225">item6 <b>s elf-end</b></div>
187 <div class="item left" data-offset-x="75" data-offset-y="0">item7 <b>left</b ></div>
188 <div class="item right" data-offset-x="0" data-offset-y="0">item8 <b>right</ b></div>
189 </div>
190
191 <!-- this is equivalent to LTR and row -->
192 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row-reverse< /b> | flex-wrap: <b>wrap-reverse</b></p>
193 <div class="flexbox directionRTL rowReverse wrapReverse">
194 <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>f lex-start</b></div>
195 <div class="item flexEnd" data-offset-x="75" data-offset-y="0">item2 <b>flex -end</b></div>
196 <div class="item start" data-offset-x="150" data-offset-y="0">item3 <b>start </b></div>
197 <div class="item end" data-offset-x="225" data-offset-y="225">item4 <b>end</ b></div>
198 <div class="item selfStart" data-offset-x="300" data-offset-y="0">item5 <b>s elf-start</b></div>
199 <div class="item selfEnd" data-offset-x="375" data-offset-y="225">item6 <b>s elf-end</b></div>
200 <div class="item left" data-offset-x="450" data-offset-y="0">item7 <b>left</ b></div>
201 <div class="item right" data-offset-x="525" data-offset-y="0">item8 <b>right </b></div>
202 </div>
203
204 <!-- this is equivalent to LTR and wrap-reverse -->
205 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
206 <div class="flexbox directionRTL column wrap">
207 <div class="item flexStart" data-offset-x="525" data-offset-y="0">item1 <b>f lex-start</b></div>
208 <div class="item flexEnd" data-offset-x="300" data-offset-y="75">item2 <b>fl ex-end</b></div>
209 <div class="item start" data-offset-x="525" data-offset-y="150">item3 <b>sta rt</b></div>
210 <div class="item end" data-offset-x="300" data-offset-y="225">item4 <b>end</ b></div>
211 <div class="item selfStart" data-offset-x="225" data-offset-y="0">item5 <b>s elf-start</b></div>
212 <div class="item selfEnd" data-offset-x="0" data-offset-y="75">item6 <b>self -end</b></div>
213 <div class="item left" data-offset-x="0" data-offset-y="150">item7 <b>left</ b></div>
214 <div class="item right" data-offset-x="225" data-offset-y="225">item8 <b>rig ht</b></div>
215 </div>
216
217 <!-- this is equivalent to LTR and column -->
218 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
219 <div class="flexbox directionRTL column wrapReverse">
220 <div class="item flexStart" data-offset-x="0" data-offset-y="0">item1 <b>fle x-start</b></div>
221 <div class="item flexEnd" data-offset-x="225" data-offset-y="75">item2 <b>fl ex-end</b></div>
222 <div class="item start" data-offset-x="225" data-offset-y="150">item3 <b>sta rt</b></div>
223 <div class="item end" data-offset-x="0" data-offset-y="225">item4 <b>end</b> </div>
224 <div class="item selfStart" data-offset-x="525" data-offset-y="0">item5 <b>s elf-start</b></div>
225 <div class="item selfEnd" data-offset-x="300" data-offset-y="75">item6 <b>se lf-end</b></div>
226 <div class="item left" data-offset-x="300" data-offset-y="150">item7 <b>left </b></div>
227 <div class="item right" data-offset-x="525" data-offset-y="225">item8 <b>rig ht</b></div>
228 </div>
229
230 <!-- this is equivalent to LTR and wrap-reverse -->
231 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap</b></p>
232 <div class="flexbox directionRTL columnReverse wrap">
233 <div class="item flexStart" data-offset-x="525" data-offset-y="225">item1 <b >flex-start</b></div>
234 <div class="item flexEnd" data-offset-x="300" data-offset-y="150">item2 <b>f lex-end</b></div>
235 <div class="item start" data-offset-x="525" data-offset-y="75">item3 <b>star t</b></div>
236 <div class="item end" data-offset-x="300" data-offset-y="0">item4 <b>end</b> </div>
237 <div class="item selfStart" data-offset-x="225" data-offset-y="225">item5 <b >self-start</b></div>
238 <div class="item selfEnd" data-offset-x="0" data-offset-y="150">item6 <b>sel f-end</b></div>
239 <div class="item left" data-offset-x="0" data-offset-y="75">item7 <b>left</b ></div>
240 <div class="item right" data-offset-x="225" data-offset-y="0">item8 <b>right </b></div>
241 </div>
242
243 <!-- this is equivalent to LTR and columnReverse -->
244 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap-reverse</b></p>
245 <div class="flexbox directionRTL columnReverse wrapReverse">
246 <div class="item flexStart" data-offset-x="0" data-offset-y="225">item1 <b>f lex-start</b></div>
247 <div class="item flexEnd" data-offset-x="225" data-offset-y="150">item2 <b>f lex-end</b></div>
248 <div class="item start" data-offset-x="225" data-offset-y="75">item3 <b>star t</b></div>
249 <div class="item end" data-offset-x="0" data-offset-y="0">item4 <b>end</b></ div>
250 <div class="item selfStart" data-offset-x="525" data-offset-y="225">item5 <b >self-start</b></div>
251 <div class="item selfEnd" data-offset-x="300" data-offset-y="150">item6 <b>s elf-end</b></div>
252 <div class="item left" data-offset-x="300" data-offset-y="75">item7 <b>left< /b></div>
253 <div class="item right" data-offset-x="525" data-offset-y="0">item8 <b>right </b></div>
254 </div>
255
256 <!-- Orthogonal writing-modes (vertical-LR should not affect alignment results, since it shares edges with LTR direction)-->
257
258 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-dire ction: <b>row</b> | flex-wrap: <b>wrap</b></p>
259 <div class="flexbox wrap">
260 <div class="item verticalLR flexStart" data-offset-x="0" data-offset-y="0">i tem1 <b>flex-start</b></div>
261 <div class="item verticalLR flexEnd" data-offset-x="75" data-offset-y="225"> item2 <b>flex-end</b></div>
262 <div class="item verticalLR start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
263 <div class="item verticalLR end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
264 <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="0" >item5 <b>self-start</b></div>
265 <div class="item verticalLR selfEnd" data-offset-x="375" data-offset-y="225" >item6 <b>self-end</b></div>
266 <div class="item verticalLR left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
267 <div class="item verticalLR right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
268 </div>
269
270 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-dire ction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
271 <div class="flexbox rowReverse wrap">
272 <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="0" >item1 <b>flex-start</b></div>
273 <div class="item verticalLR flexEnd" data-offset-x="450" data-offset-y="225" >item2 <b>flex-end</b></div>
274 <div class="item verticalLR start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
275 <div class="item verticalLR end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
276 <div class="item verticalLR selfStart" data-offset-x="225" data-offset-y="0" >item5 <b>self-start</b></div>
277 <div class="item verticalLR selfEnd" data-offset-x="150" data-offset-y="225" >item6 <b>self-end</b></div>
278 <div class="item verticalLR left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
279 <div class="item verticalLR right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
280 </div>
281
282 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-dire ction: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
283 <div class="flexbox wrap-reverse">
284 <div class="item verticalLR flexStart" data-offset-x="0" data-offset-y="225" >item1 <b>flex-start</b></div>
285 <div class="item verticalLR flexEnd" data-offset-x="75" data-offset-y="0">it em2 <b>flex-end</b></div>
286 <div class="item verticalLR start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
287 <div class="item verticalLR end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
288 <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="0" >item5 <b>self-start</b></div>
289 <div class="item verticalLR selfEnd" data-offset-x="375" data-offset-y="225" >item6 <b>self-end</b></div>
290 <div class="item verticalLR left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
291 <div class="item verticalLR right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
292 </div>
293
294 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-flow : <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
295 <div class="flexbox rowReverse wrapReverse">
296 <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="22 5">item1 <b>flex-start</b></div>
297 <div class="item verticalLR flexEnd" data-offset-x="450" data-offset-y="0">i tem2 <b>flex-end</b></div>
298 <div class="item verticalLR start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
299 <div class="item verticalLR end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
300 <div class="item verticalLR selfStart" data-offset-x="225" data-offset-y="0" >item5 <b>self-start</b></div>
301 <div class="item verticalLR selfEnd" data-offset-x="150" data-offset-y="225" >item6 <b>self-end</b></div>
302 <div class="item verticalLR left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
303 <div class="item verticalLR right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
304 </div>
305
306 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-dire ction: <b>column</b> | flex-wrap: <b>wrap</b></p>
307 <div class="flexbox column wrap">
308 <div class="item verticalLR flexStart" data-offset-x="0" data-offset-y="0">i tem1 <b>flex-start</b></div>
309 <div class="item verticalLR flexEnd" data-offset-x="225" data-offset-y="75"> item2 <b>flex-end</b></div>
310 <div class="item verticalLR start" data-offset-x="0" data-offset-y="150">ite m3 <b>start</b></div>
311 <div class="item verticalLR end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
312 <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="0" >item5 <b>self-start</b></div>
313 <div class="item verticalLR selfEnd" data-offset-x="525" data-offset-y="75"> item6 <b>self-end</b></div>
314 <div class="item verticalLR left" data-offset-x="300" data-offset-y="150">it em7 <b>left</b></div>
315 <div class="item verticalLR right" data-offset-x="525" data-offset-y="225">i tem8 <b>right</b></div>
316 </div>
317
318 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-dire ction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
319 <div class="flexbox column wrapReverse">
320 <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="0" >item1 <b>flex-start</b></div>
321 <div class="item verticalLR flexEnd" data-offset-x="300" data-offset-y="75"> item2 <b>flex-end</b></div>
322 <div class="item verticalLR start" data-offset-x="300" data-offset-y="150">i tem3 <b>start</b></div>
323 <div class="item verticalLR end" data-offset-x="525" data-offset-y="225">ite m4 <b>end</b></div>
324 <div class="item verticalLR selfStart" data-offset-x="0" data-offset-y="0">i tem5 <b>self-start</b></div>
325 <div class="item verticalLR selfEnd" data-offset-x="225" data-offset-y="75"> item6 <b>self-end</b></div>
326 <div class="item verticalLR left" data-offset-x="0" data-offset-y="150">item 7 <b>left</b></div>
327 <div class="item verticalLR right" data-offset-x="225" data-offset-y="225">i tem8 <b>right</b></div>
328 </div>
329
330 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-dire ction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
331 <div class="flexbox columnReverse wrap">
332 <div class="item verticalLR flexStart" data-offset-x="0" data-offset-y="225" >item1 <b>flex-start</b></div>
333 <div class="item verticalLR flexEnd" data-offset-x="225" data-offset-y="150" >item2 <b>flex-end</b></div>
334 <div class="item verticalLR start" data-offset-x="0" data-offset-y="75">item 3 <b>start</b></div>
335 <div class="item verticalLR end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
336 <div class="item verticalLR selfStart" data-offset-x="300" data-offset-y="22 5">item5 <b>self-start</b></div>
337 <div class="item verticalLR selfEnd" data-offset-x="525" data-offset-y="150" >item6 <b>self-end</b></div>
338 <div class="item verticalLR left" data-offset-x="300" data-offset-y="75">ite m7 <b>left</b></div>
339 <div class="item verticalLR right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
340 </div>
341
342 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-lr LTR</b> | flex-dire ction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
343 <div class="flexbox columnReverse wrapReverse">
344 <div class="item verticalLR flexStart" data-offset-x="525" data-offset-y="22 5">item1 <b>flex-start</b></div>
345 <div class="item verticalLR flexEnd" data-offset-x="300" data-offset-y="150" >item2 <b>flex-end</b></div>
346 <div class="item verticalLR start" data-offset-x="300" data-offset-y="75">it em3 <b>start</b></div>
347 <div class="item verticalLR end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
348 <div class="item verticalLR selfStart" data-offset-x="0" data-offset-y="225" >item5 <b>self-start</b></div>
349 <div class="item verticalLR selfEnd" data-offset-x="225" data-offset-y="150" >item6 <b>self-end</b></div>
350 <div class="item verticalLR left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
351 <div class="item verticalLR right" data-offset-x="225" data-offset-y="0">ite m8 <b>right</b></div>
352 </div>
353
354 <!-- Orthogonal writing-modes (vertical-RL it will affect how self-start/end are determined, but only when using column flow) -->
355
356 <!-- This is equivalent to the case using same writin-mode -->
357 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-dire ction: <b>row</b> | flex-wrap: <b>wrap</b></p>
358 <div class="flexbox wrap">
359 <div class="item verticalRL flexStart" data-offset-x="0" data-offset-y="0">i tem1 <b>flex-start</b></div>
360 <div class="item verticalRL flexEnd" data-offset-x="75" data-offset-y="225"> item2 <b>flex-end</b></div>
361 <div class="item verticalRL start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
362 <div class="item verticalRL end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
363 <div class="item verticalRL selfStart" data-offset-x="300" data-offset-y="0" >item5 <b>self-start</b></div>
364 <div class="item verticalRL selfEnd" data-offset-x="375" data-offset-y="225" >item6 <b>self-end</b></div>
365 <div class="item verticalRL left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
366 <div class="item verticalRL right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
367 </div>
368
369 <!-- This is equivalent to the case using same writin-mode -->
370 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-dire ction: <b>row-reverse</b> | flex-wrap: <b>wrap</b></p>
371 <div class="flexbox rowReverse wrap">
372 <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="0" >item1 <b>flex-start</b></div>
373 <div class="item verticalRL flexEnd" data-offset-x="450" data-offset-y="225" >item2 <b>flex-end</b></div>
374 <div class="item verticalRL start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
375 <div class="item verticalRL end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
376 <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="0" >item5 <b>self-start</b></div>
377 <div class="item verticalRL selfEnd" data-offset-x="150" data-offset-y="225" >item6 <b>self-end</b></div>
378 <div class="item verticalRL left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
379 <div class="item verticalRL right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
380 </div>
381
382 <!-- This is equivalent to the case using same writin-mode -->
ikilpatrick 2015/08/02 23:15:37 s/writin/writing & elsewhere.
383 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-dire ction: <b>row</b> | flex-wrap: <b>wrap-reverse</b></p>
384 <div class="flexbox wrap-reverse">
385 <div class="item verticalRL flexStart" data-offset-x="0" data-offset-y="225" >item1 <b>flex-start</b></div>
386 <div class="item verticalRL flexEnd" data-offset-x="75" data-offset-y="0">it em2 <b>flex-end</b></div>
387 <div class="item verticalRL start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
388 <div class="item verticalRL end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
389 <div class="item verticalRL selfStart" data-offset-x="300" data-offset-y="0" >item5 <b>self-start</b></div>
390 <div class="item verticalRL selfEnd" data-offset-x="375" data-offset-y="225" >item6 <b>self-end</b></div>
391 <div class="item verticalRL left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
392 <div class="item verticalRL right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
393 </div>
394
395 <!-- This is equivalent to the case using same writin-mode -->
396 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-flow : <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
397 <div class="flexbox rowReverse wrapReverse">
398 <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="22 5">item1 <b>flex-start</b></div>
399 <div class="item verticalRL flexEnd" data-offset-x="450" data-offset-y="0">i tem2 <b>flex-end</b></div>
400 <div class="item verticalRL start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
401 <div class="item verticalRL end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
402 <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="0" >item5 <b>self-start</b></div>
403 <div class="item verticalRL selfEnd" data-offset-x="150" data-offset-y="225" >item6 <b>self-end</b></div>
404 <div class="item verticalRL left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
405 <div class="item verticalRL right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
406 </div>
407
408 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-dire ction: <b>column</b> | flex-wrap: <b>wrap</b></p>
409 <div class="flexbox column wrap">
410 <div class="item verticalRL flexStart" data-offset-x="0" data-offset-y="0">i tem1 <b>flex-start</b></div>
411 <div class="item verticalRL flexEnd" data-offset-x="225" data-offset-y="75"> item2 <b>flex-end</b></div>
412 <div class="item verticalRL start" data-offset-x="0" data-offset-y="150">ite m3 <b>start</b></div>
413 <div class="item verticalRL end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
414 <div class="item verticalRL selfStart" data-offset-x="525" data-offset-y="0" >item5 <b>self-start</b></div>
415 <div class="item verticalRL selfEnd" data-offset-x="300" data-offset-y="75"> item6 <b>self-end</b></div>
416 <div class="item verticalRL left" data-offset-x="300" data-offset-y="150">it em7 <b>left</b></div>
417 <div class="item verticalRL right" data-offset-x="525" data-offset-y="225">i tem8 <b>right</b></div>
418 </div>
419
420 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-dire ction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
421 <div class="flexbox column wrapReverse">
422 <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="0" >item1 <b>flex-start</b></div>
423 <div class="item verticalRL flexEnd" data-offset-x="300" data-offset-y="75"> item2 <b>flex-end</b></div>
424 <div class="item verticalRL start" data-offset-x="300" data-offset-y="150">i tem3 <b>start</b></div>
425 <div class="item verticalRL end" data-offset-x="525" data-offset-y="225">ite m4 <b>end</b></div>
426 <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="0" >item5 <b>self-start</b></div>
427 <div class="item verticalRL selfEnd" data-offset-x="0" data-offset-y="75">it em6 <b>self-end</b></div>
428 <div class="item verticalRL left" data-offset-x="0" data-offset-y="150">item 7 <b>left</b></div>
429 <div class="item verticalRL right" data-offset-x="225" data-offset-y="225">i tem8 <b>right</b></div>
430 </div>
431
432 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-dire ction: <b>column-reverse</b> | flex-wrap: <b>wrap</b></p>
433 <div class="flexbox columnReverse wrap">
434 <div class="item verticalRL flexStart" data-offset-x="0" data-offset-y="225" >item1 <b>flex-start</b></div>
435 <div class="item verticalRL flexEnd" data-offset-x="225" data-offset-y="150" >item2 <b>flex-end</b></div>
436 <div class="item verticalRL start" data-offset-x="0" data-offset-y="75">item 3 <b>start</b></div>
437 <div class="item verticalRL end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
438 <div class="item verticalRL selfStart" data-offset-x="525" data-offset-y="22 5">item5 <b>self-start</b></div>
439 <div class="item verticalRL selfEnd" data-offset-x="300" data-offset-y="150" >item6 <b>self-end</b></div>
440 <div class="item verticalRL left" data-offset-x="300" data-offset-y="75">ite m7 <b>left</b></div>
441 <div class="item verticalRL right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
442 </div>
443
444 <p>flexbox: <b>horizontal-tb LTR</b> | items: <b>vertical-rl LTR</b> | flex-dire ction: <b>column-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
445 <div class="flexbox columnReverse wrapReverse">
446 <div class="item verticalRL flexStart" data-offset-x="525" data-offset-y="22 5">item1 <b>flex-start</b></div>
447 <div class="item verticalRL flexEnd" data-offset-x="300" data-offset-y="150" >item2 <b>flex-end</b></div>
448 <div class="item verticalRL start" data-offset-x="300" data-offset-y="75">it em3 <b>start</b></div>
449 <div class="item verticalRL end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
450 <div class="item verticalRL selfStart" data-offset-x="225" data-offset-y="22 5">item5 <b>self-start</b></div>
451 <div class="item verticalRL selfEnd" data-offset-x="0" data-offset-y="150">i tem6 <b>self-end</b></div>
452 <div class="item verticalRL left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
453 <div class="item verticalRL right" data-offset-x="225" data-offset-y="0">ite m8 <b>right</b></div>
454 </div>
455
456
457
458 </div>
459 </body>
460 </html>
OLDNEW
« no previous file with comments | « no previous file | Source/core/layout/LayoutFlexibleBox.cpp » ('j') | Source/core/layout/LayoutFlexibleBox.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698