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: max-height percentage - inline replaced element inside an aut
o-height 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#min-max-heights
" title="10.7 Minimum and maximum heights: 'min-height' and 'max-height'"> |
| 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 a max-height percentage is calculated wit
h respect to the height of the generated box's containing block only if and only
when such containing block's height is specified explicitly (i.e., it depends o
n content height; its specified height is not 'auto'). In this test, the div#chi
ld has an 'auto' height; therefore the max-height percentage is treated as 'none
' and so the image should be rendered (entirely visible) inside that div#child.
Note that div#parent's initial overflow value is 'visible'." name="assert"> |
| 25 |
| 26 <style type="text/css"> |
| 27 div#parent {height: 0px;} |
| 28 |
| 29 img {max-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="parent"> |
| 39 <div id="child"><img src="support/black96x96.png" alt="Image download suppor
t must be enabled"></div> |
| 40 </div> |
| 41 |
| 42 </body> |
| 43 </html> |
OLD | NEW |