1670705 - [css-text] 'overflow-wrap: anywhere' should break between unbreakable inlines

Status: NEW

(Core :: Layout: Block and Inline, defect, P3)

Description

[leon]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36

Steps to reproduce:

CSS (applies to both):

#inner {
  width: 300px;
  word-break: break-word;
}

.unit {
  white-space: nowrap;
}

HTML 1:

<div id="inner">
  <span class="unit">
    <span>Group One:</span>
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
  </span>
  <span class="unit">
    <span>Group Two:</span>
    <span>Four</span>
    <span>Five</span>
    <span>Six</span>
  </span>
  <span class="unit">
    <span>Group Three:</span>
    <span>Seven</span>
    <span>Eight</span>
    <span>Nine</span>
  </span>
</div>

HTML 2:

<div id="inner"><span class="unit"><span>Group One:</span><span>One</span><span>Two</span><span>Three</span></span><span class="unit"><span>Group Two:</span><span>Four</span><span>Five</span><span>Six</span></span><span class="unit"><span>Group Three:</span><span>Seven</span><span>Eight</span><span>Nine</span></span></div>

Actual results:

They break out of their parent's container instead of being wrapped.

Expected results:

They only difference between the two code-examples is [HTML-Whitespace][1]-placement and they should, except for the whitespaces, render identically. While this is the case in Chrome, in Firefox they break out of their parent's container.

SO question: https://stackoverflow.com/q/64319943/7910454

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase #1

Comment 2

[Mats Palmgren (inactive)]

I think this is roughly the same bug as bug 1593385, because the spec says:

break-word: As for anywhere except that soft wrap opportunities introduced by break-word are not considered when calculating min-content intrinsic sizes.

https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap
(so using break-word instead in Testcase #1, the second <div> should have all text on one line and it should fit that text, but the first <div> should layout the same.)

(Chrome has the correct rendering in both cases.)