CSS21-t100801-vertical-align.xhtml (8582B)
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="https://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>