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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta content="If 'width' is auto and 'left' and 'right' are not 'auto', then set 'auto' values for 'margin-left' and 'margin-right' to 0 and then solve for 'width'; the tentative width may be later constrained by max-width in which case, the algorithm must be re-entered. If 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'; the tentative height may be later constrained by max-height in which case, the algorithm must be re-entered." name="assert" />
<style type="text/css"><![CDATA[
div#rel-pos-container
{
background-color: green;
height: 100px;
position: relative;
width: 100px;
}
div#rel-pos-container > div {position: absolute;}
div#reference-red-overlapped
{
background-color: red;
height: 33px;
left: 33px;
top: 33px;
width: 33px;
}
div#test-green-overlapping
{
background-color: green;
bottom: 0;
height: auto;
left: 0;
margin: auto;
max-height: 34px;
max-width: 34px;
right: 0;
top: 0;
width: auto;
}
/*
First we set both margin-left and margin-right to 0 since
"
set 'auto' values for 'margin-left' and 'margin-right' to 0
(...)
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
"
10.3.7 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
0px : left
+
0px (set) : margin-left
+
0px : border-left
+
0px : padding-left
+
(solve) : width (not constrained yet by max-width)
+
0px : padding-right
+
0px : border-right
+
0px (set) : margin-right
+
0px : right
=============
100px : width of containing block
So, (tentative) width is 100px but now we must
constrain it by computed max-width value and so we
must now re-enter the algorithm but this time,
'width' is not 'auto': therefore horizontal margins
must not be set to 0:
"
If none of the three (left, width, right) is 'auto':
If both 'margin-left' and 'margin-right' are 'auto',
solve the equation under the extra constraint that
the two margins get equal values
"
10.3.7 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
So:
0px : left
+
(solve) : margin-left
+
0px : border-left
+
0px : padding-left
+
34px : width (constrained by max-width)
+
0px : padding-right
+
0px : border-right
+
(solve) : margin-right
+
0px : right
=============
100px : width of containing block
Therefore, margin-left and margin-right used values are
each respectively equal to ((100px minus 34px) divided by 2) == 33px.
-----------------------------------------------
First we set both margin-top and margin-bottom to 0 since
"
5. 'height' is 'auto', 'top' and 'bottom' are not 'auto',
then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
and solve for 'height'
"
10.6.4 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
0px : top
+
0px (set) : margin-top
+
0px : border-top
+
0px : padding-top
+
(solve) : height (not constrained yet by max-height)
+
0px : padding-bottom
+
0px : border-bottom
+
0px (set) : margin-bottom
+
0px : bottom
=============
100px : height of containing block
So, (tentative) height is 100px but now we must
constrain it by computed max-height value and so we
must now re-enter the algorithm but this time,
'height' is not 'auto': therefore vertical margins
must not be set to 0:
"
If none of the three (top, height, bottom) are 'auto':
If both 'margin-top' and 'margin-bottom' are 'auto',
solve the equation under the extra constraint that
the two margins get equal values.
"
10.6.4 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
So:
0px : top
+
(solve) : margin-top
+
0px : border-top
+
0px : padding-top
+
34px : height (constrained by max-height)
+
0px : padding-bottom
+
0px : border-bottom
+
(solve) : margin-bottom
+
0px : bottom
=============
100px : height of containing block
Therefore, margin-top and margin-bottom used values are
each respectively equal to ((100px minus 34px) divided by 2) == 33px.
*/
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="rel-pos-container">
<div id="reference-red-overlapped"></div>
<div id="test-green-overlapping"></div>
</div>
</body>
</html>
|
