1 <!DOCTYPE html>
2 <html><head><meta charset="utf-8">
3 <title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.3.3</title>
4 <link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
5 <link href="https://drafts.csswg.org/css-ui-3/#box-sizing" rel="help">
6 <link href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" rel="help">
7 <meta content="" name="flags">
8 <link href="reference/box-sizing-001-ref.htm" rel="match">
9 <meta content="When box-sizing is border-box, the content width, rather than the computed value of the width property,
10 is considered when checking whether a block is larger than its containing block." name="assert">
11 <style>
12 #cb {
13 position: absolute;
14 width: 100px;
15 height: 100px;
16 }
17 #red {
18 position:absolute;
19 top: 25px;
20 right:5px;
21 width: 70px;
22 height: 70px;
23 background:red;
24 z-index: -1;
25 }
26 #test {
27 box-sizing: border-box;
28 margin-top: 25px;
29 margin-right: 5px;
30 margin-left: auto; /* should resolve to 25px, but would resolve to 0 if the wrong interpretation of width is used in CSS2.1 10.3.3 */
31 padding-left: 25px;
32 padding-right: 25px;
33 width: 70px;
34 height: 70px;
35 background:green;
36 }
37 </style>
38 </head><body>
39 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
40 <div id="cb">
41 <div id="red"></div>
42 <div id="test"></div>
43 </div>
44
45 </body></html>