box-sizing-001.html (1334B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.3.3</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#blockwidth"> 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 is considered when checking whether a block is larger than its containing block."> 10 <style> 11 #cb { 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 } 16 #red { 17 position:absolute; 18 top: 25px; 19 right:5px; 20 width: 70px; 21 height: 70px; 22 background:red; 23 z-index: -1; 24 } 25 #test { 26 box-sizing: border-box; 27 margin-top: 25px; 28 margin-right: 5px; 29 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 */ 30 padding-left: 25px; 31 padding-right: 25px; 32 width: 70px; 33 height: 70px; 34 background:green; 35 } 36 </style> 37 <body> 38 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 39 <div id="cb"> 40 <div id="red"></div> 41 <div id="test"></div> 42 </div> 43 </body>