absolute-non-replaced-width-027.xht (5885B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> 11 12 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" /> 13 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" /> 14 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 15 16 <meta content="If 'width' is auto and 'left' and 'right' are not 'auto', then set 'auto' values for 'margin-left' and 'margin-right' to 0 and then solve for 'width'; the tentative width may be later constrained by max-width in which case, the algorithm must be re-entered. If 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'; the tentative height may be later constrained by max-height in which case, the algorithm must be re-entered." name="assert" /> 17 18 <style type="text/css"><![CDATA[ 19 div#rel-pos-container 20 { 21 background-color: green; 22 height: 100px; 23 position: relative; 24 width: 100px; 25 } 26 27 div#rel-pos-container > div {position: absolute;} 28 29 div#reference-red-overlapped 30 { 31 background-color: red; 32 height: 33px; 33 left: 33px; 34 top: 33px; 35 width: 33px; 36 } 37 38 div#test-green-overlapping 39 { 40 background-color: green; 41 bottom: 0; 42 height: auto; 43 left: 0; 44 margin: auto; 45 max-height: 34px; 46 max-width: 34px; 47 right: 0; 48 top: 0; 49 width: auto; 50 } 51 52 /* 53 54 First we set both margin-left and margin-right to 0 since 55 56 " 57 set 'auto' values for 'margin-left' and 'margin-right' to 0 58 (...) 59 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width' 60 " 61 10.3.7 Absolutely positioned, non-replaced elements 62 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 63 64 65 0px : left 66 + 67 0px (set) : margin-left 68 + 69 0px : border-left 70 + 71 0px : padding-left 72 + 73 (solve) : width (not constrained yet by max-width) 74 + 75 0px : padding-right 76 + 77 0px : border-right 78 + 79 0px (set) : margin-right 80 + 81 0px : right 82 ============= 83 100px : width of containing block 84 85 So, (tentative) width is 100px but now we must 86 constrain it by computed max-width value and so we 87 must now re-enter the algorithm but this time, 88 'width' is not 'auto': therefore horizontal margins 89 must not be set to 0: 90 91 " 92 If none of the three (left, width, right) is 'auto': 93 If both 'margin-left' and 'margin-right' are 'auto', 94 solve the equation under the extra constraint that 95 the two margins get equal values 96 " 97 10.3.7 Absolutely positioned, non-replaced elements 98 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 99 100 So: 101 102 0px : left 103 + 104 (solve) : margin-left 105 + 106 0px : border-left 107 + 108 0px : padding-left 109 + 110 34px : width (constrained by max-width) 111 + 112 0px : padding-right 113 + 114 0px : border-right 115 + 116 (solve) : margin-right 117 + 118 0px : right 119 ============= 120 100px : width of containing block 121 122 Therefore, margin-left and margin-right used values are 123 each respectively equal to ((100px minus 34px) divided by 2) == 33px. 124 125 ----------------------------------------------- 126 127 First we set both margin-top and margin-bottom to 0 since 128 129 " 130 5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', 131 then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 132 and solve for 'height' 133 " 134 10.6.4 Absolutely positioned, non-replaced elements 135 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height 136 137 0px : top 138 + 139 0px (set) : margin-top 140 + 141 0px : border-top 142 + 143 0px : padding-top 144 + 145 (solve) : height (not constrained yet by max-height) 146 + 147 0px : padding-bottom 148 + 149 0px : border-bottom 150 + 151 0px (set) : margin-bottom 152 + 153 0px : bottom 154 ============= 155 100px : height of containing block 156 157 So, (tentative) height is 100px but now we must 158 constrain it by computed max-height value and so we 159 must now re-enter the algorithm but this time, 160 'height' is not 'auto': therefore vertical margins 161 must not be set to 0: 162 163 " 164 If none of the three (top, height, bottom) are 'auto': 165 If both 'margin-top' and 'margin-bottom' are 'auto', 166 solve the equation under the extra constraint that 167 the two margins get equal values. 168 " 169 10.6.4 Absolutely positioned, non-replaced elements 170 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height 171 172 So: 173 174 0px : top 175 + 176 (solve) : margin-top 177 + 178 0px : border-top 179 + 180 0px : padding-top 181 + 182 34px : height (constrained by max-height) 183 + 184 0px : padding-bottom 185 + 186 0px : border-bottom 187 + 188 (solve) : margin-bottom 189 + 190 0px : bottom 191 ============= 192 100px : height of containing block 193 194 Therefore, margin-top and margin-bottom used values are 195 each respectively equal to ((100px minus 34px) divided by 2) == 33px. 196 197 */ 198 ]]></style> 199 200 </head> 201 202 <body> 203 204 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 205 206 <div id="rel-pos-container"> 207 208 <div id="reference-red-overlapped"></div> 209 210 <div id="test-green-overlapping"></div> 211 212 </div> 213 214 </body> 215 </html>