box-sizing-005.html (1363B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.6.4</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-height"> 7 <link rel="match" href="reference/box-sizing-001-ref.html"> 8 <meta name="assert" content="When box-sizing is border-box, the content height, rather than the computed value of the height 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: 25px; 22 margin-bottom: 5px; 23 margin-top: auto; /* should resolve to 25px, but would resolve to -25px if the wrong interpretation of width is used in CSS2.1 10.6.4 */ 24 top: 0; 25 left: 0; 26 right: 0; 27 bottom: 0; 28 padding-top: 25px; 29 padding-bottom: 25px; 30 width: 70px; 31 height: 70px; 32 background:green; 33 } 34 </style> 35 <body> 36 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> 37 <div id="cb"> 38 <div id="test"></div> 39 </div> 40 </body>