summaryrefslogtreecommitdiffstats
path: root/theme-compiler/tests/resources/w3ctests/scss/abspos-non-replaced-width-margin-000.0.scss
diff options
context:
space:
mode:
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.scss93
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; }
+
+