layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml@deefc01c0e14
layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS 2.1 Test Suite: vertical-align (on an inline-block)</title>
5 <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
8 <meta name="flags" content="" />
9 <meta http-equiv="Content-Style-Type" content="text/css" />
10 <style type="text/css"><![CDATA[
12 body { width: 500px; height: 500px; margin: 0; position: relative; }
13 body > div { position: absolute; width: 500px; }
15 b { display:inline-block; height: 50px; width: 1px; background:green; }
17 ]]></style>
18 </head>
19 <body>
21 <!--
23 The basic structure of this test is that each passing item will create
24 a box 1 pixel wide and 50px tall (stretching from 100px to 150px from
25 the top of the page). Together these items will line up to form a
26 rectangle.
28 This test only tests the 'top', 'bottom', 'text-top', 'text-bottom',
29 'baseline', <length>, and <percentage> values of 'vertical-align'. It
30 does not test 'sub', 'super', or 'middle', and it does not test
31 anything relative to actual font metrics.
33 -->
35 <!-- vertical-align: top -->
37 <div style="top: 100px; left: 0;">
38 <b style="vertical-align:top"></b>
39 </div>
41 <div style="top: 100px; left: 1px;">
42 <b style="vertical-align:top"></b>
43 <span style="visibility:hidden; font-size: 10px;">text</span>
44 </div>
46 <div style="top: 100px; left: 2px;">
47 <b style="vertical-align:top"></b>
48 <span style="visibility:hidden; font-size: 100px;">text</span>
49 </div>
51 <div style="top: 100px; right: 496px; text-align: right;">
52 <span style="visibility:hidden; font-size: 10px;">text</span>
53 <b style="vertical-align:top"></b>
54 </div>
56 <div style="top: 100px; right: 495px; text-align: right;">
57 <span style="visibility:hidden; font-size: 100px;">text</span>
58 <b style="vertical-align:top"></b>
59 </div>
61 <!-- Test behavior of the rest of the line when there's a single loose
62 subtree with vertical-align: top. This isn't required by the spec, but
63 test it anyway. -->
65 <div style="top: 100px; left: 5px;">
66 <b style="vertical-align:baseline"></b>
67 <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span>
68 </div>
70 <div style="top: 100px; left: 6px;">
71 <b style="vertical-align:baseline"></b>
72 <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span>
73 </div>
75 <div style="top: 100px; right: 492px; text-align: right;">
76 <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span>
77 <b style="vertical-align:baseline"></b>
78 </div>
80 <div style="top: 100px; right: 491px; text-align: right;">
81 <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span>
82 <b style="vertical-align:baseline"></b>
83 </div>
85 <!-- Test that we align the loose subtree, not just the box (118501) -->
87 <div style="top: 100px; left: 9px;">
88 <span style="font-size: 10px; vertical-align: top"><b></b></span>
89 </div>
91 <div style="top: 100px; left: 10px;">
92 <span style="font-size: 100px; vertical-align: top; line-height: 0;"><b style="vertical-align:text-top"></b></span>
93 </div>
95 <!-- vertical-align: bottom -->
97 <div style="bottom: 350px; left: 11px;">
98 <b style="vertical-align:bottom"></b>
99 </div>
101 <div style="bottom: 350px; left: 12px;">
102 <b style="vertical-align:bottom"></b>
103 <span style="visibility:hidden; font-size: 10px;">text</span>
104 </div>
106 <div style="bottom: 350px; left: 13px;">
107 <b style="vertical-align:bottom"></b>
108 <span style="visibility:hidden; font-size: 100px;">text</span>
109 </div>
111 <div style="bottom: 350px; right: 485px; text-align: right;">
112 <span style="visibility:hidden; font-size: 10px;">text</span>
113 <b style="vertical-align:bottom"></b>
114 </div>
116 <div style="bottom: 350px; right: 484px; text-align: right;">
117 <span style="visibility:hidden; font-size: 100px;">text</span>
118 <b style="vertical-align:bottom"></b>
119 </div>
121 <!-- Test behavior of the rest of the line when there's a single loose
122 subtree with vertical-align: bottom. This isn't required by the spec, but
123 test it anyway. -->
125 <div style="bottom: 350px; left: 16px;">
126 <b style="vertical-align:text-top"></b>
127 <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span>
128 </div>
130 <div style="bottom: 350px; left: 17px;">
131 <b style="vertical-align:text-top"></b>
132 <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span>
133 </div>
135 <div style="bottom: 350px; right: 481px; text-align: right;">
136 <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span>
137 <b style="vertical-align:text-top"></b>
138 </div>
140 <div style="bottom: 350px; right: 480px; text-align: right;">
141 <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span>
142 <b style="vertical-align:text-top"></b>
143 </div>
145 <!-- Test that we align the loose subtree, not just the box (118501) -->
147 <div style="bottom: 350px; left: 20px;">
148 <span style="font-size: 10px; vertical-align: bottom"><b style="vertical-align:text-top"></b></span>
149 </div>
151 <div style="bottom: 350px; left: 21px;">
152 <span style="font-size: 100px; vertical-align: bottom; line-height: 0;"><b style="vertical-align:text-bottom"></b></span>
153 </div>
155 <!-- test top and bottom nested within other things -->
157 <div style="top: 100px; left: 22px;">
158 <span style="font-size: 100px; vertical-align: text-top">
159 <span style="font-size: 10px; vertical-align: text-bottom">
160 <b style="vertical-align:top"></b>
161 </span>
162 </span>
163 </div>
165 <div style="bottom: 350px; left: 23px;">
166 <span style="font-size: 100px; vertical-align: text-bottom">
167 <span style="font-size: 10px; vertical-align: text-top">
168 <b style="vertical-align:bottom"></b>
169 </span>
170 </span>
171 </div>
173 <!-- test top and bottom within the same box -->
175 <div style="top: 100px; left: 24px;">
176 <b style="vertical-align:top"></b
177 ><b style="vertical-align:bottom"></b>
178 </div>
180 <div style="bottom: 350px; left: 26px; font-size: 10px">
181 <b style="vertical-align:bottom"></b
182 ><b style="vertical-align:top"></b
183 ><b style="vertical-align: -10px"></b>
184 </div>
186 <div style="top: 100px; left: 29px; font-size: 10px">
187 <b style="vertical-align: -10px"></b
188 ><b style="vertical-align:top"></b
189 ><b style="vertical-align:bottom"></b>
190 </div>
192 <!-- test vertical-align: length -->
194 <div style="top: 100px; left: 32px; font-size: 10px">
195 <b style="vertical-align: baseline; height: 40px"></b
196 ><b style="vertical-align: 20px; height: 20px"></b
197 ><b style="vertical-align: -10px; height: 10px; margin-left: -2px"></b
198 ><b style="vertical-align: -10px; height: 30px"></b>
199 </div>
201 <!-- test vertical-align: percentage -->
203 <div style="top: 100px; left: 34px; font-size: 10px; line-height: 10px;">
204 <b style="vertical-align: baseline; height: 40px"></b
205 ><b style="vertical-align: 200%; height: 20px"></b
206 ><b style="vertical-align: -25%; height: 10px; margin-left: -2px; line-height: 40px;"></b
207 ><b style="vertical-align: -100%; height: 30px;line-height:10px"></b>
208 </div>
210 <!-- test vertical-align: text-top -->
212 <div style="top: 100px; left: 36px; font-size: 10px; line-height: 2px;">
213 <!-- we're testing:
214 1) that the top of the first b's background is even with the top of
215 the span's background, which is likewise even with the top of the
216 line box (thanks to the b's contribution)
217 2) that the second b (which serves to fill the area under the span)
218 is aligned relative to its parent, not to the line box
219 -->
220 <span style="background:green"
221 ><b style="vertical-align: text-top"></b
222 ><span style="vertical-align: -8px"
223 ><b style="vertical-align: text-top; height: 42px"></b
224 ></span
225 ></span>
226 </div>
228 <!-- test vertical-align: text-bottom -->
230 <div style="bottom: 350px; left: 38px; font-size: 10px; line-height: 2px;">
231 <!-- we're testing:
232 1) that the bottom of the first b's background is even with the bottom of
233 the span's background, which is likewise even with the bottom of the
234 line box (thanks to the b's contribution)
235 2) that the second b (which serves to fill the area under the span)
236 is aligned relative to its parent, not to the line box
237 -->
238 <span style="background:green"
239 ><b style="vertical-align: text-bottom"></b
240 ><span style="vertical-align: 8px"
241 ><b style="vertical-align: text-bottom; height: 42px"></b
242 ></span
243 ></span>
244 </div>
246 </body>
247 </html>
