blob: 463dd7ced58af06d234e27db8b1425e6fe919806 (
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
<meta name="flags" content="" />
<style type="text/css"><![CDATA[
body { direction: ltr; }
div { height: 1px; }
/* containing block */
body > div {
margin: 0 17px 0 3px;
border: medium solid transparent;
border-width: 0 154px 0 157px;
padding: 0 6px 0 2px;
width: 350px;
}
/* parent that is not containing block */
body > div > div { display: inline; }
/* test element */
body > div > div > div {
margin: 0 10px 0 6px;
border: medium solid transparent;
border-width: 0 12px 0 5px;
padding: 0 17px 0 9px;
}
body > div, body > div > div, body > div > div > div { direction: ltr; }
body > div.trtl > div > div { direction: rtl; }
body > div.prtl > div { direction: rtl; }
body > div.cbrtl { direction: rtl; }
body > div.mlauto > div > div { margin-left: auto; }
body > div.mrauto > div > div { margin-right: auto; }
body > div.wauto > div > div { width: auto; }
body > div.wnarrow > div > div { width: 127px; }
body > div.wwide > div > div { width: 415px; }
/*
* make a background on the containing block that is red
* everywhere except where the test should draw its background
*/
body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); }
body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); }
body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); }
body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); }
body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); }
body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); }
/*
* The only results in the markup rather than using selectors
* are whether the div ends up aligned to the left edge (atl),
* the right edge (atr), or centered (atc). Things with auto
* widths always count as atl, to make the style rules simpler
* (though they abut both edges).
*/
body > div.atl { background-position: 8px 0; }
body > div.atl.mlauto { background-position: 2px 0; }
body > div.atr.wnarrow { background-position: 172px 0; }
body > div.atr.wnarrow.mrauto { background-position: 182px 0; }
body > div.atr.wwide { background-position: -116px 0; }
body > div.atr.wwide.mrauto { background-position: -106px 0; }
/* Can only be atc when mlauto and mrauto and wnarrow. */
body > div.atc.wnarrow { background-position: 92px 0; }
/*
* make a background on the test div that is green only within
* its desired width and red elsewhere
*/
body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); }
body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); }
body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); }
body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); }
body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); }
body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); }
/* move position to border-edge */
body > div > div > div { background-position: -5px 0; }
/* for debugging */
/* body > div { background: transparent ! important; } */
/* body > div > div > div { background: orange ! important; } */
]]></style>
</head>
<body>
<div class="atl wauto"><div><div></div></div></div>
<div class="atl wauto trtl"><div><div></div></div></div>
<div class="atl wauto prtl"><div><div></div></div></div>
<div class="atl wauto prtl trtl"><div><div></div></div></div>
<div class="atl wauto cbrtl"><div><div></div></div></div>
<div class="atl wauto cbrtl trtl"><div><div></div></div></div>
<div class="atl wauto cbrtl prtl"><div><div></div></div></div>
<div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wauto mlauto"><div><div></div></div></div>
<div class="atl wauto mlauto trtl"><div><div></div></div></div>
<div class="atl wauto mlauto prtl"><div><div></div></div></div>
<div class="atl wauto mlauto prtl trtl"><div><div></div></div></div>
<div class="atl wauto mlauto cbrtl"><div><div></div></div></div>
<div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div>
<div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div>
<div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wauto mrauto"><div><div></div></div></div>
<div class="atl wauto mrauto trtl"><div><div></div></div></div>
<div class="atl wauto mrauto prtl"><div><div></div></div></div>
<div class="atl wauto mrauto prtl trtl"><div><div></div></div></div>
<div class="atl wauto mrauto cbrtl"><div><div></div></div></div>
<div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div>
<div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div>
<div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div>
<div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wnarrow"><div><div></div></div></div>
<div class="atl wnarrow trtl"><div><div></div></div></div>
<div class="atl wnarrow prtl"><div><div></div></div></div>
<div class="atl wnarrow prtl trtl"><div><div></div></div></div>
<div class="atr wnarrow cbrtl"><div><div></div></div></div>
<div class="atr wnarrow cbrtl trtl"><div><div></div></div></div>
<div class="atr wnarrow cbrtl prtl"><div><div></div></div></div>
<div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div>
<div class="atr wnarrow mlauto"><div><div></div></div></div>
<div class="atr wnarrow mlauto trtl"><div><div></div></div></div>
<div class="atr wnarrow mlauto prtl"><div><div></div></div></div>
<div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div>
<div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div>
<div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div>
<div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div>
<div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wnarrow mrauto"><div><div></div></div></div>
<div class="atl wnarrow mrauto trtl"><div><div></div></div></div>
<div class="atl wnarrow mrauto prtl"><div><div></div></div></div>
<div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div>
<div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div>
<div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div>
<div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div>
<div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div>
<div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wwide"><div><div></div></div></div>
<div class="atl wwide trtl"><div><div></div></div></div>
<div class="atl wwide prtl"><div><div></div></div></div>
<div class="atl wwide prtl trtl"><div><div></div></div></div>
<div class="atr wwide cbrtl"><div><div></div></div></div>
<div class="atr wwide cbrtl trtl"><div><div></div></div></div>
<div class="atr wwide cbrtl prtl"><div><div></div></div></div>
<div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wwide mlauto"><div><div></div></div></div>
<div class="atl wwide mlauto trtl"><div><div></div></div></div>
<div class="atl wwide mlauto prtl"><div><div></div></div></div>
<div class="atl wwide mlauto prtl trtl"><div><div></div></div></div>
<div class="atr wwide mlauto cbrtl"><div><div></div></div></div>
<div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div>
<div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div>
<div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wwide mrauto"><div><div></div></div></div>
<div class="atl wwide mrauto trtl"><div><div></div></div></div>
<div class="atl wwide mrauto prtl"><div><div></div></div></div>
<div class="atl wwide mrauto prtl trtl"><div><div></div></div></div>
<div class="atr wwide mrauto cbrtl"><div><div></div></div></div>
<div class="atr wwide mrauto cbrtl trtl"><div><div></div></div></div>
<div class="atr wwide mrauto cbrtl prtl"><div><div></div></div></div>
<div class="atr wwide mrauto cbrtl prtl trtl"><div><div></div></div></div>
<div class="atl wwide mrauto mlauto"><div><div></div></div></div>
<div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div>
<div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div>
<div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div>
<div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div>
<div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div>
<div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div>
<div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
</body>
</html>
|
