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 |