Bug 1502031 [wpt PR 13720] - [css-text] New value 'break-spaces' for the white-space property, a=testonly
authorJavier Fernandez <jfernandez@igalia.com>
Thu, 31 Jan 2019 18:56:06 +0000
changeset 457871 d3fbc71412c581b84a8ce2919bbb70c5f153e1d9
parent 457870 6d70a00315a2301d32b9e684f877aa31caac51af
child 457872 42ff086f8f47c446289f19d5cf6453212e670eb2
push id111763
push userjames@hoppipolla.co.uk
push dateThu, 07 Feb 2019 22:12:57 +0000
treeherdermozilla-inbound@c983e907bbfd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1502031, 13720, 767634, 1136543, 623324
milestone67.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 1502031 [wpt PR 13720] - [css-text] New value 'break-spaces' for the white-space property, a=testonly Automatic update from web-platform-tests [css-text] New value 'break-spaces' for the white-space property Finally the CSS WG decided [1] to move back the 'break-spaces' value to the 'white-space' property. This makes the parsing logic easier than the previous approach of using the 'overflow-wrap' property. This new value prevents the white-space sequence to collapse and gives breaking opportunities after every preserved white-space. https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces Additionally, unlike 'pre-wrap', non-collapsible spaces or tabs at the end of a line cannot be hung or visually collapsed, since we want them to be preserved and broken. [1] https://github.com/w3c/csswg-drafts/pull/2841 Bug: 767634 Change-Id: I55e888d4472de11c64c4b14e2710c6e3d1832e67 Reviewed-on: https://chromium-review.googlesource.com/c/1136543 Reviewed-by: Koji Ishii <kojii@chromium.org> Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#623324} -- wpt-commits: 250f9793781f3dcab7f7a3ee9d22cbdf707bdf68 wpt-pr: 13720
testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-002.html
testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-003.html
testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html
testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.html
testing/web-platform/tests/css/css-text/white-space/break-spaces-004.html
testing/web-platform/tests/css/css-text/white-space/break-spaces-005.html
testing/web-platform/tests/css/css-text/white-space/break-spaces-006.html
testing/web-platform/tests/css/css-text/white-space/break-spaces-007.html
testing/web-platform/tests/css/css-text/white-space/break-spaces-008.html
testing/web-platform/tests/css/css-text/white-space/pre-wrap-016.html
testing/web-platform/tests/css/css-text/white-space/reference/white-space-break-spaces-005-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-012.html
testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html
--- 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
@@ -17,15 +17,15 @@ div {
   width: 5ch;
   line-height: 1;
   overflow: hidden;
   height: 1em;
 }
 </style>
 
 <p>This test passes if there is nothing below this sentence.
-<div> FAIL <div>
+<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.
 -->
--- 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
@@ -17,9 +17,9 @@ div {
   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>
+<div>PASS FAIL</div>
--- 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
@@ -1,13 +1,14 @@
 <!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.">
 <style>
 div {
   position: relative;
   font-size: 20px;
   font-family: Ahem;
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.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">
+<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.">
+<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: 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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
+<style>
+div {
+   position: relative;
+   font: 20px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 2ch;
+
+  white-space: break-spaces;
+  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="fail"><span>XX</span><br>XX</div>
+  <div class="test"> XX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-005.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: 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" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="If 'white-space' is set to 'break-spaces', collapsing preserved white-spaces' advance width is not allowed, so that they can be wrapped honoring the 'white-space' propery.">
+<style>
+div {
+   position: relative;
+   font: 10px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 100px;
+
+  white-space: break-spaces;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<span>XXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XX</span>XXXX<span>XXXX</span></div>
+  <div class="test">XXXX                                                                                        XXXX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: 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://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', but the words are broken, honring the 'word-beak: break-all' even though there are previous breaking opportunities in the white-spaces.">
+<style>
+div {
+   position: relative;
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>X</span>XXX<br>X<span>X</span>XX<br>X<span>XXX</span><br><span>XXXX</span></div>
+  <div class="test"> XXXX XXX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-007.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: 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://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A single leading white-space should be used, honoring white-space: break-spaces, to avoid overflow; however, a single preserved white-space at the end of the line cannot be wrapped, hence it hangs when breaking after it to move the rest of the text to the next line.">
+<style>
+div {
+   position: relative;
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XXXX</span><br>XXXX<br>XXX<span>X</span><br><span>XXXX</span></div>
+  <div class="test"> XXXX XXX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-008.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: 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://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', which may lead to overfow. However, we can break before the first white-space after the word honoring the 'break-all' value.">
+<style>
+div {
+   position: relative;
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X</span><br><span>XXXX</span><br><span>XXXX</span></div>
+  <div class="test">XXXX XX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-016.html
@@ -0,0 +1,38 @@
+<!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-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
+<style>
+div {
+   position: relative;
+   font-size: 20px;
+   font-family: Ahem;
+}
+.red {
+  position: absolute;
+  white-space: pre;
+  background: green;
+  color: red;
+  width: 40px;
+  height: 40px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  line-height: 1em;
+  width: 2ch;
+
+  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="red"><br>XX</div>
+  <div class="test"> XX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+  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>
--- a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Text Test: overflow-wrap: break-word</title>
+<title>CSS Text Test: word-break: break-all</title>
 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
 <meta name="flags" content="ahem">
 <link rel="match" href="reference/word-break-break-all-010-ref.html">
 <meta name="assert" content="The word is broken even if pre-wrap provides a former breaking opportunity in leading white-space.">
 <style>
 div {
   position: relative;
   font-size: 20px;
   font-family: Ahem;
--- a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Text Test: overflow-wrap: break-word</title>
+<title>CSS Text Test: word-break: break-all</title>
 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
 <meta name="flags" content="ahem">
 <link rel="match" href="reference/word-break-break-all-010-ref.html">
 <meta name="assert" content="A single leading white-space should account as soft breaking opportunity, honoring the 'white-space: pre-wrap', on top to the ones provided by 'word-break: break-all'.">
 <style>
 div {
   position: relative;
   font-size: 20px;
   font-family: Ahem;
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-012.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-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="The word is broken even if white-space: break-spaces provides a former breaking opportunity in leading white-space.">
+<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: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XXXX<br>X</div>
+  <div class="test"> XXXXX</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="A single leading white-space should account as soft breaking opportunity, honoring the 'white-space: break-spaces', on top to the ones provided by 'word-break: break-all'.">
+<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: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">X<br>X<br>X</div>
+  <div class="test"> XX</div>
+</body>