-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1838194 Commit-Queue: Javier Fernandez <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Cr-Commit-Position: refs/heads/master@{#712867}
- Loading branch information
1 parent
404bb42
commit fd6d0cf
Showing
37 changed files
with
1,069 additions
and
3 deletions.
There are no files selected for viewing
39 changes: 39 additions & 0 deletions
39
css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
22 changes: 22 additions & 0 deletions
22
css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
33 changes: 33 additions & 0 deletions
33
css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
33 changes: 33 additions & 0 deletions
33
css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
34 changes: 34 additions & 0 deletions
34
css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
32 changes: 32 additions & 0 deletions
32
css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
35 changes: 35 additions & 0 deletions
35
css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
36 changes: 36 additions & 0 deletions
36
css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]"> | ||
<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> |
31 changes: 31 additions & 0 deletions
31
css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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:[email protected]" /> | ||
<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> |
Oops, something went wrong.