diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-text/word-break/auto-phrase | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-text/word-break/auto-phrase')
32 files changed, 783 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-001-ref.html new file mode 100644 index 0000000000..51f96868f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ + word-break: keep-all; +} +#ref { + border-color: blue; +} +</style> + +<p>Test passes if the black box is identical to the blue one. + +<div id=test lang=ja> + 東京へ<wbr>行きましょう。 +</div> +<div id=ref lang=ja> + 東京へ<wbr>行きましょう。 +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-002-ref.html new file mode 100644 index 0000000000..9f63cc951f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-002-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; + word-break: keep-all; +} +#ref { + border-color: blue; +} +</style> + +<p>Test passes if the black box is identical to either the blue one. + +<div id=test lang=th> + กรุงเทพ<wbr>คือ<wbr>สวยงาม +</div> +<div id=ref lang=th> + กรุงเทพ<wbr>คือ<wbr>สวยงาม +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-003-ref.html new file mode 100644 index 0000000000..5868eed30a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-003-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: max-content; + white-space: pre; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東京 へ 行きましょう。</div> +<div id=ref lang=ja>東京 へ 行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-004-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-004-ref.html new file mode 100644 index 0000000000..81d075dc11 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-004-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: max-content; + white-space: pre; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東京⁠へ⁠行きましょう。</div> +<div id=ref lang=ja>東京⁠へ⁠行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-005-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-005-ref.html new file mode 100644 index 0000000000..cecc070637 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-005-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: max-content; + white-space: pre; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東京‍へ‍行きましょう。</div> +<div id=ref lang=ja>東京‍へ‍行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-006-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-006-ref.html new file mode 100644 index 0000000000..662351aa8b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-006-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; + hyphens: none; +} +</style> + +<p>Test passes if all boxes below are identical. + +<div lang=en>consideration</div> +<div lang=en>consideration</div> +<div lang=en>consideration</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-007-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-007-ref.html new file mode 100644 index 0000000000..4a55533207 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-007-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + border: solid black; + margin: 5px; + width: min-content; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま​し​ょ​う​。</div> +<div id=ref lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま​し​ょ​う​。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-008-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-008-ref.html new file mode 100644 index 0000000000..24f54429de --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-008-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border-left: solid black; + margin: 15px; + width: 0; + hyphens: manual; +} +</style> + +<p>Test passes if both words bellow are hyphenated. + +<div id=test lang=en>con­sid­era­tion</div> +<div id=ref lang=en>con­sid­era­tion</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-009-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-009-ref.html new file mode 100644 index 0000000000..31f344c6c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-009-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + border: solid black; + margin: 5px; + width: 1em; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>一生懸命働きます</div> +<div id=ref lang=ja>一生懸命働きます</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-001-ref.html new file mode 100644 index 0000000000..5e65b27e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid orange; + margin: 5px; + width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ + word-break: normal; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>กรุงเทพคือสวยงาม</div> + +<!-- keeping the lang=ja because it may affects font selection--> +<div id=ref lang=ja>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-002-ref.html new file mode 100644 index 0000000000..9010ebb5d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-002-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid blue; + margin: 5px; + width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ + word-break: normal; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test>กรุงเทพคือสวยงาม</div> +<div id=ref>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-003-ref.html new file mode 100644 index 0000000000..bd29d09cad --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-003-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-size: 2em; + border: solid blue; + margin: 5px; + width: min-content; +} +#test { + word-break: auto-phrase; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test>東京へ行きましょう。</div> +<div id=ref>東京へ行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-intrinsic-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-intrinsic-001-ref.html new file mode 100644 index 0000000000..52a743910a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-intrinsic-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +.container > div { + white-space: nowrap; + font-size: 10px; + border: 1px solid; +} +</style> +<div class="container" lang="ja"> + <div style="width: max-content"> + 楽しいドライブ。</div> + <div style="width: min-content"> + 楽しい<br>ドライブ。</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-overflow-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-overflow-001-ref.html new file mode 100644 index 0000000000..07bbb230c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-overflow-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +@font-face { + font-family: mplus; + src: url(/fonts/mplus-1p-regular.woff); +} +.container > div { + font-family: mplus; + white-space: nowrap; + font-size: 10px; + border: 1px solid; +} +</style> +<div class="container" lang="ja"> + <div style="width: 7em"> + 楽しい<br>ドライブ。</div> + <div style="width: 4em"> + 楽しい<br>ドライ<br>ブ。</div> + <div style="width: 1em"> + 楽<br>し<br>い<br>ド<br>ラ<br>イ<br>ブ。</div> + <div style="width: 1em; overflow-wrap: anywhere"> + 楽<br>し<br>い<br>ド<br>ラ<br>イ<br>ブ<br>。</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-001-ref.html new file mode 100644 index 0000000000..4edf83be94 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +@font-face { + font-family: mplus; + src: url(/fonts/mplus-1p-regular.woff); +} +.container > div { + font-family: mplus; + width: 3em; + font-size: 10px; + border: 1px solid; +} +</style> +<div class="container" lang="ja"> + <div>ドライ<br>ブ</div> + <div>ドラ<br>イブ</div> + <div>ドラ<br>イブ</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-002-ref.html new file mode 100644 index 0000000000..8760565c1b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-002-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +@font-face { + font-family: mplus; + src: url(/fonts/mplus-1p-regular.woff); +} +.container > div { + font-family: mplus; + width: 10em; + font-size: 10px; + border: 1px solid; +} +</style> +<div class="container" lang="ja"> + <div>楽しいドライブ、<br>楽しいドライブ。</div> + <div>楽しい<br>ドライブ、楽しい<br>ドライブ。</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-001.html new file mode 100644 index 0000000000..ce837a1d5d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break:auto-phrase in Japanese</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-001-ref.html"> +<meta name="assert" content="word-break:auto-phrase inserts virtual word boundaries at reasonable points."> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ + word-break: normal +} +#test { + word-break: auto-phrase; +} +#ref { + border-color: blue; + word-break: keep-all; +} +</style> + +<p>Test passes if the black box is identical to the blue one. + +<div id=test lang=ja> + 東京へ行きましょう。 +</div> +<div id=ref lang=ja> + 東京へ<wbr>行きましょう。 +</div> +<!-- As phrase detection is up to the UA, + arguably an alternative decomposition + with wbr before AND after へ + might be OK, + but the last phrase is longer anyway, + so the difference is not visible. +--> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-002.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-002.html new file mode 100644 index 0000000000..c4f437e99d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-002.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: auto-phrase</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-002-ref.html"> +<meta name="assert" content="word-break: auto-phrase inserts virtual word boundaries at reasonable points, creating soft wrapping opportunities"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ + word-break: normal; +} +#test { + word-break: auto-phrase; +} +#ref { + border-color: blue; +} +</style> + +<p>Test passes if the black box is identical to either the blue one. + +<div id=test lang=th> + กรุงเทพคือสวยงาม +</div> +<div id=ref lang=th> + กรุงเทพ<wbr>คือ<wbr>สวยงาม +</div> + +<!-- + In this particular example, + the expected results is one word phrases. + Therefore, even if auto-phrase for thai isn't specifically supported, + this ought to work. + But if it is supported, + gluing everything together would be mistaken: + this is auto-phrase, + not auto-sentence. +--> + diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-003.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-003.html new file mode 100644 index 0000000000..6ff8d959f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break auto-phrase forbidden</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection"> +<link rel="match" href="reference/word-break-auto-phrase-003-ref.html"> +<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] GL line breaking class"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; +} +#test { + word-break: auto-phrase; +} +#ref { + word-break: keep-all; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東京 へ 行きましょう。</div> +<div id=ref lang=ja>東京 へ 行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-004.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-004.html new file mode 100644 index 0000000000..4e455091de --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: auto-phrase- forbidden</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection"> +<link rel="match" href="reference/word-break-auto-phrase-004-ref.html"> +<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] WJ line breaking class"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; +} +#test { + word-break: auto-phrase; +} +#ref { + word-break: keep-all; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東京⁠へ⁠行きましょう。</div> +<div id=ref lang=ja>東京⁠へ⁠行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-005.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-005.html new file mode 100644 index 0000000000..5183d3bc13 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: auto-phrase forbidden</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection"> +<link rel="match" href="reference/word-break-auto-phrase-005-ref.html"> +<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] ZWJ line breaking class"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; +} +#test { + word-break: auto-phrase; +} +#ref { + word-break: keep-all; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東京‍へ‍行きましょう。</div> +<div id=ref lang=ja>東京‍へ‍行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-006.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-006.html new file mode 100644 index 0000000000..9fca535a7a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-006.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: auto-phrase hyphenation</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-006-ref.html"> +<meta name="assert" content="auto-phrase word breaking must suppress hyphenation"> +<style> +div { + font-size: 2em; + border: solid black; + margin: 5px; + width: min-content; +} +#test1 { + word-break: auto-phrase; + hyphens: manual; +} +#test2 { + word-break: auto-phrase; + hyphens: auto; +} +#ref { + hyphens: none; +} +</style> + +<p>Test passes if all boxes below are identical. + +<div id=test1 lang=en>con­sid­era­tion</div> +<div id=test2 lang=en>consideration</div> +<div id=ref lang=en>consideration</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-007.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-007.html new file mode 100644 index 0000000000..154fb8c447 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-007.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: auto-phrase forbidden</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection"> +<link rel="match" href="reference/word-break-auto-phrase-007-ref.html"> +<meta name="assert" content="UAs must not suppress wrapping opportunities introduced by wbr or ZWSP"> +<style> +div { + border: solid black; + margin: 5px; + width: min-content; +} +#test { + word-break: auto-phrase; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま​し​ょ​う​。</div> +<div id=ref lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま​し​ょ​う​。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-008.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-008.html new file mode 100644 index 0000000000..68af0f5f19 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: auto-phrase hyphenation</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-008-ref.html"> +<meta name="assert" content="auto-phrase must give up on suppressing hyphenation when that would lead to overflow"> +<style> +div { + font-size: 2em; + border-left: solid black; + margin: 15px; + width: 0; + hyphens: manual; +} +#test { + word-break: auto-phrase; + overflow-wrap: normal; +} +</style> + +<p>Test passes if both words bellow are hyphenated. + +<div id=test lang=en>con­sid­era­tion</div> +<div id=ref lang=en>con­sid­era­tion</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-009.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-009.html new file mode 100644 index 0000000000..6f0c736183 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-009.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: auto-phrase forbidden</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection"> +<link rel="match" href="reference/word-break-auto-phrase-009-ref.html"> +<meta name="assert" content="auto-phrase's must give up on suppressing wrapping opportunities when that would lead to overflow."> +<style> +div { + border: solid black; + margin: 5px; + width: 1em; +} +#test { + word-break: auto-phrase; + overflow-wrap: normal; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>一生懸命働きます</div> +<div id=ref lang=ja>一生懸命働きます</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-001.html new file mode 100644 index 0000000000..02a33734e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break:auto-phrase mistagged</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-fallback-001-ref.html"> +<meta name="assert" content="word-break:auto-phrase, does the same as normal (insert soft wraps for south east asian) on SA content tagged with the wrong language: soft wrap opportunities within each phrase are to be suppressed, but a run of Thai characters is not a phrase in Japanese."> +<style> +div { + font-size: 2em; + border: solid orange; + margin: 5px; + width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ + word-break: normal; +} +#test { + word-break: auto-phrase; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test lang=ja>กรุงเทพคือสวยงาม</div> + +<!-- keeping the lang=ja because it may affects font selection--> +<div id=ref lang=ja>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-002.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-002.html new file mode 100644 index 0000000000..e2905f1d5a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break:auto-phrase untagged</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-fallback-002-ref.html"> +<meta name="assert" content="word-break:auto-phrase, if supported, does the same as normal (insert soft wraps for south east asian) on content not language tagged."> +<style> +div { + font-size: 2em; + border: solid blue; + margin: 5px; + width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ + word-break: normal; +} +#test { + word-break: auto-phrase; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test>กรุงเทพคือสวยงาม</div> +<div id=ref>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-003.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-003.html new file mode 100644 index 0000000000..cea15820bd --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break:auto-phrase untagged</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-fallback-003-ref.html"> +<meta name="assert" content="word-break:auto-phrase, if supported, does not affect (i.e. same as normal) content not language tagged."> +<style> +div { + font-size: 2em; + border: solid blue; + margin: 5px; + width: min-content; /* not 0, otherwise it would trigger the overflow fallback behavior */ +} +#test { + word-break: auto-phrase; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=test>東京へ行きましょう。</div> +<div id=ref>東京へ行きましょう。</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-intrinsic-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-intrinsic-001.html new file mode 100644 index 0000000000..ebb07cf3b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-intrinsic-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-intrinsic-001-ref.html"> +<!-- + This test assumes that all engines segment a Japanese text: + 楽しいドライブ + to the following phrases: + 楽しい / ドライブ + + While assuming all engines segment this way looks fairly reasonable, + segmenting differently doesn't necessarily mean a failure because the + algorithm is UA dependent. Please add references if different. +--> +<style> +.container > div { + word-break: auto-phrase; + font-size: 10px; + border: 1px solid; +} +</style> +<div class="container" lang="ja"> + <div style="width: max-content"> + 楽しいドライブ。</div> + <div style="width: min-content"> + 楽しいドライブ。</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html new file mode 100644 index 0000000000..fcd17528ac --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-overflow-001-ref.html"> +<!-- + This test assumes that all engines segment a Japanese text: + 楽しいドライブ + to the following phrases: + 楽しい / ドライブ + + While assuming all engines segment this way looks fairly reasonable, + segmenting differently doesn't necessarily mean a failure because the + algorithm is UA dependent. Please add references if different. +--> +<style> +@font-face { + font-family: mplus; + src: url(/fonts/mplus-1p-regular.woff); +} +.container > div { + font-family: mplus; + word-break: auto-phrase; + font-size: 10px; + border: 1px solid; +} +</style> +<div class="container" lang="ja"> + <!-- Both phrases can fit to 7em, but the whole sentence doesn't. --> + <div style="width: 7em"> + 楽しいドライブ。</div> + <!-- The 2nd phrase doesn't fit to `4em`, hence fallback to normal. --> + <div style="width: 4em"> + 楽しいドライブ。</div> + <!-- Only one character can fit to `1em`, but no break before the period. --> + <div style="width: 1em"> + 楽しいドライブ。</div> + <!-- Breaks even before the period if `overflow-wrap`. --> + <div style="width: 1em; overflow-wrap: anywhere"> + 楽しいドライブ。</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html new file mode 100644 index 0000000000..b8e5520046 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-wbr-nobr-001-ref.html"> +<!-- + This test assumes that all engines segment a Japanese text: + ドライブ + as a single phrase. + + While assuming all engines segment this way looks fairly reasonable, + segmenting differently doesn't necessarily mean a failure because the + algorithm is UA dependent. Please add references if different. +--> +<style> +@font-face { + font-family: mplus; + src: url(/fonts/mplus-1p-regular.woff); +} +.container > div { + font-family: mplus; + word-break: auto-phrase; + width: 3em; + font-size: 10px; + border: 1px solid; +} +</style> +<div class="container" lang="ja"> + <!-- A phrase that doesn't fit should fall back to `normal`. --> + <div>ドライブ</div> + <!-- `<wbr>` in a phrase should allow breaking there. --> + <div>ドラ<wbr>イブ</div> + <!-- `​` in a phrase should allow breaking there too. --> + <div>ドラ​イブ</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-002.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-002.html new file mode 100644 index 0000000000..85061923ca --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> +<link rel="match" href="reference/word-break-auto-phrase-wbr-nobr-002-ref.html"> +<!-- + This test assumes that all engines segment a Japanese text: + 楽しいドライブ + to the following phrases: + 楽しい / ドライブ + + While assuming all engines segment this way looks fairly reasonable, + segmenting differently doesn't necessarily mean a failure because the + algorithm is UA dependent. Please add references if different. +--> +<style> +@font-face { + font-family: mplus; + src: url(/fonts/mplus-1p-regular.woff); +} +.container > div { + font-family: mplus; + word-break: auto-phrase; + width: 10em; + font-size: 10px; + border: 1px solid; +} +nobr { + white-space: nowrap; +} +</style> +<div class="container" lang="ja"> + <!-- `<nobr>` can turn 4 phrases to 3 phrases. --> + <div>楽しいドライブ、楽しいドライブ。</div> + <div>楽しい<nobr>ドライブ、楽しい</nobr>ドライブ。</div> +</div> |