| OLD | NEW |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st
rict.dtd"> | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st
rict.dtd"> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link rel="reference" href="abspos-replaced-width-margin-000-ref.xht"> | 4 <link rel="reference" href="abspos-replaced-width-margin-000-ref.xht"> |
| 5 <title>CSS Test: CSS2.1:10.3.8 Comprehensive - Absolutely Positioned Replaced Ho
rizontal Size+Position Calculations</title> | 5 <title>CSS Test: CSS2.1:10.3.8 Comprehensive - Absolutely Positioned Replaced Ho
rizontal Size+Position Calculations</title> |
| 6 <link rel="author" title="L. David Baron" href="http://dbaron.org/"> | 6 <link rel="author" title="L. David Baron" href="http://dbaron.org/"> |
| 7 <link rel="alternate" href="http://mxr.mozilla.org/mozilla-central/source/layout
/reftests/abspos-replaced-width-margin-000.html"> | 7 <link rel="alternate" href="http://mxr.mozilla.org/mozilla-central/source/layout
/reftests/abspos-replaced-width-margin-000.html"> |
| 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-widt
h"> | 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-widt
h"> |
| 9 <meta name="assert" content="The values of 'left', 'right', 'margin-left', 'marg
in-right', and 'width' are calculated correctly for absolutely positioned replac
ed elements according to CSS2.1 Section 10.3.7."> | 9 <meta name="assert" content="The values of 'left', 'right', 'margin-left', 'marg
in-right', and 'width' are calculated correctly for absolutely positioned replac
ed elements according to CSS2.1 Section 10.3.7."> |
| 10 <style type="text/css"> | 10 <style type="text/css"> |
| 11 | 11 |
| 12 div { height: 1px; direction: ltr; } | 12 div { height: 1px; direction: ltr; } |
| 13 | 13 |
| 14 /* | 14 /* |
| 15 * Every case here has two divs and an image nested inside of each other. The | 15 * Every case here has two divs and an image nested inside of each other. The |
| 16 * innermost div (absolutely positioned) is the testcase (and has | 16 * innermost div (absolutely positioned) is the testcase (and has |
| 17 * color). The middle div's content edge establishes the containing | 17 * color). The middle div's content edge establishes the containing |
| 18 * block it would have if it were statically positioned. The outermost | 18 * block it would have if it were statically positioned. The outermost |
| 19 * div is actually its containing block. | 19 * div is actually its containing block. |
| 20 * | 20 * |
| 21 * the abs pos containing block runs from 50px to 700px from the left edge | 21 * the abs pos containing block runs from 50px to 700px from the left edge |
| 22 * the static pos containing block runs from 150px to 650px from the left edge | 22 * the static pos containing block runs from 150px to 650px from the left edge |
| 23 */ | 23 */ |
| 24 | 24 |
| 25 /* totals for html and body: 21px on the left, 34px on the right */ | 25 /* totals for html and body: 21px on the left, 34px on the right */ |
| 26 html, body { border: transparent medium solid; } | 26 html, body { border: transparent medium solid; } |
| 27 html { margin: 0 3px 0 2px; padding: 0 4px 0 3px; border-width: 0 3px 0 8px; } | 27 html { margin: 0 3px 0 2px; padding: 0 4px 0 3px; border-width: 0 3px 0 8px; } |
| 28 body { margin: 0 6px 0 3px; padding: 0 7px 0 1px; border-width: 0 11px 0 4px; } | 28 body { margin: 0 6px 0 3px; padding: 0 7px 0 1px; border-width: 0 11px 0 4px; ov
erflow: hidden; } |
| 29 | 29 |
| 30 body > div { | 30 body > div { |
| 31 position: relative; | 31 position: relative; |
| 32 | 32 |
| 33 top: 0; | 33 top: 0; |
| 34 left: 4px; | 34 left: 4px; |
| 35 | 35 |
| 36 margin-left: 16px; | 36 margin-left: 16px; |
| 37 border-left: 9px solid transparent; | 37 border-left: 9px solid transparent; |
| 38 /* sum of above items (29px), plus 21px above, is 50px */ | 38 /* sum of above items (29px), plus 21px above, is 50px */ |
| (...skipping 588 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 627 <div class="widewidth mr ml or ol adir"><div><img alt="" src="resources/abspos-r
eplaced-width-margin-000-narrow.png"></div></div> | 627 <div class="widewidth mr ml or ol adir"><div><img alt="" src="resources/abspos-r
eplaced-width-margin-000-narrow.png"></div></div> |
| 628 <div class="widewidth mr ml or ol sdir"><div><img alt="" src="resources/abspos-r
eplaced-width-margin-000-narrow.png"></div></div> | 628 <div class="widewidth mr ml or ol sdir"><div><img alt="" src="resources/abspos-r
eplaced-width-margin-000-narrow.png"></div></div> |
| 629 <div class="widewidth mr ml or ol sdir adir"><div><img alt="" src="resources/abs
pos-replaced-width-margin-000-narrow.png"></div></div> | 629 <div class="widewidth mr ml or ol sdir adir"><div><img alt="" src="resources/abs
pos-replaced-width-margin-000-narrow.png"></div></div> |
| 630 <div class="widewidth mr ml or ol edir"><div><img alt="" src="resources/abspos-r
eplaced-width-margin-000-narrow.png"></div></div> | 630 <div class="widewidth mr ml or ol edir"><div><img alt="" src="resources/abspos-r
eplaced-width-margin-000-narrow.png"></div></div> |
| 631 <div class="widewidth mr ml or ol edir adir"><div><img alt="" src="resources/abs
pos-replaced-width-margin-000-narrow.png"></div></div> | 631 <div class="widewidth mr ml or ol edir adir"><div><img alt="" src="resources/abs
pos-replaced-width-margin-000-narrow.png"></div></div> |
| 632 <div class="widewidth mr ml or ol edir sdir"><div><img alt="" src="resources/abs
pos-replaced-width-margin-000-narrow.png"></div></div> | 632 <div class="widewidth mr ml or ol edir sdir"><div><img alt="" src="resources/abs
pos-replaced-width-margin-000-narrow.png"></div></div> |
| 633 <div class="widewidth mr ml or ol edir sdir adir"><div><img alt="" src="resource
s/abspos-replaced-width-margin-000-narrow.png"></div></div> | 633 <div class="widewidth mr ml or ol edir sdir adir"><div><img alt="" src="resource
s/abspos-replaced-width-margin-000-narrow.png"></div></div> |
| 634 | 634 |
| 635 </body> | 635 </body> |
| 636 </html> | 636 </html> |
| OLD | NEW |