absolute-replaced-height-033.xht (2897B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Absolutely positioned inline-block element with percentage based 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-012-ref.xht" /> 9 10 <meta name="assert" content="An absolutely positioned inline-block replaced element with percentage height resolves based on the containing block height when such height can be resolved." /> 11 <style type="text/css"> 12 #div1 13 { 14 position: relative; 15 height: 2in; 16 } 17 div div 18 { 19 border: solid green; 20 height: 1in; 21 position: absolute; 22 top: 1in; 23 width: 300px; 24 } 25 iframe 26 { 27 border: solid red; 28 bottom: 1in; 29 margin-bottom: 0.5in; 30 margin-top: 0.5in; 31 position: absolute; 32 top: 0.5in; 33 width: auto; 34 } 35 36 /* 37 38 0.5in : 'top' 39 + 40 0.5in : 'margin-top' 41 + 42 3px : 'border-top-width' medium which is often resolved as 3px 43 + 44 0 : 'padding-top' 45 + 46 1in : 'height' 50% of height of containing block 47 + 48 0 : 'padding-bottom' 49 + 50 3px : 'border-bottom-width' medium which is often resolved as 3px 51 + 52 0.5in : 'margin-bottom' 53 + 54 1in : 'bottom' 55 ================ 56 342px : height of containing block (192px) 57 58 So, bottom has to be ignored and forced to have the value that 59 will balance the equation. So, this brings up 60 61 62 0.5in : 'top' 63 + 64 0.5in : 'margin-top' 65 + 66 3px : 'border-top-width' medium which is often resolved as 3px 67 + 68 0 : 'padding-top' 69 + 70 1in : 'height' 50% of height of containing block 71 + 72 0 : 'padding-bottom' 73 + 74 3px : 'border-bottom-width' medium which is often resolved as 3px 75 + 76 0.5in : 'margin-bottom' 77 + 78 (solve) : 'bottom' 79 ================ 80 -246px : height of containing block (192px) 81 82 So, the solved bottom value should be -54px . 83 */ 84 85 </style> 86 </head> 87 <body> 88 <p>Test passes if there is <strong>no red</strong>.</p> 89 <div id="div1"> 90 <iframe height="50%"></iframe> 91 <div></div> 92 </div> 93 </body> 94 </html>