servo/tests/wpt/css-tests/css-text-3_dev/xhtml1/hanging-punctuation-allow-end-001.xht

95 lines
No EOL
2.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 - allow-end - basic cases</title>
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp"/>
<link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the hanging-punctuation property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation"/>
<link rel="match" href="reference/hanging-punctuation-allow-end-001-ref.xht"/>
<meta name="flags" content="font"/>
<meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text."/>
<style type="text/css">
<![CDATA[
.test {
hanging-punctuation: allow-end;
}
/* the CSS below is not part of the test */
body {
font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
}
.no-wrap {
white-space: nowrap;
}
.parent {
border: 1px solid gray;
margin-left: 2em;
width: 10em
}
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>
<hr/>
<div>
IDEOGRAPHIC COMMA
</div>
<div class="parent">
<div class="test">
これらは満たす文字で、それらも満たす文字です。
</div>
<br/>
<div class="no-wrap">
これらは満たす文字で、<br/>それらも満たす文字で<br/>す。
</div>
</div>
<hr/>
<div>
IDEOGRAPHIC FULL STOP
</div>
<div class="parent">
<div class="test">
これは満たす文字です。
</div>
<br/>
<div class="no-wrap">
これは満たす文字です。
</div>
</div>
<hr/>
<div>
HALFWIDTH IDEOGRAPHIC COMMA
</div>
<div class="parent">
<div class="test">
ミタスモジ、ミタスモジ、ミタスモジ、ミタスモジ。
</div>
<br/>
<div class="no-wrap">
ミタスモジ、ミタスモジ、ミタスモジ、<br/>ミタスモジ。
</div>
</div>
<hr/>
<div>
HALFWIDTH IDEOGRAPHIC FULL STOP
</div>
<div class="parent">
<div class="test">
ミタスモジ。ミタスモジ。ミタスモジ。ミタスモジ。
</div>
<br/>
<div class="no-wrap">
ミタスモジ。ミタスモジ。ミタスモジ。<br/>ミタスモジ。
</div>
</div>
<hr/>
<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>