[css-text] Implement the 'overflow-wrap: anywhere' feature

This feature will be implemented as an alias of word-break: break-word, which the CSS Text 3 declared as deprecated in future levels of the spec. There has been a long standing interoperability issues with the 'word-break: break-word' feature, implemented in Blink and WebKit but not in Firefox, since it was declared as deprecated. This feature can't be removed to avoid compatibility issues, but also because it provide a behavior that web authors really need, which is that breaking opportunities are considered in th min-content size of the box. The CSS WG resolved [1] that the best approach is to add a new value to the overflow-wrap CSS property, that provides basically the same behavior than 'overflow-wrap: break-word' but allowing the breaking opportunities to be part of the min-content size computation. This CL will enable the feature by default in next release, since the intent-to-implement-and-ship request [2] has been already approved. [1] w3c/csswg-drafts#2682 [2] https://groups.google.com/a/chromium.org/d/msg/blink-dev/CeGWh7l1Jq4/NeQXxZ4UCAAJ Bug: 905315 Change-Id: I89bbc78f68f425dbad714c8546bc72c530887eb3
web-platform-tests · Nov 4, 2019 · d1f3160 · d1f3160
1 parent 1ce5f24
commit d1f3160
Show file tree

Hide file tree

Showing 37 changed files with 1,069 additions and 3 deletions.
diff --git a/css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html b/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/css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html b/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/css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html b/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/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html b/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/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.html b/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.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/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.html b/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.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 after 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/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.html b/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.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/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html b/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html
@@ -8,6 +8,7 @@
 <meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:anywhere **are** considered when calculating min-content intrinsic sizes.">
 <style>
 table {
+  font: 20px/1 Ahem;
   overflow-wrap: anywhere;
   max-width: 0;
   border: 0;
@@ -19,6 +20,7 @@
   color: transparent;
 }
 #red {
+  font: 20px/1 Ahem;
   position: absolute;
   z-index: -1;
   background: red;

diff --git a/css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html b/css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html
@@ -3,11 +3,12 @@
 <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="">
+<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.">
 <style>
 table {
+  font: 20px/1 Ahem;
   overflow-wrap: break-word;
   max-width: 0;
   border: 0;
@@ -19,6 +20,7 @@
   color: transparent;
 }
 #red {
+  font: 20px/1 Ahem;
   position: absolute;
   z-index: -1;
   background: red;

diff --git a/css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html b/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/css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html b/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/css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.html b/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>