1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,43 @@
1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1.5 +<html xmlns="http://www.w3.org/1999/xhtml">
1.6 + <head>
1.7 + <title>CSS Test: Box Sizing - Border-Box with specified width</title>
1.8 + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
1.9 + <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
1.10 + <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
1.11 + <style type="text/css"><![CDATA[
1.12 + .container {
1.13 + width: 300px;
1.14 + border: 2px solid black;
1.15 + position: absolute;
1.16 + left: 25px;
1.17 + top: 25px;
1.18 + background-color: red;
1.19 + }
1.20 +
1.21 + .box-sized {
1.22 + box-sizing: border-box;
1.23 + width: 50%;
1.24 + z-index: 1;
1.25 + float: left;
1.26 + border: 5px solid black;
1.27 + }
1.28 +
1.29 + #one {
1.30 + background-color: green;
1.31 + }
1.32 +
1.33 + #two {
1.34 + background-color: blue;
1.35 + }
1.36 + ]]></style>
1.37 + </head>
1.38 + <body>
1.39 + The two divs should be side-by-side, not one on top of another. No red should be visible.
1.40 + <br />
1.41 + <div class="container">
1.42 + <div class="box-sized" id="one">LEFT HALF</div>
1.43 + <div class="box-sized" id="two">RIGHT HALF</div>
1.44 + </div>
1.45 + </body>
1.46 +</html>
