absolute-replaced-height-017.xht (2204B)
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 inline replaced element with intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom' are not 'auto'</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-replaced-height" /> 8 <link rel="match" href="absolute-replaced-height-010-ref.xht" /> 9 10 <meta name="flags" content="image" /> 11 <meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified and 'top', 'bottom' are not 'auto'." /> 12 <style type="text/css"> 13 #div1 14 { 15 border-top: solid black; 16 position: relative; 17 } 18 div div 19 { 20 background: blue; 21 height: 1in; 22 left: 1in; 23 position: absolute; 24 top: 1in; 25 } 26 img 27 { 28 bottom: 1in; 29 /* 30 The equation gets overconstrained; and so, the used value for 31 bottom in that test will be ignored and will be solved 32 as minus (1in + 1in) (-192px) because the height of 33 containing block is 0. 34 */ 35 height: auto; 36 position: absolute; 37 top: 1in; 38 } 39 div div, img 40 { 41 width: 1in; 42 } 43 </style> 44 </head> 45 <body> 46 <p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p> 47 <div id="div1"> 48 <img alt="blue 15x15" src="support/blue15x15.png" /> 49 <div></div> 50 </div> 51 </body> 52 </html>