diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-text/overflow-wrap | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-text/overflow-wrap')
73 files changed, 1986 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001-ref.html new file mode 100644 index 0000000000..92f1855268 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + border: 5px solid orange; + font: 20px/1 Ahem; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box is within the orange box.</p> + <p id="test">FillerText<br>FillerText<br>FillerText<br>FillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001.html new file mode 100644 index 0000000000..65d46f3a98 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap - break-word (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="overflow-wrap-001-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The 'overflow-wrap' property set 'break-word' breaks the word at an arbitrary point"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + border: 5px solid orange; + font: 20px/1 Ahem; + overflow-wrap: break-word; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box is within the orange box.</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002-ref.html new file mode 100644 index 0000000000..afb4c6835c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #ref { + border: 5px solid orange; + font: 20px/1 Ahem; + width: 200px; + } + #test { + border: 5px solid blue; + font: 20px/1 Ahem; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p> + <p id="ref">FillerText<br>FillerText<br>FillerText<br>FillerText</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002.html new file mode 100644 index 0000000000..d1ff8bfa78 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap - break-word and white-space - nowrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#white-space"> +<link rel="match" href="overflow-wrap-002-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Test checks that the 'overflow-wrap' property has effect if and only if the 'white-space' allows wrapping"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #ref { + border: 5px solid orange; + font: 20px/1 Ahem; + overflow-wrap: break-word; + width: 200px; + } + #test { + border: 5px solid blue; + font: 20px/1 Ahem; + overflow-wrap: break-word; + white-space: nowrap; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p> + <p id="ref">FillerTextFillerTextFillerTextFillerText</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004-ref.html new file mode 100644 index 0000000000..9b0a6eb442 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + border: 5px solid orange; + font: 20px/1 Ahem; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box overflows the orange box.</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004.html new file mode 100644 index 0000000000..9793e47792 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap - normal (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="overflow-wrap-004-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The 'overflow-wrap' property set 'normal' overflows container"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + border: 5px solid orange; + font: 20px/1 Ahem; + overflow-wrap: normal; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box overflows the orange box.</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-001.html new file mode 100644 index 0000000000..efa453ca66 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="sequences of nbsp characters that would cause overflow are expected to be broken when overflow-wrap is anywhere"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + width: 100px; + height: 100px; + font-family: Ahem; + color: red; + overflow-wrap: anywhere; + font-size: 25px; + line-height: 27px; +} +div::after{ + content: ""; + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + background: green; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div> X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-002.html new file mode 100644 index 0000000000..a3ec2f5f06 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere + white-space:break-spaces</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<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/overflow-wrap-break-word-002-ref.html"> +<meta name="assert" content="anywhere + 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"> +<style> +div { + white-space: break-spaces; + overflow-wrap: anywhere; + font-family: monospace; + width: 5ch; + line-height: 1; + overflow: hidden; + height: 1em; +} +</style> + +<p>This test passes if there is nothing below this sentence. +<div> FAIL <div> +<!-- +white-space:break-spaces should cause the spaces at the end of the line to be preserved. +Since there is an allowed break point between the first space and the F, +that's where the line should wrap, +not between the L and the subsequent space. +--> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-003.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-003.html new file mode 100644 index 0000000000..4870b0867b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap:anywhere + white-space:break-spaces</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<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/overflow-wrap-break-word-003-ref.html"> +<meta name="assert" content="anywhere + break-spaces do allow a break +between the last character of a word and the first space of a sequence of preserved spaces +if there are no other wrapping opportunities earlier in the line"> +<style> +div { + white-space: break-spaces; + overflow-wrap: anywhere; + font-family: monospace; + width: 4ch; + line-height: 1; + overflow: hidden; + height: 2em; +} +</style> + +<p>This test passes if the word FAIL does not appear below. +<div>PASS FAIL<div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-004.html new file mode 100644 index 0000000000..3d5f444977 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere</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-overflow-wrap-anywhere"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken."> +<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; +} +.test { + color: green; + width: 5ch; + + white-space: pre-wrap; + overflow-wrap: anywhere; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"><br>XXXXX</div> + <div class="test"> XXXXX </div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-005.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-005.html new file mode 100644 index 0000000000..d125a0b5c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-005.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere</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-overflow-wrap-anywhere"> +<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/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.fail { + position: absolute; + color: red; + z-index: -1; +} +span { color: green; } +.test { + color: green; + width: 5ch; + + white-space: pre-wrap; + overflow-wrap: anywhere; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="fail">XXX<span>XX<br></span><span>XXXXX<br></span>XXXXX<br>XXXX<span>X<br></span><span>XXXXX</span></div> + <div class="test">XXX + XXXXXXXXX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html new file mode 100644 index 0000000000..ac90149ff3 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere</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/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: anywhere introduces additional soft wrap opportunities."> +<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; +} +.test { + color: green; + width: 5ch; + + word-break: keep-all; + overflow-wrap: anywhere; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red">XXXXX<br>XXX</div> + <div class="test">XXXXXXXX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html new file mode 100644 index 0000000000..a5e10a84eb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap - anywhere (basic)</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<link rel="match" href="overflow-wrap-001-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The 'overflow-wrap' property set 'anywhere' breaks the word at an arbitrary point"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + border: 5px solid orange; + font: 20px/1 Ahem; + overflow-wrap: anywhere; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box is within the orange box.</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html new file mode 100644 index 0000000000..ddb9562999 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap - anywhere and white-space - nowrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.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" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<link rel="match" href="overflow-wrap-002-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Test checks that the 'overflow-wrap' property has effect if and only if the 'white-space' allows wrapping"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #ref { + border: 5px solid orange; + font: 20px/1 Ahem; + overflow-wrap: anywhere; + width: 200px; + } + #test { + border: 5px solid blue; + font: 20px/1 Ahem; + overflow-wrap: anywhere; + white-space: nowrap; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p> + <p id="ref">FillerTextFillerTextFillerTextFillerText</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-009.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-009.html new file mode 100644 index 0000000000..90f2ad3337 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-009.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<link rel="match" href="reference/overflow-wrap-break-word-001-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; +} +.ref { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; +} +.test { + color: green; + width: 3ch; + + overflow-wrap: anywhere; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="ref">XXX<br>X X</div> + <div class="test">XXXX<span> </span>X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-010.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-010.html new file mode 100644 index 0000000000..0b4b75bc1c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-010.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="flags" content="Ahem"> +<meta name="assert" content="'overflow-wrap: anywhere' applies correctly when there is styled text using 'span' elements."> +<style> +div { + position: relative; + font: 25px / 1 Ahem; +} +.red { + position: absolute; + background: green; + color: red; + height: 100px; + z-index: -1; +} +.test { + color: transparent; + width: 4ch; + overflow-wrap: anywhere; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"><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/overflow-wrap/overflow-wrap-anywhere-011-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011-ref.html new file mode 100644 index 0000000000..25d7fc7958 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Text Reference: overflow-wrap: anywhere</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + div { + /* Use sans-serif fonts to ensure the width of ` ` is larger than `i`. */ + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + width: min-content; + overflow-wrap: anywhere; + border: 5px solid blue; + margin-bottom: 5px; /* To separate <div>s visually. */ + } + </style> + + <p>The first three div should have the same width, but the fourth one should be wider.</p> + <div>i</div> + <div>i</div> + <div>i</div> + <div>i </div> +</html> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011.html new file mode 100644 index 0000000000..0bc7a97980 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Text Test: overflow-wrap: anywhere</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> + <link rel="match" href="overflow-wrap-anywhere-011-ref.html"> + <meta name="assert" content="End-of line space glyph (U+0020 and U+0009)'s width shouldn't contribute to container's min-content width with 'white-space: normal', and non-collapsible spaces should wrap with 'overflow-wrap: anywhere'."> + + <style> + div { + /* Use sans-serif fonts to ensure the width of ` ` is larger than `i`. */ + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + width: min-content; + overflow-wrap: anywhere; + border: 5px solid blue; + margin-bottom: 5px; /* To separate <div>s visually. */ + } + </style> + + <p>The first three div should have the same width, but the fourth one should be wider.</p> + <div>i</div> + <div>i </div> + <div>i	</div> + <div>i </div> +</html> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-fit-content-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-fit-content-001.html new file mode 100644 index 0000000000..b4ff047d03 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-fit-content-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere with fit-content</title> +<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-break-word-fit-content-001.html"> +<meta name="assert" content="The 'overflow-wrap: anywhere' must not break non-BMP characters (which might be represented as surrogate pairs internally)"> +<style> +.test { + display: inline-block; + overflow-wrap: anywhere; + font-size: 20px; + line-height: 1; + margin-bottom: .2em; +} +</style> +<body> +<div id="log"></div> +<p class="instructions">Tests pass if all lines do not wrap. +<div><div class="test">𝜋</div></div> +<div><div class="test">𝜋</div></div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html new file mode 100644 index 0000000000..5a93c87344 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>overlfow-wrap: anywhere on inline element</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<meta name="flags" content="Ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="'overflow-wrap: anywhwre' allows breaking before punctuation characters"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font: 50px / 1 Ahem; +} +.fail { + position: absolute; + background: green; + color: red; + width: 100px; + z-index: -1; +} +.test { + color: green; + width: 1em; + + overflow-wrap: anywhere; +} +</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/overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html new file mode 100644 index 0000000000..38dc19631d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>overlfow-wrap: anywhere on inline element</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<meta name="flags" content="Ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-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 { + overflow-wrap: anywhere; +} +</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/overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html new file mode 100644 index 0000000000..9ed035fdc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>overlfow-wrap: anywhere on inline element</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<meta name="flags" content="Ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="'overflow-wrap: anywhere' 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 { + overflow-wrap: anywhere; +} +</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/overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html new file mode 100644 index 0000000000..e498e1eff1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>overlfow-wrap: anywhere on inline element</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<meta name="flags" content="Ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="'overflow-wrap: anywhere' should break after the last character of the inline-block it applies to"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div, span { + font: 25px / 1 Ahem; + color: green; +} +.fail { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; +} +.testdiv { + width: 2ch; +} +.test { + overflow-wrap: anywhere; +} +</style> + +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="fail">XX<br>X<br>XX<br></div> +<div class="testdiv">X<span class="test">XX</span>XX</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-001.html new file mode 100644 index 0000000000..c4a0e10fa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Text Test: overflow-wrap: anywhere</title> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<link rel="match" href="reference/overflow-wrap-break-word-span-001-ref.html"> +<meta name="assert" content="Test when the `anywhere` value is applied to an inline element."> +<style> +div { + font-size: 10px; + line-height: 1; + width: 8ch; +} +span { + word-wrap: anywhere; +} +</style> +<div>12345<span>67890</span></div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-002.html new file mode 100644 index 0000000000..b149ca4d7c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Text Test: overflow-wrap: anywhere</title> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<meta name="assert" content="Test when the `anywhere` value is applied to an inline element."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script><style> +div { + font-size: 10px; + line-height: 1; + width: 5ch; +} +span { + word-wrap: anywhere; +} +</style> +<div id=container data-expected-height=20>12345678<span>90</span></div> + +<script> +checkLayout('#container') +</script> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-001.html new file mode 100644 index 0000000000..4d633d367d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="sequences of nbsp characters that would cause overflow are expected to be broken when overflow-wrap is break-word"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + width: 100px; + height: 100px; + font-family: Ahem; + color: red; + overflow-wrap: break-word; + font-size: 25px; + line-height: 27px; +} +div::after{ + content: ""; + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + background: green; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div> X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-002.html new file mode 100644 index 0000000000..6f90f0c0cb --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word + white-space:break-spaces</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<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/overflow-wrap-break-word-002-ref.html"> +<meta name="assert" content="break-word + 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"> +<style> +div { + white-space: break-spaces; + overflow-wrap: break-word; + font-family: monospace; + width: 5ch; + line-height: 1; + overflow: hidden; + height: 1em; +} +</style> + +<p>This test passes if there is nothing below this sentence. +<div> FAIL </div> +<!-- +white-space:break-spaces should cause the spaces at the end of the line to be preserved. +Since there is an allowed break point between the first space and the F, +that's where the line should wrap, +not between the L and the subsequent space. +--> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-003.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-003.html new file mode 100644 index 0000000000..05e570bbb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap:break-word + white-space:break-spaces</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<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/overflow-wrap-break-word-003-ref.html"> +<meta name="assert" content="break-word + break-spaces do allow a break +between the last character of a word and the first space of a sequence of preserved spaces +if there are no other wrapping opportunities earlier in the line"> +<style> +div { + white-space: break-spaces; + overflow-wrap: break-word; + font-family: monospace; + width: 4ch; + line-height: 1; + overflow: hidden; + height: 2em; +} +</style> + +<p>This test passes if the word FAIL does not appear below. +<div>PASS FAIL</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html new file mode 100644 index 0000000000..26ab3f2cac --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word</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-overflow-wrap-break-word"> +<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/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken."> +<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; +} +.test { + color: green; + width: 5ch; + + white-space: pre-wrap; + overflow-wrap: break-word; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"><br>XXXXX</div> + <div class="test"> XXXXX </div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-005.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-005.html new file mode 100644 index 0000000000..721a1938e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-005.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word</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-overflow-wrap-break-word"> +<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/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-size: 20px; + font-family: Ahem; + line-height: 1em; +} +.fail { + position: absolute; + color: red; + z-index: -1; +} +span { color: green; } +.test { + color: green; + width: 5ch; + + white-space: pre-wrap; + overflow-wrap: break-word; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="fail">XXX<span>XX<br></span><span>XXXXX<br></span>XXXXX<br>XXXX<span>X<br></span><span>XXXXX</span></div> + <div class="test">XXX + XXXXXXXXX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.html new file mode 100644 index 0000000000..2159aa591e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word</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-overflow-wrap-break-word"> +<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/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: break-spaces' property, that must prevent the word to be broken."> +<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; +} +.test { + color: green; + width: 5ch; + + white-space: break-spaces; + overflow-wrap: break-word; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="red"><br>XXXXX</div> + <div class="test"> XXXXX </div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html new file mode 100644 index 0000000000..c114ccf7f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word</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-overflow-wrap-break-word"> +<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/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken."> +<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: pre-wrap; + overflow-wrap: break-word; +} +</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"> XX XXX </div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-008.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-008.html new file mode 100644 index 0000000000..8a0fb9959d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-008.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap:break-word + white-space:break-spaces</title> +<link rel="author" title="Javier Fernandez" 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.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<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/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="break-word + break-spaces do allow a break +between the last character of a word and the first space of a sequence of preserved spaces +if there are no other wrapping opportunities earlier in the line"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font-family: Ahem; + font-size: 25px; + line-height: 1em; +} +.expected { + position: absolute; + color: green; + width: 100px; + height: 100px; + white-space: pre; +} +.test { + background: green; + color: red; + width: 4ch; + z-index: -1; + + white-space: break-spaces; + overflow-wrap: break-word; +</style> + +<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> +<div class="expected">XXXX<br> <br>XXXX<br></div> +<div class="test">XXXX XXXX </div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-009.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-009.html new file mode 100644 index 0000000000..fbbcf2233c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-009.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<link rel="match" href="reference/overflow-wrap-break-word-001-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; +} +.ref { + position: absolute; + background: green; + color: red; + width: 100px; + height: 100px; + z-index: -1; +} +.test { + color: green; + width: 3ch; + + overflow-wrap: break-word; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div class="ref">XXX<br>X X</div> + <div class="test">XXXX<span> </span>X</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-010.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-010.html new file mode 100644 index 0000000000..da45dea253 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-010.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="flags" content="Ahem"> +<meta name="assert" content="'overflow-wrap: break-word' applies correctly when there is styled text using 'span' elements."> +<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; + overflow-wrap: break-word; +} +</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/overflow-wrap/overflow-wrap-break-word-fit-content-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html new file mode 100644 index 0000000000..7fde5287bc --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word with fit-content</title> +<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-break-word-fit-content-001.html"> +<meta name="assert" content="The 'overflow-wrap: break-word' must not break non-BMP characters (which might be represented as surrogate pairs internally)"> +<style> +.test { + display: inline-block; + word-wrap: break-word; + font-size: 20px; + line-height: 1; + margin-bottom: .2em; +} +</style> +<body> +<div id="log"></div> +<p class="instructions">Tests pass if all lines do not wrap. +<div><div class="test">𝜋</div></div> +<div><div class="test">𝜋</div></div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-keep-all-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-keep-all-001.html new file mode 100644 index 0000000000..ec27b82b6b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-keep-all-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Test: `break-word` should work with `word-break: keep-all`</title> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<meta charset="utf-8"> +<style> +div { + overflow-wrap: break-word; + word-break: keep-all; + font-size: 10px; + width: 7ch; + line-height: 20px; + background: lightgray; + margin-bottom: 1em; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <div>0000000000</div> + <div>헬로우월드헬로우월드헬로우월드헬로우월드헬로우월드</div> +<script> +for (let e of document.getElementsByTagName('div')) { + test(() => { + // All boxes should wrap to more than 1 line. + assert_greater_than(e.offsetHeight, 20); + }, e.textContent); +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-long-crash.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-long-crash.html new file mode 100644 index 0000000000..e318386ded --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-long-crash.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Text Test: very long line with `overflow-wrap: break-word` should not crash</title> +<link rel="help" href="https://crbug.com/961987"> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +html, body { + margin: 0; +} +body { + overflow-wrap: break-word; + width: 2147483648px; +} +div { + /* Double the width in case CSS parser clamps the body width. */ + width: 200%; +} +span { + border-left: 2147483648px solid; +} +</style> +<body> + <div><span>x</span></div> +<script> +test(() => { document.body.offsetTop; }); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-001.html new file mode 100644 index 0000000000..0565b8bb75 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Text Test: overflow-wrap: break-word</title> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<link rel="match" href="reference/overflow-wrap-break-word-span-001-ref.html"> +<meta name="assert" content="Test when the `break-word` value is applied to an inline element."> +<style> +div { + font-size: 10px; + line-height: 1; + width: 8ch; +} +span { + word-wrap: break-word; +} +</style> +<div>12345<span>67890</span></div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-002.html new file mode 100644 index 0000000000..39426d0420 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Text Test: overflow-wrap: break-word</title> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<meta name="assert" content="Test when the `break-word` value is applied to an inline element."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script><style> +div { + font-size: 10px; + line-height: 1; + width: 5ch; +} +span { + word-wrap: break-word; +} +</style> +<div id=container data-expected-height=20>12345678<span>90</span></div> + +<script> +checkLayout('#container') +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash-002.html new file mode 100644 index 0000000000..085e5b6f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS Text Test: A combination of `overflow-wrap: break-word` and `white-space` should not crash</title> +<link rel="help" href="https://crbug.com/1001359"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.container { + font-family: sans-serif; + font-size: 14px; + width: 680px; + word-wrap: break-word; +} + +spacer { + display: inline-block; + width: 620px; +} + +pre-wrap { + white-space: pre-wrap; +} + +nowrap { + white-space: nowrap; +} + +inline-block { + display: inline-block; +} +</style> +<body> + <div class="container"> + <spacer></spacer> + <nowrap><span><pre-wrap><inline-block></inline-block></pre-wrap></span>123456</nowrap>987654321 +</div> +<script> +test(() => { }); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash.html new file mode 100644 index 0000000000..2bea6aed78 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Text Test: A combination of `overflow-wrap: break-word` and `white-space` should not crash</title> +<link rel="help" href="https://crbug.com/988832"> +<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 { + width: 10ch; + border: 1px blue solid; + overflow-wrap: break-word; +} +inline-block { + display: inline-block; + position: relative; + width: 3ch; + height: 1em; + background: orange; +} +</style> +<body> +<div> + 123 56 <span style="white-space: pre"><inline-block></inline-block> <span style="white-space: normal">Flash</span></span> and +</div> +<script> +test(() => { }); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-001.html new file mode 100644 index 0000000000..797883b147 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: overflow-wrap:break-word and grapheme clusters</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-cluster-001-ref.html"> +<meta name="assert" content="grapheme clusters must stay together as one unit when a line is broken by overflow-wrap:break-word"> +<style> + div { + font-size: 4em; + width: 4em; + } + #test { + overflow-wrap: break-word; + width: 0; + } +</style> + +<p>Test passes if there are four identical lines of text below. +<div lang=hi id=ref>षि<br>षि</div> +<div lang=hi id=test>षिषि</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-002.html new file mode 100644 index 0000000000..70349b9c9a --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: overflow-wrap:anywhere and grapheme clusters</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-cluster-001-ref.html"> +<meta name="assert" content="grapheme clusters must stay together as one unit when a line is broken by overflow-wrap:anywhere"> +<style> + div { + font-size: 4em; + width: 4em; + } + #test { + overflow-wrap: anywhere; + width: 0; + } +</style> + +<p>Test passes if there are four identical lines of text below. +<div lang=hi id=ref>षि<br>षि</div> +<div lang=hi id=test>षिषि</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html new file mode 100644 index 0000000000..b483756467 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere 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/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-min-content-size-001-ref.html"> +<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:anywhere **are** considered when calculating min-content intrinsic sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +table { + font: 20px/1 Ahem; + overflow-wrap: anywhere; + max-width: 0; + border: 0; + border-collapse: collapse; +} +td { + padding: 0; + background: green; + color: transparent; +} +#red { + font: 20px/1 Ahem; + 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/overflow-wrap/overflow-wrap-min-content-size-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-002.html new file mode 100644 index 0000000000..2669f0da02 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere 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="reference/overflow-wrap-min-content-size-002-ref.html"> +<meta name="assert" content="overflow-wrap:anywhere doesn't break grapheme cluster and min-content intrinsic size should take that into account."> +<style> +#wrapper { + width: 0px; + overflow-wrap: anywhere; +} +#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/overflow-wrap/overflow-wrap-min-content-size-003.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html new file mode 100644 index 0000000000..397ed8c450 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere 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"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-min-content-size-003-ref.html"> +<meta name="assert" content="overflow-wrap:anywhere breaks at edge of inline elements."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#wrapper { + width: 0px; + font: 16px / 1 Ahem; + overflow-wrap: anywhere; + 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/overflow-wrap/overflow-wrap-min-content-size-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html new file mode 100644 index 0000000000..16161ece69 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere 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/#overflow-wrap-property"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-min-content-size-004-ref.html"> +<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:break-word **are not** considered when calculating min-content intrinsic sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +table { + font: 20px/1 Ahem; + overflow-wrap: break-word; + max-width: 0; + border: 0; + border-collapse: collapse; +} +td { + padding: 0; + background: green; + color: transparent; +} +#red { + font: 20px/1 Ahem; + 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>XXXX</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/overflow-wrap/overflow-wrap-min-content-size-005.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html new file mode 100644 index 0000000000..c8c2a1a433 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</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/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-min-content-size-001-ref.html"> +<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: anywhere' introduce additional soft wrap opportunities, which **are** considered when calculating min-content intrinsic sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font: 20px/1 Ahem; +} +#red { + position: absolute; + z-index: -1; + background: red; + color: transparent; +} +.test { + background: green; + color: transparent; + width: min-content; + + word-break: keep-all; + overflow-wrap: anywhere; +} +</style> +<body> + <p>Test passes if there is a green box below and no red. + <div id=red>X<br>X<br>X<br>X</div> + <div class="test">XXXX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html new file mode 100644 index 0000000000..dbbd39301b --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</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/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-min-content-size-004-ref.html"> +<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: break-word' introduce additional soft wrap opportunities, which **are not** considered when calculating min-content intrinsic sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + position: relative; + font: 20px/1 Ahem; +} +#red { + position: absolute; + z-index: -1; + background: red; + color: transparent; +} +.test { + background: green; + color: transparent; + width: min-content; + + word-break: keep-all; + overflow-wrap: break-word; +} +</style> +<body> + <p>Test passes if there is a green box below and no red. + <div id=red>XXXX</div> + <div class="test">XXXX</div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.html new file mode 100644 index 0000000000..7296b8d376 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.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" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="'overflow-wrap: anywhere' 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 { + position: absolute; + background: green; + color: red; + width: 100px; + z-index: -1; +} +.test { + color: green; + width: min-content; + overflow-wrap: anywhere; +} +</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/overflow-wrap/overflow-wrap-min-content-size-008.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-008.html new file mode 100644 index 0000000000..5c2b3958bd --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-008.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" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> +<meta name="flags" content="ahem"> +<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> +<meta name="assert" content="'overflow-wrap: break-words allows breaking before punctuation characters, but these breaking opportunnites shouldn't 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; + height: 100px; + z-index: -1; +} +.test { + color: green; + width: min-content; + overflow-wrap: break-word; +} +</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/overflow-wrap/overflow-wrap-min-content-size-009.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-009.html new file mode 100644 index 0000000000..e7887e7c1f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-009.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/#overflow-wrap-property"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere"> +<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="reference/overflow-wrap-min-content-size-009-ref.html"> +<meta name="assert" content="Using 'overflow-wrap:anywhere' doesn't prevent the tabs sequence to hang (inconditionally) , honoring 'white-space: pre-wrap' hence glyphs **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; + overflow-wrap: anywhere +} +.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/overflow-wrap/overflow-wrap-normal-keep-all-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-normal-keep-all-001.html new file mode 100644 index 0000000000..8047aba133 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-normal-keep-all-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: word-break-keep-all and overflow-wrap:normal</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-normal-keep-all-001-ref.html"> +<meta name="flags" content="may"> +<meta name="assert" content="with overflow-wrap:normal, the restrictions introduced by word-break:keep-all may be relaxed to match word-break:normal if there are no otherwise-acceptable break points in the line."> +<style> + div { + overflow-wrap: normal; + word-break: keep-all; + width: 0; + } +</style> + +<p>Test passes if there is a column of 文 characters on top of eachother below. +<div lang=ja>文文文文文文文文</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html new file mode 100644 index 0000000000..8846038d0f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: overflow-wrap:break-word and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html"> +<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:break-word"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + position: relative; + } + #ref { + border: solid orange; + margin: 1rem; + } + #test { + border: solid blue; + position: absolute; /* to avoid influencing the size of the section */ + left: 1rem; + right: 1rem; + overflow-wrap: break-word; + } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>عائلة</div> +</section> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html new file mode 100644 index 0000000000..adb25c78b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test: overflow-wrap:anywhere and text-shaping</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html"> +<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:anywhere"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + position: relative; + } + #ref { + border: solid orange; + margin: 1rem; + } + #test { + border: solid blue; + position: absolute; /* to avoid influencing the size of the section */ + left: 1rem; + right: 1rem; + overflow-wrap: anywhere; + } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>عائلة</div> +</section> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-001-ref.html new file mode 100644 index 0000000000..0e0300a72d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-001-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/overflow-wrap/reference/overflow-wrap-break-word-002-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-002-ref.html new file mode 100644 index 0000000000..5dca683817 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-002-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> + +<p>This test passes if there is nothing below this sentence. diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-003-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-003-ref.html new file mode 100644 index 0000000000..e9ec3b346c --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-003-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> +div { + font-family: monospace; + line-height: 1; +} +</style> + +<p>This test passes if the word FAIL does not appear below. +<div>PASS<div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-fit-content-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-fit-content-001.html new file mode 100644 index 0000000000..30787e204f --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-fit-content-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: overflow-wrap: break-word with fit-content</title> +<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> +<style> +.test { + display: inline-block; + font-size: 20px; + line-height: 1; + margin-bottom: .2em; +} +</style> +<body> +<div id="log"></div> +<p class="instructions">Tests pass if all lines do not wrap. +<div><div class="test">𝜋</div></div> +<div><div class="test">𝜋</div></div> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-span-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-span-001-ref.html new file mode 100644 index 0000000000..0264bcf322 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-span-001-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<style> +div { + font-size: 10px; + line-height: 1; +} +</style> +<div>12345678<br>90</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-cluster-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-cluster-001-ref.html new file mode 100644 index 0000000000..97393cc176 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-cluster-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> + div { + font-size: 4em; + width: 4em; + } +</style> + +<p>Test passes if there are four identical lines of text below. +<div lang=hi>षि</div> +<div lang=hi>षि</div> +<div lang=hi>षि</div> +<div lang=hi>षि</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html new file mode 100644 index 0000000000..ef5c2e88ce --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +div { + font: 20px/1 Ahem; + position: absolute; + background: green; + color: transparent; +} +</style> + +<p>Test passes if there is a green box below and no red. +<div>X<br>X<br>X<br>X</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html new file mode 100644 index 0000000000..055ffbf3ca --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<style> +#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">நிிிி<br>நிிிி</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html new file mode 100644 index 0000000000..cd9b069255 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#wrapper { + width: 0px; + font: 16px / 1 Ahem; + 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">X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div> +</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-004-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-004-ref.html new file mode 100644 index 0000000000..93e22ba71e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-004-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +div { + font: 20px/1 Ahem; + position: absolute; + background: green; + color: transparent; +} +</style> + +<p>Test passes if there is a green box below and no red. +<div>XXXX</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html new file mode 100644 index 0000000000..2517e708ad --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> +div { + font: 20px/1 Ahem; + position: absolute; + background: green; + color: transparent; +} +</style> + +<p>Test passes if there is a green box below and no red. +<div>X<br>X<br>X</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-normal-keep-all-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-normal-keep-all-001-ref.html new file mode 100644 index 0000000000..f0b41134fa --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-normal-keep-all-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> + +<p>Test passes if there is a column of 文 characters on top of eachother below. +<div lang=ja>文<br>文<br>文<br>文<br>文<br>文<br>文<br>文</div> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html new file mode 100644 index 0000000000..5543ab0729 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text level 3 Test ref</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> + @font-face { + font-family: 'csstest_noto'; + src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2'); + } + div { + font-family: 'csstest_noto'; + font-size: 4em; + margin: 1rem; + } + section { + float: left; /* to sizing to the intrinsic min of the ref box*/ + } + #ref { border: solid orange; } + #test { border: solid blue; } +</style> + +<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line. +<section> +<div dir=rtl lang=ar id=ref>ﻋﺎﺋﻠ<br>ﺔ</div> +<div dir=rtl lang=ar id=test>ﻋﺎﺋﻠ<br>ﺔ</div> +</section> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-001.html new file mode 100644 index 0000000000..e5c2c5d0ef --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-wrap - break-word (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="overflow-wrap-001-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The 'word-wrap' property set 'break-word' breaks the word at an arbitrary point"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + border: 5px solid orange; + font: 20px/1 Ahem; + word-wrap: break-word; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box is within the orange box.</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-002.html new file mode 100644 index 0000000000..5cc7e6a45e --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-wrap - break-word and white-space - nowrap</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#white-space"> +<link rel="match" href="overflow-wrap-002-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Test checks that the 'word-wrap' property has effect if and only if the 'white-space' allows wrapping"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #ref { + border: 5px solid orange; + font: 20px/1 Ahem; + word-wrap: break-word; + width: 200px; + } + #test { + border: 5px solid blue; + font: 20px/1 Ahem; + word-wrap: break-word; + white-space: nowrap; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p> + <p id="ref">FillerTextFillerTextFillerTextFillerText</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-004.html new file mode 100644 index 0000000000..5650da9a83 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Test: word-wrap - normal (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property"> +<link rel="match" href="overflow-wrap-004-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The 'word-wrap' property set 'normal' overflows container"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #test { + border: 5px solid orange; + font: 20px/1 Ahem; + word-wrap: normal; + width: 200px; + } +</style> +<body> + <p class="instructions">Test passes if the black box overflows the orange box.</p> + <p id="test">FillerTextFillerTextFillerTextFillerText</p> +</body> diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-alias.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-alias.html new file mode 100644 index 0000000000..74e8aa2312 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-alias.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-word-wrap"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/866"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="test" style="word-wrap: break-word; overflow-wrap: break-word;"></div> +<script> +test(function() { + const div = document.getElementById("test"); + assert_equals(div.style.cssText, "overflow-wrap: break-word;", "Only overflow-wrap should appear when serializing the declaration."); + assert_equals(div.style.wordWrap, "break-word"); + assert_equals(div.style.overflowWrap, "break-word"); + assert_equals(getComputedStyle(div).wordWrap, "break-word"); + assert_equals(getComputedStyle(div).overflowWrap, "break-word"); +}, "word-wrap should be defined as an alias of overflow-wrap"); +</script> |