blob: 69f5c2fa6ad24f944592b98f997222d072d97e4a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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; }
|
