Bug 1489445 [wpt PR 12894] - [css-text] A leading white-space should break before handling overflow, a=testonly
authorJavier Fernandez <jfernandez@igalia.com>
Tue, 09 Oct 2018 04:13:51 +0000
changeset 498661 12ab4712761393918be4595367bc31bf0bd54ece
parent 498660 bd3bcc96361ce2cb1ed39a75c183f47fcee97376
child 498662 b08a738d556ba5eea4309af21552f6384112c9a6
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1489445, 12894, 866109, 854624, 1209745, 596406
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1489445 [wpt PR 12894] - [css-text] A leading white-space should break before handling overflow, a=testonly Automatic update from web-platform-tests[css-text] A leading white-space should break before handling overflow Leading white-spaces are indeed breaking opportunities that should prevent, if there are no other css properties forcing it, breaking text in the middle of a word when honoring the word-wrap/overflow-wrap CSS property. We are doing so if the leading white-space sequence is longer than 1 character, but when we have a single leading white-space, we are missing that breaking opportunity and we may lead to cases, like the one described in the bug. The root cause of the issue with single leading white-space breaking opportunities is that the RewindToMidWordBreak expects certain width to be committed in order to choose opportunities in previous runs if none of the ones detected by the ICU LazyLineBreakIterator prevents the overflow. However, this breaking opportunity should be considered together with other provided by the word-break CSS property (eg, break-word or break-all), as it was agreed in the discussion [1] with the CSS WG. This CL solves the issue identifying the single leading white-space braking opportunity in a new class field flag, and using it to consider this opportunity inside the mid-word breaking logic, or prevent to run it completely in the cases where 'break-all' is not set. This is basically a reland of 6ea2a2e7f3ef01e0c98424ce272a732ade92ad1a but with some changes to avoid regressions like the one reported in issue #866109. [1] https://github.com/w3c/csswg-drafts/issues/2907 Bug: 854624 Change-Id: I1cc0f55050d54ea1e76c655cf6b3ef8bcc0b0e2c Reviewed-on: https://chromium-review.googlesource.com/c/1209745 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#596406} -- wpt-commits: e201d802a5cb75d4cf618b8f5e1efe0e34c4ba3b wpt-pr: 12894
testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html
testing/web-platform/tests/css/css-text/white-space/pre-wrap-015.html
testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html
testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-014-ref.html
testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html
testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html
testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html
@@ -0,0 +1,36 @@
+<!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">
+<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.">
+<style>
+div {
+   position: relative;
+   font-size: 20px;
+   font-family: Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  line-height: 1em;
+  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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-015.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: pre-wrap</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-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The text is broken at the end of the space between the two words, never before, so it hangs and cause an overflow">
+<style>
+div {
+   position: relative;
+   font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 20px;
+
+  white-space: pre-wrap;
+  word-break: 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">X<span style="color: green">X</span><br>X<span style="color: green">X</span></div>
+  <div class="test">X X</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-014-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<p>Test passes if 2 icons are rendered in a row, matching the reference file.</p>
+<div>💖<br>💔</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.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-word-break-break-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="The word is broken even if pre-wrap provides a former breaking opportunity in leading white-space.">
+<style>
+div {
+   position: relative;
+   font-size: 20px;
+   font-family: Ahem;
+}
+.red {
+  position: absolute;
+  white-space: pre;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  line-height: 1em;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XXXX<br>X</div>
+  <div class="test"> XXXXX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html
@@ -0,0 +1,36 @@
+<!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-word-break-break-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="A single leading white-space should account as soft breaking opportunity, honoring the 'white-space: pre-wrap', on top to the ones provided by 'word-break: break-all'.">
+<style>
+div {
+   position: relative;
+   font-size: 20px;
+   font-family: Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  background: green;
+  line-height: 1em;
+  width: 1ch;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">X<br>X<br>X</div>
+  <div class="test"> XX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-014-ref.html">
+<meta name="assert" content="The text is wrapped after the first character and no unicode unit is broken.">
+<style>
+div {
+  width: 1px;
+  word-break: break-all;
+}
+</style>
+<p>Test passes if 2 icons are rendered in a row, matching the reference file.</p>
+<div>💖💔</div>