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