Status: PASS | Duration: 29ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-text/line-break/line-break-normal-016b.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 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="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" /> <link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" /> <link rel="match" href="reference/line-break-normal-016b-ref.xht" /> <meta http-equiv="content-language" content="en, ja" /> <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("/fonts/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: 10.2em; /* added extra .2em for some symbols wider than 1em */ } span.target { background-color: aqua; } div.wrapper { display: inline-block; border: 1px solid; margin: 5px; padding: 5px; } </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> <div class="wrapper"> <!-- 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> </div> <div class="wrapper"> <!-- 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> </div> <div class="wrapper"> <!-- 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> </div> <div class="wrapper"> <!-- 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> </div> <div class="wrapper"> <!-- 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> </div> <div class="wrapper"> <!-- 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> </div> </body> </html>
/css/css-text/line-break/reference/line-break-normal-016b-ref.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 Reftest Reference</title> <!-- reftest for line-break-normal-016b.xht --> <link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" /> <link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" /> <meta http-equiv="content-language" content="en, ja" /> <style type="text/css"> @font-face { font-family: "mplus-1p-regular"; src: url("/fonts/mplus-1p-regular.woff") format("woff"); /* filesize: 803300 bytes (784.5 KBytes) */ /* mplus-1p-regular.ttf can be downloaded at/from [TBD later] */ } p.control { border: 1px solid gray; color: blue; font-family: "mplus-1p-regular"; width: 10.2em; /* added extra .2em for some symbols wider than 1em */ } span.target { background-color: aqua; } div.wrapper { display: inline-block; border: 1px solid; margin: 5px; padding: 5px; } </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> <div class="wrapper"> <!-- centered punctuation marks DOUBLE EXCLAMATION MARK --> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">‼</span>サンプル文</span> </p> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">‼</span>サンプル文</span> </p> </div> <div class="wrapper"> <!-- centered punctuation marks DOUBLE QUESTION MARK --> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">⁇</span>サンプル文</span> </p> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">⁇</span>サンプル文</span> </p> </div> <div class="wrapper"> <!-- centered punctuation marks QUESTION EXCLAMATION MARK --> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">⁈</span>サンプル文</span> </p> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">⁈</span>サンプル文</span> </p> </div> <div class="wrapper"> <!-- centered punctuation marks EXCLAMATION QUESTION MARK --> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">⁉</span>サンプル文</span> </p> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">⁉</span>サンプル文</span> </p> </div> <div class="wrapper"> <!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK --> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">！</span>サンプル文</span> </p> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">！</span>サンプル文</span> </p> </div> <div class="wrapper"> <!-- centered punctuation marks FULLWIDTH QUESTION MARK --> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">？</span>サンプル文</span> </p> <p class="control" lang="ja"> <span>サンプル文サンプル<br />文<span class="target">？</span>サンプル文</span> </p> </div> </body> </html>