Files
servo/tests/wpt/css-tests/css-writing-modes-3_dev/html/caption-side-vlr-003.htm

63 lines
2.1 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: 'caption-side: top' and vertical-lr</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#caption-side" title="7.7 Table Caption Mappings: the caption-side keywords">
<meta content="ahem image" name="flags">
<meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-lr table and if the rendering engine does not support side captions (i.e. left and right captions in horizontal writing modes), then the caption is placed at the block-start side of the table, which is on the lefthand side of such table. If the rendering engine supports side captions, then the rendering engine must place the caption at the physical top (logical left) side of the table box." name="assert">
<style type="text/css">
table#test
{
border-spacing: 0px;
caption-side: top;
font: 1.5624em/1 Ahem; /* computes to 25px/25px */
writing-mode: vertical-lr;
}
caption
{
color: blue;
}
td
{
color: orange;
padding: 0px;
}
div.reference
{
margin-top: 1em;
}
img
{
vertical-align: top;
}
</style>
</head>
<body>
<p>Test passes if the top bi-colored rectangle has a layout identical to one of the bi-colored rectangles below it.</p>
<table id="test">
<caption>CA</caption>
<tr>
<td>T</td><td>D</td>
</tr>
</table>
<div class="reference" id="does-NOT-support-side-captions"><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled"><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled"></div>
<div class="reference" id="supports-side-captions"><img src="support/swatch-blue.png" width="25" height="50" alt="Image download support must be enabled"><br><img src="support/swatch-orange.png" width="25" height="50" alt="Image download support must be enabled"></div>
</body>
</html>