| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st
rict.dtd"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements</ti
tle> | |
| 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.ne
t/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/i
ntrinsic/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="resources/replaced-min-max.png" alt="FAIL" title="Test 0"></p> <
!-- Control --> | |
| 294 <p><img src="resources/replaced-min-max-1.png" alt="FAIL" title="Test 1" id="
img1"></p> <!-- Wi=75, Hi=75 --> | |
| 295 <p><img src="resources/replaced-min-max-2.png" alt="FAIL" title="Test 2" id="
img2"></p> <!-- Wi=150, Hi=150 --> | |
| 296 <p><img src="resources/replaced-min-max-3.png" alt="FAIL" title="Test 3" id="
img3"></p> <!-- Wi=300, Hi=150 --> | |
| 297 <p><img src="resources/replaced-min-max-4.png" alt="FAIL" title="Test 4" id="
img4"></p> <!-- Wi=25, Hi=25 --> | |
| 298 <p><img src="resources/replaced-min-max-5.png" alt="FAIL" title="Test 5" id="
img5"></p> <!-- Wi=25, Hi=50 --> | |
| 299 <p><img src="resources/replaced-min-max-6.png" alt="FAIL" title="Test 6" id="
img6"></p> <!-- Wi=150, Hi=150 --> | |
| 300 <p><img src="resources/replaced-min-max-7.png" alt="FAIL" title="Test 7" id="
img7"></p> <!-- Wi=150, Hi=300 --> | |
| 301 <p><img src="resources/replaced-min-max-8.png" alt="FAIL" title="Test 8" id="
img8"></p> <!-- Wi=25, Hi=25 --> | |
| 302 <p><img src="resources/replaced-min-max-9.png" alt="FAIL" title="Test 9" id="
img9"></p> <!-- Wi=50, Hi=25 --> | |
| 303 <p><img src="resources/replaced-min-max-10.png" alt="FAIL" title="Test 10" id
="img10"></p> <!-- Wi=300, Hi=375 --> | |
| 304 <p><img src="resources/replaced-min-max-11.png" alt="FAIL" title="Test 11" id
="img11"></p> <!-- Wi=250, Hi=250 --> | |
| 305 <p><img src="resources/replaced-min-max-12.png" alt="FAIL" title="Test 12" id
="img12"></p> <!-- Wi=375, Hi=300 --> | |
| 306 <p><img src="resources/replaced-min-max-13.png" alt="FAIL" title="Test 13" id
="img13"></p> <!-- Wi=250, Hi=250 --> | |
| 307 <p><img src="resources/replaced-min-max-14.png" alt="FAIL" title="Test 14" id
="img14"></p> <!-- Wi=25, Hi=25 --> | |
| 308 <p><img src="resources/replaced-min-max-15.png" alt="FAIL" title="Test 15" id
="img15"></p> <!-- Wi=50, Hi=25 --> | |
| 309 <p><img src="resources/replaced-min-max-16.png" alt="FAIL" title="Test 16" id
="img16"></p> <!-- Wi=25, Hi=25 --> | |
| 310 <p><img src="resources/replaced-min-max-17.png" alt="FAIL" title="Test 17" id
="img17"></p> <!-- Wi=25, Hi=50 --> | |
| 311 <p><img src="resources/replaced-min-max-18.png" alt="FAIL" title="Test 18" id
="img18"></p> <!-- Wi=50, Hi=100 --> | |
| 312 <p><img src="resources/replaced-min-max-19.png" alt="FAIL" title="Test 19" id
="img19"></p> <!-- Wi=100, Hi=50 --> | |
| 313 </body> | |
| 314 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2827713002:
Delete duplicated LayoutTests from css2.1/20110323 (Closed)
