servo/tests/wpt/css-tests/css-writing-modes-3_dev/html/text-orientation-015.htm

50 lines
No EOL
1.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Writing Modes Test: text-orientation - sideways</title>
<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com">
<link rel="help" title="5.1. Orienting Text: thetext-orientationproperty" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
<link rel="match" href="reference/text-orientation-015-ref.htm">
<meta http-equiv="content-language" content="en">
<meta name="flags" content="ahem">
<meta name="assert" content="This test checks that 'text-orientation: sideways' is equivalent tosideways-leftinvertical-lrwriting mode. This is effective to verify 1.block flow direction, 2.inline direction, but not effetive to verify 3.glyph orientation.">
<style type="text/css">
.view_ahem
{
background: pink;
border: 1px solid black;
color: blue;
font: 20px/1 "Ahem";
height: 3em;
margin: 10px;
width: 3em;
white-space: pre;
}
#test_ahem
{
text-orientation: sideways; //The property to be tested
-webkit-text-orientation:sideways;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
}
#control_ahem
{
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
}
</style>
</head>
<body lang="en">
<!--
Here, the "Ahem" sub-test is in place and checks 1.block flow direction and 2.inline direction,
but not cheks 3.glyph orientation.
-->
<p>Test passes if a pair of rectangles is <strong>identical</strong> including <strong>layout</strong>.</p>
<div class="view_ahem"><span id="test_ahem">123
56
7 </span></div>
<div class="view_ahem"><span id="control_ahem">36
25
1 7</span></div>
</body>
</html>