Status: PASS | Duration: 27ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-text/line-break/line-break-strict-017a.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 - strict and postfixes</title> <!-- postfixes --> <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-strict-017a-ref.xht" /> <meta http-equiv="content-language" content="en, ja" /> <meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before postfixes." /> <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: strict; /* The property to be tested */ } p.test, p.control { border: 1px solid gray; color: blue; font-family: "mplus-1p-regular"; width: 10.1em; /* added extra .1em for some symbols wider than 1em */ } span.target { background-color: aqua; } div.wrapper { display: inline-block; border: 1px solid; margin: 10px; padding: 10px; } </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"> <!-- postfixes DEGREE SIGN --> <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"> <!-- postfixes PER MILLE SIGN --> <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"> <!-- postfixes PRIME --> <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"> <!-- postfixes DOUBLE PRIME --> <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-strict-017a-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-strict-017.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.1em; /* added extra .1em for some symbols wider than 1em */ } span.target { background-color: aqua; } div.wrapper { display: inline-block; border: 1px solid; margin: 10px; padding: 10px; } </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"> <!-- postfixes DEGREE SIGN --> <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"> <!-- postfixes PER MILLE SIGN --> <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"> <!-- postfixes PRIME --> <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"> <!-- postfixes DOUBLE PRIME --> <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>