Skip to content

Commit

Permalink
[css-text] Implement the 'overflow-wrap: anywhere' feature
Browse files Browse the repository at this point in the history 
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.

[1] w3c/csswg-drafts#2682

Bug: 905315
Change-Id: I89bbc78f68f425dbad714c8546bc72c530887eb3
  • Loading branch information
@javifernandez @chromium-wpt-export-bot
javifernandez authored and chromium-wpt-export-bot committed Oct 9, 2019
1 parent 84022ab commit b32fc6b
Show file tree
Hide file tree
Showing 7 changed files with 118 additions and 1 deletion.
39 changes: 39 additions & 0 deletions css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html
View file
@@ -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>
2 changes: 2 additions & 0 deletions css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html
View file
Expand Up @@ -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;
Expand All @@ -19,6 +20,7 @@
color: transparent;
}
#red {
font: 20px/1 Ahem;
position: absolute;
z-index: -1;
background: red;
Expand Down
4 changes: 3 additions & 1 deletion css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html
View file
Expand Up @@ -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;
Expand All @@ -19,6 +20,7 @@
color: transparent;
}
#red {
font: 20px/1 Ahem;
position: absolute;
z-index: -1;
background: red;
Expand Down
36 changes: 36 additions & 0 deletions css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html
View file
@@ -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>
36 changes: 36 additions & 0 deletions css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html
View file
@@ -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>
1 change: 1 addition & 0 deletions css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html
View file
Expand Up @@ -4,6 +4,7 @@
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<style>
div {
font: 20px/1 Ahem;
position: absolute;
background: green;
color: transparent;
Expand Down
1 change: 1 addition & 0 deletions css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-004-ref.html
View file
Expand Up @@ -4,6 +4,7 @@
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<style>
div {
font: 20px/1 Ahem;
position: absolute;
background: green;
color: transparent;
Expand Down

0 comments on commit b32fc6b

Please sign in to comment.