block-non-replaced-height-010.xht (2241B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Height determination for block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' and elements' margins do not collapse</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block" /> 7 <meta name="assert" content="When a block-level non-replaced element is in normal flow, 'overflow' does not compute to 'visible', the 'height' is 'auto' and top and bottom margins do not collapse. The 'height' is the sized from the top of the topmost margin edge of the content to the bottom of the bottom most margin edge of the content." /> 8 <style type="text/css"> 9 html, body 10 { 11 overflow: scroll; 12 } 13 #div1 14 { 15 position: relative; 16 } 17 #div2 18 { 19 background: blue; 20 border-bottom: 0.25in solid blue; 21 border-top: 0.25in solid blue; 22 } 23 #div2, #div3, #div4, #div5 24 { 25 width: 1in; 26 } 27 #div3, #div4 28 { 29 background: blue; 30 height: 0.25in; 31 } 32 #div3 33 { 34 border-top: 0.25in solid blue; 35 margin-top: 0.25in; 36 } 37 #div4 38 { 39 border-bottom: 0.25in solid blue; 40 margin-bottom: 0.25in; 41 } 42 #div5 43 { 44 background: blue; 45 height: 2in; 46 left: 1in; 47 position: absolute; 48 top: 0; 49 } 50 </style> 51 </head> 52 <body> 53 <p>Test passes if there is a blue square below.</p> 54 <div id="div1"> 55 <div id="div2"> 56 <div id="div3"></div> 57 <div id="div4"></div> 58 </div> 59 <div id="div5"></div> 60 </div> 61 </body> 62 </html>