| 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 | |
| 4 <head> | |
| 5 | |
| 6 <title>CSS Test: Inline replaced elements in normal flow - specified width, he
ight in percentages and intrinsic ratio</title> | |
| 7 | |
| 8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/"> | |
| 9 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced
-height" title="10.6.2 Inline replaced elements, block-level replaced elements i
n normal flow, 'inline-block' replaced elements in normal flow and floating repl
aced elements"> | |
| 10 <meta http-equiv="Content-Style-Type" content="text/css"> | |
| 11 <meta content="image" name="flags"> | |
| 12 <meta content="When 'height: 1%' (or any other percentage) applies to an inlin
e replaced element and when the height of its containing block is not specified
explicitly (i.e., it depends on content height), then such height computes to 'a
uto'. Then, if such inline replaced element has an intrinsic ratio and its used
width is known or resolved, then the used value of 'height' is determined by the
equation (used width) / (intrinsic ratio)." name="assert"> | |
| 13 | |
| 14 </head> | |
| 15 | |
| 16 <body> | |
| 17 | |
| 18 <p>There should be <strong>5 filled green squares</strong> with the same width
and the <strong>same height</strong>. The 5 filled green squares should be <str
ong>identical</strong> to each other. This should still remain true even after a
window resize.</p> | |
| 19 | |
| 20 <div> | |
| 21 <img src="support/60x60-green.png" width="15%" alt="FAIL: image download must
be enabled"> | |
| 22 | |
| 23 <img src="support/60x60-green.png" width="15%" height="1%" alt="FAIL: image d
ownload must be enabled"> | |
| 24 | |
| 25 <img src="support/60x60-green.png" style="width: 15%;" alt="FAIL: image downl
oad must be enabled"> | |
| 26 | |
| 27 <img src="support/60x60-green.png" style="width: 15%; height: auto;" alt="FAI
L: image download must be enabled"> | |
| 28 | |
| 29 <img src="support/60x60-green.png" style="width: 15%; height: 1%;" alt="FAIL:
image download must be enabled"> | |
| 30 </div> | |
| 31 | |
| 32 </body> | |
| 33 </html> | |
| OLD | NEW |