| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| |
| <head> |
| |
| <title>CSS Test: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title> |
| |
| <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> |
| <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> |
| |
| <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" /> |
| <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" /> |
| <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> |
| |
| <meta content="" name="flags" /> |
| <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" /> |
| |
| <style type="text/css"><![CDATA[ |
| div#rel-pos-container |
| { |
| background-color: green; |
| height: 100px; |
| position: relative; |
| width: 100px; |
| } |
| |
| div#rel-pos-container > div {position: absolute;} |
| |
| div#reference-red-overlapped |
| { |
| background-color: red; |
| height: 33px; |
| left: 33px; |
| top: 33px; |
| width: 33px; |
| } |
| |
| div#test-green-overlapping |
| { |
| background-color: green; |
| bottom: 0; |
| height: auto; |
| left: 0; |
| margin: auto; |
| max-height: 34px; |
| max-width: 34px; |
| right: 0; |
| top: 0; |
| width: auto; |
| } |
| |
| /* |
| |
| First we set both margin-left and margin-right to 0 since |
| |
| " |
| set 'auto' values for 'margin-left' and 'margin-right' to 0 |
| (...) |
| 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width' |
| " |
| 10.3.7 Absolutely positioned, non-replaced elements |
| http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width |
| |
| |
| 0px : left |
| + |
| 0px (set) : margin-left |
| + |
| 0px : border-left |
| + |
| 0px : padding-left |
| + |
| (solve) : width (not constrained yet by max-width) |
| + |
| 0px : padding-right |
| + |
| 0px : border-right |
| + |
| 0px (set) : margin-right |
| + |
| 0px : right |
| ============= |
| 100px : width of containing block |
| |
| So, (tentative) width is 100px but now we must |
| constrain it by computed max-width value and so we |
| must now re-enter the algorithm but this time, |
| 'width' is not 'auto': therefore horizontal margins |
| must not be set to 0: |
| |
| " |
| If none of the three (left, width, right) is 'auto': |
| If both 'margin-left' and 'margin-right' are 'auto', |
| solve the equation under the extra constraint that |
| the two margins get equal values |
| " |
| 10.3.7 Absolutely positioned, non-replaced elements |
| http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width |
| |
| So: |
| |
| 0px : left |
| + |
| (solve) : margin-left |
| + |
| 0px : border-left |
| + |
| 0px : padding-left |
| + |
| 34px : width (constrained by max-width) |
| + |
| 0px : padding-right |
| + |
| 0px : border-right |
| + |
| (solve) : margin-right |
| + |
| 0px : right |
| ============= |
| 100px : width of containing block |
| |
| Therefore, margin-left and margin-right used values are |
| each respectively equal to ((100px minus 34px) divided by 2) == 33px. |
| |
| ----------------------------------------------- |
| |
| First we set both margin-top and margin-bottom to 0 since |
| |
| " |
| 5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', |
| then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 |
| and solve for 'height' |
| " |
| 10.6.4 Absolutely positioned, non-replaced elements |
| http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height |
| |
| 0px : top |
| + |
| 0px (set) : margin-top |
| + |
| 0px : border-top |
| + |
| 0px : padding-top |
| + |
| (solve) : height (not constrained yet by max-height) |
| + |
| 0px : padding-bottom |
| + |
| 0px : border-bottom |
| + |
| 0px (set) : margin-bottom |
| + |
| 0px : bottom |
| ============= |
| 100px : height of containing block |
| |
| So, (tentative) height is 100px but now we must |
| constrain it by computed max-height value and so we |
| must now re-enter the algorithm but this time, |
| 'height' is not 'auto': therefore vertical margins |
| must not be set to 0: |
| |
| " |
| If none of the three (top, height, bottom) are 'auto': |
| If both 'margin-top' and 'margin-bottom' are 'auto', |
| solve the equation under the extra constraint that |
| the two margins get equal values. |
| " |
| 10.6.4 Absolutely positioned, non-replaced elements |
| http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height |
| |
| So: |
| |
| 0px : top |
| + |
| (solve) : margin-top |
| + |
| 0px : border-top |
| + |
| 0px : padding-top |
| + |
| 34px : height (constrained by max-height) |
| + |
| 0px : padding-bottom |
| + |
| 0px : border-bottom |
| + |
| (solve) : margin-bottom |
| + |
| 0px : bottom |
| ============= |
| 100px : height of containing block |
| |
| Therefore, margin-top and margin-bottom used values are |
| each respectively equal to ((100px minus 34px) divided by 2) == 33px. |
| |
| */ |
| ]]></style> |
| |
| </head> |
| |
| <body> |
| |
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> |
| |
| <div id="rel-pos-container"> |
| |
| <div id="reference-red-overlapped"></div> |
| |
| <div id="test-green-overlapping"></div> |
| |
| </div> |
| |
| </body> |
| </html> |