absolute-replaced-height-031.xht (2882B)
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 over-constrained values</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-05 --> 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 replaced element has an intrinsic ratio, 'height' is set to 'auto', with over-constrained values solves for 'bottom'." /> 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 height: auto; 30 margin-bottom: 0.5in; 31 margin-top: 0.5in; 32 position: absolute; 33 top: 0.5in; 34 } 35 div div, img 36 { 37 width: 1in; 38 } 39 40 /* 41 42 0.5in : 'top' 43 + 44 0.5in : 'margin-top' 45 + 46 0 : 'border-top-width' 47 + 48 0 : 'padding-top' 49 + 50 1in : 'height' (used width) / (intrinsic ratio) 51 + 52 0 : 'padding-bottom' 53 + 54 0 : 'border-bottom-width' 55 + 56 0.5in : 'margin-bottom' 57 + 58 1in : 'bottom' 59 =========== 60 436px : height of containing block (0px) 61 62 So, bottom has to be ignored and forced to have the value that 63 will balance the equation. So, this brings up 64 65 0.5in : 'top' 66 + 67 0.5in : 'margin-top' 68 + 69 0 : 'border-top-width' 70 + 71 0 : 'padding-top' 72 + 73 1in : 'height' (used width) / (intrinsic ratio) 74 + 75 0 : 'padding-bottom' 76 + 77 0 : 'border-bottom-width' 78 + 79 0.5in : 'margin-bottom' 80 + 81 (solve): 'bottom' 82 =================== 83 240px : height of containing block (0px) 84 85 So the solved bottom value should be -240px 86 */ 87 </style> 88 </head> 89 <body> 90 <p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p> 91 <div id="div1"> 92 <img alt="blue 15x15" src="support/blue15x15.png" /> 93 <div></div> 94 </div> 95 </body> 96 </html>