Blitz - WPT: hyphenate-character-003.html

wpt / css / css-text / hyphens / hyphenate-character-003.html

/css/css-text/hyphens/hyphenate-character-003.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text test: hyphenate-character</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
<link rel="match" href="reference/hyphenate-character-003-ref.html">
<meta name="assert" content="Specifies the string that appears at the end of the line before a hyphenation break">
<style>
div {
  font: 16px monospace;
  width: 5.5ch;  /* wide enough that the first potential break in "re-al-iza-tion" should NOT be used */
  hyphens: manual;
  hyphenate-character: "\2022";
}
</style>

<p>Test passes if the words below are hyphenated <b>using a bullet (&#x2022;) character</b>.

<div lang="en">
im&shy;ple&shy;men&shy;ta&shy;tion<br><br>
ini&shy;tial&shy;iza&shy;tion<br><br>
re&shy;al&shy;iza&shy;tion<br><br>
hy&shy;phen&shy;ation
</div>

/css/css-text/hyphens/reference/hyphenate-character-003-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text reference: hyphenate-character</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
  font: 16px monospace;
}
</style>

<p>Test passes if the words below are hyphenated <b>using a bullet (&#x2022;) character</b>.

<div lang="en">
im•<br>ple•<br>men•<br>ta•<br>tion<br><br>
ini•<br>tial•<br>iza•<br>tion<br><br>
real•<br>iza•<br>tion<br><br>
hy•<br>phen•<br>ation
</div>