servo/tests/wpt/css-tests/css-text-3_dev/xhtml1/line-break-normal-023.xht

152 lines
No EOL
6 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">
<head>
<title>CSS Text Test: line-break - normal and centered punctuation marks</title>
<!-- centered punctuation marks -->
<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com"/>
<link rel="help" title="5.2. Breaking Rules for Punctuation: the 'line-break' property" href="http://www.w3.org/TR/css-text-3/#line-break"/>
<link rel="match" href="reference/line-break-normal-023-ref.xht"/>
<meta http-equiv="content-language" content="en, ja"/>
<meta name="flags" content="font"/>
<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking before centered punctuation marks such as COLON (U+003A) and SEMICOLON (U+003B)."/>
<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]
*/
}
.test span {
line-break: normal; // The property to be tested
}
p.test, p.control {
border: 1px solid gray;
color: blue;
font-family: "mplus-1p-regular";
width: 10em;
}
span.target {
background-color: aqua;
}
</style>
</head>
<body lang="en">
<p>
Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
</p>
<!-- centered punctuation marks COLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">:</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target">:</span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks SEMICOLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">;</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target">;</span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks FULLWIDTH COLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">!</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target">!</span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target">?</span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target">?</span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks DOUBLE QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
<hr/>
<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
<p class="test" lang="ja">
<span>サンプル文サンプル文<span class="target"></span>サンプル文</span>
</p>
<p class="control" lang="ja">
<span>サンプル文サンプル<br/><span class="target"></span>サンプル文</span>
</p>
</body>
</html>