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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/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: Patch rebased and applied suggested changes. Created 5 years 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 | third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-expected.txt » ('j') | third_party/WebKit/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 .horizontalTB { -webkit-writing-mode: horizontal-tb; }
cbiesinger 2015/12/01 00:12:49 no need for the -webkit- prefix
20 .horizontalBT { -webkit-writing-mode: horizontal-bt; }
cbiesinger 2015/12/01 00:12:49 hasn't this one been removed?
21 .verticalLR { -webkit-writing-mode: vertical-lr; }
22 .verticalRL { -webkit-writing-mode: vertical-rl; }
23 .directionLTR { direction: ltr; }
24 .directionRTL { direction: rtl; }
25
26 .flexbox > :nth-child(1) { background-color: #FCC; }
27 .flexbox > :nth-child(2) { background-color: #CFC; }
28 .flexbox > :nth-child(3) { background-color: #CCF; }
29 .flexbox > :nth-child(4) { background-color: #C99; }
30 .flexbox > :nth-child(5) { background-color: #9C9; }
31 .flexbox > :nth-child(6) { background-color: #99C; }
32 .flexbox > :nth-child(7) { background-color: #FFC; }
33 .flexbox > :nth-child(8) { background-color: #FCF; }
34 </style>
35 <script src="../../resources/check-layout.js"></script>
cbiesinger 2015/12/01 00:12:49 You can now use check-layout-th.js and then don't
36 <body onload="checkLayout('.flexbox')">
37
38 <p>This test checks that the CSS Box Alignment new values work as expected when used in align-self property.</p>
39
40 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>row</b> | fl ex-wrap: <b>wrap</b></p>
41 <div class="flexbox wrap">
42 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0"> item1 <b>flex-start</b></div>
43 <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="225" >item2 <b>flex-end</b></div>
44 <div class="item align-self-start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
45 <div class="item align-self-end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
46 <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0 ">item5 <b>self-start</b></div>
47 <div class="item align-self-self-end" data-offset-x="375" data-offset-y="225 ">item6 <b>self-end</b></div>
48 <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
49 <div class="item align-self-right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
50 </div>
51
52 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>row-reverse< /b> | flex-wrap: <b>wrap</b></p>
53 <div class="flexbox row-reverse wrap">
54 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0 ">item1 <b>flex-start</b></div>
55 <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="225 ">item2 <b>flex-end</b></div>
56 <div class="item align-self-start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
57 <div class="item align-self-end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
58 <div class="item align-self-self-start" data-offset-x="225" data-offset-y="0 ">item5 <b>self-start</b></div>
59 <div class="item align-self-self-end" data-offset-x="150" data-offset-y="225 ">item6 <b>self-end</b></div>
60 <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
61 <div class="item align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
62 </div>
63
64 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-flow: <b>row</b> | flex-wr ap: <b>wrap-reverse</b></p>
65 <div class="flexbox wrap-reverse">
66 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225 ">item1 <b>flex-start</b></div>
67 <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="0">i tem2 <b>flex-end</b></div>
68 <div class="item align-self-start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
69 <div class="item align-self-end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
70 <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0 ">item5 <b>self-start</b></div>
71 <div class="item align-self-self-end" data-offset-x="375" data-offset-y="225 ">item6 <b>self-end</b></div>
72 <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
73 <div class="item align-self-right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
74 </div>
75
76 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-flow: <b>row-reverse</b> | flex-wrap: <b>wrap-reverse</b></p>
77 <div class="flexbox row-reverse wrap-reverse">
78 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="2 25">item1 <b>flex-start</b></div>
79 <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="0"> item2 <b>flex-end</b></div>
80 <div class="item align-self-start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
81 <div class="item align-self-end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
82 <div class="item align-self-self-start" data-offset-x="225" data-offset-y="0 ">item5 <b>self-start</b></div>
83 <div class="item align-self-self-end" data-offset-x="150" data-offset-y="225 ">item6 <b>self-end</b></div>
84 <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
85 <div class="item align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
86 </div>
87
88 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
89 <div class="flexbox column wrap">
90 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0"> item1 <b>flex-start</b></div>
91 <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="75" >item2 <b>flex-end</b></div>
92 <div class="item align-self-start" data-offset-x="0" data-offset-y="150">ite m3 <b>start</b></div>
93 <div class="item align-self-end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
94 <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0 ">item5 <b>self-start</b></div>
95 <div class="item align-self-self-end" data-offset-x="525" data-offset-y="75" >item6 <b>self-end</b></div>
96 <div class="item align-self-left" data-offset-x="300" data-offset-y="150">it em7 <b>left</b></div>
97 <div class="item align-self-right" data-offset-x="525" data-offset-y="225">i tem8 <b>right</b></div>
98 </div>
99
100 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
101 <div class="flexbox column wrap-reverse">
102 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0 ">item1 <b>flex-start</b></div>
103 <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="75" >item2 <b>flex-end</b></div>
104 <div class="item align-self-start" data-offset-x="300" data-offset-y="150">i tem3 <b>start</b></div>
105 <div class="item align-self-end" data-offset-x="525" data-offset-y="225">ite m4 <b>end</b></div>
106 <div class="item align-self-self-start" data-offset-x="0" data-offset-y="0"> item5 <b>self-start</b></div>
107 <div class="item align-self-self-end" data-offset-x="225" data-offset-y="75" >item6 <b>self-end</b></div>
108 <div class="item align-self-left" data-offset-x="0" data-offset-y="150">item 7 <b>left</b></div>
109 <div class="item align-self-right" data-offset-x="225" data-offset-y="225">i tem8 <b>right</b></div>
110 </div>
111
112 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap</b></p>
113 <div class="flexbox column-reverse wrap">
114 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225 ">item1 <b>flex-start</b></div>
115 <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="150 ">item2 <b>flex-end</b></div>
116 <div class="item align-self-start" data-offset-x="0" data-offset-y="75">item 3 <b>start</b></div>
117 <div class="item align-self-end" data-offset-x="225" data-offset-y="0">item4 <b>end</b></div>
118 <div class="item align-self-self-start" data-offset-x="300" data-offset-y="2 25">item5 <b>self-start</b></div>
119 <div class="item align-self-self-end" data-offset-x="525" data-offset-y="150 ">item6 <b>self-end</b></div>
120 <div class="item align-self-left" data-offset-x="300" data-offset-y="75">ite m7 <b>left</b></div>
121 <div class="item align-self-right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
122 </div>
123
124 <p>flexbox and items: <b>horizontal-tb LTR</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap-reverse</b></p>
125 <div class="flexbox column-reverse wrap-reverse">
126 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="2 25">item1 <b>flex-start</b></div>
127 <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="150 ">item2 <b>flex-end</b></div>
128 <div class="item align-self-start" data-offset-x="300" data-offset-y="75">it em3 <b>start</b></div>
129 <div class="item align-self-end" data-offset-x="525" data-offset-y="0">item4 <b>end</b></div>
130 <div class="item align-self-self-start" data-offset-x="0" data-offset-y="225 ">item5 <b>self-start</b></div>
131 <div class="item align-self-self-end" data-offset-x="225" data-offset-y="150 ">item6 <b>self-end</b></div>
132 <div class="item align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
133 <div class="item align-self-right" data-offset-x="225" data-offset-y="0">ite m8 <b>right</b></div>
134 </div>
135
136 <!-- RTL direction -->
137
138 <!-- this is equivalent to LTR and row-reverse -->
139 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row</b> | fl ex-wrap: <b>wrap</b></p>
140 <div class="flexbox directionRTL wrap">
141 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0 ">item1 <b>flex-start</b></div>
142 <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="225 ">item2 <b>flex-end</b></div>
143 <div class="item align-self-start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
144 <div class="item align-self-end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
145 <div class="item align-self-self-start" data-offset-x="225" data-offset-y="0 ">item5 <b>self-start</b></div>
146 <div class="item align-self-self-end" data-offset-x="150" data-offset-y="225 ">item6 <b>self-end</b></div>
147 <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
148 <div class="item align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
149 </div>
150
151 <!-- this is equivalent to LTR and row -->
152 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row-reverse< /b> | flex-wrap: <b>wrap</b></p>
153 <div class="flexbox directionRTL row-reverse wrap">
154 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0"> item1 <b>flex-start</b></div>
155 <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="225" >item2 <b>flex-end</b></div>
156 <div class="item align-self-start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
157 <div class="item align-self-end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
158 <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0 ">item5 <b>self-start</b></div>
159 <div class="item align-self-self-end" data-offset-x="375" data-offset-y="225 ">item6 <b>self-end</b></div>
160 <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
161 <div class="item align-self-right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
162 </div>
163
164 <!-- this is equivalent to LTR and row-reverse -->
165 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-flow: <b>row</b> | flex-wr ap: <b>wrap-reverse</b></p>
166 <div class="flexbox directionRTL wrap-reverse">
167 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="2 25">item1 <b>flex-start</b></div>
168 <div class="item align-self-flex-end" data-offset-x="450" data-offset-y="0"> item2 <b>flex-end</b></div>
169 <div class="item align-self-start" data-offset-x="375" data-offset-y="0">ite m3 <b>start</b></div>
170 <div class="item align-self-end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
171 <div class="item align-self-self-start" data-offset-x="225" data-offset-y="0 ">item5 <b>self-start</b></div>
172 <div class="item align-self-self-end" data-offset-x="150" data-offset-y="225 ">item6 <b>self-end</b></div>
173 <div class="item align-self-left" data-offset-x="75" data-offset-y="0">item7 <b>left</b></div>
174 <div class="item align-self-right" data-offset-x="0" data-offset-y="0">item8 <b>right</b></div>
175 </div>
176
177 <!-- this is equivalent to LTR and row -->
178 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>row-reverse< /b> | flex-wrap: <b>wrap-reverse</b></p>
179 <div class="flexbox directionRTL row-reverse wrap-reverse">
180 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225 ">item1 <b>flex-start</b></div>
181 <div class="item align-self-flex-end" data-offset-x="75" data-offset-y="0">i tem2 <b>flex-end</b></div>
182 <div class="item align-self-start" data-offset-x="150" data-offset-y="0">ite m3 <b>start</b></div>
183 <div class="item align-self-end" data-offset-x="225" data-offset-y="225">ite m4 <b>end</b></div>
184 <div class="item align-self-self-start" data-offset-x="300" data-offset-y="0 ">item5 <b>self-start</b></div>
185 <div class="item align-self-self-end" data-offset-x="375" data-offset-y="225 ">item6 <b>self-end</b></div>
186 <div class="item align-self-left" data-offset-x="450" data-offset-y="0">item 7 <b>left</b></div>
187 <div class="item align-self-right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
188 </div>
189
190 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap</b></p>
191 <div class="flexbox directionRTL column wrap">
192 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="0 ">item1 <b>flex-start</b></div>
193 <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="75" >item2 <b>flex-end</b></div>
194 <div class="item align-self-start" data-offset-x="525" data-offset-y="150">i tem3 <b>start</b></div>
195 <div class="item align-self-end" data-offset-x="300" data-offset-y="225">ite m4 <b>end</b></div>
196 <div class="item align-self-self-start" data-offset-x="225" data-offset-y="0 ">item5 <b>self-start</b></div>
197 <div class="item align-self-self-end" data-offset-x="0" data-offset-y="75">i tem6 <b>self-end</b></div>
198 <div class="item align-self-left" data-offset-x="0" data-offset-y="150">item 7 <b>left</b></div>
199 <div class="item align-self-right" data-offset-x="225" data-offset-y="225">i tem8 <b>right</b></div>
200 </div>
201
202 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column</b> | flex-wrap: <b>wrap-reverse</b></p>
203 <div class="flexbox directionRTL column wrap-reverse">
204 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="0"> item1 <b>flex-start</b></div>
205 <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="75" >item2 <b>flex-end</b></div>
206 <div class="item align-self-start" data-offset-x="225" data-offset-y="150">i tem3 <b>start</b></div>
207 <div class="item align-self-end" data-offset-x="0" data-offset-y="225">item4 <b>end</b></div>
208 <div class="item align-self-self-start" data-offset-x="525" data-offset-y="0 ">item5 <b>self-start</b></div>
209 <div class="item align-self-self-end" data-offset-x="300" data-offset-y="75" >item6 <b>self-end</b></div>
210 <div class="item align-self-left" data-offset-x="300" data-offset-y="150">it em7 <b>left</b></div>
211 <div class="item align-self-right" data-offset-x="525" data-offset-y="225">i tem8 <b>right</b></div>
212 </div>
213
214 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap</b></p>
215 <div class="flexbox directionRTL column-reverse wrap">
216 <div class="item align-self-flex-start" data-offset-x="525" data-offset-y="2 25">item1 <b>flex-start</b></div>
217 <div class="item align-self-flex-end" data-offset-x="300" data-offset-y="150 ">item2 <b>flex-end</b></div>
218 <div class="item align-self-start" data-offset-x="525" data-offset-y="75">it em3 <b>start</b></div>
219 <div class="item align-self-end" data-offset-x="300" data-offset-y="0">item4 <b>end</b></div>
220 <div class="item align-self-self-start" data-offset-x="225" data-offset-y="2 25">item5 <b>self-start</b></div>
221 <div class="item align-self-self-end" data-offset-x="0" data-offset-y="150"> item6 <b>self-end</b></div>
222 <div class="item align-self-left" data-offset-x="0" data-offset-y="75">item7 <b>left</b></div>
223 <div class="item align-self-right" data-offset-x="225" data-offset-y="0">ite m8 <b>right</b></div>
224 </div>
225
226 <p>flexbox and items: <b>horizontal-tb RTL</b> | flex-direction: <b>column-rever se</b> | flex-wrap: <b>wrap-reverse</b></p>
227 <div class="flexbox directionRTL column-reverse wrap-reverse">
228 <div class="item align-self-flex-start" data-offset-x="0" data-offset-y="225 ">item1 <b>flex-start</b></div>
229 <div class="item align-self-flex-end" data-offset-x="225" data-offset-y="150 ">item2 <b>flex-end</b></div>
230 <div class="item align-self-start" data-offset-x="225" data-offset-y="75">it em3 <b>start</b></div>
231 <div class="item align-self-end" data-offset-x="0" data-offset-y="0">item4 < b>end</b></div>
232 <div class="item align-self-self-start" data-offset-x="525" data-offset-y="2 25">item5 <b>self-start</b></div>
233 <div class="item align-self-self-end" data-offset-x="300" data-offset-y="150 ">item6 <b>self-end</b></div>
234 <div class="item align-self-left" data-offset-x="300" data-offset-y="75">ite m7 <b>left</b></div>
235 <div class="item align-self-right" data-offset-x="525" data-offset-y="0">ite m8 <b>right</b></div>
236 </div>
237
238 <!-- Orthogonal writing-modes (vertical-LR should not affect alignment results, since it shares edges with LTR direction)-->
239
240 <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>
241 <div class="flexbox wrap">
242 <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-of fset-y="0">item1 <b>flex-start</b></div>
243 <div class="item verticalLR align-self-flex-end" data-offset-x="75" data-off set-y="225">item2 <b>flex-end</b></div>
244 <div class="item verticalLR align-self-start" data-offset-x="150" data-offse t-y="0">item3 <b>start</b></div>
245 <div class="item verticalLR align-self-end" data-offset-x="225" data-offset- y="225">item4 <b>end</b></div>
246 <div class="item verticalLR align-self-self-start" data-offset-x="300" data- offset-y="0">item5 <b>self-start</b></div>
247 <div class="item verticalLR align-self-self-end" data-offset-x="375" data-of fset-y="225">item6 <b>self-end</b></div>
248 <div class="item verticalLR align-self-left" data-offset-x="450" data-offset -y="0">item7 <b>left</b></div>
249 <div class="item verticalLR align-self-right" data-offset-x="525" data-offse t-y="0">item8 <b>right</b></div>
250 </div>
251
252 <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>
253 <div class="flexbox row-reverse wrap">
254 <div class="item verticalLR align-self-flex-start" data-offset-x="525" data- offset-y="0">item1 <b>flex-start</b></div>
255 <div class="item verticalLR align-self-flex-end" data-offset-x="450" data-of fset-y="225">item2 <b>flex-end</b></div>
256 <div class="item verticalLR align-self-start" data-offset-x="375" data-offse t-y="0">item3 <b>start</b></div>
257 <div class="item verticalLR align-self-end" data-offset-x="300" data-offset- y="225">item4 <b>end</b></div>
258 <div class="item verticalLR align-self-self-start" data-offset-x="225" data- offset-y="0">item5 <b>self-start</b></div>
259 <div class="item verticalLR align-self-self-end" data-offset-x="150" data-of fset-y="225">item6 <b>self-end</b></div>
260 <div class="item verticalLR align-self-left" data-offset-x="75" data-offset- y="0">item7 <b>left</b></div>
261 <div class="item verticalLR align-self-right" data-offset-x="0" data-offset- y="0">item8 <b>right</b></div>
262 </div>
263
264 <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>
265 <div class="flexbox wrap-reverse">
266 <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-of fset-y="225">item1 <b>flex-start</b></div>
267 <div class="item verticalLR align-self-flex-end" data-offset-x="75" data-off set-y="0">item2 <b>flex-end</b></div>
268 <div class="item verticalLR align-self-start" data-offset-x="150" data-offse t-y="0">item3 <b>start</b></div>
269 <div class="item verticalLR align-self-end" data-offset-x="225" data-offset- y="225">item4 <b>end</b></div>
270 <div class="item verticalLR align-self-self-start" data-offset-x="300" data- offset-y="0">item5 <b>self-start</b></div>
271 <div class="item verticalLR align-self-self-end" data-offset-x="375" data-of fset-y="225">item6 <b>self-end</b></div>
272 <div class="item verticalLR align-self-left" data-offset-x="450" data-offset -y="0">item7 <b>left</b></div>
273 <div class="item verticalLR align-self-right" data-offset-x="525" data-offse t-y="0">item8 <b>right</b></div>
274 </div>
275
276 <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>
277 <div class="flexbox row-reverse wrap-reverse">
278 <div class="item verticalLR align-self-flex-start" data-offset-x="525" data- offset-y="225">item1 <b>flex-start</b></div>
279 <div class="item verticalLR align-self-flex-end" data-offset-x="450" data-of fset-y="0">item2 <b>flex-end</b></div>
280 <div class="item verticalLR align-self-start" data-offset-x="375" data-offse t-y="0">item3 <b>start</b></div>
281 <div class="item verticalLR align-self-end" data-offset-x="300" data-offset- y="225">item4 <b>end</b></div>
282 <div class="item verticalLR align-self-self-start" data-offset-x="225" data- offset-y="0">item5 <b>self-start</b></div>
283 <div class="item verticalLR align-self-self-end" data-offset-x="150" data-of fset-y="225">item6 <b>self-end</b></div>
284 <div class="item verticalLR align-self-left" data-offset-x="75" data-offset- y="0">item7 <b>left</b></div>
285 <div class="item verticalLR align-self-right" data-offset-x="0" data-offset- y="0">item8 <b>right</b></div>
286 </div>
287
288 <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>
289 <div class="flexbox column wrap">
290 <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-of fset-y="0">item1 <b>flex-start</b></div>
291 <div class="item verticalLR align-self-flex-end" data-offset-x="225" data-of fset-y="75">item2 <b>flex-end</b></div>
292 <div class="item verticalLR align-self-start" data-offset-x="0" data-offset- y="150">item3 <b>start</b></div>
293 <div class="item verticalLR align-self-end" data-offset-x="225" data-offset- y="225">item4 <b>end</b></div>
294 <div class="item verticalLR align-self-self-start" data-offset-x="300" data- offset-y="0">item5 <b>self-start</b></div>
295 <div class="item verticalLR align-self-self-end" data-offset-x="525" data-of fset-y="75">item6 <b>self-end</b></div>
296 <div class="item verticalLR align-self-left" data-offset-x="300" data-offset -y="150">item7 <b>left</b></div>
297 <div class="item verticalLR align-self-right" data-offset-x="525" data-offse t-y="225">item8 <b>right</b></div>
298 </div>
299
300 <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>
301 <div class="flexbox column wrap-reverse">
302 <div class="item verticalLR align-self-flex-start" data-offset-x="525" data- offset-y="0">item1 <b>flex-start</b></div>
303 <div class="item verticalLR align-self-flex-end" data-offset-x="300" data-of fset-y="75">item2 <b>flex-end</b></div>
304 <div class="item verticalLR align-self-start" data-offset-x="300" data-offse t-y="150">item3 <b>start</b></div>
305 <div class="item verticalLR align-self-end" data-offset-x="525" data-offset- y="225">item4 <b>end</b></div>
306 <div class="item verticalLR align-self-self-start" data-offset-x="0" data-of fset-y="0">item5 <b>self-start</b></div>
307 <div class="item verticalLR align-self-self-end" data-offset-x="225" data-of fset-y="75">item6 <b>self-end</b></div>
308 <div class="item verticalLR align-self-left" data-offset-x="0" data-offset-y ="150">item7 <b>left</b></div>
309 <div class="item verticalLR align-self-right" data-offset-x="225" data-offse t-y="225">item8 <b>right</b></div>
310 </div>
311
312 <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>
313 <div class="flexbox column-reverse wrap">
314 <div class="item verticalLR align-self-flex-start" data-offset-x="0" data-of fset-y="225">item1 <b>flex-start</b></div>
315 <div class="item verticalLR align-self-flex-end" data-offset-x="225" data-of fset-y="150">item2 <b>flex-end</b></div>
316 <div class="item verticalLR align-self-start" data-offset-x="0" data-offset- y="75">item3 <b>start</b></div>
317 <div class="item verticalLR align-self-end" data-offset-x="225" data-offset- y="0">item4 <b>end</b></div>
318 <div class="item verticalLR align-self-self-start" data-offset-x="300" data- offset-y="225">item5 <b>self-start</b></div>
319 <div class="item verticalLR align-self-self-end" data-offset-x="525" data-of fset-y="150">item6 <b>self-end</b></div>
320 <div class="item verticalLR align-self-left" data-offset-x="300" data-offset -y="75">item7 <b>left</b></div>
321 <div class="item verticalLR align-self-right" data-offset-x="525" data-offse t-y="0">item8 <b>right</b></div>
322 </div>
323
324 <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>
325 <div class="flexbox column-reverse wrap-reverse">
326 <div class="item verticalLR align-self-flex-start" data-offset-x="525" data- offset-y="225">item1 <b>flex-start</b></div>
327 <div class="item verticalLR align-self-flex-end" data-offset-x="300" data-of fset-y="150">item2 <b>flex-end</b></div>
328 <div class="item verticalLR align-self-start" data-offset-x="300" data-offse t-y="75">item3 <b>start</b></div>
329 <div class="item verticalLR align-self-end" data-offset-x="525" data-offset- y="0">item4 <b>end</b></div>
330 <div class="item verticalLR align-self-self-start" data-offset-x="0" data-of fset-y="225">item5 <b>self-start</b></div>
331 <div class="item verticalLR align-self-self-end" data-offset-x="225" data-of fset-y="150">item6 <b>self-end</b></div>
332 <div class="item verticalLR align-self-left" data-offset-x="0" data-offset-y ="75">item7 <b>left</b></div>
333 <div class="item verticalLR align-self-right" data-offset-x="225" data-offse t-y="0">item8 <b>right</b></div>
334 </div>
335
336 <!-- Orthogonal writing-modes (vertical-RL it will affect how self-start/end are determined, but only when using column flow) -->
337
338 <!-- This is equivalent to the case using same writing-mode -->
339 <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>
340 <div class="flexbox wrap">
341 <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-of fset-y="0">item1 <b>flex-start</b></div>
342 <div class="item verticalRL align-self-flex-end" data-offset-x="75" data-off set-y="225">item2 <b>flex-end</b></div>
343 <div class="item verticalRL align-self-start" data-offset-x="150" data-offse t-y="0">item3 <b>start</b></div>
344 <div class="item verticalRL align-self-end" data-offset-x="225" data-offset- y="225">item4 <b>end</b></div>
345 <div class="item verticalRL align-self-self-start" data-offset-x="300" data- offset-y="0">item5 <b>self-start</b></div>
346 <div class="item verticalRL align-self-self-end" data-offset-x="375" data-of fset-y="225">item6 <b>self-end</b></div>
347 <div class="item verticalRL align-self-left" data-offset-x="450" data-offset -y="0">item7 <b>left</b></div>
348 <div class="item verticalRL align-self-right" data-offset-x="525" data-offse t-y="0">item8 <b>right</b></div>
349 </div>
350
351 <!-- This is equivalent to the case using same writing-mode -->
352 <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>
353 <div class="flexbox row-reverse wrap">
354 <div class="item verticalRL align-self-flex-start" data-offset-x="525" data- offset-y="0">item1 <b>flex-start</b></div>
355 <div class="item verticalRL align-self-flex-end" data-offset-x="450" data-of fset-y="225">item2 <b>flex-end</b></div>
356 <div class="item verticalRL align-self-start" data-offset-x="375" data-offse t-y="0">item3 <b>start</b></div>
357 <div class="item verticalRL align-self-end" data-offset-x="300" data-offset- y="225">item4 <b>end</b></div>
358 <div class="item verticalRL align-self-self-start" data-offset-x="225" data- offset-y="0">item5 <b>self-start</b></div>
359 <div class="item verticalRL align-self-self-end" data-offset-x="150" data-of fset-y="225">item6 <b>self-end</b></div>
360 <div class="item verticalRL align-self-left" data-offset-x="75" data-offset- y="0">item7 <b>left</b></div>
361 <div class="item verticalRL align-self-right" data-offset-x="0" data-offset- y="0">item8 <b>right</b></div>
362 </div>
363
364 <!-- This is equivalent to the case using same writing-mode -->
365 <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>
366 <div class="flexbox wrap-reverse">
367 <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-of fset-y="225">item1 <b>flex-start</b></div>
368 <div class="item verticalRL align-self-flex-end" data-offset-x="75" data-off set-y="0">item2 <b>flex-end</b></div>
369 <div class="item verticalRL align-self-start" data-offset-x="150" data-offse t-y="0">item3 <b>start</b></div>
370 <div class="item verticalRL align-self-end" data-offset-x="225" data-offset- y="225">item4 <b>end</b></div>
371 <div class="item verticalRL align-self-self-start" data-offset-x="300" data- offset-y="0">item5 <b>self-start</b></div>
372 <div class="item verticalRL align-self-self-end" data-offset-x="375" data-of fset-y="225">item6 <b>self-end</b></div>
373 <div class="item verticalRL align-self-left" data-offset-x="450" data-offset -y="0">item7 <b>left</b></div>
374 <div class="item verticalRL align-self-right" data-offset-x="525" data-offse t-y="0">item8 <b>right</b></div>
375 </div>
376
377 <!-- This is equivalent to the case using same writing-mode -->
378 <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>
379 <div class="flexbox row-reverse wrap-reverse">
380 <div class="item verticalRL align-self-flex-start" data-offset-x="525" data- offset-y="225">item1 <b>flex-start</b></div>
381 <div class="item verticalRL align-self-flex-end" data-offset-x="450" data-of fset-y="0">item2 <b>flex-end</b></div>
382 <div class="item verticalRL align-self-start" data-offset-x="375" data-offse t-y="0">item3 <b>start</b></div>
383 <div class="item verticalRL align-self-end" data-offset-x="300" data-offset- y="225">item4 <b>end</b></div>
384 <div class="item verticalRL align-self-self-start" data-offset-x="225" data- offset-y="0">item5 <b>self-start</b></div>
385 <div class="item verticalRL align-self-self-end" data-offset-x="150" data-of fset-y="225">item6 <b>self-end</b></div>
386 <div class="item verticalRL align-self-left" data-offset-x="75" data-offset- y="0">item7 <b>left</b></div>
387 <div class="item verticalRL align-self-right" data-offset-x="0" data-offset- y="0">item8 <b>right</b></div>
388 </div>
389
390 <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>
391 <div class="flexbox column wrap">
392 <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-of fset-y="0">item1 <b>flex-start</b></div>
393 <div class="item verticalRL align-self-flex-end" data-offset-x="225" data-of fset-y="75">item2 <b>flex-end</b></div>
394 <div class="item verticalRL align-self-start" data-offset-x="0" data-offset- y="150">item3 <b>start</b></div>
395 <div class="item verticalRL align-self-end" data-offset-x="225" data-offset- y="225">item4 <b>end</b></div>
396 <div class="item verticalRL align-self-self-start" data-offset-x="525" data- offset-y="0">item5 <b>self-start</b></div>
397 <div class="item verticalRL align-self-self-end" data-offset-x="300" data-of fset-y="75">item6 <b>self-end</b></div>
398 <div class="item verticalRL align-self-left" data-offset-x="300" data-offset -y="150">item7 <b>left</b></div>
399 <div class="item verticalRL align-self-right" data-offset-x="525" data-offse t-y="225">item8 <b>right</b></div>
400 </div>
401
402 <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>
403 <div class="flexbox column wrap-reverse">
404 <div class="item verticalRL align-self-flex-start" data-offset-x="525" data- offset-y="0">item1 <b>flex-start</b></div>
405 <div class="item verticalRL align-self-flex-end" data-offset-x="300" data-of fset-y="75">item2 <b>flex-end</b></div>
406 <div class="item verticalRL align-self-start" data-offset-x="300" data-offse t-y="150">item3 <b>start</b></div>
407 <div class="item verticalRL align-self-end" data-offset-x="525" data-offset- y="225">item4 <b>end</b></div>
408 <div class="item verticalRL align-self-self-start" data-offset-x="225" data- offset-y="0">item5 <b>self-start</b></div>
409 <div class="item verticalRL align-self-self-end" data-offset-x="0" data-offs et-y="75">item6 <b>self-end</b></div>
410 <div class="item verticalRL align-self-left" data-offset-x="0" data-offset-y ="150">item7 <b>left</b></div>
411 <div class="item verticalRL align-self-right" data-offset-x="225" data-offse t-y="225">item8 <b>right</b></div>
412 </div>
413
414 <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>
415 <div class="flexbox column-reverse wrap">
416 <div class="item verticalRL align-self-flex-start" data-offset-x="0" data-of fset-y="225">item1 <b>flex-start</b></div>
417 <div class="item verticalRL align-self-flex-end" data-offset-x="225" data-of fset-y="150">item2 <b>flex-end</b></div>
418 <div class="item verticalRL align-self-start" data-offset-x="0" data-offset- y="75">item3 <b>start</b></div>
419 <div class="item verticalRL align-self-end" data-offset-x="225" data-offset- y="0">item4 <b>end</b></div>
420 <div class="item verticalRL align-self-self-start" data-offset-x="525" data- offset-y="225">item5 <b>self-start</b></div>
421 <div class="item verticalRL align-self-self-end" data-offset-x="300" data-of fset-y="150">item6 <b>self-end</b></div>
422 <div class="item verticalRL align-self-left" data-offset-x="300" data-offset -y="75">item7 <b>left</b></div>
423 <div class="item verticalRL align-self-right" data-offset-x="525" data-offse t-y="0">item8 <b>right</b></div>
424 </div>
425
426 <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>
427 <div class="flexbox column-reverse wrap-reverse">
428 <div class="item verticalRL align-self-flex-start" data-offset-x="525" data- offset-y="225">item1 <b>flex-start</b></div>
429 <div class="item verticalRL align-self-flex-end" data-offset-x="300" data-of fset-y="150">item2 <b>flex-end</b></div>
430 <div class="item verticalRL align-self-start" data-offset-x="300" data-offse t-y="75">item3 <b>start</b></div>
431 <div class="item verticalRL align-self-end" data-offset-x="525" data-offset- y="0">item4 <b>end</b></div>
432 <div class="item verticalRL align-self-self-start" data-offset-x="225" data- offset-y="225">item5 <b>self-start</b></div>
433 <div class="item verticalRL align-self-self-end" data-offset-x="0" data-offs et-y="150">item6 <b>self-end</b></div>
434 <div class="item verticalRL align-self-left" data-offset-x="0" data-offset-y ="75">item7 <b>left</b></div>
435 <div class="item verticalRL align-self-right" data-offset-x="225" data-offse t-y="0">item8 <b>right</b></div>
436 </div>
437
438 </body>
439 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/css3/flexbox/flex-align-new-values-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698