mirror of
https://github.com/servo/servo.git
synced 2025-06-28 19:13:41 +01:00
58 lines
No EOL
2 KiB
HTML
58 lines
No EOL
2 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: text-orientation - mixed 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">
|
||
<link rel="match" href="reference/text-orientation-mixed-001-ref.htm">
|
||
<meta name="flags" content="font image">
|
||
<meta name="assert" content="This test checks that the alphabet is displayed on 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">
|
||
@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: mixed;
|
||
-moz-text-orientation: mixed;
|
||
-o-text-orientation: mixed;
|
||
-ms-text-orientation: mixed;
|
||
text-orientation: mixed;
|
||
}
|
||
|
||
img {vertical-align: top;}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<p>Test passes if both "Text sample" rectangles are <strong>identical</strong>: only "T" should be displayed vertically and "ext Sample" should be displayed sideways.</p>
|
||
|
||
<div id="vertical">Ｔext sample</div>
|
||
|
||
<div><img src="./support/text-orientation-mixed-001.png" width="42" height="189" alt="Image download support must be enabled"></div>
|
||
|
||
</body>
|
||
</html> |