mirror of
https://github.com/servo/servo.git
synced 2025-06-26 18:14:34 +01:00
51 lines
No EOL
2 KiB
HTML
51 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-combine-horizontal - all</title>
|
||
<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com">
|
||
<link rel="help" title="9.1. Horizontal-in-Vertical Composition: the ‘text-combine-horizontal’ property" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-horizontal">
|
||
<link rel="match" href="reference/text-combine-horizontal-011-ref.htm">
|
||
<meta http-equiv="content-language" content="en, ja">
|
||
<meta name="flags" content="font">
|
||
<meta name="assert" content="This test verifies that 'text-combine-horizontal: all' display the text contents of the element horizontally within the vertical line box. i.e. characters from horizontal-only scripts are rendered upright.">
|
||
<style type="text/css">
|
||
@font-face
|
||
{
|
||
font-family: "mplus-1p-regular";
|
||
src: url("support/mplus-1p-regular.woff") format("woff");
|
||
/* filesize: 803300 bytes (784.5 KBytes) */
|
||
/*
|
||
mplus-1p-regular.ttf can be downloaded at/from [TBD later]
|
||
*/
|
||
}
|
||
div
|
||
{
|
||
border: 1px solid gray;
|
||
font-family: "mplus-1p-regular";
|
||
font-size: 1.5em;
|
||
line-height: 2;
|
||
width: 4em;
|
||
writing-mode: vertical-rl;
|
||
-webkit-writing-mode: vertical-rl;
|
||
}
|
||
#test
|
||
{
|
||
}
|
||
.tcy /* tate-cyu-yoko: horizontal-in-vertical */
|
||
{
|
||
text-combine-horizontal: all; // The property to be tested
|
||
}
|
||
#control
|
||
{
|
||
text-orientation: upright;
|
||
-webkit-text-orientation: upright;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body lang="en">
|
||
<p>Test passes if the upper block is <strong>identical</strong> to the lower block, including orientation of each character.</p>
|
||
<div id="test" lang="ja"><span class="tcy">1</span>月<span class="tcy">2</span>日の次の日は、<br><span class="tcy">1</span>月<span class="tcy">3</span>日です。</div>
|
||
<hr>
|
||
<div id="control" lang="ja">1月2日の次の日は、<br>1月3日です。</div>
|
||
</body>
|
||
</html> |