blob: 33ab40922ebe364d4c2b9c51ae6c77ca272b79fe [file] [log] [blame]
rego@igalia.com5df6cf92018-05-22 08:20:00 +00001<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>CSS Text Test: line-break - strict and centered punctuation marks</title>
6 <!-- centered punctuation marks -->
7 <link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
jfernandez@igalia.com1231c712019-03-06 15:57:06 +00008 <link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
9 <link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
rego@igalia.com5df6cf92018-05-22 08:20:00 +000010 <link rel="match" href="reference/line-break-strict-016a-ref.xht" />
11 <meta http-equiv="content-language" content="en, ja" />
jfernandez@igalia.com1231c712019-03-06 15:57:06 +000012 <meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before centered punctuation marks." />
rego@igalia.com5df6cf92018-05-22 08:20:00 +000013 <style type="text/css">
14 @font-face
15 {
16 font-family: "mplus-1p-regular";
17 src: url("/fonts/mplus-1p-regular.woff") format("woff");
18 /* filesize: 803300 bytes (784.5 KBytes) */
19 /*
20 mplus-1p-regular.ttf can be downloaded at/from [TBD later]
21 */
22 }
23 .test span {
jfernandez@igalia.com1231c712019-03-06 15:57:06 +000024 line-break: strict; /* The property to be tested */
rego@igalia.com5df6cf92018-05-22 08:20:00 +000025 }
26 p.test, p.control {
27 border: 1px solid gray;
28 color: blue;
29 font-family: "mplus-1p-regular";
jfernandez@igalia.com1231c712019-03-06 15:57:06 +000030 width: 10.2em; /* added extra .2em for some symbols wider than 1em */
rego@igalia.com5df6cf92018-05-22 08:20:00 +000031 }
32 span.target {
33 background-color: aqua;
34 }
35 div.wrapper {
36 display: inline-block;
37 border: 1px solid;
38 margin: 5px;
39 padding: 5px;
40 }
41 </style>
42 </head>
43 <body lang="en">
44 <p>
45 Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
46 </p>
47 <div class="wrapper">
rego@igalia.com5df6cf92018-05-22 08:20:00 +000048 <!-- centered punctuation marks KATAKANA MIDDLE DOT -->
49 <p class="test" lang="ja">
50 <span>サンプル文サンプル文<span class="target">&#x30fb;</span>サンプル文</span>
51 </p>
52 <p class="control" lang="ja">
53 <span>サンプル文サンプル<br />文<span class="target">&#x30fb;</span>サンプル文</span>
54 </p>
55 </div>
56 <div class="wrapper">
57 <!-- centered punctuation marks FULLWIDTH COLON -->
58 <p class="test" lang="ja">
59 <span>サンプル文サンプル文<span class="target">&#xff1a;</span>サンプル文</span>
60 </p>
61 <p class="control" lang="ja">
62 <span>サンプル文サンプル<br />文<span class="target">&#xff1a;</span>サンプル文</span>
63 </p>
64 </div>
65 <div class="wrapper">
66 <!-- centered punctuation marks FULLWIDTH SEMICOLON -->
67 <p class="test" lang="ja">
68 <span>サンプル文サンプル文<span class="target">&#xff1b;</span>サンプル文</span>
69 </p>
70 <p class="control" lang="ja">
71 <span>サンプル文サンプル<br />文<span class="target">&#xff1b;</span>サンプル文</span>
72 </p>
73 </div>
74 <div class="wrapper">
75 <!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
76 <p class="test" lang="ja">
77 <span>サンプル文サンプル文<span class="target">&#xff65;</span>サンプル文</span>
78 </p>
79 <p class="control" lang="ja">
80 <span>サンプル文サンプル<br />文<span class="target">&#xff65;</span>サンプル文</span>
81 </p>
82 </div>
rego@igalia.com5df6cf92018-05-22 08:20:00 +000083 </body>
84</html>