absolute-replaced-height-008.xht (2586B)
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 'margin-top', 'margin-bottom' and 'bottom' as '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-08-31 --> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> 8 <link rel="match" href="absolute-replaced-height-008-ref.xht" /> 9 10 <meta name="flags" content="image" /> 11 <meta name="assert" content="An absolutely positioned inline replaced element's used value of 'bottom', 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'." /> 12 <style type="text/css"> 13 #div1 14 { 15 border-top: solid black; 16 position: relative; 17 } 18 img 19 { 20 bottom: auto; 21 height: auto; 22 margin-bottom: auto; 23 margin-top: auto; 24 position: absolute; 25 top: 1in; 26 width: auto; 27 } 28 29 /* 30 " 31 The used value of 'height' is determined as for inline replaced elements. 32 If 'margin-top' or 'margin-bottom' is specified as 'auto' 33 its used value is determined by the rules below. 34 (...) 35 If 'height' and 'width' both have computed values 36 of 'auto' and the element also has an intrinsic height, 37 then that intrinsic height is the used value of 'height'. 38 (...) 39 If 'bottom' is 'auto', replace any 'auto' on 'margin-top' 40 or 'margin-bottom' with '0'. 41 If at this point there is only one 'auto' left, 42 solve the equation for that value. 43 " 44 http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height 45 46 In this test, bottom will be -96px because the height of the 47 containing block is 0px. 48 */ 49 50 div div 51 { 52 background: blue; 53 height: 15px; 54 left: 15px; 55 position: relative; 56 top: 1in; 57 width: 15px; 58 } 59 </style> 60 </head> 61 <body> 62 <p>Test passes if there is a short blue bar and it does not touch the black line.</p> 63 <div id="div1"> 64 <img alt="blue 15x15" src="support/blue15x15.png" /> 65 <div></div> 66 </div> 67 </body> 68 </html>