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 | |
| 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')
175 files changed, 4389 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> diff --git a/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-001.html b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-001.html new file mode 100644 index 0000000000..f270766034 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-001.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text Test: soft wrap opportunity at boundary between two characters</title> + + <!-- + + CSS3 Text, §5.1 Line breaking details, 7th bullet, 2nd sentence + https://www.w3.org/TR/css-text-3/#line-break-details + + " + For soft wrap opportunities defined by the boundary between + two characters, the white-space property on the nearest + common ancestor of the two characters controls breaking + " + + --> + + <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/#word-break-property"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-details"> + <link rel="match" href="reference/break-boundary-2-chars-001-ref.html"> + + <meta content="This test checks that the word-break property does not apply to a run of text that is styled with 'white-space: pre' because the word-break property has no rendering effect in cases where lines of text are not allowed to break. Between the 'c' and 'x' and between the 'z' and 'd', there must be a line break because the 'white-space' declaration in effect in the nearest common ancestor of each of these pairs of two characters allows text wrapping." name="assert"> + + <style> + div + { + display: inline-block; + font-size: 32px; + margin-right: 5ch; + width: 0; + word-break: break-all; + } + + span + { + white-space: pre; + } + + div#first-sub-test + { + white-space: normal; + } + + div#second-sub-test + { + white-space: pre-wrap; + } + + div#third-sub-test + { + white-space: break-spaces; + } + + div#fourth-sub-test + { + white-space: pre-line; + } + </style> + + <div id="first-sub-test">abc<span>xyz</span>def</div><div id="second-sub-test">abc<span>xyz</span>def</div><div id="third-sub-test">abc<span>xyz</span>def</div><div id="fourth-sub-test">abc<span>xyz</span>def</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-002.html b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-002.html new file mode 100644 index 0000000000..334219570b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-002.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Text Test: soft wrap opportunity at boundary between two characters</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/#word-break-property"> + <link rel="match" href="reference/break-boundary-2-chars-002-ref.html"> + + <meta content="The word-break property can only apply when the 'white-space' value allow text wrapping, when line breaking opportunities are preserved. Therefore, 'word-break: break-all' must not cause any text wrapping in both cases of this test. There must be no wrapping between the 'c' and the 'x' and there must be no wrapping between the 'z' and the 'd'." name="assert"> + + <!-- + + white-space values that DISallow text wrapping: + { pre , nowrap } + + --> + + <style> + div + { + display: inline-block; + font-size: 32px; + margin-right: 10ch; + width: 0; + word-break: normal; + } + + span + { + word-break: break-all; + } + + div#first-sub-test + { + white-space: pre; + } + + div#second-sub-test + { + white-space: nowrap; + } + </style> + + <div id="first-sub-test">abc<span>xyz</span>def</div> + + <div id="second-sub-test">abc<span>xyz</span>def</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-001-ref.html new file mode 100644 index 0000000000..e0702afce5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-001-ref.html @@ -0,0 +1,20 @@ +<!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 + { + display: inline-block; + font-size: 32px; + margin-right: 5ch; + white-space: pre; + width: 0; + } + </style> + + <div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div><div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div><div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div><div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-002-ref.html new file mode 100644 index 0000000000..cd3ed338f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-002-ref.html @@ -0,0 +1,23 @@ +<!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 + { + display: inline-block; + font-size: 32px; + margin-right: 10ch; + white-space: normal; + width: 0; + } + + </style> + + <div>abcxyzdef</div> + + <div>abcxyzdef</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html new file mode 100644 index 0000000000..0e0300a72d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + position: relative; + 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/word-break/reference/word-break-break-all-014-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-014-ref.html new file mode 100644 index 0000000000..044ea40dd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-014-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<p>Test passes if 2 (different) heart emojis are rendered below each other.</p> +<div>💖<br>💔</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-020-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-020-ref.html new file mode 100644 index 0000000000..32b85542a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-020-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> +div { + border: 5px solid; + width: 2em; +} + +div:nth-of-type(1) { border-color: blue; } +div:nth-of-type(2) { border-color: green; } +div:nth-of-type(3) { border-color: orange; } + +</style> + +<p>Test passes if the text in each of the following 3 boxes is broken into separate lines at the same points. + +<div lang=ja>あ<br>い）<br>あ<br>（い</div> +<div lang=ja>あ<br>い）<br>あ<br>（い</div> +<div lang=ja>あ<br>い）<br>あ<br>（い</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-062-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-062-ref.html new file mode 100644 index 0000000000..c44f82d7b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-062-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: orange solid; + font: 24px monospace; + margin-bottom: 4px; + width: 15ch; + } + </style> + + <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>. + + <div>A simple senten<br>ce in english.</div> + + <div>A simple senten<br>ce in english.</div> + + <div>A simple senten<br>ce in english.</div> + + <div>A simple senten<br>ce in english.</div> + + <div>A simple senten<br>ce in english.</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ethiopic-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ethiopic-ref.html new file mode 100644 index 0000000000..71d6b11521 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ethiopic-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>break-all Ethiopic word breaking</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +div { + color: blue; + white-space: pre; +} +.ref { + color: orange; +} +</style> + +<p> Test passes if the blue and orange text are identical. + +<div lang=am>በ፡ +በ፡ +በ፡ +በ</div> +<div lang=am class=ref>በ፡ +በ፡ +በ፡ +በ</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-001-ref.html new file mode 100644 index 0000000000..4eab639ac3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-001-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element - reference</title> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">bbbbbb<br>bbbb</div> +<div class="testdiv">bbbbbb<br>bbbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-002-ref.html new file mode 100644 index 0000000000..5f7f01df94 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-002-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element - reference</title> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaa bb<br>bbbb</div> +<div class="testdiv">aaa bb<br>bbbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-003-ref.html new file mode 100644 index 0000000000..0c8caaee46 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-003-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element - reference</title> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaaabb<br>bbbb</div> +<div class="testdiv">aaaabb<br>bbbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-004-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-004-ref.html new file mode 100644 index 0000000000..f9229e998a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-004-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element - reference</title> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaaaaaa<br>bbb</div> +<div class="testdiv">aaaaaaa<br>bbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-005-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-005-ref.html new file mode 100644 index 0000000000..662f35112f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-005-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element - reference</title> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaa bb<br>bbbbbb<br>bbb<br>ccc</div> +<div class="testdiv">aaa bb<br>bbbbbb<br>bbb<br>ccc</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-a-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-a-ref.html new file mode 100644 index 0000000000..e2776669f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-a-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +div { + border: solid 5px; + margin: 5px; + font-family: monospace; + width: 6.1ch; + padding: 1px; +} +.test { word-break: break-all; } +.blue { border-color: blue; } +.orange { border-color: orange; } +</style> +<p>Test passes if the black box is identical to either the blue or the orange one. +<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> +<div>aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> +<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-b-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-b-ref.html new file mode 100644 index 0000000000..c9384aace9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-b-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +div { + border: solid 5px; + margin: 5px; + font-family: monospace; + width: 6.1ch; + padding: 1px; +} +.test { word-break: break-all; } +.blue { border-color: blue; } +.orange { border-color: orange; } +</style> +<p>Test passes if the black box is identical to either the blue or the orange one. +<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> +<div>aaaabb<br>bbbbbb<br>bb<br>bccccc</div> +<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-007-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-007-ref.html new file mode 100644 index 0000000000..80bdb406b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-007-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element - reference</title> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaaaaaa<br>bbbbbb<br>bcccccc</div> +<div class="testdiv">aaaaaaa<br>bbbbbb<br>bcccccc</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-000.html new file mode 100644 index 0000000000..579c2dc6a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, japanese</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-001.html new file mode 100644 index 0000000000..ceec198d03 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, latin</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref"><span>Latin latin latin lati<br/>n</span></div> +<div class="ref"><span>Latin latin latin lati<br/>n</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-002.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-002.html new file mode 100644 index 0000000000..50e1e9c431 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, korean</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div> +<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-003.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-003.html new file mode 100644 index 0000000000..e88df3820b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, thai</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div> +<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-004.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-004.html new file mode 100644 index 0000000000..e28e571ae4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, arabic</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي‍<br/>‍ل</span></div> +<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي‍<br/>‍ل</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-005.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-005.html new file mode 100644 index 0000000000..151aecb752 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, subjoined tibetan</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 Arial; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div> +<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-006.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-006.html new file mode 100644 index 0000000000..f0b83d14d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, spacing vowel sign</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div> +<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-007.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-007.html new file mode 100644 index 0000000000..8d715556b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-007.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, combining diacritic</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div> +<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-008.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-008.html new file mode 100644 index 0000000000..0499f82e79 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-008.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, syllabic cluster</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div> +<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-031.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-031.html new file mode 100644 index 0000000000..1e28e2d358 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-031.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, ID and CJ</title> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>フォ フ<br/>ォ</span></div> +<div class="ref" lang="ja"><span>フォ フ<br/>ォ</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-032.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-032.html new file mode 100644 index 0000000000..8b7b3b6c39 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-032.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, korean (Hangul Jamos)</title> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ko"><span>애기판다 애기판<br/>다</span></div> +<div class="ref" lang="ko"><span>애기판다 애기판<br/>다</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-005-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-005-ref.html new file mode 100644 index 0000000000..2a33ce75e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-005-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-Text reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>This test passes if the four characters below are arranged in a two-by-two square. +<div>字字<br>字字</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-063-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-063-ref.html new file mode 100644 index 0000000000..5ab3f5ff0f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-063-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: orange solid; + font: 24px monospace; + margin-bottom: 4px; + width: 15ch; + } + </style> + + <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>. + + <div>A simple<br>sentence in eng<br>lish.</div> + + <div>A simple<br>sentence in eng<br>lish.</div> + + <div>A simple<br>sentence in eng<br>lish.</div> + + <div>A simple<br>sentence in eng<br>lish.</div> + + <div>A simple<br>sentence in eng<br>lish.</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-000.html new file mode 100644 index 0000000000..d11db046b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, latin</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref"><span>Latin latin latin<br/>latin</span></div> +<div class="ref"><span>Latin latin latin<br/>latin</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-001.html new file mode 100644 index 0000000000..bc05bc3b47 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, japanese</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div> +<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-002.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-002.html new file mode 100644 index 0000000000..1567534d9b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, korean</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div> +<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-003.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-003.html new file mode 100644 index 0000000000..5aba6783f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, thai</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="th"><span>และ และ<br/>และ</span></div> +<div class="ref" lang="th"><span>และ และ<br/>และ</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-009.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-009.html new file mode 100644 index 0000000000..4dcdf2dd2b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-009.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, ID and CJ</title> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>フォ<br/>フォ</span></div> +<div class="ref" lang="ja"><span>フォ<br/>フォ</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-010.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-010.html new file mode 100644 index 0000000000..cbfd347608 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-010.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, korean (Hangul Jamos)</title> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ko"><span>애기판다<br/>애기판다</span></div> +<div class="ref" lang="ko"><span>애기판다<br/>애기판다</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-manual-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-manual-001-ref.html new file mode 100644 index 0000000000..f51208ab95 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-manual-001-ref.html @@ -0,0 +1,17 @@ +<!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: 30ch; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div lang=th>กรุงเทพคือสวยงาม</div> +<div lang=th>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-002-ref.html new file mode 100644 index 0000000000..64f2b231c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-002-ref.html @@ -0,0 +1,17 @@ +<!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: 30ch; +} +</style> + +<p>Test passes if the two boxes below are <em>different</em>. + +<div lang=de>กรุงเทพคือสวยงาม</div> +<div lang=de>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-003-ref.html new file mode 100644 index 0000000000..15843b7296 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-003-ref.html @@ -0,0 +1,17 @@ +<!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: 30ch; +} +</style> + +<p>Test passes if the two boxes below are <em>different</em>. + +<div>กรุงเทพคือสวยงาม</div> +<div>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ar-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ar-ref-000.html new file mode 100644 index 0000000000..f7479d6917 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ar-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, arabic</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div> +<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-bo-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-bo-ref-000.html new file mode 100644 index 0000000000..b421a6316c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-bo-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, tibetan</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div> +<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-en-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-en-ref-000.html new file mode 100644 index 0000000000..2592fafa0d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-en-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, latin</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref"><span>Latin latin latin<br/>latin</span></div> +<div class="ref"><span>Latin latin latin<br/>latin</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ethiopic-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ethiopic-ref.html new file mode 100644 index 0000000000..f6b1ce4984 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ethiopic-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>Normal Ethiopic word breaking</title> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +div { + color: blue; + white-space: pre; +} +.ref { + color: orange; +} +</style> + +<p> Test passes if the blue and orange text are identical. + +<div lang=am>ተወልዱ፡ +ኵሉ፡ +ሰብእ፡ +ግዑዛን፡ +ወዕሩያን፡ +በማዕረግ፡ +ወብሕግ።</div> +<div lang=am class=ref>ተወልዱ፡ +ኵሉ፡ +ሰብእ፡ +ግዑዛን፡ +ወዕሩያን፡ +በማዕረግ፡ +ወብሕግ።</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-hi-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-hi-ref-000.html new file mode 100644 index 0000000000..ac2e0faab1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-hi-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, hindi</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div> +<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-000.html new file mode 100644 index 0000000000..deb651f8e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-001.html new file mode 100644 index 0000000000..241ab488e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese hiragana</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div> +<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-002.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-002.html new file mode 100644 index 0000000000..813e04586e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese katakana</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div> +<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-004.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-004.html new file mode 100644 index 0000000000..bb73af4f1d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-km-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-km-ref-000.html new file mode 100644 index 0000000000..9d61b3239f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-km-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, khmer</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div> +<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ko-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ko-ref-000.html new file mode 100644 index 0000000000..b4dc700194 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ko-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, korean</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div> +<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-lo-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-lo-ref-000.html new file mode 100644 index 0000000000..68b8457dc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-lo-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, lao</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div> +<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-my-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-my-ref-000.html new file mode 100644 index 0000000000..fef7efd182 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-my-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, myanmar</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div> +<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ref-001.html new file mode 100644 index 0000000000..352ff3f0cc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ref-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, zwsp</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div> +<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-tdd-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-tdd-ref-000.html new file mode 100644 index 0000000000..7b7c2b6591 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-tdd-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, tai nüa</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div> +<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-001-ref.html new file mode 100644 index 0000000000..df308cee75 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-001-ref.html @@ -0,0 +1,17 @@ +<!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: 30ch; +} +</style> + +<p>Test passes if the two boxes below are <em>different</em>. + +<div lang=th>กรุงเทพคือสวยงาม</div> +<div lang=th>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-ref-000.html new file mode 100644 index 0000000000..51cfe2fb40 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, thai</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div> +<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-zh-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-zh-ref-000.html new file mode 100644 index 0000000000..afdd82454c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-zh-ref-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, chinese</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div> +<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-000.html new file mode 100644 index 0000000000..af21bedf4b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, japanese</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語</span></div></div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-001.html new file mode 100644 index 0000000000..b3611de74b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, latin</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-001.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div> +<div class="ref"><span>Latin latin latin lati<br/>n</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-002.html new file mode 100644 index 0000000000..7688742b9a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, korean</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-002.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div> +<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-003.html new file mode 100644 index 0000000000..705c1f1327 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, thai</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-003.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="th"><div id="testdiv"><span id="testspan">ภาษาไทยภาษาไทย</span></div></div> +<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-004.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-004.html new file mode 100644 index 0000000000..537ec73218 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, arabic</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. When shaping scripts such as Arabic are allowed to break within words due to break-all, the characters must still be shaped as if the word were not broken."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-004.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" dir="rtl" lang="ar"><div id="testdiv"><span id="testspan">التدويل نشاط التدويل</span></div></div> +<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي‍<br/>‍ل</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-005.html new file mode 100644 index 0000000000..02f233587b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-005.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, subjoined tibetan</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-005.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 Arial; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="bo"><div id="testdiv"><span id="testspan">ལྷ་སའི་སྐད་ད་ལྟ</span></div></div> +<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-006.html new file mode 100644 index 0000000000..6c79e4cd99 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-006.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, spacing vowel sign</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. A spacing vowel sign should be wrapped to the next line with its base character."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-006.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिंदी हिंदी हिंदी</span></div></div> +<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +<!-- +Notes: +A typographic unit based on extended grapheme clusters groups base characters and combining characters together. +--> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-007.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-007.html new file mode 100644 index 0000000000..f68369b4b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-007.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, combining diacritic</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. An combining diacritic plus base character should be wrapped as a unit to the next line."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-007.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="my"><div id="testdiv"><span id="testspan">မြန်မာစာမြန်မာစာမြန်</span></div></div> +<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +<!-- +Notes: +A typographic unit based on extended grapheme clusters groups base characters and combining characters together. +--> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-008.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-008.html new file mode 100644 index 0000000000..85e91b56aa --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, syllabic cluster</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. An indic syllable cluster should be wrapped as a unit to the next line."> +<meta name="flags" content="should"> +<!-- + Marking as "should" + because while the spec requires this behavior + about typographic letter units, + it is handwavy about what constitutes one, + and appeals to the UA's knowledge of "the right thing to do" for that language. +--> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-008.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिन्दी हिन्दी हिन्दी</span></div></div> +<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html new file mode 100644 index 0000000000..5fdf7f3f9f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="The word is broken even if pre-wrap provides a former breaking opportunity in leading white-space."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + white-space: pre; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; +} +.test { + color: green; + width: 5ch; + + white-space: pre-wrap; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"> XXXX<br>X</div> + <div class="test"> XXXXX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html new file mode 100644 index 0000000000..384563195c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="A single leading white-space should account as soft breaking opportunity, honoring the 'white-space: pre-wrap', on top to the ones provided by 'word-break: break-all'."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; + white-space: pre; +} +span { color: green; } +.test { + color: green; + width: 1ch; + white-space: pre-wrap; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"> <br>X<br>X</div> + <div class="test"> XX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-012.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-012.html new file mode 100644 index 0000000000..f6f0b13823 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-012.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="The word is broken even if white-space: break-spaces provides a former breaking opportunity in leading white-space."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; + white-space: pre; +} +.test { + color: green; + width: 5ch; + + white-space: break-spaces; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"> XXXX<br>X</div> + <div class="test"> XXXXX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html new file mode 100644 index 0000000000..caa15554c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="A single leading white-space should account as soft breaking opportunity, honoring the 'white-space: break-spaces', on top to the ones provided by 'word-break: break-all'."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; + white-space: pre; +} +.test { + color: green; + width: 1ch; + white-space: break-spaces; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"> <br>X<br>X</div> + <div class="test"> XX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html new file mode 100644 index 0000000000..c331670aa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-014-ref.html"> +<meta name="assert" content="The text is wrapped after the first character and no unicode unit is broken."> +<style> +div { + width: 1px; + word-break: break-all; +} +</style> +<p>Test passes if 2 (different) heart emojis are rendered below each other.</p> +<div>💖💔</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-015.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-015.html new file mode 100644 index 0000000000..8b10947909 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-015.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="The word is broken even if white-space: pre-wrap provides a former breaking opportunity in leading white-space."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; +} +.red { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; + white-space: pre; +} +.test { + color: green; + line-height: 1em; + width: 5ch; + + white-space: pre-wrap; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"> XX X<br>XX</div> + <div class="test"> XX XXX </div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-016.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-016.html new file mode 100644 index 0000000000..8bd6fcf432 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-016.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks between the last two letters, because breaking opportunities between the punctuaction characters are forbidden."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 8ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XX XX<br>XXXX</div> + <div class="test">XX XXX...</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-017.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-017.html new file mode 100644 index 0000000000..e4cc3506da --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-017.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all + break-spaces do not allow a break +between the last character of a word and the first space of a sequence of preserved spaces +if there are other wrapping opportunities earlier in the line."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font: 25px/1 Ahem; + width: 4ch; +} +.red { + position: absolute; + white-space: pre; + color: red; + background: green; + z-index: -1; +} +.test { + white-space: break-spaces; + word-break: break-all; + color: green; +} +</style> +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="red">X X <br>X X <br>X X <br>XX X</div> +<div class="test">X XX XX X XX X</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-018.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-018.html new file mode 100644 index 0000000000..1314e5976a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-018.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="word-break: break-all' must honors line breaking behavior introduced by characters with the GL character class"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 25px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 4ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXX <br>X XX<br>XX X<br>X</div> + <div class="test">XXXX XXXX X X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-019.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-019.html new file mode 100644 index 0000000000..a3242340fd --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-019.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks between the last two letters, because breaking opportunities between the punctuaction characters are forbidden."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 8ch; + white-space: pre-wrap; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XX XX<br>XXXX</div> + <div class="test">XX XXX...</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-020.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-020.html new file mode 100644 index 0000000000..ac1840131c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-020.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: break-all and punctuation</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-property"> +<link rel="match" href="reference/word-break-break-all-020-ref.html"> +<meta name="assert" content="work-break:break-all does not affect rules governing the soft wrap opportunities created by punctuation."> +<style> +div { + border: 5px solid; + width: 2em; +} + +div:nth-of-type(1) { border-color: blue; } +div:nth-of-type(2) { border-color: green; } +div:nth-of-type(3) { border-color: orange; } + +div:nth-of-type(3) { word-break: break-all; } +</style> + +<p>Test passes if the text in each of the following 3 boxes is broken into separate lines at the same points. +<div lang=ja>あい）あ（い</div> +<div lang=ja>あ<br>い）<br>あ<br>（い</div> +<div lang=ja>あい）あ（い</div> + +<!-- +If the first box (blue) is wrong, +customary rules for line breaking japanese are not implemented (or not correctly). + +If the third box (orange) is wrong, +customary rules for line breaking japanese are discarded +when applying 'word-break: break-all', which is a spec violation. +--> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-021.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-021.html new file mode 100644 index 0000000000..ada6391920 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-021.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="word-break: break-all' must honor line breaking behavior introduced by characters with the GL character class"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 25px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 4ch; + white-space: pre-wrap; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXX <br>X XX<br>XX X<br>X</div> + <div class="test">XXXX XXXX X X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-022.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-022.html new file mode 100644 index 0000000000..0c5286df11 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-022.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="word-break: break-all' must honor line breaking behavior introduced by characters with the GL character class"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 25px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 4ch; + white-space: break-spaces; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXX <br>X XX<br>XX <br>X X</div> + <div class="test">XXXX XXXX X X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-023.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-023.html new file mode 100644 index 0000000000..900be07357 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-023.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks before the first backslash character because UAX14 rules forbid to break after PR class."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 7ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XX XX<br>XXX</div> + <div class="test">XX XX\\\</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-024.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-024.html new file mode 100644 index 0000000000..c2678e350f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-024.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks before the first backslash character because UAX14 rules forbid to break after PR class."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 4ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXX<br>XX</div> + <div class="test">XXX\X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-025.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-025.html new file mode 100644 index 0000000000..985484831d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-025.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks before the first backslash character following UAX14 rules about PR class symbols."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 3ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXX<br>XX</div> + <div class="test">XXX\X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-026.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-026.html new file mode 100644 index 0000000000..96ecfea8df --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-026.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks before the last letter before the slash, because UAX14 rules forbid to break before SY class symbols."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 8ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XX XX<br>XXXX</div> + <div class="test">XX XXX///</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-027.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-027.html new file mode 100644 index 0000000000..6c7cce5ff8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-027.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks before the last letter before the slash, because UAX14 rules forbid to break before SY class symbols."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 3ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XX<br>XXX</div> + <div class="test">XXX/X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-028.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-028.html new file mode 100644 index 0000000000..d9a474ebaa --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-028.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all breaks after the slash, honoring the UAX14 rules that allow break after SY class symbols."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.red { + position: absolute; + width: 100px; + height: 100px; + background: green; + color: red; + z-index: -1; +} +.test { + color: green; + width: 4ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXXX<br>X</div> + <div class="test">XXX/X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-029.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-029.html new file mode 100644 index 0000000000..3e0a1e14e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-029.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="flags" content="Ahem"> +<meta name="assert" content="The text is wrapped into two lines, since there is no need to break the second line using the space in the middle."> +<style> +div { + position: relative; + font: 25px / 1 Ahem; +} +.red { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; +} +.test { + color: green; + width: 3ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXX<br>X X</div> + <div class="test">XXXX<span> </span>X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-030.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-030.html new file mode 100644 index 0000000000..e6a8a0076d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-030.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-all</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="flags" content="Ahem"> +<meta name="assert" content="word-break: break-all applies correctly when there is styled text using 'span' elemetns."> +<style> +div { + position: relative; + font: 25px / 1 Ahem; +} +.ref { + position: absolute; + background: green; + color: red; + height: 100px; + z-index: -1; +} +.test { + color: transparent; + width: 4ch; + word-break: break-all; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="ref"><span style="color: green">XX</span>XX<br>XX</div> + <div class="test">XX<span style="color: green">XXXX</span>XX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-031.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-031.html new file mode 100644 index 0000000000..d60a677f58 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-031.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: break-all, ID and CJ</title> +<meta name="assert" content="word-break: break-all means lines may break between ID and CJ."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-031.html'> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">フォ フォ</span></div></div> +<div class="ref" lang="ja"><span>フォ フ<br/>ォ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth; +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-032.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-032.html new file mode 100644 index 0000000000..08c89d94cc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-032.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>word-break: break-all, korean (Hangul Jamos)</title> +<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ref-032.html'> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: break-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ko"><div id="testdiv"><span id="testspan">애기판다 애기판다</span></div></div> +<div class="ref" lang="ko"><span>애기판다 애기판<br/>다</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth; +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-062.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-062.html new file mode 100644 index 0000000000..6d2f25abc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-062.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Text: 'word-break: break-all' applied to an inline in latin</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/#word-break-property"> + <link rel="match" href="reference/word-break-break-all-062-ref.html"> + + <style> + div + { + border: orange solid; + font: 24px monospace; + margin-bottom: 4px; + width: 15ch; + /* + 15 in 15ch is an entirely arbitrary number. + The test only aims at checking if a word + will break. + */ + } + + div#ws-normal + { + white-space: normal; + } + + div#ws-prewrap + { + white-space: pre-wrap; + } + + div#ws-breakspaces + { + white-space: break-spaces; + } + + div#ws-preline + { + white-space: pre-line; + } + + span.test + { + word-break: break-all; + } + </style> + + <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>. + + <div id="ws-normal"><span class="test">A simple sentence in english.</span></div> + <!-- 123456789012345 --> + + <div id="ws-prewrap"><span class="test">A simple sentence in english.</span></div> + <!-- 123456789012345 --> + + <div id="ws-breakspaces"><span class="test">A simple sentence in english.</span></div> + <!-- 123456789012345 --> + + <div id="ws-preline"><span class="test">A simple sentence in english.</span></div> + <!-- 123456789012345 --> + + <div id="reference">A simple senten<br>ce in english.</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-ethiopic.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-ethiopic.html new file mode 100644 index 0000000000..1fa7f9054a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-ethiopic.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>break-all Ethiopic word breaking</title> +<meta name="assert" content="word-break: break-all means Ethiopid words break according to the older rules (letter by letter). +Nevertheless, the breaking prohibition before the Ethiopic word space (U+1361) +which belongs the the BA line breaking class, +is honored."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-ethiopic-ref.html'> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +div { + width: 0; + color: blue; + word-break: break-all; +} +.ref { + color: orange; + width: auto; + white-space: pre; +} +</style> + +<p> Test passes if the blue and orange text are identical. + +<div lang=am>በ፡በ፡በ፡በ</div> +<div lang=am class=ref>በ፡ +በ፡ +በ፡ +በ</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-001.html new file mode 100644 index 0000000000..a0c7c4958b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<meta name="assert" content="word-break: break-all works when specified on inline element"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-inline-001-ref.html'> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +.test { word-break: break-all; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv"><span class="test">bbbbbbbbbb</span></div> +<div class="testdiv">bbbbbb<br>bbbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-002.html new file mode 100644 index 0000000000..66036f1e5a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<meta name="assert" content="word-break: break-all works when specified on inline element"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-inline-002-ref.html'> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +.test { word-break: break-all; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaa <span class="test">bbbbbb</span></div> +<div class="testdiv">aaa bb<br>bbbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-003.html new file mode 100644 index 0000000000..f4a86bc645 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<meta name="assert" content="word-break: break-all works when specified on inline element"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-inline-003-ref.html'> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +.test { word-break: break-all; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaaa<span class="test">bbbbbb</span></div> +<div class="testdiv">aaaabb<br>bbbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-004.tentative.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-004.tentative.html new file mode 100644 index 0000000000..2fad813661 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-004.tentative.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<meta name="assert" content="word-break: break-all works when specified on inline element"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-inline-004-ref.html'> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +.test { word-break: break-all; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaaaaaa<span class="test">bbb</span></div> +<div class="testdiv">aaaaaaa<br>bbb</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-005.html new file mode 100644 index 0000000000..f3ebe129e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-005.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<meta name="assert" content="word-break: break-all works when specified on inline element"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-inline-005-ref.html'> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +.test { word-break: break-all; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaa <span class="test">bbbbbbbbbbb</span> ccc</div> +<div class="testdiv">aaa bb<br>bbbbbb<br>bbb<br>ccc</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-006.html new file mode 100644 index 0000000000..caf25d9429 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<meta name="assert" content="word-break: break-all works when specified on inline element"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-inline-006-a-ref.html'> +<link rel='match' href='reference/word-break-break-all-inline-006-b-ref.html'> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +div { + border: solid 5px; + margin: 5px; + font-family: monospace; + width: 6.1ch; + padding: 1px; +} +.test { word-break: break-all; } +.blue { border-color: blue; } +.orange { border-color: orange; } +</style> +<p>Test passes if the black box is identical to either the blue or the orange one. +<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> +<div>aaaa<span class="test">bbbbbbbbbbb</span>ccccc</div> +<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-007.tentative.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-007.tentative.html new file mode 100644 index 0000000000..bc5a08d38a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-007.tentative.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<meta name="assert" content="word-break: break-all works when specified on inline element"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-break-all-inline-007-ref.html'> +<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'> +<style> +.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } +.test { word-break: break-all; } +</style> +<div>Test passes if the two boxes are the same.</div> +<div class="testdiv">aaaaaaa<span class="test">bbbbbbb</span>cccccc</div> +<div class="testdiv">aaaaaaa<br>bbbbbb<br>bcccccc</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-008.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-008.html new file mode 100644 index 0000000000..930ae436fe --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<meta name="flags" content="Ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="break-all doesn't allow breaking around punctuation characters"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font: 50px / 1 Ahem; +} +.fail { + background: green; + position: absolute; + color: red; + height: 100px; + z-index: -1; +} +.test { + color: green; + width: 1em; + + word-break: break-all; +} +</style> + +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="fail">XX</div> +<div class="test"><span>X</span><span>.</span></div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-009.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-009.html new file mode 100644 index 0000000000..e1914f5f4d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-009.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<meta name="flags" content="Ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="'overflow-wrap: anywhere' works when specified on inline element"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div, span { + font: 10px / 1 Ahem; + color: green; +} +.fail { + position: absolute; + background: green; + color: red; + height: 100px; + z-index: -1; +} +.testdiv { + width: 5ch; +} +.test { + word-break: break-all; +} +</style> + +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="fail">XXXXXXXXXX<br>XXXXX<br>XXXX<br>XXX</div> +<div class="testdiv">XXXXXXXXXX<span class="test">XXXXXXXXX</span>XXX</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-010.tentative.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-010.tentative.html new file mode 100644 index 0000000000..36c9e47ff5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-010.tentative.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>word-break: break-all on inline element</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="flags" content="Ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="'word-break: break-all' allows to break before the first character of the inline-block it applies to"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div, span { + font: 50px / 1 Ahem; + color: green; +} +.fail { + position: absolute; + color: red; + z-index: -1; +} +.testdiv { + width: 2ch; +} +.test { + word-break: break-all; +} +</style> + +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="fail">XX<br>XX</div> +<div class="testdiv">XX<span class="test">XX</span></div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-crash-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-crash-001.html new file mode 100644 index 0000000000..894a6f3aa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-crash-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Test float + nbsp + break-word does not freeze</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=972421"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + font-size: 10px; + width: 10ch; + border: 2px solid blue; +} +float { + float: left; +} +.nowrap > div { + white-space: nowrap; +} +.break-word { + word-break: break-word; +} +</style> +<body> + <section> + <div>123456<float></float>654321</div> + <div>123456<float></float> 654321</div> + </section> + <section class="nowrap"> + <div>123456<float></float>654321</div> + <div>123456<float></float> 654321</div> + </section> + <section class="break-word"> + <div>123456<float></float>654321</div> + <div>123456<float></float> 654321</div> + </section> +<script>test(() => { + document.body.offsetTop; // layout should not freeze. +});</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html new file mode 100644 index 0000000000..3c6ab3863f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Test: word-break: break-word and overflow-wrap interaction</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<style> + div { + float: left; + width: 100px; + height: 100px; + border: 1px solid black; + margin: 10px; + overflow-wrap: anywhere; + } +</style> +<p>The boxes below should look the same.</p> +<div>FillerFillerFillerFiller</div> +<div>FillerFillerFillerFiller</div> +<div>FillerFillerFillerFiller</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html new file mode 100644 index 0000000000..b4d3720e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Test: word-break: break-word and overflow-wrap interaction</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042"> +<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-word-break"> +<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-overflow-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-overflow-wrap-anywhere"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="match" href="word-break-break-word-overflow-wrap-interactions-ref.html"> +<style> + div { + float: left; + width: 100px; + height: 100px; + border: 1px solid black; + margin: 10px; + } +</style> +<p>The boxes below should look the same.</p> +<div style="word-break: break-word; overflow-wrap: anywhere;">FillerFillerFillerFiller</div> +<div style="word-break: break-word; overflow-wrap: break-word;">FillerFillerFillerFiller</div> +<div style="word-break: break-word; overflow-wrap: normal;">FillerFillerFillerFiller</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-000.html new file mode 100644 index 0000000000..fce7487c33 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, latin</title> +<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-keep-all-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div> +<div class="ref"><span>Latin latin latin<br/>latin</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-001.html new file mode 100644 index 0000000000..3af7fedf04 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, japanese</title> +<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-keep-all-ref-001.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語 日本語 日本語</span></div></div> +<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-002.html new file mode 100644 index 0000000000..db9ea4c155 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, korean</title> +<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-keep-all-ref-002.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div> +<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-003.html new file mode 100644 index 0000000000..776d56d828 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, thai</title> +<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words', except where opportunities exist due to dictionary-based breaking (such as in Thai)."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-keep-all-ref-003.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="th"><div id="testdiv"><span id="testspan">และ และและ</span></div></div> +<div class="ref" lang="th"><span>และ และ<br/>และ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-005.html new file mode 100644 index 0000000000..1e71ec7111 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-005.html @@ -0,0 +1,28 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-Text test: word-break keep-all does not affect U+3000</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<meta name=flags content=""> +<meta name=assert content="U+3000, despite being called Ideographic Space, does not belong to the ID line breaking class, or any other class whose wrapping opportunities are suppressed by word-break:keep-all. A break after it should still be allowed."> +<link rel="match" href="reference/word-break-keep-all-005-ref.html"> +<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all"> +<style> +div { + width: 4em; + word-break: keep-all; +} +</style> + +<p>This test passes if the four characters below are arranged in a two-by-two square. +<div>字字 字字</div> +<!-- +If keep-all has no effect at all, breaks are allowed everywhere, +and the result will be: + 字字 字 + 字 + +If keep-all correctly suppresses wrapping opportunities between CJK ideographs +but also incorrectly suppresses the wrapping opportunity after U+3000, +no wrapping is possible, and the result will be: + 字字 字字 +--> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-006.html new file mode 100644 index 0000000000..7bf9a15a9c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-006.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-Text test: word-break keep-all does not affect punctuation</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<meta name=flags content=""> +<meta name=assert content="word-break:keep-all does not affect rules governing the soft wrap opportunities created by punctuation"> +<link rel="match" href="reference/word-break-keep-all-005-ref.html"> +<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-word-break"> +<style> +div { + width: 4em; + word-break: keep-all; +} +span { color: transparent } +</style> + +<p>This test passes if the four characters below are arranged in a two-by-two square. +<div>字字<span>、</span>字字</div> +<!-- +U+3001 : IDEOGRAPHIC COMMA is made transparent for visual simplicity, +the change in color has no effect on layout. + +If keep-all has no effect at all, breaks are allowed everywhere +(except before U+3001, but this has no incidence in this case) +and the result will be: + 字字、字 + 字 + +If keep-all correctly suppresses wrapping opportunities between CJK ideographs +but also incorrectly suppresses the wrapping opportunity after U+3001, +no wrapping is possible, and the result will be: + 字字、字字 +--> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-007.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-007.html new file mode 100644 index 0000000000..443cccbc9d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-007.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-Text test: word-break keep-all + pre-wrap does not affect U+3000</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<meta name=flags content=""> +<meta name=assert content="U+3000, despite being called Ideographic Space, does not belong to the ID line breaking class, or any other class whose wrapping opportunities are suppressed by word-break:keep-all. A break after it should still be allowed. white-space:pre-wrap doesn't change that."> +<link rel="match" href="reference/word-break-keep-all-005-ref.html"> +<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all"> +<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<style> +div { + width: 4em; + word-break: keep-all; + white-space: pre-wrap; +} +</style> + +<p>This test passes if the four characters below are arranged in a two-by-two square. +<div>字字 字字</div> +<!-- +If keep-all has no effect at all, breaks are allowed everywhere, +and the result will be: + 字字 字 + 字 + +If keep-all correctly suppresses wrapping opportunities between CJK ideographs +but also incorrectly suppresses the wrapping opportunity after U+3000, +no wrapping is possible, and the result will be: + 字字 字字 +--> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-008.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-008.html new file mode 100644 index 0000000000..6532e41609 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-008.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-Text test: word-break keep-all + break-spaces does not affect U+3000</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<meta name=flags content=""> +<meta name=assert content="U+3000, despite being called Ideographic Space, does not belong to the ID line breaking class, or any other class whose wrapping opportunities are suppressed by word-break:keep-all. A break after it should still be allowed. white-space:break-spaces doesn't change that."> +<link rel="match" href="reference/word-break-keep-all-005-ref.html"> +<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all"> +<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<style> +div { + width: 4em; + word-break: keep-all; + white-space: break-spaces; +} +</style> + +<p>This test passes if the four characters below are arranged in a two-by-two square. +<div>字字 字字</div> +<!-- +If keep-all has no effect at all, breaks are allowed everywhere, +and the result will be: + 字字 字 + 字 + +If keep-all correctly suppresses wrapping opportunities between CJK ideographs +but also incorrectly suppresses the wrapping opportunity after U+3000, +no wrapping is possible, and the result will be: + 字字 字字 +--> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-009.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-009.html new file mode 100644 index 0000000000..d6df63f4e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-009.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, ID and CJ</title> +<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-keep-all-ref-009.html'> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">フォ フォ</span></div></div> +<div class="ref" lang="ja"><span>フォ<br/>フォ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth; +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-010.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-010.html new file mode 100644 index 0000000000..c288f943a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-010.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: keep-all, korean (Hangul Jamos)</title> +<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-keep-all-ref-010.html'> +<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'> +<style type='text/css'> +.test { word-break: keep-all; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ko"><div id="testdiv"><span id="testspan">애기판다 애기판다</span></div></div> +<div class="ref" lang="ko"><span>애기판다<br/>애기판다</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth; +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-063.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-063.html new file mode 100644 index 0000000000..3fa827b487 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-063.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Text: 'word-break: keep-all' applied to an inline in latin</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/#word-break-property"> + <link rel="match" href="reference/word-break-keep-all-063-ref.html"> + + <style> + div + { + border: orange solid; + font: 24px monospace; + margin-bottom: 4px; + width: 15ch; + /* + 15 in 15ch is an entirely arbitrary number. + */ + word-break: break-all; + /* + 'word-break: break-all' applied on the + wrapping block is necessary to verify + that 'word-break: keep-all' is + implemented + */ + } + + div#ws-normal + { + white-space: normal; + } + + div#ws-prewrap + { + white-space: pre-wrap; + } + + div#ws-breakspaces + { + white-space: break-spaces; + } + + div#ws-preline + { + white-space: pre-line; + } + + span.test + { + word-break: keep-all; + } + + div#reference + { + word-break: normal; + } + </style> + + <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>. + + <div id="ws-normal">A simple <span class="test">sentence</span> in english.</div> + + <div id="ws-prewrap">A simple <span class="test">sentence</span> in english.</div> + + <div id="ws-breakspaces">A simple <span class="test">sentence</span> in english.</div> + + <div id="ws-preline">A simple <span class="test">sentence</span> in english.</div> + + <div id="reference">A simple<br>sentence in eng<br>lish.</div> + <!-- 123456789012345 --> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-manual-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-manual-001.html new file mode 100644 index 0000000000..09d803b0fc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-manual-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break:manual </title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-boundary-detection"> +<link rel="match" href="reference/word-break-manual-001-ref.html"> +<meta name="assert" content="word-break: manual turns off detection of word boundaries in south east asian scripts"> +<style> +#wrap, #ref { + font-size: 2em; + border: solid blue; + margin: 5px; + width: 30ch; +} +#test { + width: 0; + word-break: manual; +} +</style> + +<p>Test passes if the two boxes below are identical. + +<div id=wrap lang=th> + <div id=test>กรุงเทพคือสวยงาม</div> +</div> +<div id=ref lang=th>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-001.html new file mode 100644 index 0000000000..c314c4a5c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-word and intrinsic sizing</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word"> +<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html"> +<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaking opportunities **are** considered when calculating min-content intrinsic sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +div { font: 20px/1 Ahem; } +table { + font: 20px/1 Ahem; + word-break: break-word; + max-width: 0; + border: 0; + border-collapse: collapse; +} +td { + padding: 0; + background: green; + color: transparent; +} +#red { + position: absolute; + z-index: -1; + background: red; + color: transparent; +} +</style> + +<p>Test passes if there is a green box below and no red. +<div id=red>X<br>X<br>X<br>X</div> +<table><tr><td>XXXX</table> + +<!-- + width:min-content on the div directly without using a table + would achieve the goal of this test, and be a lot simpler. + + However, width:min-content is not yet widely supported. + + Using a table, and forcing it to be as small as possible + will achieve min-content sizing of the div in all browsers. +--> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-002.html new file mode 100644 index 0000000000..0f5d18ff4b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-word and intrinsic sizing</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word"> +<meta name="flags" content="ahem"> +<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html"> +<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#wrapper { + width: 0px; + font: 16px / 1 Ahem; + word-break: break-word; + color: green; +} +#test { + float: left; +} +#reference { + position: absolute; + width: 16px; + height: 128px; + background: red; + z-index: -1; +} +</style> + +<p>Test passes if there is a vertical green bar below. +<div id="wrapper"> + <div id="reference"></div> + <div id="test"><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-003.html new file mode 100644 index 0000000000..84e7cfe872 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-word and intrinsic sizing</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="word-break: break-all shouldn't allow breaking before punctuation characters."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font: 50px / 1 Ahem; +} +.fail { + background: red; + position: absolute; + color: green; + z-index: -1; +} +.test { + color: green; + width: min-content; + word-break: break-all; +} +</style> + +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="fail"><br>XX</div> +<div class="test"><span>X</span><span>.</span></div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-004.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-004.html new file mode 100644 index 0000000000..89b30027c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-word and intrinsic sizing</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/word-break-break-all-010-ref.html"> +<meta name="assert" content="'word-break: break-word' allows breaking before punctuation characters and it should be considered when computing the min-content size."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font: 50px / 1 Ahem; +} +.fail { + background: green; + position: absolute; + color: red; + width: 100px; + z-index: -1; +} +.test { + color: green; + width: min-content; + word-break: break-word; +} +</style> + +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="fail">X<br>X</div> +<div class="test"><span>X</span><span>.</span></div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-005.html new file mode 100644 index 0000000000..ccbf988705 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-word and intrinsic sizing</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word"> +<meta name="flags" content="ahem"> +<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html"> +<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#wrapper { + width: 0px; + font: 16px / 1 Ahem; + word-break: break-word; + color: green; +} +#test { + float: left; +} +#reference { + position: absolute; + width: 16px; + height: 128px; + background: red; + z-index: -1; +} +</style> + +<p>Test passes if there is a vertical green bar below. +<div id="wrapper"> + <div id="reference"></div> + <div id="test"><span>XX</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-006.html new file mode 100644 index 0000000000..7b88136934 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-006.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-break: break-word and intrinsic sizing</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html"> +<meta name="assert" content="'word-break: break-word' doesn't break grapheme cluster and min-content intrinsic size should take that into account."> +<style> +#wrapper { + width: 0px; + word-break: break-word; +} +#test { + float: left; + border: 2px solid blue; +} +</style> + +<p>Test passes if the glyphs are completely inside the blue box. +<div id="wrapper"> + <div id="test">நிிிிநிிிி</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-007.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-007.html new file mode 100644 index 0000000000..7886b13d73 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-007.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap"> +<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html"> +<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaking opportunities **are not** considered when calculating min-content intrinsic sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +div { + font: 20px/1 Ahem; +} +.test { + color: green; + background: red; + z-index: -1; + + width: min-content; + white-space: pre-wrap; + word-break: break-word; +} +.ref { + position: absolute; + background: green; + color: transparent; +} +</style> + +<p>Test passes if there is a green box below and no red. +<div class="ref"><br><br>X</div> +<div class="test">		<span>XX</span></div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-001.html new file mode 100644 index 0000000000..61ccba2465 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, zwsp</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules. A ZWSP character should provide a break point."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ref-001.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="en"><div id="testdiv"><span id="testspan">latinlatinlatin​latin</span></div></div> +<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-002.html new file mode 100644 index 0000000000..c988928eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break:normal 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="help" href="https://drafts.csswg.org/css-text-4/#lexical-breaking"> +<link rel="mismatch" href="reference/word-break-normal-002-ref.html"> +<meta name="assert" content="word-break:normal turns on detection of word boundaries in south east asian scripts, even if the language tagging is incorrect"> +<style> +#wrap, #ref { + font-size: 2em; + border: solid orange; + margin: 5px; + width: 30ch; +} +#test { + width: 0; + word-break: normal; +} +</style> + +<p>Test passes if the two boxes below are <em>different</em>. + +<div id=wrap lang=de> + <div id=test>กรุงเทพคือสวยงาม</div> +</div> +<div id=ref lang=de>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-003.html new file mode 100644 index 0000000000..bb6c2b477a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break:normal 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="help" href="https://drafts.csswg.org/css-text-4/#lexical-breaking"> +<link rel="mismatch" href="reference/word-break-normal-003-ref.html"> +<meta name="assert" content="word-boundary-break:normal turns on detection of word boundaries in south east asian scripts, even if the language tagging is missing"> +<style> +#wrap, #ref { + font-size: 2em; + border: solid orange; + margin: 5px; + width: 30ch; +} +#test { + width: 0; + word-break: normal; +} +</style> + +<p>Test passes if the two boxes below are <em>different</em>. + +<div id=wrap> + <div id=test>กรุงเทพคือสวยงาม</div> +</div> +<div id=ref>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ar-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ar-000.html new file mode 100644 index 0000000000..9faf32525c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ar-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, arabic</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ar-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ar" dir="rtl"><div id="testdiv"><span id="testspan">العَرَبِيةُ العَرَبِيةُ العَرَبِيةُ</span></div></div> +<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-bo-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-bo-000.html new file mode 100644 index 0000000000..7518238504 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-bo-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, tibetan</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-bo-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="tdd"><div id="testdiv"><span id="testspan">ལྷ་སའི་སྐད་ལྷ་སའི་སྐད་</span></div></div> +<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-en-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-en-000.html new file mode 100644 index 0000000000..a8e4952e3b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-en-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, latin</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-en-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div> +<div class="ref"><span>Latin latin latin<br/>latin</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ethiopic.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ethiopic.html new file mode 100644 index 0000000000..90a27ecdad --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ethiopic.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en" > +<meta charset="utf-8"> +<title>Normal Ethiopic word breaking</title> +<meta name="assert" content="word-break: normal means Ethiopid words break according to their customary rules (word by word)"> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ethiopic-ref.html'> +<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> +<style> +div { + width: 0; + color: blue; +} +.ref { + color: orange; + width: auto; + white-space: pre; +} +</style> + +<p> Test passes if the blue and orange text are identical. + +<div lang=am>ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡በማዕረግ፡ወብሕግ።</div> +<div lang=am class=ref>ተወልዱ፡ +ኵሉ፡ +ሰብእ፡ +ግዑዛን፡ +ወዕሩያን፡ +በማዕረግ፡ +ወብሕግ።</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-hi-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-hi-000.html new file mode 100644 index 0000000000..62966d6c7b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-hi-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, hindi</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-hi-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिंदी हिंदी हिंदी हिंदी</span></div></div> +<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-000.html new file mode 100644 index 0000000000..33a3acd491 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ja-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語</span></div></div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-001.html new file mode 100644 index 0000000000..aa13890e21 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese hiragana</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ja-ref-001.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">にほんごにほんご</span></div></div> +<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-002.html new file mode 100644 index 0000000000..f190a46943 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese katakana</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ja-ref-002.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">ニホンゴニホンゴ</span></div></div> +<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-004.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-004.html new file mode 100644 index 0000000000..e010562702 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, japanese</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ja-ref-004.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語。</span></div></div> +<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-km-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-km-000.html new file mode 100644 index 0000000000..ed12ad1103 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-km-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, khmer</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-km-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="km"><div id="testdiv"><span id="testspan">ភាសាខ្មែរភាសាខ្មែរភាសាខ្មែរ</span></div></div> +<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ko-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ko-000.html new file mode 100644 index 0000000000..605a67c169 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ko-000.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, korean</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules. Korean, which commonly exhibits two different behaviors, allows breaks between any two consecutive Hangul/Hanja."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-ko-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div> +<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +<!-- +Notes: +It is possible to break Korean at character or word boundaries, depending on author preference. Breaking at character boundaries tends to be more common in modern Korean text, so that has been chosen as the reference here. If the word breaks at word boundaries, that is not necessarily an error, but it is not what the spec describes for word-break: normal. +--> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-lo-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-lo-000.html new file mode 100644 index 0000000000..ccde0aff38 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-lo-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, lao</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-lo-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="lo"><div id="testdiv"><span id="testspan">ພາສາລາວພາສາລາວພາສາລາວ</span></div></div> +<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-my-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-my-000.html new file mode 100644 index 0000000000..d867f5f63f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-my-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, myanmar</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-my-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="my"><div id="testdiv"><span id="testspan">မြန်မာစာမြန်မာစာမြန်မာစာ</span></div></div> +<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-tdd-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-tdd-000.html new file mode 100644 index 0000000000..3aa143221c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-tdd-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, tai nüa</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-tdd-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="tdd"><div id="testdiv"><span id="testspan">ᥖᥭᥰᥖᥬᥳᥑᥨᥒᥰ</span></div></div> +<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-000.html new file mode 100644 index 0000000000..b3f611986a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, thai</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-th-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="th"><div id="testdiv"><span id="testspan">ภาษาไทยภาษาไทย</span></div></div> +<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-001.html new file mode 100644 index 0000000000..919dcc22a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 4 Test: word-break: normal</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/#lexical-breaking"> +<link rel="mismatch" href="reference/word-break-normal-th-001-ref.html"> +<meta name="assert" content="word-break:normal turns on detection of word boundaries in south east asian scripts. Preferably in a smart, word-by-word basis, but if the UA doesn't support that, on a per character basis. Eitherway, lines should wrap"> +<style> +#wrap, #ref { + font-size: 2em; + border: solid orange; + margin: 5px; + width: 30ch; +} +#test { + width: 0; + word-break: normal; +} +</style> + +<p>Test passes if the two boxes below are <em>different</em>. + +<div id=wrap lang=th> + <div id=test>กรุงเทพคือสวยงาม</div> +</div> +<div id=ref lang=th>กรุงเทพคือสวยงาม</div> diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-zh-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-zh-000.html new file mode 100644 index 0000000000..e1a67bb1dc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-zh-000.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"> +<title>word-break: normal, chinese</title> +<meta name="assert" content="word-break: normal means words break according to their customary rules."> +<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> +<link rel='match' href='reference/word-break-normal-zh-ref-000.html'> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<style type='text/css'> +.test { word-break: normal; } +/* the CSS below is not part of the test */ +.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; } +</style> +</head> +<body> +<div id='instructions'>Test passes if the two orange boxes are the same.</div> +<div class="test" lang="zh"><div id="testdiv"><span id="testspan">中國話中國話中國語</span></div></div> +<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div> +<script> +var sentenceWidth = document.getElementById('testspan').offsetWidth +document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px' +</script> +</body> +</html> |