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 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 7 |
| 8 <title>CSS Test: height percentage - inline replaced element inside an auto-he
ight container</title> |
| 9 |
| 10 <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/"> |
| 11 |
| 12 <!-- |
| 13 Original post: |
| 14 Image % sizing interoperability |
| 15 from Bogdan Brinza who deserves credit for reporting this |
| 16 http://lists.w3.org/Archives/Public/www-style/2014Jun/0079.html |
| 17 --> |
| 18 |
| 19 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-prop
erty" title="10.5 Content height: the 'height' property"> |
| 20 <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2014J
un/0079.html" title="Image % sizing interoperability"> |
| 21 <link rel="match" href="reference/ref-filled-black-96px-square.htm"> |
| 22 |
| 23 <meta content="image" name="flags"> |
| 24 <meta content="This test checks that an height percentage is calculated with r
espect to the height of the generated box's containing block only if and only wh
en such containing block's height is specified explicitly (i.e., it depends on c
ontent height; its specified height is not 'auto'). In this test, the div#parent
has an 'auto' height; therefore the height percentage specified on div#child is
treated as 'auto' and so the image should be rendered (entirely visible) inside
that div#child. Note that div#grandparent's initial overflow value is 'visible'
." name="assert"> |
| 25 |
| 26 <style type="text/css"> |
| 27 div#grandparent {height: 0px;} |
| 28 |
| 29 div#child, img {height: 100%;} |
| 30 </style> |
| 31 |
| 32 </head> |
| 33 |
| 34 <body> |
| 35 |
| 36 <p>Test passes if there is a filled black square.</p> |
| 37 |
| 38 <div id="grandparent"> |
| 39 <div id="parent"> |
| 40 <div id="child"> |
| 41 <img src="support/black96x96.png" alt="Image download support must be en
abled"> |
| 42 </div> |
| 43 </div> |
| 44 </div> |
| 45 |
| 46 </body> |
| 47 </html> |
OLD | NEW |