Bug 1474512 [wpt PR 11877] - [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.

However, this breaking opportunity should be considered together
with other provided by the word-break CSS property (eg, break-word or
break-all).

There is a discussion [1] in the CSS WG github about this issue, which
provides an interoperability analysis of a few cases where a single
leading white-space character may produce different results, depending
on the browser and the combination of line-breaking properties.

[1] https://github.com/w3c/csswg-drafts/issues/2907

Bug: 854624
Change-Id: I49ec8282e899a32990662c104b48cab04057b909
Reviewed-on: https://chromium-review.googlesource.com/1130515
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575596}

--

wpt-commits: df5392444342a1c00422096a2febb9ceb0edf250
wpt-pr: 11877
This commit is contained in:
Javier Fernandez 2018-07-25 17:29:48 +00:00 коммит произвёл James Graham
Родитель b905aac610
Коммит 851fb8ca7b
5 изменённых файлов: 182 добавлений и 0 удалений

Просмотреть файл

@ -135091,6 +135091,18 @@
{}
]
],
"css/css-text/overflow-wrap/overflow-wrap-break-word-004.html": [
[
"/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html",
[
[
"/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-001-ref.html",
"=="
]
],
{}
]
],
"css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html": [
[
"/css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html",
@ -137215,6 +137227,30 @@
{}
]
],
"css/css-text/word-break/word-break-break-all-010.html": [
[
"/css/css-text/word-break/word-break-break-all-010.html",
[
[
"/css/css-text/word-break/reference/word-break-break-all-010-ref.html",
"=="
]
],
{}
]
],
"css/css-text/word-break/word-break-break-all-011.html": [
[
"/css/css-text/word-break/word-break-break-all-011.html",
[
[
"/css/css-text/word-break/reference/word-break-break-all-010-ref.html",
"=="
]
],
{}
]
],
"css/css-text/word-break/word-break-keep-all-000.html": [
[
"/css/css-text/word-break/word-break-keep-all-000.html",
@ -258679,6 +258715,11 @@
{}
]
],
"css/css-text/word-break/reference/word-break-break-all-010-ref.html": [
[
{}
]
],
"css/css-text/word-break/reference/word-break-break-all-ref-000.html": [
[
{}
@ -533236,6 +533277,10 @@
"63bbe4f7fb67f33217876af58c1de4d032c369f4",
"reftest"
],
"css/css-text/overflow-wrap/overflow-wrap-break-word-004.html": [
"ca2b98f9db6ac13da149380dab3311301d741045",
"reftest"
],
"css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html": [
"9f88a667825f8cb725dc348e17081e1a25b3f4de",
"reftest"
@ -534800,6 +534845,10 @@
"5ad54c7b9197746f66fa30628b6059a369f5bd36",
"support"
],
"css/css-text/word-break/reference/word-break-break-all-010-ref.html": [
"0b16a0bdb25ddd647ad96dd82e3430274667ee87",
"support"
],
"css/css-text/word-break/reference/word-break-break-all-ref-000.html": [
"765afbeeede3d3dd8ad33b88927d6eb8e5435463",
"support"
@ -534976,6 +535025,14 @@
"fd5f0cf9f57152d3c6df7c4b59c0fe70733bf9f4",
"manual"
],
"css/css-text/word-break/word-break-break-all-010.html": [
"f9eedfe8e72bcf6693f8049bfdf2e1efdf3084ef",
"reftest"
],
"css/css-text/word-break/word-break-break-all-011.html": [
"047e950374d902e426287900a2d03c63726420a2",
"reftest"
],
"css/css-text/word-break/word-break-keep-all-000.html": [
"219e6b0435541a834ebbee114b0dd40e15956f75",
"reftest"

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>