absolute-non-replaced-max-height-011.xht (3644B)
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: Max-height on absolutely positioned, non-replaced elements, 'height' based on 'top' and 'bottom' positions</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-non-replaced-height" /> 8 <link rel="match" href="absolute-non-replaced-max-height-003-ref.xht" /> 9 10 <meta name="assert" content="The 'auto' values on 'margin-top', 'margin-bottom' are set to '0' and the 'height' is the remaining space between the 'top' and 'bottom' positions, when 'height' is 'auto' and 'top' and 'bottom' are both not 'auto'. If such height is constrained by max-height, then we must re-process the values as following. If none of 'top', height, bottom are 'auto' and if both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values." /> 11 <style type="text/css"> 12 #div1 13 { 14 border: solid black; 15 height: 3in; 16 position: relative; 17 width: 3in; 18 } 19 div div 20 { 21 background: blue; 22 bottom: 1in; 23 height: auto; 24 margin-bottom: auto; 25 margin-top: auto; 26 max-height: 0.5in; 27 position: absolute; 28 top: 1in; 29 width: 100%; 30 } 31 32 33 /* 34 35 1in : top 36 + 37 auto (to solve): margin-top 38 + 39 0 : border-top-width 40 + 41 0 : padding-top 42 + 43 auto (to solve) : height (may be constrained to use 0.5in by max-height) 44 + 45 0 : padding-bottom 46 + 47 0 : border-bottom-width 48 + 49 auto (to solve): margin-bottom 50 + 51 1in : bottom 52 ============= 53 3in : height of containing block 54 55 56 " 57 'top' is 'auto', 'height' and 'bottom' are not 'auto', 58 then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, 59 and solve for 'top' 60 " 61 62 so this brings: 63 64 1in : top 65 + 66 0 (set): margin-top 67 + 68 0 : border-top-width 69 + 70 0 : padding-top 71 + 72 1in (not constrained) : height (must be constrained to use 0.5in by max-height) 73 + 74 0 : padding-bottom 75 + 76 0 : border-bottom-width 77 + 78 0 (set): margin-bottom 79 + 80 1in : bottom 81 ============= 82 3in : height of containing block 83 84 So, here, we must reenter the algorithm since height is 85 constrained and is no longer 'auto'. 86 87 " 88 If none of the three [top, height, bottom] are 'auto': 89 If both 'margin-top' and 'margin-bottom' are 'auto', 90 solve the equation under the extra constraint that 91 the two margins get equal values. 92 " 93 94 so this brings: 95 96 1in : top 97 + 98 auto (to solve): margin-top 99 + 100 0 : border-top-width 101 + 102 0 : padding-top 103 + 104 0.5in (constrained) : height (constrained by max-height) 105 + 106 0 : padding-bottom 107 + 108 0 : border-bottom-width 109 + 110 auto (to solve): margin-bottom 111 + 112 1in : bottom 113 ============= 114 3in : height of containing block 115 116 117 So, here, margin-top must use 0.25in and margin-bottom must use 0.25in 118 so that the equation remains balanced. 119 120 */ 121 </style> 122 </head> 123 <body> 124 <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> 125 <div id="div1"> 126 <div></div> 127 </div> 128 </body> 129 </html>