1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,247 @@
1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1.5 +<html xmlns="http://www.w3.org/1999/xhtml">
1.6 + <head>
1.7 + <title>CSS 2.1 Test Suite: vertical-align (on an inline-block)</title>
1.8 + <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
1.9 + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
1.10 + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
1.11 + <meta name="flags" content="" />
1.12 + <meta http-equiv="Content-Style-Type" content="text/css" />
1.13 + <style type="text/css"><![CDATA[
1.14 +
1.15 + body { width: 500px; height: 500px; margin: 0; position: relative; }
1.16 + body > div { position: absolute; width: 500px; }
1.17 +
1.18 + b { display:inline-block; height: 50px; width: 1px; background:green; }
1.19 +
1.20 + ]]></style>
1.21 + </head>
1.22 + <body>
1.23 +
1.24 +<!--
1.25 +
1.26 + The basic structure of this test is that each passing item will create
1.27 + a box 1 pixel wide and 50px tall (stretching from 100px to 150px from
1.28 + the top of the page). Together these items will line up to form a
1.29 + rectangle.
1.30 +
1.31 + This test only tests the 'top', 'bottom', 'text-top', 'text-bottom',
1.32 + 'baseline', <length>, and <percentage> values of 'vertical-align'. It
1.33 + does not test 'sub', 'super', or 'middle', and it does not test
1.34 + anything relative to actual font metrics.
1.35 +
1.36 + -->
1.37 +
1.38 +<!-- vertical-align: top -->
1.39 +
1.40 +<div style="top: 100px; left: 0;">
1.41 + <b style="vertical-align:top"></b>
1.42 +</div>
1.43 +
1.44 +<div style="top: 100px; left: 1px;">
1.45 + <b style="vertical-align:top"></b>
1.46 + <span style="visibility:hidden; font-size: 10px;">text</span>
1.47 +</div>
1.48 +
1.49 +<div style="top: 100px; left: 2px;">
1.50 + <b style="vertical-align:top"></b>
1.51 + <span style="visibility:hidden; font-size: 100px;">text</span>
1.52 +</div>
1.53 +
1.54 +<div style="top: 100px; right: 496px; text-align: right;">
1.55 + <span style="visibility:hidden; font-size: 10px;">text</span>
1.56 + <b style="vertical-align:top"></b>
1.57 +</div>
1.58 +
1.59 +<div style="top: 100px; right: 495px; text-align: right;">
1.60 + <span style="visibility:hidden; font-size: 100px;">text</span>
1.61 + <b style="vertical-align:top"></b>
1.62 +</div>
1.63 +
1.64 +<!-- Test behavior of the rest of the line when there's a single loose
1.65 + subtree with vertical-align: top. This isn't required by the spec, but
1.66 + test it anyway. -->
1.67 +
1.68 +<div style="top: 100px; left: 5px;">
1.69 + <b style="vertical-align:baseline"></b>
1.70 + <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span>
1.71 +</div>
1.72 +
1.73 +<div style="top: 100px; left: 6px;">
1.74 + <b style="vertical-align:baseline"></b>
1.75 + <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span>
1.76 +</div>
1.77 +
1.78 +<div style="top: 100px; right: 492px; text-align: right;">
1.79 + <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span>
1.80 + <b style="vertical-align:baseline"></b>
1.81 +</div>
1.82 +
1.83 +<div style="top: 100px; right: 491px; text-align: right;">
1.84 + <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span>
1.85 + <b style="vertical-align:baseline"></b>
1.86 +</div>
1.87 +
1.88 +<!-- Test that we align the loose subtree, not just the box (118501) -->
1.89 +
1.90 +<div style="top: 100px; left: 9px;">
1.91 + <span style="font-size: 10px; vertical-align: top"><b></b></span>
1.92 +</div>
1.93 +
1.94 +<div style="top: 100px; left: 10px;">
1.95 + <span style="font-size: 100px; vertical-align: top; line-height: 0;"><b style="vertical-align:text-top"></b></span>
1.96 +</div>
1.97 +
1.98 +<!-- vertical-align: bottom -->
1.99 +
1.100 +<div style="bottom: 350px; left: 11px;">
1.101 + <b style="vertical-align:bottom"></b>
1.102 +</div>
1.103 +
1.104 +<div style="bottom: 350px; left: 12px;">
1.105 + <b style="vertical-align:bottom"></b>
1.106 + <span style="visibility:hidden; font-size: 10px;">text</span>
1.107 +</div>
1.108 +
1.109 +<div style="bottom: 350px; left: 13px;">
1.110 + <b style="vertical-align:bottom"></b>
1.111 + <span style="visibility:hidden; font-size: 100px;">text</span>
1.112 +</div>
1.113 +
1.114 +<div style="bottom: 350px; right: 485px; text-align: right;">
1.115 + <span style="visibility:hidden; font-size: 10px;">text</span>
1.116 + <b style="vertical-align:bottom"></b>
1.117 +</div>
1.118 +
1.119 +<div style="bottom: 350px; right: 484px; text-align: right;">
1.120 + <span style="visibility:hidden; font-size: 100px;">text</span>
1.121 + <b style="vertical-align:bottom"></b>
1.122 +</div>
1.123 +
1.124 +<!-- Test behavior of the rest of the line when there's a single loose
1.125 + subtree with vertical-align: bottom. This isn't required by the spec, but
1.126 + test it anyway. -->
1.127 +
1.128 +<div style="bottom: 350px; left: 16px;">
1.129 + <b style="vertical-align:text-top"></b>
1.130 + <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span>
1.131 +</div>
1.132 +
1.133 +<div style="bottom: 350px; left: 17px;">
1.134 + <b style="vertical-align:text-top"></b>
1.135 + <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span>
1.136 +</div>
1.137 +
1.138 +<div style="bottom: 350px; right: 481px; text-align: right;">
1.139 + <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span>
1.140 + <b style="vertical-align:text-top"></b>
1.141 +</div>
1.142 +
1.143 +<div style="bottom: 350px; right: 480px; text-align: right;">
1.144 + <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span>
1.145 + <b style="vertical-align:text-top"></b>
1.146 +</div>
1.147 +
1.148 +<!-- Test that we align the loose subtree, not just the box (118501) -->
1.149 +
1.150 +<div style="bottom: 350px; left: 20px;">
1.151 + <span style="font-size: 10px; vertical-align: bottom"><b style="vertical-align:text-top"></b></span>
1.152 +</div>
1.153 +
1.154 +<div style="bottom: 350px; left: 21px;">
1.155 + <span style="font-size: 100px; vertical-align: bottom; line-height: 0;"><b style="vertical-align:text-bottom"></b></span>
1.156 +</div>
1.157 +
1.158 +<!-- test top and bottom nested within other things -->
1.159 +
1.160 +<div style="top: 100px; left: 22px;">
1.161 + <span style="font-size: 100px; vertical-align: text-top">
1.162 + <span style="font-size: 10px; vertical-align: text-bottom">
1.163 + <b style="vertical-align:top"></b>
1.164 + </span>
1.165 + </span>
1.166 +</div>
1.167 +
1.168 +<div style="bottom: 350px; left: 23px;">
1.169 + <span style="font-size: 100px; vertical-align: text-bottom">
1.170 + <span style="font-size: 10px; vertical-align: text-top">
1.171 + <b style="vertical-align:bottom"></b>
1.172 + </span>
1.173 + </span>
1.174 +</div>
1.175 +
1.176 +<!-- test top and bottom within the same box -->
1.177 +
1.178 +<div style="top: 100px; left: 24px;">
1.179 + <b style="vertical-align:top"></b
1.180 + ><b style="vertical-align:bottom"></b>
1.181 +</div>
1.182 +
1.183 +<div style="bottom: 350px; left: 26px; font-size: 10px">
1.184 + <b style="vertical-align:bottom"></b
1.185 + ><b style="vertical-align:top"></b
1.186 + ><b style="vertical-align: -10px"></b>
1.187 +</div>
1.188 +
1.189 +<div style="top: 100px; left: 29px; font-size: 10px">
1.190 + <b style="vertical-align: -10px"></b
1.191 + ><b style="vertical-align:top"></b
1.192 + ><b style="vertical-align:bottom"></b>
1.193 +</div>
1.194 +
1.195 +<!-- test vertical-align: length -->
1.196 +
1.197 +<div style="top: 100px; left: 32px; font-size: 10px">
1.198 + <b style="vertical-align: baseline; height: 40px"></b
1.199 + ><b style="vertical-align: 20px; height: 20px"></b
1.200 + ><b style="vertical-align: -10px; height: 10px; margin-left: -2px"></b
1.201 + ><b style="vertical-align: -10px; height: 30px"></b>
1.202 +</div>
1.203 +
1.204 +<!-- test vertical-align: percentage -->
1.205 +
1.206 +<div style="top: 100px; left: 34px; font-size: 10px; line-height: 10px;">
1.207 + <b style="vertical-align: baseline; height: 40px"></b
1.208 + ><b style="vertical-align: 200%; height: 20px"></b
1.209 + ><b style="vertical-align: -25%; height: 10px; margin-left: -2px; line-height: 40px;"></b
1.210 + ><b style="vertical-align: -100%; height: 30px;line-height:10px"></b>
1.211 +</div>
1.212 +
1.213 +<!-- test vertical-align: text-top -->
1.214 +
1.215 +<div style="top: 100px; left: 36px; font-size: 10px; line-height: 2px;">
1.216 + <!-- we're testing:
1.217 + 1) that the top of the first b's background is even with the top of
1.218 + the span's background, which is likewise even with the top of the
1.219 + line box (thanks to the b's contribution)
1.220 + 2) that the second b (which serves to fill the area under the span)
1.221 + is aligned relative to its parent, not to the line box
1.222 + -->
1.223 + <span style="background:green"
1.224 + ><b style="vertical-align: text-top"></b
1.225 + ><span style="vertical-align: -8px"
1.226 + ><b style="vertical-align: text-top; height: 42px"></b
1.227 + ></span
1.228 + ></span>
1.229 +</div>
1.230 +
1.231 +<!-- test vertical-align: text-bottom -->
1.232 +
1.233 +<div style="bottom: 350px; left: 38px; font-size: 10px; line-height: 2px;">
1.234 + <!-- we're testing:
1.235 + 1) that the bottom of the first b's background is even with the bottom of
1.236 + the span's background, which is likewise even with the bottom of the
1.237 + line box (thanks to the b's contribution)
1.238 + 2) that the second b (which serves to fill the area under the span)
1.239 + is aligned relative to its parent, not to the line box
1.240 + -->
1.241 + <span style="background:green"
1.242 + ><b style="vertical-align: text-bottom"></b
1.243 + ><span style="vertical-align: 8px"
1.244 + ><b style="vertical-align: text-bottom; height: 42px"></b
1.245 + ></span
1.246 + ></span>
1.247 +</div>
1.248 +
1.249 + </body>
1.250 +</html>
