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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flexbox-baseline.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: whoops, a > went missing Created 5 years, 8 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/css3/flexbox/flex-property-parsing-expected.txt ('k') | LayoutTests/css3/flexbox/flexbox-overflow-auto.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 .inline-flexbox { 7 .inline-flexbox {
8 display: -webkit-inline-flex; 8 display: inline-flex;
9 background-color: lightgrey; 9 background-color: lightgrey;
10 margin-top: 5px; 10 margin-top: 5px;
11 } 11 }
12 .flexbox { 12 .flexbox {
13 display: -webkit-flex; 13 display: flex;
14 background-color: grey; 14 background-color: grey;
15 margin-top: 10px; 15 margin-top: 10px;
16 } 16 }
17 .column { 17 .column {
18 -webkit-flex-flow: column; 18 flex-flow: column;
19 } 19 }
20 .column-reverse { 20 .column-reverse {
21 -webkit-flex-flow: column-reverse; 21 flex-flow: column-reverse;
22 } 22 }
23 </style> 23 </style>
24 24
25 <body style="position: relative"> 25 <body style="position: relative">
26 26
27 <!-- If any of the flex items on the flex container's first line participate 27 <!-- If any of the flex items on the flex container's first line participate
28 in baseline alignment, the flex container's main-axis baseline is the baseline 28 in baseline alignment, the flex container's main-axis baseline is the baseline
29 of those flex items. --> 29 of those flex items. -->
30 <div> 30 <div>
31 before text 31 before text
32 <div class="inline-flexbox" style="height: 50px;"> 32 <div class="inline-flexbox" style="height: 50px;">
33 <div style="-webkit-align-self: flex-end">below</div> 33 <div style="align-self: flex-end">below</div>
34 <div style="-webkit-align-self: baseline; margin-top: 15px">baseline</div> 34 <div style="align-self: baseline; margin-top: 15px">baseline</div>
35 <div style="-webkit-align-self: flex-start">above</div> 35 <div style="align-self: flex-start">above</div>
36 </div> 36 </div>
37 after text 37 after text
38 </div> 38 </div>
39 39
40 <!-- This flexbox has a baseline flexitem, but it's orthogonal so it doesn't 40 <!-- This flexbox has a baseline flexitem, but it's orthogonal so it doesn't
41 participate in baseline alignment. Instead, the baseline is the first flex 41 participate in baseline alignment. Instead, the baseline is the first flex
42 item's baseline. --> 42 item's baseline. -->
43 <div> 43 <div>
44 before text 44 before text
45 <div class="inline-flexbox" style="height: 40px"> 45 <div class="inline-flexbox" style="height: 40px">
46 <div style="-webkit-align-self: flex-end">baseline</div> 46 <div style="align-self: flex-end">baseline</div>
47 <div style="-webkit-align-self: baseline; -webkit-writing-mode: vertical-rl" ></div> 47 <div style="align-self: baseline; -webkit-writing-mode: vertical-rl"></div>
48 <div style="-webkit-align-self: flex-start">above</div> 48 <div style="align-self: flex-start">above</div>
49 </div> 49 </div>
50 after text 50 after text
51 </div> 51 </div>
52 52
53 <div> 53 <div>
54 before text 54 before text
55 <div class="inline-flexbox"> 55 <div class="inline-flexbox">
56 <h2>h2 baseline</h2> 56 <h2>h2 baseline</h2>
57 <div>above</div> 57 <div>above</div>
58 </div> 58 </div>
(...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after
136 <div style="margin-top: 30px">baseline</div> 136 <div style="margin-top: 30px">baseline</div>
137 </div> 137 </div>
138 after text 138 after text
139 </div> 139 </div>
140 140
141 <!-- We don't participate in baseline alignment if there's an auto margin. --> 141 <!-- We don't participate in baseline alignment if there's an auto margin. -->
142 <div> 142 <div>
143 before text 143 before text
144 <div class="inline-flexbox" style="height: 40px;"> 144 <div class="inline-flexbox" style="height: 40px;">
145 <div>baseline</div> 145 <div>baseline</div>
146 <div style="-webkit-align-self: baseline; margin-top: auto">below</div> 146 <div style="align-self: baseline; margin-top: auto">below</div>
147 </div> 147 </div>
148 after text 148 after text
149 </div> 149 </div>
150 150
151 <div> 151 <div>
152 before text 152 before text
153 <div style="display: inline-block"> 153 <div style="display: inline-block">
154 <div class="inline-flexbox" style="height: 40px;"> 154 <div class="inline-flexbox" style="height: 40px;">
155 <div>above</div> 155 <div>above</div>
156 <div style="-webkit-align-self: baseline; margin-top: 10px">baseline</div> 156 <div style="align-self: baseline; margin-top: 10px">baseline</div>
157 <div>above</div> 157 <div>above</div>
158 </div> 158 </div>
159 after 159 after
160 </div> 160 </div>
161 text 161 text
162 </div> 162 </div>
163 163
164 <!-- The spec is a little unclear what should happen here. For now, align to 164 <!-- The spec is a little unclear what should happen here. For now, align to
165 the last line box. --> 165 the last line box. -->
166 <div> 166 <div>
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
198 <h2>h2 baseline</h2> 198 <h2>h2 baseline</h2>
199 <div>above</div> 199 <div>above</div>
200 </div></td> 200 </div></td>
201 </table> 201 </table>
202 202
203 <!-- If a box contributing a baseline has a scrollbar, the box must be treated 203 <!-- If a box contributing a baseline has a scrollbar, the box must be treated
204 as being in its initial scroll position when computing the baseline. --> 204 as being in its initial scroll position when computing the baseline. -->
205 <div> 205 <div>
206 before text 206 before text
207 <div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; wid th: 150px"> 207 <div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; wid th: 150px">
208 <div id="flexitem-with-scrollbar" style="-webkit-align-self: baseline; paddi ng-top: 15px; height: 50px; overflow-y: scroll;"> 208 <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
209 The baseline is based on<br> 209 The baseline is based on<br>
210 the non-scrolled position;<br> 210 the non-scrolled position;<br>
211 this won't line up. 211 this won't line up.
212 </div> 212 </div>
213 </div> 213 </div>
214 after text 214 after text
215 </div> 215 </div>
216 216
217 </div> 217 </div>
218 218
219 <script> 219 <script>
220 document.getElementById("flexitem-with-scrollbar").scrollTop = 999; 220 document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
221 document.getElementById("flexbox-with-scrollbar").style.width = "auto"; 221 document.getElementById("flexbox-with-scrollbar").style.width = "auto";
222 </script> 222 </script>
223 223
224 </body> 224 </body>
225 </html> 225 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/flex-property-parsing-expected.txt ('k') | LayoutTests/css3/flexbox/flexbox-overflow-auto.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698