| OLD | NEW |
|---|
| (Empty) | |
| 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</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"><![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="im
g1"/></p> <!-- Wi=75, Hi=75 --> |
| 295 <p><img src="support/replaced-min-max-2.png" alt="FAIL" title="Test 2" id="im
g2"/></p> <!-- Wi=150, Hi=150 --> |
| 296 <p><img src="support/replaced-min-max-3.png" alt="FAIL" title="Test 3" id="im
g3"/></p> <!-- Wi=300, Hi=150 --> |
| 297 <p><img src="support/replaced-min-max-4.png" alt="FAIL" title="Test 4" id="im
g4"/></p> <!-- Wi=25, Hi=25 --> |
| 298 <p><img src="support/replaced-min-max-5.png" alt="FAIL" title="Test 5" id="im
g5"/></p> <!-- Wi=25, Hi=50 --> |
| 299 <p><img src="support/replaced-min-max-6.png" alt="FAIL" title="Test 6" id="im
g6"/></p> <!-- Wi=150, Hi=150 --> |
| 300 <p><img src="support/replaced-min-max-7.png" alt="FAIL" title="Test 7" id="im
g7"/></p> <!-- Wi=150, Hi=300 --> |
| 301 <p><img src="support/replaced-min-max-8.png" alt="FAIL" title="Test 8" id="im
g8"/></p> <!-- Wi=25, Hi=25 --> |
| 302 <p><img src="support/replaced-min-max-9.png" alt="FAIL" title="Test 9" id="im
g9"/></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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2818243002:
Import css21/normal-flow W3C CSS Test Suite (Closed)
