absolute-non-replaced-height-009.xht (2197B)
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: Absolutely positioned, non-replaced elements, height is based on the content</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> 8 <link rel="match" href="absolute-non-replaced-height-009-ref.xht" /> 9 10 <meta name="flags" content="ahem" /> 11 <meta name="assert" content="The 'height' is based on the content height, 'auto' values for 'margin-top' and 'margin-bottom' are set to '0' when 'height' and 'bottom' are 'auto' and 'top' is not 'auto'." /> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style type="text/css"> 14 #div1 15 { 16 position: relative; 17 } 18 div div 19 { 20 background: blue; 21 bottom: auto; 22 color: orange; 23 font: 100px/1 Ahem; 24 height: auto; 25 margin-bottom: auto; 26 margin-top: auto; 27 position: absolute; 28 top: 25px; 29 width: 200px; 30 } 31 32 <!-- 33 " 34 height' and 'bottom' are 'auto' and 'top' is not 'auto', 35 then the height is based on the content per 10.6.7, 36 set 'auto' values for 'margin-top' and 'margin-bottom' to 0, 37 and solve for 'bottom' 38 " 39 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height 40 41 In this test, 42 top used value will be 25px 43 height used value will be 100px 44 vertical margins will be 0px 45 bottom used value will be -125px 46 because the computed height of containing block is 0px. 47 --> 48 49 </style> 50 </head> 51 <body> 52 <p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p> 53 <div id="div1"> 54 <div>X</div> 55 </div> 56 </body> 57 </html>