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