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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Powered by Google App Engine
This is Rietveld 408576698