Skip to content

GitLab

T
tangled
Commit f64a5a88 authored by Javier Fernandez's avatar Javier Fernandez Committed by Commit Bot
Browse files
Options

[css-text] Consider breaking opportunities of inline siblings 

First of all, bear in mind that this change affects only to
intrinsic size computation in legacy layout.

During the intrinsic size computation of blocks with inline children,
we are determining the breaking opportunities for each child. When the
word-break: break-word is used, each of this breaking opportunities
should account for the min-content size.

We only consider breakable locations for start and end if they are
br elements or spaces, under auto-wrap, to compute the intrinsic size
of a box. This is fine, since we are already using a break iterator
to determine the min-size of each word. However, we were incorrectly
summing the first_line_min_width for each inline sibling, even when
they were part of the same text line.

This change tries to avoid that problem by assuming that there is
always a breaking opportunity after every character, since the
spec now states that break-word should behave as normal and
overflow-wrap: anywhere.

Bug: 1013644
Change-Id: I04261b323cd029a624724363a566fccc826863af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1856959Reviewed-by: default avatarKoji Ishii <kojii@chromium.org>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#710359}
parent 9e4c7653
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 1 deletion
third_party/blink/renderer/core/layout/layout_text.cc
View file @ f64a5a88
...@@ -1278,7 +1278,8 @@ void LayoutText::ComputePreferredLogicalWidths( ...@@ -1278,7 +1278,8 @@ void LayoutText::ComputePreferredLogicalWidths(
} }
bool is_breakable_location = bool is_breakable_location =
is_newline || (is_space && style_to_use.AutoWrap()); is_newline || (is_space && style_to_use.AutoWrap()) ||
break_all_or_break_word == EWordBreak::kBreakWord;
if (!i) if (!i)
has_breakable_start_ = is_breakable_location; has_breakable_start_ = is_breakable_location;
if (i == len - 1) { if (i == len - 1) {
...@@ -1389,6 +1390,7 @@ void LayoutText::ComputePreferredLogicalWidths( ...@@ -1389,6 +1390,7 @@ void LayoutText::ComputePreferredLogicalWidths(
} }
if (break_all_or_break_word != EWordBreak::kNormal) { if (break_all_or_break_word != EWordBreak::kNormal) {
has_breakable_char_ = true;
// Because sum of character widths may not be equal to the word width, // Because sum of character widths may not be equal to the word width,
// we need to measure twice; once with normal break for max width, // we need to measure twice; once with normal break for max width,
// another with break-all for min width. // another with break-all for min width.
......
third_party/blink/web_tests/FlagExpectations/disable-blink-features=LayoutNG
View file @ f64a5a88
...@@ -135,6 +135,7 @@ crbug.com/591099 external/wpt/css/css-text/white-space/line-edge-white-space-col ...@@ -135,6 +135,7 @@ crbug.com/591099 external/wpt/css/css-text/white-space/line-edge-white-space-col
### external/wpt/css/css-text/word-break/ ### external/wpt/css/css-text/word-break/
crbug.com/591099 external/wpt/css/css-text/word-break/word-break-break-all-004.html [ Failure ] crbug.com/591099 external/wpt/css/css-text/word-break/word-break-break-all-004.html [ Failure ]
crbug.com/1017164 external/wpt/css/css-text/word-break/word-break-break-all-inline-008.html [ Failure ]
### external/wpt/css/css-ui/ ### external/wpt/css/css-ui/
crbug.com/591099 external/wpt/css/css-ui/text-overflow-010.html [ Failure ] crbug.com/591099 external/wpt/css/css-ui/text-overflow-010.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-text/word-break/word-break-break-all-inline-008.html 0 → 100644
View file @ f64a5a88
<!DOCTYPE html>
<html lang=en>
<meta charset="utf-8">
<title>word-break: break-all on inline element</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
<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="break-all doesn't allow breaking around punctuation characters">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
font: 50px / 1 Ahem;
}
.fail {
background: green;
position: absolute;
color: red;
height: 100px;
z-index: -1;
}
.test {
color: green;
width: 1em;
word-break: break-all;
}
</style>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<div class="fail">XX</div>
<div class="test"><span>X</span><span>.</span></div>
third_party/blink/web_tests/external/wpt/css/css-text/word-break/word-break-min-content-001.html 0 → 100644
View file @ f64a5a88
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: word-break: break-word 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/#word-break-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
<meta name="flags" content="">
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html">
<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaking opportunities **are** considered when calculating min-content intrinsic sizes.">
<style>
table {
word-break: break-word;
max-width: 0;
border: 0;
border-collapse: collapse;
}
td {
padding: 0;
background: green;
color: transparent;
}
#red {
position: absolute;
z-index: -1;
background: red;
color: transparent;
}
</style>
<p>Test passes if there is a green box below and no red.
<div id=red>X<br>X<br>X<br>X</div>
<table><tr><td>XXXX</table>
<!--
width:min-content on the div directly without using a table
would achieve the goal of this test, and be a lot simpler.
However, width:min-content is not yet widely supported.
Using a table, and forcing it to be as small as possible
will achieve min-content sizing of the div in all browsers.
-->
third_party/blink/web_tests/external/wpt/css/css-text/word-break/word-break-min-content-002.html 0 → 100644
View file @ f64a5a88
<!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" href="https://drafts.csswg.org/css-text-3/#word-break-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
<meta name="flags" content="ahem">
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html">
<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#wrapper {
width: 0px;
font: 16px / 1 Ahem;
word-break: break-word;
color: green;
}
#test {
float: left;
}
#reference {
position: absolute;
width: 16px;
height: 128px;
background: red;
z-index: -1;
}
</style>
<p>Test passes if there is a vertical green bar below.
<div id="wrapper">
<div id="reference"></div>
<div id="test"><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-text/word-break/word-break-min-content-003.html 0 → 100644
View file @ f64a5a88
<!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" href="https://drafts.csswg.org/css-text-3/#word-break-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
<meta name="flags" content="ahem">
<link rel="match" href="reference/word-break-break-all-010-ref.html">
<meta name="assert" content="word-break: break-all shouldn't allow breaking before punctuation characters.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
font: 50px / 1 Ahem;
}
.fail {
background: red;
position: absolute;
color: green;
z-index: -1;
}
.test {
color: green;
width: min-content;
word-break: break-all;
}
</style>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
<div class="fail"><br>XX</div>
<div class="test"><span>X</span><span>.</span></div>
third_party/blink/web_tests/external/wpt/css/css-text/word-break/word-break-min-content-004.html 0 → 100644
View file @ f64a5a88
<!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" href="https://drafts.csswg.org/css-text-3/#word-break-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
<meta name="flags" content="ahem">
<link rel="match" href="reference/word-break-break-all-010-ref.html">
<meta name="assert" content="word-break: break-word 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 {
background: green;
position: absolute;
color: red;
width: 100px;
z-index: -1;
}
.test {
color: green;
width: min-content;
word-break: break-word;
}
</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>
third_party/blink/web_tests/external/wpt/css/css-text/word-break/word-break-min-content-005.html 0 → 100644
View file @ f64a5a88
<!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" href="https://drafts.csswg.org/css-text-3/#word-break-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
<meta name="flags" content="ahem">
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html">
<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#wrapper {
width: 0px;
font: 16px / 1 Ahem;
word-break: break-word;
color: green;
}
#test {
float: left;
}
#reference {
position: absolute;
width: 16px;
height: 128px;
background: red;
z-index: -1;
}
</style>
<p>Test passes if there is a vertical green bar below.
<div id="wrapper">
<div id="reference"></div>
<div id="test"><span>XX</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment