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.7</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#abs-non-replaced-width" 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 should be used in the the constraint that determines the used values of sizing and positioning properties
11 of absolutely positioned elements." name="assert">
12 <style>
13 #cb {
14 position: absolute;
15 width: 100px;
16 height: 100px;
17 }
18 #test {
19 position:absolute;
20 box-sizing: border-box;
21 margin-right: 5px;
22 margin-left: auto; /* should resolve to 25px, but would resolve to -25px if the wrong interpretation of width is used in CSS2.1 10.3.7 */
23 top: 25px;
24 left:0;
25 right:0;
26 padding-left: 25px;
27 padding-right: 25px;
28 width: 70px;
29 height: 70px;
30 background:green;
31 }
32 </style>
33 </head><body>
34 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
35 <div id="cb">
36 <div id="test"></div>
37 </div>
38
39 </body></html>