1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
6 <link rel="reviewer" title="Ian Hickson" href="mailto:ian@hixie.ch">
7 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/replaced/intrinsic/001.html" type="text/html">
8 <meta name="flags" content="image">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
10 <style type="text/css">
11
12 /* Make test easier to check */
13 p { display: inline; }
14
15 /* Diagrams are scaled so that w and h line up.
16 Image is 75px x 75px; target dimensions will thus be 75px. */
17
18 /* none
19 *
20 * wmin w wmax
21 * |------------------+------+---------+------> width
22 * hmin h hmax
23 * |-------------+-----------+-----+----------> height
24 *
25 * target: [w, h]
26 */
27
28 #img1 {min-width: 60px;
29 max-width: 105px;
30 min-height: 45px;
31 max-height: 120px;}
32
33 /* w > max-width
34 * wmax/w > hmin/h
35 * wmax w
36 * |------------------+------+----------------> width
37 * hmin h
38 * |------------+------------+----------------> height
39 *
40 * target: [wmax, wmax * h/w]
41 */
42
43 #img2 {max-width: 75px; /* 50% */
44 min-height: 60px; /* 40% */}
45
46 /* w > max-width
47 * wmax/w < hmin/h
48 *
49 * wmax w
50 * |-------------+-----------+----------------> width
51 * hmin h
52 * |------------------+------+----------------> height
53 *
54 * target: [wmax, hmin]
55 */
56
57 #img3 {max-width: 75px; /* 25% */
58 min-height: 75px; /* 50% */}
59
60 /* w < min-width
61 * wmin/w < hmax/h
62 *
63 * w wmin
64 * |-------------+---------+------------------> width
65 * h hmax
66 * |-------------+----------------+-----------> height
67 *
68 * target: [wmin, wmin * h/w]
69 */
70
71 #img4 {min-width: 75px; /* 300% */
72 max-height: 100px; /* 400% */}
73
74 /* w < min-width
75 * wmin/w > hmax/h
76 *
77 * w wmin
78 * |-------------+----------------+-----------> width
79 * h hmax
80 * |-------------+---------+------------------> height
81 *
82 * target: [wmin, hmax]
83 */
84
85 #img5 {min-width: 75px; /* 300% */
86 max-height: 75px; /* 150% */}
87
88 /* h > max-height
89 * wmin/w < hmax/h
90 *
91 * wmin w
92 * |------------+------------+----------------> width
93 * hmax h
94 * |------------------+------+----------------> height
95 *
96 * target: [hmax * w/h, hmax]
97 */
98
99 #img6 {min-width: 60px; /* 40% */
100 max-height: 75px; /* 50% */}
101
102 /* h > max-height
103 * wmin/w > hmax/h
104 *
105 * wmin w
106 * |------------------+------+----------------> width
107 * hmax h
108 * |-------------+-----------+----------------> height
109 *
110 * target: [wmin, hmax]
111 */
112
113 #img7 {min-width: 75px; /* 50% */
114 max-height: 75px; /* 25% */}
115
116 /* h < min-height
117 * wmax/w > hmin/h
118 *
119 * w wmax
120 * |-------------+----------------+-----------> height
121 * h hmin
122 * |-------------+---------+------------------> width
123 *
124 * target: [hmin * w/h, hmin]
125 */
126
127 #img8 {max-width: 100px; /* 400% */
128 min-height: 75px; /* 300% */}
129
130 /* w < min-width
131 * wmax/w < hmin/h
132 *
133 * w wmax
134 * |-------------+---------+------------------> width
135 * h hmin
136 * |-------------+----------------+-----------> height
137 *
138 * target: [wmax, hmin]
139 */
140
141 #img9 {max-width: 75px; /* 150% */
142 min-height: 75px; /* 300% */}
143
144 /* (w > max-width) and (h > max-height)
145 * (wmin/w > hmax/h) and (wmin/w > hmax/h)
146 *
147 * wmin wmax w
148 * |------------------+------+-------+--------> width
149 * hmax h
150 * |-------------+-------------------+--------> height
151 *
152 * target: [wmin, hmax]
153 */
154
155 #img10 { min-width: 75px; /* 25% */
156 max-width: 150px; /* 50% */
157 max-height: 75px; /* 20% */}
158
159 /* (w > max-width) and (h > max-height)
160 * (wmax/w > hmax/h) and (wmin/w < hmax/h)
161 *
162 * wmin wmax w
163 * |---------+---------------+-------+--------> width
164 * hmax h
165 * |-------------+-------------------+--------> height
166 *
167 * target: [hmax * w/h, hmax]
168 */
169
170 #img11 { min-width: 25px; /* 10% */
171 max-width: 225px; /* 90% */
172 max-height: 75px; /* 30% */}
173
174 /* (w > max-width) and (h > max-height)
175 * (wmax/w < hmax/h) and (wmax/w < hmin/h)
176 *
177 * wmax w
178 * |-------------+-------------------+--------> width
179 * hmin hmax h
180 * |------------------+------+-------+--------> height
181 *
182 * target: [wmax, hmin]
183 */
184
185 #img12 { max-width: 75px; /* 20% */
186 min-height: 75px; /* 25% */
187 max-height: 150px; /* 50% */}
188
189 /* (w > max-width) and (h > max-width)
190 * (wmax/w < hmax/h) and (wmax/w > hmin/h)
191 *
192 * wmax w
193 * |-------------+-------------------+--------> width
194 * hmin hmax h
195 * |---------+---------------+-------+--------> height
196 *
197 * target: [wmax, wmax * h/w]
198 */
199
200 #img13 { max-width: 75px; /* 30% */
201 min-height: 25px; /* 10% */
202 max-height: 225px; /* 90% */}
203
204 /* (w < min-width) and (h < min-height)
205 * (wmin/w < hmin/h) and (wmax/w > hmin/h)
206 *
207 * w wmin wmax
208 * |----------+---------+----------+----------> width
209 * h hmin
210 * |----------+-------------+-----------------> height
211 *
212 * target: [hmin * w/h, hmin]
213 */
214
215 #img14 { min-width: 50px; /* 200% */
216 max-width: 100px; /* 400% */
217 min-height: 75px; /* 300% */}
218
219 /* (w < min-width) and (h < min-height)
220 * (wmin/w < hmin/h) and (wmax/w < hmin/h)
221 *
222 * w wmin wmax
223 * |----------+---------+----------+----------> width
224 * h hmin
225 * |----------+------------------------+------> height
226 *
227 * target: [wmax, hmin]
228 */
229
230 #img15 { min-width: 55px; /* 110% */
231 max-width: 75px; /* 150% */
232 min-height: 75px; /* 300% */}
233
234 /* (w < min-width) and (h < min-height)
235 * (wmin/w > hmin/h) and (wmin/w < hmax/h)
236 *
237 * w wmin
238 * |----------+-------------+-----------------> width
239 * h hmin hmax
240 * |----------+---------+----------+----------> height
241 *
242 * target: [wmin, wmin * h/w]
243 */
244
245 #img16 { min-width: 75px; /* 300% */
246 min-height: 50px; /* 200% */
247 max-height: 100px; /* 400% */}
248
249 /* (w < min-width) and (h < min-height)
250 * (wmin/w > hmin/h) and (wmin/w > hmax/h)
251 * w wmin
252 * |----------+------------------------+------> width
253 * h hmin hmax
254 * |----------+---------+----------+----------> height
255 *
256 * target: [wmin, hmax]
257 */
258
259 #img17 { min-width: 75px; /* 300% */
260 min-height: 55px; /* 110% */
261 max-height: 75px; /* 150% */}
262
263 /* (w < min-width) and (h > max-height)
264 *
265 * w wmin
266 * |-------------------------+-----+----------> width
267 * hmax h
268 * |------------------+------+----------------> height
269 *
270 * target: [wmin, hmax]
271 */
272
273 #img18 { min-width: 75px; /* 150% */
274 max-height: 75px; /* 75% */}
275
276 /* (w > max-width) and (h < min-height)
277 *
278 * wmax w
279 * |------------------+------+----------------> width
280 * h hmin
281 * |-------------------------+-----+----------> height
282 *
283 * target: [wmax, hmin]
284 */
285
286 #img19 { max-width: 75px; /* 75% */
287 min-height: 75px; /* 150% */}
288
289 </style>
290 </head>
291 <body>
292 <div>All twenty images should be identically square.</div>
293 <p><img src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></p> <!-- Control -->
294 <p><img src="support/replaced-min-max-1.png" alt="FAIL" title="Test 1" id="img1"></p> <!-- Wi=75, Hi=75 -->
295 <p><img src="support/replaced-min-max-2.png" alt="FAIL" title="Test 2" id="img2"></p> <!-- Wi=150, Hi=150 -->
296 <p><img src="support/replaced-min-max-3.png" alt="FAIL" title="Test 3" id="img3"></p> <!-- Wi=300, Hi=150 -->
297 <p><img src="support/replaced-min-max-4.png" alt="FAIL" title="Test 4" id="img4"></p> <!-- Wi=25, Hi=25 -->
298 <p><img src="support/replaced-min-max-5.png" alt="FAIL" title="Test 5" id="img5"></p> <!-- Wi=25, Hi=50 -->
299 <p><img src="support/replaced-min-max-6.png" alt="FAIL" title="Test 6" id="img6"></p> <!-- Wi=150, Hi=150 -->
300 <p><img src="support/replaced-min-max-7.png" alt="FAIL" title="Test 7" id="img7"></p> <!-- Wi=150, Hi=300 -->
301 <p><img src="support/replaced-min-max-8.png" alt="FAIL" title="Test 8" id="img8"></p> <!-- Wi=25, Hi=25 -->
302 <p><img src="support/replaced-min-max-9.png" alt="FAIL" title="Test 9" id="img9"></p> <!-- Wi=50, Hi=25 -->
303 <p><img src="support/replaced-min-max-10.png" alt="FAIL" title="Test 10" id="img10"></p> <!-- Wi=300, Hi=375 -->
304 <p><img src="support/replaced-min-max-11.png" alt="FAIL" title="Test 11" id="img11"></p> <!-- Wi=250, Hi=250 -->
305 <p><img src="support/replaced-min-max-12.png" alt="FAIL" title="Test 12" id="img12"></p> <!-- Wi=375, Hi=300 -->
306 <p><img src="support/replaced-min-max-13.png" alt="FAIL" title="Test 13" id="img13"></p> <!-- Wi=250, Hi=250 -->
307 <p><img src="support/replaced-min-max-14.png" alt="FAIL" title="Test 14" id="img14"></p> <!-- Wi=25, Hi=25 -->
308 <p><img src="support/replaced-min-max-15.png" alt="FAIL" title="Test 15" id="img15"></p> <!-- Wi=50, Hi=25 -->
309 <p><img src="support/replaced-min-max-16.png" alt="FAIL" title="Test 16" id="img16"></p> <!-- Wi=25, Hi=25 -->
310 <p><img src="support/replaced-min-max-17.png" alt="FAIL" title="Test 17" id="img17"></p> <!-- Wi=25, Hi=50 -->
311 <p><img src="support/replaced-min-max-18.png" alt="FAIL" title="Test 18" id="img18"></p> <!-- Wi=50, Hi=100 -->
312 <p><img src="support/replaced-min-max-19.png" alt="FAIL" title="Test 19" id="img19"></p> <!-- Wi=100, Hi=50 -->
313 </body>
314 </html>