box-sizing-003.html (1309B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.3.7</title> 4 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"> 7 <link rel="match" href="reference/box-sizing-001-ref.html"> 8 <meta name="assert" content="When box-sizing is border-box, the content width, rather than the computed value of the width property, 9 should be used in the constraint that determines the used values of sizing and positioning properties 10 of absolutely positioned elements."> 11 <style> 12 #cb { 13 position: absolute; 14 width: 100px; 15 height: 100px; 16 } 17 #test { 18 position:absolute; 19 box-sizing: border-box; 20 margin-right: 5px; 21 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 */ 22 top: 25px; 23 left:0; 24 right:0; 25 padding-left: 25px; 26 padding-right: 25px; 27 width: 70px; 28 height: 70px; 29 background:green; 30 } 31 </style> 32 <body> 33 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 34 <div id="cb"> 35 <div id="test"></div> 36 </div> 37 </body>