absolute-non-replaced-height-006.xht (2571B)
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, over-constrained</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-27 --> 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-006-ref.xht" /> 9 10 <meta name="assert" content="The 'bottom' value is ignored and the equation solves for the bottom value, when the values for 'top', 'bottom', 'height', 'margin-top', 'margin-bottom' add up to more than the containing blocks height." /> 11 <style type="text/css"> 12 #div1 13 { 14 border: 10px solid black; 15 height: 300px; 16 position: relative; 17 width: 300px; 18 overflow: auto; 19 } 20 div div 21 { 22 background: blue; 23 height: 150px; 24 margin-bottom: 50px; 25 margin-top: 50px; 26 position: absolute; 27 top: 50px; 28 width: 50%; 29 } 30 #div2 31 { 32 bottom: 50px; 33 } 34 35 /* 36 37 50px : top 38 + 39 50px : margin-top 40 + 41 0 : border-top-width 42 + 43 0 : padding-top 44 + 45 150px : height 46 + 47 0 : padding-bottom 48 + 49 0 : border-bottom-width 50 + 51 50px : margin-bottom 52 + 53 50px : bottom 54 ============= 55 350px while the height of containing block is only 300px. 56 57 So, here we definitely have an overconstrained situation. In which 58 case the spec clearly states 59 "If the values are over-constrained, ignore the value for 'bottom' 60 and solve for that value." 61 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height 62 63 So, here, the used value for bottom will be 0px so that the equation 64 gets balanced. 65 66 */ 67 68 #div3 69 { 70 bottom: 0; 71 left: 50%; 72 } 73 </style> 74 </head> 75 <body> 76 <p>Test passes if there is one and only one blue rectangle inside an hollow black square and if such black square does not have a vertical scrollbar.</p> 77 <div id="div1"> 78 <div id="div2"></div> 79 <div id="div3"></div> 80 </div> 81 </body> 82 </html>