css-writing-modes-3/text-combine-horizontal-011.xht

﻿<?xml version="1.0" encoding="UTF-8"?>
<!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-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/css3-writing-modes/#text-combine-horizontal" />
		<link rel="match" href="reftest/text-combine-horizontal-011-ref.xht" />
		<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>