92 lines
No EOL
2.5 KiB
HTML
92 lines
No EOL
2.5 KiB
HTML
<!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>
|
|
|
|
<title>CSS Test: Vertical-align applied to empty 'inline-block' and baseline alignment</title>
|
|
|
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
|
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" title="10.8.1 Leading and half-leading" />
|
|
<link rel="match" href="vertical-align-baseline-004a-ref.xht" />
|
|
|
|
<meta content="ahem image" name="flags" />
|
|
<meta content="The baseline of an 'inline-block' that has no in-flow line boxes is at its bottom margin edge. The bottom margin edge of an 'inline-block' that has no inflow line boxes will 'sit' on the baseline, will be located on the baseline of such 'inline-block'." name="assert" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style type="text/css"><![CDATA[
|
|
body {margin: 8px;}
|
|
|
|
p
|
|
{
|
|
font: 1em/1.25 serif;
|
|
margin: 1em 0em;
|
|
}
|
|
|
|
div#wrapper
|
|
{
|
|
background-color: yellow;
|
|
/*
|
|
The sole purpose for such yellow background
|
|
is to help delimit and visually identify the
|
|
content area of the block container box.
|
|
*/
|
|
|
|
color: black;
|
|
font: 50px/1 Ahem;
|
|
/*
|
|
So that 50px / 5 == 10 without remainder;
|
|
that way, the accurate position of baseline
|
|
does not imply fractional pixel.
|
|
Also, the height of the "p" glyph will not
|
|
create fractional pixel either.
|
|
*/
|
|
}
|
|
|
|
div#inline-block-without-inflow-line-boxes
|
|
{
|
|
background-color: blue;
|
|
display: inline-block;
|
|
margin-bottom: 99px;
|
|
height: 2em;
|
|
width: 2em;
|
|
}
|
|
|
|
img
|
|
{
|
|
position: absolute;
|
|
top: 72px;
|
|
|
|
/*
|
|
|
|
16px : max(body's margin-top, p's margin-top) == max(8px, 16px)
|
|
+
|
|
20px : p's first line box height
|
|
+
|
|
20px : p's second line box height
|
|
+
|
|
16px : p's margin-bottom
|
|
========
|
|
72px
|
|
|
|
*/
|
|
}
|
|
]]></style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<p>Test passes if the bottom edge of the blue square is flush with the 100px<br />
|
|
line and if the top edge of the black stripe is flush with the 200px line.</p>
|
|
|
|
<div id="wrapper"><div id="inline-block-without-inflow-line-boxes"></div><img src="support/ruler-v-100px-200px.png" width="55" height="250" alt="Image download support must be enabled" />pppppppp</div>
|
|
|
|
<!--
|
|
By definition, the top of "p" glyphs - which is the
|
|
black stripe in the rendered layout - should be
|
|
perfectly flush with the baseline.
|
|
-->
|
|
|
|
</body>
|
|
</html> |