зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1489445 [wpt PR 12894] - [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. The root cause of the issue with single leading white-space breaking opportunities is that the RewindToMidWordBreak expects certain width to be committed in order to choose opportunities in previous runs if none of the ones detected by the ICU LazyLineBreakIterator prevents the overflow. However, this breaking opportunity should be considered together with other provided by the word-break CSS property (eg, break-word or break-all), as it was agreed in the discussion [1] with the CSS WG. This CL solves the issue identifying the single leading white-space braking opportunity in a new class field flag, and using it to consider this opportunity inside the mid-word breaking logic, or prevent to run it completely in the cases where 'break-all' is not set. This is basically a reland of 6ea2a2e7f3ef01e0c98424ce272a732ade92ad1a but with some changes to avoid regressions like the one reported in issue #866109. [1] https://github.com/w3c/csswg-drafts/issues/2907 Bug: 854624 Change-Id: I1cc0f55050d54ea1e76c655cf6b3ef8bcc0b0e2c Reviewed-on: https://chromium-review.googlesource.com/c/1209745 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#596406} -- wpt-commits: e201d802a5cb75d4cf618b8f5e1efe0e34c4ba3b wpt-pr: 12894
This commit is contained in:
Javier Fernandez
moz-wptsync-bot
Родитель
df06a089c5
Коммит
5d88450ef6
|
|
@ -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,32 @@
|
|||
<!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-all">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="The text is broken at the end of the space between the two words, never before, so it hangs and cause an overflow">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 20px;
|
||||
|
||||
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="ref">X<span style="color: green">X</span><br>X<span style="color: green">X</span></div>
|
||||
<div class="test">X X</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,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: break-all</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<p>Test passes if 2 icons are rendered in a row, matching the reference file.</p>
|
||||
<div>💖<br>💔</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: 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">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/word-break-break-all-014-ref.html">
|
||||
<meta name="assert" content="The text is wrapped after the first character and no unicode unit is broken.">
|
||||
<style>
|
||||
div {
|
||||
width: 1px;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if 2 icons are rendered in a row, matching the reference file.</p>
|
||||
<div>💖💔</div>
|
||||
Загрузка…
Ссылка в новой задаче