mirror of
https://github.com/servo/servo.git
synced 2025-10-09 13:09:25 +01:00
58 lines
No EOL
2.1 KiB
HTML
58 lines
No EOL
2.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<title>CSS Writing Modes Test: text-orientation - upright in vertical-rl writing mode</title>
|
||
<link rel="author" title="Kazuaki Takemura" href="mailto:takemura@networksoft.co.jp"/>
|
||
<link rel="help" title="5.1. Orienting Text" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation"/>
|
||
<meta name="flags" content="font image"/>
|
||
<meta name="assert" content="This test checks that the alphabet is displayed on the upright (not sideways),and it is verified whether the characters are aligned in the vertical direction including vertical writing characters(Japanese, Mongolian, Hangul, etc)."/>
|
||
<style type="text/css"><![CDATA[
|
||
@font-face
|
||
{
|
||
font-family: "DejaVuSerifBook";
|
||
src: url("support/DejaVuSerif-webfont.woff") format("woff");
|
||
/* Filesize: 18096 bytes (17.7 KBytes) */
|
||
}
|
||
|
||
div {
|
||
border: 1px solid gray;
|
||
float: left;
|
||
color: blue;
|
||
font-family: "DejaVuSerifBook";
|
||
font-size: 1.875em; /* equivalent to 30px */
|
||
line-height: 1.4; /* equivalent to 42px:
|
||
so that top-half-leading is 6px
|
||
and bottom-half-leading is 6px */
|
||
margin: 10px;
|
||
}
|
||
|
||
div#vertical
|
||
{
|
||
-webkit-writing-mode: vertical-rl;
|
||
-moz-writing-mode: vertical-rl;
|
||
-o-writing-mode: vertical-rl;
|
||
-ms-writing-mode: vertical-rl;
|
||
writing-mode: vertical-rl;
|
||
-webkit-text-orientation: upright;
|
||
-moz-text-orientation: upright;
|
||
-o-text-orientation: upright;
|
||
-ms-text-orientation: mixed;
|
||
text-orientation: upright;
|
||
}
|
||
|
||
img {vertical-align: top;}
|
||
|
||
]]></style>
|
||
</head>
|
||
<body>
|
||
|
||
<p>Test passes if both "Text sample" rectangles
|
||
have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong>:
|
||
"Text sample" should be displayed on the upright.</p>
|
||
|
||
<div id="vertical">Ｔext sample</div>
|
||
|
||
<div><img src="./support/text-orientation-upright-001.png" width="42" height="349" alt="Image download support must be enabled"/></div>
|
||
|
||
</body>
|
||
</html> |