The Tor Browser / file comparison
comparison: layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml
layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
equal
deleted
inserted
replaced
| -1:000000000000 | 0:c2bd8241b682 |
|---|---|
| 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[ | |
| 11 | |
| 12 body { width: 500px; height: 500px; margin: 0; position: relative; } | |
| 13 body > div { position: absolute; width: 500px; } | |
| 14 | |
| 15 b { display:inline-block; height: 50px; width: 1px; background:green; } | |
| 16 | |
| 17 ]]></style> | |
| 18 </head> | |
| 19 <body> | |
| 20 | |
| 21 <!-- | |
| 22 | |
| 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. | |
| 27 | |
| 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. | |
| 32 | |
| 33 --> | |
| 34 | |
| 35 <!-- vertical-align: top --> | |
| 36 | |
| 37 <div style="top: 100px; left: 0;"> | |
| 38 <b style="vertical-align:top"></b> | |
| 39 </div> | |
| 40 | |
| 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> | |
| 45 | |
| 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> | |
| 50 | |
| 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> | |
| 55 | |
| 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> | |
| 60 | |
| 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. --> | |
| 64 | |
| 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> | |
| 69 | |
| 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> | |
| 74 | |
| 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> | |
| 79 | |
| 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> | |
| 84 | |
| 85 <!-- Test that we align the loose subtree, not just the box (118501) --> | |
| 86 | |
| 87 <div style="top: 100px; left: 9px;"> | |
| 88 <span style="font-size: 10px; vertical-align: top"><b></b></span> | |
| 89 </div> | |
| 90 | |
| 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> | |
| 94 | |
| 95 <!-- vertical-align: bottom --> | |
| 96 | |
| 97 <div style="bottom: 350px; left: 11px;"> | |
| 98 <b style="vertical-align:bottom"></b> | |
| 99 </div> | |
| 100 | |
| 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> | |
| 105 | |
| 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> | |
| 110 | |
| 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> | |
| 115 | |
| 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> | |
| 120 | |
| 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. --> | |
| 124 | |
| 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> | |
| 129 | |
| 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> | |
| 134 | |
| 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> | |
| 139 | |
| 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> | |
| 144 | |
| 145 <!-- Test that we align the loose subtree, not just the box (118501) --> | |
| 146 | |
| 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> | |
| 150 | |
| 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> | |
| 154 | |
| 155 <!-- test top and bottom nested within other things --> | |
| 156 | |
| 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> | |
| 164 | |
| 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> | |
| 172 | |
| 173 <!-- test top and bottom within the same box --> | |
| 174 | |
| 175 <div style="top: 100px; left: 24px;"> | |
| 176 <b style="vertical-align:top"></b | |
| 177 ><b style="vertical-align:bottom"></b> | |
| 178 </div> | |
| 179 | |
| 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> | |
| 185 | |
| 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> | |
| 191 | |
| 192 <!-- test vertical-align: length --> | |
| 193 | |
| 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> | |
| 200 | |
| 201 <!-- test vertical-align: percentage --> | |
| 202 | |
| 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> | |
| 209 | |
| 210 <!-- test vertical-align: text-top --> | |
| 211 | |
| 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> | |
| 227 | |
| 228 <!-- test vertical-align: text-bottom --> | |
| 229 | |
| 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> | |
| 245 | |
| 246 </body> | |
| 247 </html> |
