summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-001-ref.xht
blob: 1949939eb8b854e6ffdc8d21121f4f5f05e0e9ad (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<?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" xml:lang="ja">
	<head>
		<title>CSS Test: hanging-punctuation - first - basic cases Reftest Reference</title>
		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
		<style type="text/css">
			<![CDATA[
				body {
					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
				}
				.hanging {
					left: -1em;
					position: relative;
				}
				.no-wrap {
					white-space: nowrap;
				}
				.parent {
					border: 1px solid gray;
					margin-left: 2em;
					width: 10em
				}
				div.wrapper {
					display: inline-block;
					border: 1px solid;
					margin: 10px;
					padding: 10px;
				}
				span.attention {
					color: red;
				}
			]]>
		</style>
	</head>
	<body>
		<p>
			Test passes if each pair of upper and lower text in the square box is identical.
		</p>
		<div class="wrapper">
			<div>
				Opening brackets
			</div>
			<div class="parent">
				<div class="no-wrap">
					<span class="hanging">「これは、満たすための</span><br />文字です。」
				</div>
				<br />
				<div class="no-wrap">
					<span class="hanging">「これは、満たすための</span><br />文字です。」
				</div>
			</div>
		</div>
		<div class="wrapper">
			<div>
				Closing brackets
			</div>
			<div class="parent">
				<div class="no-wrap">
					これは、「満たす文<br />字」です。
				</div>
				<br />
				<div class="no-wrap">
					これは、「満たす文<br />字」です。
				</div>
			</div>
		</div>
		<div class="wrapper">
			<div>
				Initial quotes
			</div>
			<div class="parent">
				<div class="no-wrap">
					<span class="hanging">“これは、満たすための</span><br />文字です。”
				</div>
				<br />
				<div class="no-wrap">
					<span class="hanging">“これは、満たすための</span><br />文字です。”
				</div>
			</div>
		</div>
		<div class="wrapper">
			<div>
				Final quotes
			</div>
			<div class="parent">
				<div class="no-wrap">
					これは、“満たす文<br />字”です。
				</div>
				<br />
				<div class="no-wrap">
					これは、“満たす文<br />字”です。
				</div>
			</div>
		</div>
		<p>
			<span class="attention">* You will need a Japanese font.</span><br />
			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
		</p>
	</body>
</html>