replaced-min-max-001.xht (11115B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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"><![CDATA[ 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>