diff options
Diffstat (limited to 'theme-compiler/tests/resources/w3ctests/scss/abspos-non-replaced-width-margin-000.0.scss')
-rw-r--r-- | theme-compiler/tests/resources/w3ctests/scss/abspos-non-replaced-width-margin-000.0.scss | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/theme-compiler/tests/resources/w3ctests/scss/abspos-non-replaced-width-margin-000.0.scss b/theme-compiler/tests/resources/w3ctests/scss/abspos-non-replaced-width-margin-000.0.scss new file mode 100644 index 0000000000..69f5c2fa6a --- /dev/null +++ b/theme-compiler/tests/resources/w3ctests/scss/abspos-non-replaced-width-margin-000.0.scss @@ -0,0 +1,93 @@ +/* Source: http://test.csswg.org/suites/css2.1/20110323/html4/abspos-non-replaced-width-margin-000.htm */ + + +div { height: 1px; direction: ltr; } + +/* + * Every case here has three divs nested inside of each other. The + * innermost div (absolutely positioned) is the testcase (and has + * color). The middle div's content edge establishes the containing + * block it would have if it were statically positioned. The outermost + * div is actually its containing block. + * + * the abs pos containing block runs from 50px to 700px from the left edge + * the static pos containing block runs from 150px to 650px from the left edge + */ + +/* totals for html and body: 21px on the left, 34px on the right */ +html, body { border: transparent medium solid; } +html { margin: 0 3px 0 2px; padding: 0 4px 0 3px; border-width: 0 3px 0 8px; } +body { margin: 0 6px 0 3px; padding: 0 7px 0 1px; border-width: 0 11px 0 4px; } + +body > div { + position: relative; + + top: 0; + left: 4px; + + margin-left: 16px; + border-left: 9px solid transparent; + /* sum of above items (29px), plus 21px above, is 50px */ + padding-left: 40px; + + width: 595px; + + padding-right: 15px; + /* sum of above items (650px), plus 50px above, is 700px */ + + border-right: 27px solid transparent; + margin-right: 13px; +} + +body > div > div { + /* padding-left above: 40px */ + margin-left: 7px; + border-left: 29px solid transparent; + padding-left: 24px; + /* sum of above items (100px), plus 50px above, is 150px */ + + /* padding-right above: 15px */ + padding-right: 14px; + border-right: 3px solid transparent; + margin-right: 18px; + /* sum of above items (50px), subtracted from 700px, is 650px */ +} + +body > div > div > div { + background: navy; + position: absolute; + top: 0; + bottom: 0; + + /* specify everything; we'll put the autos as overrides below */ + left: 3px; + margin-left: 17px; + border-left: 6px solid transparent; + padding-left: 1px; + padding-right: 9px; + border-right: 8px solid transparent; + margin-right: 19px; + right: 8px; +} + +/* and give it 72px of intrinsic width for the case where it has width:auto */ +body > div > div > div > div { + width: 72px; +} + +/* now we want to test all 128 combinations of presence of the following */ + +body > div.adir { direction: rtl; } +body > div.sdir > div { direction: rtl; } +body > div.edir > div > div { direction: rtl; } +body > div.ol > div > div { left: auto; } +body > div.or > div > div { right: auto; } +body > div.ml > div > div { margin-left: auto; } +body > div.mr > div > div { margin-right: auto; } + +/* combined with each of these three */ +body > div.narrowwidth > div > div { width: 153px; } +body > div.autowidth > div > div { width: auto; } +body > div.widewidth > div > div { width: 660px; } + + |