servo/tests/wpt/css-tests/css-writing-modes-3_dev/html/vertical-alignment-new-006.htm

37 lines
No EOL
1.5 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>
<link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com">
<link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment">
<link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
<meta name="assert" content="This test checks the position of inline box with vertical align property. When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-bottom', the left edge of inline-box aligned with the bottom of parent inline-box.">
<link rel="match" href="reference/vertical-alignment-new-006-ref.htm">
<meta name="flags" content="ahem">
<style type="text/css">
div#rl
{
color: orange;
font: 3.75em/1.5 Ahem; /* computes to 60px/90px */
writing-mode: vertical-rl;
}
span#orange30
{
font-size: 0.5em; /* computes to 30px */
vertical-align: text-bottom;
line-height: 1;
}
</style>
</head>
<body>
<p>Test passes if the <strong>left edge</strong> of an irregular orange polygon is straight and unbroken.</p>
<div id="rl">A<span id="orange30">O</span></div>
</body>
</html>