diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-text/hyphens | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-text/hyphens')
109 files changed, 2934 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-001.html new file mode 100644 index 0000000000..cad4f6e3e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-001.html @@ -0,0 +1,24 @@ +<!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-001-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: 4.5ch; /* wide enough that the first potential break in "re-al-iza-tion" should NOT be used */ + hyphens: manual; + hyphenate-character: ""; +} +</style> + +<p>Test passes if the words below are broken at hyphenation positions but <b>no visible hyphens appear</b>. + +<div lang="en"> +im­ple­men­ta­tion<br><br> +ini­tial­iza­tion<br><br> +re­al­iza­tion<br><br> +hy­phen­ation +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-002.html new file mode 100644 index 0000000000..07376fc6b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-002.html @@ -0,0 +1,25 @@ +<!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-001-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: 4.5ch; /* wide enough that the first potential break in "re-al-iza-tion" should NOT be used */ + hyphens: auto; /* assuming the usual en_US patterns, should generate the same breaks as the manual + soft hyphens in test 001. */ + hyphenate-character: ""; +} +</style> + +<p>Test passes if the words below are broken at hyphenation positions but <b>no visible hyphens appear</b>. + +<div lang="en"> +implementation<br><br> +initialization<br><br> +realization<br><br> +hyphenation +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-003.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-003.html new file mode 100644 index 0000000000..574f4d37b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-003.html @@ -0,0 +1,24 @@ +<!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 (•) character</b>. + +<div lang="en"> +im­ple­men­ta­tion<br><br> +ini­tial­iza­tion<br><br> +re­al­iza­tion<br><br> +hy­phen­ation +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-004.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-004.html new file mode 100644 index 0000000000..36ce9263bd --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-004.html @@ -0,0 +1,24 @@ +<!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-004-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: 6.5ch; /* wide enough that the last potential break in "im-ple-men-ta-tion" should NOT be used */ + hyphens: manual; + hyphenate-character: "/-/"; +} +</style> + +<p>Test passes if the words below are hyphenated <b>using the string "/-/"</b>. + +<div lang="en"> +im­ple­men­ta­tion<br><br> +ini­tial­iza­tion<br><br> +re­al­iza­tion<br><br> +hy­phen­ation +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-005.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-005.html new file mode 100644 index 0000000000..5600d8a4cf --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-005.html @@ -0,0 +1,23 @@ +<!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-005-ref.html"> +<meta name="assert" content="Specifies the string that appears at the end of the line before a hyphenation break"> +<style> +div { + font: 32px sans-serif; + margin-left: 10ch; + width: 3ch; + hyphenate-character: "\00a0\0640"; +} +</style> + +<p>Test passes if the word below is hyphenated +using a right-to-left <i>space+kashida</i> sequence "<span dir=rtl> ـ</span>", +and shaping is <i>not</i> interrupted. + +<div dir=rtl lang=ug> +قىلمىغانلىقى +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-limit-chars-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-limit-chars-001.html new file mode 100644 index 0000000000..d974812103 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-limit-chars-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> +<link rel="match" href="reference/hyphenate-limit-chars-001-ref.html"> +<link rel="author" href="mailto:kojii@chromium.org"> +<style> +#container > div { + border: black solid 2px; + font-family: monospace; + font-size: 20px; + line-height: 1; + width: 1ch; + hyphens: auto; + hyphenate-character: '-'; +} +</style> +<body> + <div lang="en-us" id="container"> + <div>example</div> + <div style="hyphenate-limit-chars: 8">example</div> + <div style="hyphenate-limit-chars: auto 2 2">example</div> + <div style="hyphenate-limit-chars: auto 3 2">example</div> + <div style="hyphenate-limit-chars: auto 4 2">example</div> + <div style="hyphenate-limit-chars: auto 5 2">example</div> + <div style="hyphenate-limit-chars: auto 2 3">example</div> + <div style="hyphenate-limit-chars: auto 2 4">example</div> + <div style="hyphenate-limit-chars: auto 3 4">example</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-001.html new file mode 100644 index 0000000000..e7ba16f7a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: no automatic hyphenation without language tagging</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-auto-001-ref.html"> +<meta name="assert" content="automatic hyphenation must not work without language tagging"> +<style> +div { + width: 4ch; + hyphens: auto; +} +</style> + +<p>Test passes if none of the words below are hyphenated. +<div>implementation +initialization +realization +hyphenation +anticonstitutionnellement +intergouvernementalisation +dichlorodiphényltrichloroéthane +honorificabilitudinitatibus +Wiedervereinigung +Rechtsschutzversicherungsgesellschaften</div> + diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-002.html new file mode 100644 index 0000000000..490f78e94c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap"> +<link rel="match" href="reference/hyphens-auto-002-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Although hyphenation is enabled, honoring 'auto' value for the 'hyphens' CSS property and a valid 'lang' attribute, the words fit. However, we should break preserved white spaces, honoring 'white-space: pre-wrap' to prevent overflow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.fail { + position: absolute; + background: red; + width: 100px; + height: 100px; + z-index: -1; +} +.test { + font: 50px/1 Ahem; + width: 6ch; + color: green; + + white-space: pre-wrap; + hyphens: auto; +} +</style> +<body lang="en"> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="fail"></div> + <div class="test">XX XX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-003.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-003.html new file mode 100644 index 0000000000..347805bac7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto"> +<link rel="match" href="reference/hyphens-auto-002-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Although hyphenation is enabled, honoring 'auto' value for the 'hyphens' CSS property and a valid 'lang' attribute, the words fit. However, we should break after the preserved combination of white+ideographic space sequence, honoring 'white-space: normal' to prevent overflow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.fail { + position: absolute; + background: red; + width: 100px; + height: 100px; + z-index: -1; +} +.test { + font: 50px/1 Ahem; + width: 4ch; + color: green; + + hyphens: auto; +} +</style> +<body lang="en"> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="fail"></div> + <div class="test">XX 　　　　　　 XX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-004.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-004.html new file mode 100644 index 0000000000..3d99985a00 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto"> +<link rel="match" href="reference/hyphens-auto-004M-ref.html"> +<link rel="match" href="reference/hyphens-auto-004H-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="When 'hyphens' is set to 'auto' and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + border: solid 1px; + font: 32px/1 monospace; + width: 6ch; + + hyphens: auto; +} +</style> +<body lang="en"> + <div class="test">regulation 　　　　　　 implementation now</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-005.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-005.html new file mode 100644 index 0000000000..c7176d1dfc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto"> +<link rel="match" href="reference/hyphens-auto-005M-ref.html"> +<link rel="match" href="reference/hyphens-auto-005H-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="When 'hyphens' is set to 'auto' and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + border: solid 1px; + font: 50px/1 monospace; + width: 4ch; + + hyphens: auto; +} +</style> +<body lang="en"> + <div class="test">regulation</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-010.html new file mode 100644 index 0000000000..8b6f15ab4a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-010.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-auto-010M-ref.html"> + <link rel="match" href="reference/hyphens-auto-010H-ref.html"> + + <!-- + User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> + when the font has the glyph, or + may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> + otherwise. Some fonts will display slightly different glyphs for + these code points. Therefore these 2 reference files. + The M-ref.html reference file means the hyphen-Minus character U+002D. + The H-ref.html reference file means the Hyphen character U+2010. + --> + + <meta content="When 'hyphens' is set to 'auto' and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved."> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: auto; + width: 6ch; + } + </style> + + <body lang="en"> + + <div>regulation implementation now</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-and-contenteditable-crash.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-and-contenteditable-crash.html new file mode 100644 index 0000000000..e0148ddd73 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-and-contenteditable-crash.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>CSS Text Test: Hyphenation in a contenteditable with a x20+x9+x20 trailing space sequence, makes chrome to crash</title> +<link rel="help" href="https://crbug.com/1133254"> +<style> + span { + display: table-row; + hyphens: auto; + } +</style> +<div contenteditable=plaintext-only> + <span>XXX </span> +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control-ref.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control-ref.html new file mode 100644 index 0000000000..7283d239d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Text 6.1. Hyphenation Control: the hyphens property</title> +<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> +code { + display: block; + hyphens: manual; + border: 1px solid black; + /* Prefer Courier New if available, as otherwise Menlo may be used, + and its HYPHEN and HYPHEN-MINUS glyphs don't match. */ + font-family: Courier New, Courier, monospace; +} +</style> +</head> +<body lang="en-us"> +<!-- + Hyphenation opportunities of the texts in this test are as follows, + + frag[A]ilis[A]tic[C]ex[A]pi[A]ali + + where [A] is an automatic hyphen, and [C] is a conditional hyphen. + + In this test, we set width to somewhere after the conditional hyphen, + then we see if automatic hyphen breaks are ignored correctly. +--> +<code style="width:12ch;"> +fragilistic-<br />expiali +</code> +<br /> +<code style="width:14ch;"> +fragilistic-<br />expiali +</code> +<br /> +<code style="width:16ch;"> +fragilistic-<br />expiali +</code> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control.html new file mode 100644 index 0000000000..d3a7a607b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Text 6.1. Hyphenation Control: the hyphens property</title> +<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto"> +<link rel="match" href="hyphens-auto-control-ref.html"> +<meta name="assert" content="Test checks that automatic hyphenation opportunities within a word +must be ignored if the word contains a conditional hyphen (­ or U+00AD), in favor of the +conditional hyphen(s)."> +<style> +code { + display: block; + hyphens: auto; + border: 1px solid black; + /* Prefer Courier New if available, as otherwise Menlo may be used, + and its HYPHEN and HYPHEN-MINUS glyphs don't match. */ + font-family: Courier New, Courier, monospace; +} +</style> +</head> +<body lang="en-us"> +<!-- + Hyphenation opportunities of the texts in this test are as follows, + + frag[A]ilis[A]tic[C]ex[A]pi[A]ali + + where [A] is an automatic hyphen, and [C] is a conditional hyphen. + + In this test, we set width to somewhere after the conditional hyphen, + then we see if automatic hyphen breaks are ignored correctly. +--> +<code style="width:12ch;"> +fragilistic­expiali +</code> +<br /> +<code style="width:14ch;"> +fragilistic­expiali +</code> +<br /> +<code style="width:16ch;"> +fragilistic­expiali +</code> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-inline-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-inline-010.html new file mode 100644 index 0000000000..3e9d7b5790 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-inline-010.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification (inline)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-auto-inline-010M-ref.html"> + <link rel="match" href="reference/hyphens-auto-inline-010H-ref.html"> + + <!-- + User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> + when the font has the glyph, or + may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> + otherwise. Some fonts will display slightly different glyphs for + these code points. Therefore these 2 reference files. + The M-ref.html reference file means the hyphen-Minus character U+002D. + The H-ref.html reference file means the Hyphen character U+2010. + --> + + <meta content="When 'hyphens' is set to 'auto' and applied to an inline element and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved."> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 6ch; + } + + span + { + hyphens: auto; + } + </style> + + <body lang="en"> + + <div>There are <span>new engines now</span>.</div> + + <!-- + Expected result: + There + are + new + en- + gines + now. + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-last-word-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-last-word-001.html new file mode 100644 index 0000000000..273f060d87 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-last-word-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Text: `hyphens: auto` for last word</title> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> +<link rel="match" href="reference/hyphens-auto-last-word-001-ref.html"> +<link rel="match" href="reference/hyphens-auto-last-word-001-ref2.html"> +<style> +div { + hyphens: auto; + width: 5ch; + border: 1px solid blue; +} +</style> +<body lang="en-us"> + <div style="width: 10ch">Test example</div> + <div>example</div> + <div>1 example</div> + <div>1234 example</div> + <div>example 5678</div> + <div>1234 example 5678</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-1.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-1.html new file mode 100644 index 0000000000..5a4bca4fe6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-1.html @@ -0,0 +1,11 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test Reference</title> +<style> + div { + /* No hyphens means the min-content is the whole string in this case */ + width: min-content; + border: 1px solid green; + } +</style> +<div>2020-12-12</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-2.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-2.html new file mode 100644 index 0000000000..2acdeab1b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-2.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test Reference</title> +<style> + div { + width: min-content; + border: 1px solid green; + } +</style> +<div>2020-<br>12-12</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content.html new file mode 100644 index 0000000000..b3f7c31623 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset=utf-8> +<title>min-content size should match hyphenation</title> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> + +<link rel=help href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1674204"> + +<!-- + It's ok to either break or not on the explicit hyphens, but whatever it does + it should match the min-content size +--> +<link rel=match href="hyphens-auto-min-content-ref-1.html"> +<link rel=match href="hyphens-auto-min-content-ref-2.html"> + +<style> + div { + width: min-content; + hyphens: auto; + border: 1px solid green; + } +</style> +<div>2020-12-12</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-character.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-character.html new file mode 100644 index 0000000000..66bf9391cb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-character.html @@ -0,0 +1,34 @@ +<!doctype html> +<html lang="en" class="reftest-wait"> + <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-character-ref.html"> + <meta charset="utf-8" /> + <meta content="This test ensure that actual characters are show for the hyphen, + as crbug.com/1267606 illustrates how the hyphen can go missing + depending on character coverage API." name="assert"> + <style> + @font-face { + font-family: roboto_hyphen; + src: url(resources/roboto_hyphenation_subset.ttf) + } + + div { + display: block; + width: 40px; + hyphens: auto; + -webkit-hyphens: auto; + font-family: roboto_hyphen, cursive; + } + </style> + <body> + <div lang="de"> + Donaudampfschifffahrt + </div> + + <script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-010.html new file mode 100644 index 0000000000..b8c2d1cc3a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-010.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: manual' with no explicit hyphenation opportunity (basic)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-010-ref.html"> + + <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' do not explicitly define hyphenation opportunities, so it must not be hyphenated." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + margin-bottom: 0.25em; + width: 10ch; + } + + div#test + { + hyphens: manual; + } + + div#reference + { + hyphens: none; + } + </style> + + <body lang="en"> + + <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles. + + <div id="test">Deoxyribonucleic acid</div> + + <div id="reference">Deoxyribonucleic acid</div> + + <!-- + + Extended form of abreviation DNA + + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-011.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-011.html new file mode 100644 index 0000000000..066ab3494b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-011.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: manual' with 2 explicit hyphenation opportunities</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-011M-ref.html"> + <link rel="match" href="reference/hyphens-manual-011H-ref.html"> + + <!-- + User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> + when the font has the glyph, or + may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> + otherwise. Some fonts will display slightly different glyphs for + these code points. Therefore these 2 reference files. + The M-ref.html reference file means the hyphen-Minus character U+002D. + The H-ref.html reference file means the Hyphen character U+2010. + --> + + <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 2 hyphenation opportunities, so it can be hyphenated. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 2nd soft hyphen." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: manual; + width: 10ch; + } + </style> + + <div>Deoxy­ribo­nucleic acid</div> + + <!-- + Expected result: + Deoxyribo- + nucleic + acid + --> + + <!-- + + Extended form of abreviation DNA + + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-012.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-012.html new file mode 100644 index 0000000000..2dc70e79fb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-012.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: manual' with 4 explicit hyphenation opportunities</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-011M-ref.html"> + <link rel="match" href="reference/hyphens-manual-011H-ref.html"> + + <!-- + User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> + when the font has the glyph, or + may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> + otherwise. Some fonts will display slightly different glyphs for + these code points. Therefore these 2 reference files. + The M-ref.html reference file means the hyphen-Minus character U+002D. + The H-ref.html reference file means the Hyphen character U+2010. + --> + + <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 4 hyphenation opportunities. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 3rd soft hyphen." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: manual; + width: 10ch; + } + </style> + + <div>Deo­xy­ribo­nu­cleic acid</div> + + <!-- + Expected result: + Deoxyribo- + nucleic + acid + --> + + <!-- + + Extended form of abreviation DNA + + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-013.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-013.html new file mode 100644 index 0000000000..fcd66d8478 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-013.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: manual' with 1 explicit hyphenation opportunity</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-013M-ref.html"> + <link rel="match" href="reference/hyphens-manual-013H-ref.html"> + + <!-- + User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> + when the font has the glyph, or + may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> + otherwise. Some fonts will display slightly different glyphs for + these code points. Therefore these 2 reference files. + The M-ref.html reference file means the hyphen-Minus character U+002D. + The H-ref.html reference file means the Hyphen character U+2010. + --> + + <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 1 and only 1 hyphenation opportunity, so it can be hyphenated only at such point." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: manual; + width: 10ch; + } + </style> + + <div>Deoxy­ribonucleic acid</div> + + <!-- + Expected result: + Deoxy- + ribonucleic + acid + --> + + <!-- + + Extended form of abreviation DNA + + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-010.html new file mode 100644 index 0000000000..121473e7d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-010.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: manual' with no explicit hyphenation opportunity (basic)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-inline-010-ref.html"> + + <meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' do not explicitly define hyphenation opportunities, so it must not be hyphenated." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + margin-bottom: 0.25em; + width: 10ch; + } + + span#test + { + hyphens: manual; + } + + div#reference + { + hyphens: none; + } + </style> + + <body lang="en"> + + <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles. + + <div>DNA <span id="test">means Deoxyribonucleic acid</span>.</div> + + <div id="reference">DNA means Deoxyribonucleic acid.</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-011.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-011.html new file mode 100644 index 0000000000..ef10342b53 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-011.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: manual' with 2 explicit hyphenation opportunities (inline)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-inline-011M-ref.html"> + <link rel="match" href="reference/hyphens-manual-inline-011H-ref.html"> + + <!-- + User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> + when the font has the glyph, or + may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> + otherwise. Some fonts will display slightly different glyphs for + these code points. Therefore these 2 reference files. + The M-ref.html reference file means the hyphen-Minus character U+002D. + The H-ref.html reference file means the Hyphen character U+2010. + --> + + <meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 2 hyphenation opportunities, so it can be hyphenated. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 2nd soft hyphen." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 10ch; + } + + span + { + hyphens: manual; + } + </style> + + <div>DNA <span>means Deoxy­ribo­nucleic acid</span>.</div> + + <!-- + Expected result: + DNA means + Deoxyribo- + nucleic + acid. + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-012.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-012.html new file mode 100644 index 0000000000..e3f4f72763 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-012.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: manual' with 4 explicit hyphenation opportunities (inline)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-inline-012M-ref.html"> + <link rel="match" href="reference/hyphens-manual-inline-012H-ref.html"> + + <!-- + User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010> + when the font has the glyph, or + may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d> + otherwise. Some fonts will display slightly different glyphs for + these code points. Therefore these 2 reference files. + The M-ref.html reference file means the hyphen-Minus character U+002D. + The H-ref.html reference file means the Hyphen character U+2010. + --> + + <meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 4 hyphenation opportunities. Since 'Deoxy' has 5 characters and 'Deoxyribo' has 9 characters and since the content width of the block box can take 8 characters, then a soft hyphen will occur after 'Deoxy'. Since 'ribonu' has 6 characters and 'ribonucleic' has 11 characters and since the content width of the block box can take 8 characters, then a soft hyphen will occur after 'ribonu'." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 8ch; + } + + span + { + hyphens: manual; + } + </style> + + <div>DNA <span>means Deo­xy­ribo­nu­cleic acid</span>.</div> + + <!-- + Expected result: + DNA + means + Deoxy- + ribonu- + cleic + acid. + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-011.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-011.html new file mode 100644 index 0000000000..bbcb1a4c7e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-011.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: none' with explicit hyphenation opportunities</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-manual-010-ref.html"> + + <meta content="This test checks that, when 'hyphens' is set to 'none', then long words are not hyphenated, even if characters inside long words explicitly define hyphenation opportunities." name="assert"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + margin-bottom: 0.25em; + width: 10ch; + } + + div#test + { + hyphens: none; + } + </style> + + <body> + + <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles. + + <div id="test">Deoxy­ribo­nucleic acid</div> + + <div id="reference">Deoxyribonucleic acid</div> + + <!-- + + Extended form of abreviation DNA + + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-012.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-012.html new file mode 100644 index 0000000000..50930803d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-012.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: none', hyphen-minus character and line wrapping</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-auto-010M-ref.html"> + + <meta content="This test checks that 'hyphens: none' does not suppress line wrapping after encountering an actual hyphen-minus character (U+002D)."> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: none; + width: 6ch; + } + </style> + + <div>regu-lation imple-menta-tion now</div> + + <!-- + Expected result: + regu- + lation + imple- + menta- + tion + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-013.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-013.html new file mode 100644 index 0000000000..b0adfb027b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-013.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text: 'hyphens: none', hyphen character and line wrapping</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> + <link rel="match" href="reference/hyphens-auto-010H-ref.html"> + + <meta content="This test checks that 'hyphens: none' does not suppress line wrapping after encountering an actual hyphen character (U+2010)."> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: none; + width: 6ch; + } + </style> + + <div>regu‐lation imple‐menta‐tion now</div> + + <!-- + Expected result: + regu- + lation + imple- + menta- + tion + --> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-014.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-014.html new file mode 100644 index 0000000000..9f5c6880ea --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-014.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: Line breaking with floats and disabled hyphenation </title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/> +<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A span with hypens 'none' is wrapped based on the available space left by a float image."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { font: 20px/1 Ahem; } +img { float:right; } +.test { + max-width: 100px; + color: green; +} +span { hyphens: none; } +.ref { + position: absolute; + background: green linear-gradient(red, red) 2ch 0/3ch 3ch no-repeat; + color: red; + width: 100px; + height: 100px; + z-index: -1; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="ref">XX<br>X</br></div> +<div class="test"> + <img src="/css/support/60x60-green.png" alt=""> + <span>XX X</span> +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-015.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-015.html new file mode 100644 index 0000000000..10c90b119e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-015.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: Line breaking with floats and disabled hyphenation </title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/> +<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-manual"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="A span with hypens 'none' is wrapped in multiple lines based on the available space left by a float image."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { font: 20px/1 Ahem; } +img { float:right; } +.test { + max-width: 200px; + color: green; +} +span { hyphens: none; } +.ref { + position: absolute; + background: green linear-gradient(red, red) 7ch 0/3ch 3ch no-repeat; + color: red; + width: 200px; + height: 200px; + z-index: -1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="ref">XX X<br>XXX</br>XXXX XX<br>XXX</div> +<div class="test"> + <img src="/css/support/60x60-green.png" alt=""> + <span>XX X XXX XXXX XX XXX</span> +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-001.html new file mode 100644 index 0000000000..ebc13c0158 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: manual hyphenation and out-of-flow</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-out-of-flow-001-ref.html"> +<meta name="assert" content="the presence of an out of flow element has no effect on manual hyhenation"> +<style> +span { + position: absolute; + color: transparent; +} +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: manual; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div>high­way</div> +<div><span>abspos</span>high­way</div> +<div>h<span>abspos</span>igh­way</div> +<div>high<span>abspos</span>­way</div> +<div>high­<span>abspos</span>way</div> +<div>high­wa<span>abspos</span>y</div> +<div>high­way<span>abspos</span></div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-002.html new file mode 100644 index 0000000000..60e0e3078b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: auto hyphenation and out-of-flow</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-span-002-ref.html"> +<meta name="assert" content="the presence of an out of flow element has no effect on automatic hyhenation"> +<style> +span { + position: absolute; + color: transparent; +} +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: auto; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div lang=en>highway</div> +<div lang=en><span>abspos</span>highway</div> +<div lang=en>h<span>abspos</span>ighway</div> +<div lang=en>high<span>abspos</span>way</div> +<div lang=en>high<span>abspos</span>way</div> +<div lang=en>highwa<span>abspos</span>y</div> +<div lang=en>highway<span>abspos</span></div> + +<!-- +This test assumes the presence of "highway" +with a hyphenation point between "high" and "way" +in the hyphenation dictionary for English +in order to be useful, +but that assumption is not necessary for the test to be correct: +if the word doesn't hyphenate, +it will not hyphenate in any of the cases. +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-overflow-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-overflow-001.html new file mode 100644 index 0000000000..4154e5e118 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-overflow-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Text Test: Test when soft-hyphen overflows</title> +<link rel="match" href="reference/hyphens-overflow-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="author" href="mailto:kojii@chromium.org"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font-size: 10px; + font-family: Ahem; + width: 5.1ch; + border: 1px solid blue; +} +</style> +<body> + <div>12 4­xx</div> + <div>12 45­xx</div> + <div>12 456­xx</div> + <div>1234­xx</div> + <div>12345­xx</div> + <div>123456­xx</div> + + <div style="width: 10ch"><span>ren­for­cer</span>99999</div> + <div><span>00­1</span>222</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-punctuation-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-punctuation-001.html new file mode 100644 index 0000000000..feea83635c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-punctuation-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Text Test: Automatic hyphenation for trailing punctuation characters</title> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-punctuation-001-ref.html"> +<style> +div { + hyphens: auto; + width: 5ch; + border: 1px solid blue; +} +</style> +<body lang="en-us"> + <div>00000 example 00000</div> + <div>00000 example. 00000</div> + <div>00000 (example 00000</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-001.html new file mode 100644 index 0000000000..0cd2243bda --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: hyphenation and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-shaping-001-ref.html"> +<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when the word is hyphenated."> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 3em; + line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */ + width: 0; + hyphens: manual; + margin: 1em auto; + } + .ref { color: orange; } + span { color: transparent; } +</style> + +<p>Test passes if the black text is identical to the orange text (except the color). + +<div dir=rtl lang=ug class=ref>ﺩﺍﻣﻴ<br>ﺪﻯ</div> + +<div dir=rtl lang=ug id=test>دامي<span>­</span>دى</div> +<!-- +Using an invisible hyphen because it isn't certain what character the UA will actually use, +and we shouldn't fail the reftest because of a mismatch there. +See also hyphens-shaping-002.html to check that some character is inserted. +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-002.html new file mode 100644 index 0000000000..57d23e585e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: hyphenation and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property"> +<link rel="mismatch" href="reference/hyphens-shaping-002-ref.html"> +<meta name="assert" content="Checks that some kind of hyphen does get inserted in Uyghur. (Complement fo hyphens-shaping-001.html)"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + /* The main text is invisible, + but we want to give the UA a chance to use the right hyphen, + which may be font dependent. + */ + div { + font-family: 'csstest_noto'; + font-size: 4em; + hyphens: manual; + margin: auto; + width: 0; + } + #test { color: transparent; } + span { color: black; } +</style> + +<p>Test passes if there is something below: + +<div dir=rtl lang=ug id=test>دامي<span>­</span>دى</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-001.html new file mode 100644 index 0000000000..d60836f6f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: manual hyphen and span</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-span-001-ref.html"> +<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: manual; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div>high­way</div> +<div><span>high</span>­way</div> +<div><span>high­</span>way</div> +<div>high<span>­</span>way</div> +<div>high<span>­way</span></div> +<div>high­<span>way</span></div> +<div><span>high</span>­<span>way</span></div> +<div><span>high­wa</span>y</div> +<div><span>hi</span>gh­way</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-002.html new file mode 100644 index 0000000000..0a80ec051f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: auto hyphen and span</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-span-002-ref.html"> +<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: auto; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div lang=en>highway</div> +<div lang=en><span>high</span>way</div> +<div lang=en>high<span></span>way</div> +<div lang=en>high<span>way</span></div> +<div lang=en><span>high</span><span>way</span></div> +<div lang=en><span>highwa</span>y</div> +<div lang=en><span>hi</span>ghway</div> + +<!-- +This test assumes the presence of "highway" +with a hyphenation point between "high" and "way" +in the hyphenation dictionary for English +in order to be useful, +but that assumption is not necessary for the test to be correct: +if the word doesn't hyphenate, +it will not hyphenate in any of the cases. +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-001.html new file mode 100644 index 0000000000..baececdb0a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text test: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="match" href="reference/hyphens-vertical-001-ref.html"> +<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen­ation +</div> + +<div> + hyphen‐<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-002.html new file mode 100644 index 0000000000..e449526344 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text test: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="match" href="reference/hyphens-vertical-002-ref.html"> +<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + text-orientation: upright; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen­ation +</div> + +<div> + hyphen‐<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-003.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-003.html new file mode 100644 index 0000000000..2b1c6271c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text test: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character"> +<link rel="match" href="reference/hyphens-vertical-003-ref.html"> +<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + hyphenate-character: "+="; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen­ation +</div> + +<div> + hyphen+=<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-004.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-004.html new file mode 100644 index 0000000000..cee7718b9d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text test: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character"> +<link rel="match" href="reference/hyphens-vertical-004-ref.html"> +<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + text-orientation: upright; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + hyphenate-character: "+="; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen­ation +</div> + +<div> + hyphen+=<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-001.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-001.html new file mode 100644 index 0000000000..bfcd2f1362 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Dutch</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-001-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-001-alt-ref.html"> +<meta name="assert" content="Language specific rules must be taken into account"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 5ch; + hyphens: auto; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=nl class=test>cafeetje</div> +<hr> +<div lang=nl>café‐<br>tje</div> +<hr> +<div lang=nl>café-<br>tje</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-002.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-002.html new file mode 100644 index 0000000000..9e2a16ee3c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Hungarian</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-002-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-002-alt-ref.html"> +<meta name="assert" content="Language specific rules must be taken into account"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 5ch; + hyphens: auto; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=hu class=test>Összeg</div> +<hr> +<div lang=hu>Ösz‐<br>szeg</div> +<hr> +<div lang=hu>Ösz-<br>szeg</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-003.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-003.html new file mode 100644 index 0000000000..70e68db8a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-003.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-003-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-003-alt-ref.html"> +<meta name="assert" content="Language specific rules must be taken into account"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 3ch; + hyphens: auto; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>tú’àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú‐<br>àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú-<br>àn</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-004.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-004.html new file mode 100644 index 0000000000..5da4e438d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-004.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-004-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-004-alt-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-004-alt-2-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-004-alt-3-ref.html"> +<meta name="assert" content="Language specific rules must be taken into account"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 8ch; + hyphens: auto; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>àizēng‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-005.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-005.html new file mode 100644 index 0000000000..b0ebdb9fd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-005.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Uyghur</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-005-ref.html"> +<meta name="assert" content="Language specific rules must be taken into account"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 4ch; + hyphens: auto; + color: blue; +} +section { max-width: 20em; } +</style> + +<p>Test passes if the blue text and orange text are identical (except for the color). +<section dir=rtl lang=ug> +<div class=test>داميدى</div> +<div>دامي‍ـ<br>‍دى</div> +<section> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-001.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-001.html new file mode 100644 index 0000000000..2bb63fc93e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Dutch</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-001-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-001-alt-ref.html"> +<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens"> +<meta name="flags" content="should"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 5ch; + hyphens: manual; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=nl class=test>cafee­tje</div> +<hr> +<div lang=nl>café‐<br>tje</div> +<hr> +<div lang=nl>café-<br>tje</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-002.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-002.html new file mode 100644 index 0000000000..a5d16845e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Hungarian</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-002-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-002-alt-ref.html"> +<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens"> +<meta name="flags" content="should"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 5ch; + hyphens: manual; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=hu class=test>Ös­szeg</div> +<hr> +<div lang=hu>Ösz‐<br>szeg</div> +<hr> +<div lang=hu>Ösz-<br>szeg</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-003.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-003.html new file mode 100644 index 0000000000..aaa15c5077 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-003-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-003-alt-ref.html"> +<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens"> +<meta name="flags" content="should"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 3ch; + hyphens: manual; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>tú­’àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú‐<br>àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú-<br>àn</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-004.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-004.html new file mode 100644 index 0000000000..ac433a8275 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-004-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-004-alt-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-004-alt-2-ref.html"> +<link rel="match" href="reference/hyphens-i18n-auto-004-alt-3-ref.html"> +<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens"> +<meta name="flags" content="should"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 8ch; + hyphens: manual; + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>àizēng­‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-005.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-005.html new file mode 100644 index 0000000000..7e6bb4bc86 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-005.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Uyghur</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/hyphens-i18n-auto-005-ref.html"> +<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens (and the correct character must be used)"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + width: 4ch; + hyphens: manual; + color: blue; +} +section { max-width: 20em; } +</style> + +<p>Test passes if the blue text and orange text are identical (except for the color). +<section dir=rtl lang=ug> +<div class=test>دامي­دى</div> +<div>دامي‍ـ<br>‍دى</div> +<section> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-alt-ref.html new file mode 100644 index 0000000000..bd6eb022ca --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-alt-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Dutch</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=nl class=test>café-<br>tje</div> +<hr> +<div lang=nl>café‐<br>tje</div> +<hr> +<div lang=nl>café-<br>tje</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-ref.html new file mode 100644 index 0000000000..7926b27593 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Dutch</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=nl class=test>café‐<br>tje</div> +<hr> +<div lang=nl>café‐<br>tje</div> +<hr> +<div lang=nl>café-<br>tje</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-alt-ref.html new file mode 100644 index 0000000000..96daadf378 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-alt-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Hungarian</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=hu class=test>Ösz-<br>szeg</div> +<hr> +<div lang=hu>Ösz‐<br>szeg</div> +<hr> +<div lang=hu>Ösz-<br>szeg</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-ref.html new file mode 100644 index 0000000000..4da351cda4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Hungarian</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=hu class=test>Ösz‐<br>szeg</div> +<hr> +<div lang=hu>Ösz‐<br>szeg</div> +<hr> +<div lang=hu>Ösz-<br>szeg</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-alt-ref.html new file mode 100644 index 0000000000..8880fc2426 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-alt-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<meta name="assert" content="Language specific rules must be taken into account"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>tú-<br>àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú‐<br>àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú-<br>àn</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-ref.html new file mode 100644 index 0000000000..6aaa73d92a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<meta name="assert" content="Language specific rules must be taken into account"> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>tú‐<br>àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú‐<br>àn</div> +<hr> +<div lang=zh-Latn-pinyin>tú-<br>àn</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-2-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-2-ref.html new file mode 100644 index 0000000000..1379e21567 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>àizēng‐<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-3-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-3-ref.html new file mode 100644 index 0000000000..3b4e7fafae --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-3-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>àizēng-<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-ref.html new file mode 100644 index 0000000000..c6543cd9c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>àizēng-<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-ref.html new file mode 100644 index 0000000000..f691565fee --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +</style> + +<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen). +<div lang=zh-Latn-pinyin class=test>àizēng‐<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>‐fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng‐<br>-fēnmíng</div> +<hr> +<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-005-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-005-ref.html new file mode 100644 index 0000000000..56254aa55d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-005-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: language specific hyphenation—Uyghur</title> +<style> +div { + font-size: 3em; + color: orange; +} +.test { + color: blue; +} +section { max-width: 20em; } +</style> + +<p>Test passes if the blue text and orange text are identical (except for the color). +<section dir=rtl lang=ug> +<div class=test>دامي‍ـ<br>‍دى</div> +<div>دامي‍ـ<br>‍دى</div> +<section> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html new file mode 100644 index 0000000000..3014cb9fb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html @@ -0,0 +1,18 @@ +<!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 broken at hyphenation positions but <b>no visible hyphens appear</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> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html new file mode 100644 index 0000000000..f8bce3c302 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html @@ -0,0 +1,18 @@ +<!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 (•) 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> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html new file mode 100644 index 0000000000..399f867210 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html @@ -0,0 +1,18 @@ +<!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 the string "/-/"</b>. + +<div lang="en"> +im/-/<br>ple/-/<br>men/-/<br>tation<br><br> +ini/-/<br>tial/-/<br>iza/-/<br>tion<br><br> +re/-/<br>al/-/<br>iza/-/<br>tion<br><br> +hy/-/<br>phen/-/<br>ation +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html new file mode 100644 index 0000000000..50a0ebd585 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html @@ -0,0 +1,19 @@ +<!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: 32px sans-serif; + margin-left: 10ch; + width: 3ch; +} +</style> + +<p>Test passes if the word below is hyphenated +using a right-to-left <i>space+kashida</i> sequence "<span dir=rtl> ـ</span>", +and shaping is <i>not</i> interrupted. + +<div dir=rtl lang=ug> +قىل‍ ـ<br>‍مىغانلىقى +</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html new file mode 100644 index 0000000000..c491fbca27 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation"> +<link rel="author" href="mailto:kojii@chromium.org"> +<style> +#container > div { + border: black solid 2px; + font-family: monospace; + font-size: 20px; + line-height: 1; + width: 1ch; +} +</style> +<body> + <div lang="en-us" id="container"> + <div>ex-<br>am-<br>ple</div> + <div>example</div> + <div>ex-<br>am-<br>ple</div> + <div>exam-<br>ple</div> + <div>exam-<br>ple</div> + <div>example</div> + <div>ex-<br>am-<br>ple</div> + <div>ex-<br>ample</div> + <div>example</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html new file mode 100644 index 0000000000..c1355d0abb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test Reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { white-space: pre; } +</style> + +<p>Test passes if none of the words below are hyphenated. +<div>implementation +initialization +realization +hyphenation +anticonstitutionnellement +intergouvernementalisation +dichlorodiphényltrichloroéthane +honorificabilitudinitatibus +Wiedervereinigung +Rechtsschutzversicherungsgesellschaften</div> + diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html new file mode 100644 index 0000000000..dece5f7394 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Reference File</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html new file mode 100644 index 0000000000..cb26d85e8d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> + + <style> + div + { + border: solid 1px; + font: 32px/1 monospace; + width: 6ch; + } + </style> + + <body lang="en"> + + <div>regu-<br>lation<br><br>imple-<br>menta-<br>tion<br>now</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html new file mode 100644 index 0000000000..4e234bf76d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> + + <style> + div + { + border: solid 1px; + font: 32px/1 monospace; + width: 6ch; + } + </style> + + <body lang="en"> + + <div>regu‐<br>lation<br><br>imple‐<br>menta‐<br>tion<br>now</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html new file mode 100644 index 0000000000..6bd86d36aa --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> + + <style> + div + { + border: solid 1px; + font: 50px/1 monospace; + width: 4ch; + } + </style> + + <body> + + <div>reg-<br>ula-<br>tion</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html new file mode 100644 index 0000000000..38b00cef8b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> + + <style> + div + { + border: solid 1px; + font: 50px/1 monospace; + width: 4ch; + } + </style> + + <body> + + <div>reg‐<br>ula‐<br>tion</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html new file mode 100644 index 0000000000..6d453b9560 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 6ch; + } + </style> + + <body lang="en"> + + <div>regu‐<br>lation<br>imple‐<br>menta‐<br>tion<br>now</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html new file mode 100644 index 0000000000..27adc3f08f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 6ch; + } + </style> + + <body lang="en"> + + <div>regu-<br>lation<br>imple-<br>menta-<br>tion<br>now</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html new file mode 100644 index 0000000000..0a3aedf286 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 6ch; + } + </style> + + <body lang="en"> + + <div>There<br>are<br>new<br>en‐<br>gines<br>now.</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html new file mode 100644 index 0000000000..59f5247e50 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 6ch; + } + </style> + + <body lang="en"> + + <div>There<br>are<br>new<br>en-<br>gines<br>now.</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html new file mode 100644 index 0000000000..7fe23fe75d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +div { + width: 5ch; + border: 1px solid blue; +} +</style> +<body lang="en-us"> + <div style="width: 10ch">Test ex­am­ple</div> + <div>ex­am­ple</div> + <div>1 ex­am­ple</div> + <div>1234 ex­am­ple</div> + <div>ex­am­ple 5678</div> + <div>1234 ex­am­ple 5678</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html new file mode 100644 index 0000000000..9c9f41312e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +div { + width: 5ch; + border: 1px solid blue; +} +</style> +<body lang="en-us"> + <div style="width: 10ch">Test example</div> + <div>ex­am­ple</div> + <div>1<br>ex­am­ple</div> + <div>1234 ex­am­ple</div> + <div>ex­am­ple 5678</div> + <div>1234 ex­am­ple 5678</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html new file mode 100644 index 0000000000..7e590a1f75 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<html lang="en" class="reftest-wait"> + <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org"> + <meta charset="utf-8" /> + <style> + @font-face { + font-family: roboto_hyphen; + src: url(../resources/roboto_hyphenation_subset.ttf) + } + + div { + width: 30px; + hyphens: auto; + -webkit-hyphens: auto; + font-family: roboto_hyphen, cursive; + } + </style> + <body> + <div> + Do-<br> + nau-<br> + dampf-<br> + schiff-<br> + fahrt + </div> + <script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html new file mode 100644 index 0000000000..f79ce17a4c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: none; + margin-bottom: 0.25em; + width: 10ch; + } + </style> + + <body lang="en"> + + <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles. + + <div>Deoxyribonucleic acid</div> + + <div>Deoxyribonucleic acid</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html new file mode 100644 index 0000000000..99612206f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 10ch; + } + </style> + + <div>Deoxyribo‐<br>nucleic acid</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html new file mode 100644 index 0000000000..191095a413 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 10ch; + } + </style> + + <div>Deoxyribo-<br>nucleic acid</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html new file mode 100644 index 0000000000..12ad0ed505 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 10ch; + } + </style> + + <div>Deoxy‐<br>ribonucleic acid</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html new file mode 100644 index 0000000000..3c7121242b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 10ch; + } + </style> + + <div>Deoxy-<br>ribonucleic acid</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html new file mode 100644 index 0000000000..a55fe859ff --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + hyphens: none; + margin-bottom: 0.25em; + width: 10ch; + } + </style> + + <body lang="en"> + + <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles. + + <div>DNA means Deoxyribonucleic acid.</div> + + <div>DNA means Deoxyribonucleic acid.</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html new file mode 100644 index 0000000000..0cd1ef9f9b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 10ch; + } + </style> + + <div>DNA means<br>Deoxyribo‐<br>nucleic<br>acid.</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html new file mode 100644 index 0000000000..836919648e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 10ch; + } + </style> + + <div>DNA means<br>Deoxyribo-<br>nucleic<br>acid.</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html new file mode 100644 index 0000000000..8b2ff04ade --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 8ch; + } + </style> + + <div>DNA<br>means<br>Deoxy‐<br>ribonu‐<br>cleic<br>acid.</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html new file mode 100644 index 0000000000..0c8db033c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: black solid 2px; + font-family: monospace; + font-size: 32px; + width: 8ch; + } + </style> + + <div>DNA<br>means<br>Deoxy-<br>ribonu-<br>cleic<br>acid.</div> + +<!-- + + Hyphen-minus == - == - + + Hyphen == ‐ == ‐ + +--> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html new file mode 100644 index 0000000000..7339447924 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: manual; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html new file mode 100644 index 0000000000..db002ce45d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font-size: 10px; + font-family: Ahem; + width: 5.1ch; + border: 1px solid blue; +} +</style> +<body> + <div>12 4-<br>xx</div> + <div>12<br>45xx</div> + <div>12<br>456xx</div> + <div>1234-<br>xx</div> + <div>12345-<br>xx</div> + <div>123456-<br>xx</div> + + <div style="width: 10ch">renfor-<br>cer99999</div> + <div>00-<br>1222</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html new file mode 100644 index 0000000000..75e2363789 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +div { + width: 5ch; + border: 1px solid blue; +} +</style> +<body lang="en-us"> + <div>00000 ex­am­ple 00000</div> + <div>00000 ex­am­ple. 00000</div> + <div>00000 (ex­am­ple 00000</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html new file mode 100644 index 0000000000..9eb1d7fd68 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 3em; + line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */ + width: 0; + hyphens: manual; + margin: 1em auto; + } + .ref { color: orange; } +</style> + +<p>Test passes if the black text is identical to the orange text (except the color). + +<div dir=rtl lang=ug class=ref>ﺩﺍﻣﻴ<br>ﺪﻯ</div> + +<div dir=rtl lang=ug>ﺩﺍﻣﻴ<br>ﺪﻯ</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html new file mode 100644 index 0000000000..d8e31d71e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> + +<p>Test passes if there is something below: diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html new file mode 100644 index 0000000000..cbe3726137 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: manual; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> +<div>high­way</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html new file mode 100644 index 0000000000..7b3f820641 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + border: solid orange; + margin: 5px; + width: 6ch; + hyphens: auto; +} +</style> + +<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen). + +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> +<div lang=en>highway</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html new file mode 100644 index 0000000000..5be7a840d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text reference: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen‐<br>ation +</div> + +<div> + hyphen‐<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html new file mode 100644 index 0000000000..cb240212bc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text reference: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + text-orientation: upright; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen‐<br>ation +</div> + +<div> + hyphen‐<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html new file mode 100644 index 0000000000..6d3ea15845 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text reference: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + hyphenate-character: "+="; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen+=<br>ation +</div> + +<div> + hyphen+=<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html new file mode 100644 index 0000000000..63c751165f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text reference: soft hyphens in vertical writing mode</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + +<style> + div { + font: 16px monospace; + writing-mode: vertical-rl; + text-orientation: upright; + border: 1px solid gray; + margin: 10px; + padding: 2px; + hyphens: manual; + width: 3em; + height: 9ch; + hyphenate-character: "+="; + } +</style> + +<p>Test passes if the two boxes look the same:</p> + +<div> + hyphen+=<br>ation +</div> + +<div> + hyphen+=<br>ation +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html new file mode 100644 index 0000000000..c86cb50028 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +span { + font-size: 3em; + color: red; + text-shadow: 3px 3px 3px black; +} +</style> + +<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow + +<div>ex<span>‐</span><br>ample</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html new file mode 100644 index 0000000000..ad9df16e35 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +span { + font-size: 3em; + color: red; + text-shadow: 3px 3px 3px black; +} +</style> + +<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow + +<div>ex<span>-</span><br>ample</div> diff --git a/testing/web-platform/tests/css/css-text/hyphens/resources/roboto_hyphenation_subset.ttf b/testing/web-platform/tests/css/css-text/hyphens/resources/roboto_hyphenation_subset.ttf Binary files differnew file mode 100644 index 0000000000..38a80ff4b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/resources/roboto_hyphenation_subset.ttf diff --git a/testing/web-platform/tests/css/css-text/hyphens/shy-styling-001.html b/testing/web-platform/tests/css/css-text/hyphens/shy-styling-001.html new file mode 100644 index 0000000000..f579e23778 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/hyphens/shy-styling-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: soft hyphen styling</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property"> +<link rel="match" href="reference/shy-styling-001-ref.html"> +<link rel="match" href="reference/shy-styling-001-alt-ref.html"> +<meta name="assert" content="hypens inserted where there was a soft-hyphen take on the styles that would have applied to the soft hyphen"> +<style> +div { + width: 0ch; + hyphens: manual; +} +span { + font-size: 3em; + color: red; + text-shadow: 3px 3px 3px black; +} +</style> + +<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow + +<div>ex<span>­</span>ample</div> |