| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| |
| <head> |
| |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| |
| <title>CSS Test: height of line box and inline replaced elements</title> |
| |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> |
| <link rel="author" title="Alan Gresley" href="mailto:alan@css-class.com" /> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" /> |
| <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Oct/0546.html" title="line-height: normal and multiple descendant font sizes" /> |
| <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> |
| |
| <meta name="flags" content="image" /> |
| <meta name="assert" content="This test checks the height determination of a line box when such line box is made of a single inline replaced element. In this test, we verify that the margin box of an inline replaced element does indeed determine the line box height. div {line-height: 0px} rule only determines the minimum of the line box height." /> |
| |
| <style type="text/css"><![CDATA[ |
| div |
| { |
| background-color: red; |
| line-height: 0px; |
| } |
| |
| img |
| { |
| margin-bottom: -100px; |
| margin-top: 0px; |
| vertical-align: bottom; /* or top */ |
| /* |
| By default, images "sit" on the baseline (vertical-align's default value is 'baseline', not 'bottom' and not 'top') and not at the bottom of line boxes. Therefore, if we want to "nullify" the height of line box, then we must set 'vertical-align' to 'bottom' or to 'top'. "In case they [inline boxes] are [vertically-] aligned [to] 'top' or 'bottom', they must be aligned so as to minimize the line box height.": the line box height would not be minimizable to zero if the inline replaced box had been "sitting" on the baseline. |
| */ |
| } |
| ]]></style> |
| |
| </head> |
| |
| <body> |
| |
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> |
| |
| <div id="target"><img src="support/green_box.png" alt="Image download support must be enabled" /></div> |
| |
| </body> |
| </html> |
