[css-ui-4] text-overflow and anonymous blocks

[Loirooriol]

text-overflow is defined in CSS UI (should be moved into CSS Overflow per resolution) as:

• Applies to: block containers
• Inherited: no

Since the property controls how inline contents overflow line boxes, I would assume that the value that matters is the one of the block container that establishes the inline formatting context to which the line boxes belong.

The problem is that properties that apply to IFC roots should be inheritable, because lots of IFC roots are anonymous blocks. But this is a special case, because text-overflow has effect only if overflow is not visible, and overflow is definitely not inherited. Therefore it cannot just be said that anonymous blocks must act as if they were assigned text-overflow: inherit via a rule in the UA origin (because overflow should definitely not be inherited)

So consider this example: https://jsfiddle.net/fck9xqtx/

<div id="test1">abcdefghijklmoqrstuvwxyz</div>
<div id="test2">
  <div>-</div>
  <div>abcdefghijklmoqrstuvwxyz</div>
</div>

#test1, #test2 {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 50px;
}
#test1::before {
  content: "-";
  display: block;
}

In #test1 there is a ::before block, and then the other text is wrapped inside an anonymous block which is what establishes the IFC (and not #test1).

In #test2 it's basically the same, but now the inner block is element-generated.

Both Firefox and Chrome show ellipsis in #test1 and do not in #test2. Edge does not show ellipsis in either case.

Given the current definitions, I think Edge's behavior makes more sense, but it's not useful because anonymous blocks can't be selected to assign text-overflow and overflow styles. Additionally I think IFC should always be established by anonymous blocks, but with Edge's behavior this would mean that text-overflow would never work.

So I think the spec should say something like that anonymous blocks are ignored even if the IFC is established by them, and that the values of text-overflow and overflow that matter are the ones of the nearest non-anonymous block ancestor.

[frivoal]

Nice catch.

I agree both with your characterization of the problem, and with your proposed solution.

For completeness's sake, I've also checked a variant of your earlier test:

<div id="test1">abcdefghijklmoqrstuvwxyz</div>
<div id="test2">
  <div>-</div>
  <div>abcdefghijklmoqrstuvwxyz</div>
</div>
<div id="test3">
  <div>-</div>
  abcdefghijklmoqrstuvwxyz
</div>

#test1, #test2, #test3 {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 50px;
}
#test1::before {
  content: "-";
  display: block;
}

As expected, test3 behaves the same as test1.

So we have multiple passing implementations of this clarification.

Agenda+ to tentatively resolve on that.

[FremyCompany]

Edge's new engine also shows the ellipsis in the first and third cases, not the second
➡ Feel free to resolve this clarification

[css-meeting-bot]

The Working Group just discussed text-overflow and anonymous blocks, and agreed to the following resolutions:

• RESOLVED: Ignore anonymous boxes in this case

The full IRC log of that discussion

<dael> Topic: text-overflow and anonymous blocks
<dael> github: https://github.com//issues/2595
<dael> florian: Test-overflow: ellipsis works on block containers. It is not inherited so if you have nested blocks and inner ones overflow the ellipsis doesn't appear. It has been that way forever. New issue is if the element you apply the overflow ellipsis too has the text directly as a child it gets wrapped in an anon block. Should it display the ellipsis there is different between brwosers and ambig in the spec.
<dael> florian: Spec arguably says no, but that's not idea. Edge disagrees but fremy says Edge is changing as well. I don't know if we need a change or a clarification but we should say anon boxes are ignored for this purpose.
<dael> Rossen_: Besides wordsmithing, I'm okay with such a resolution. Other opinions?
<dael> Rossen_: Is this acceptable?
<dael> fantasai: I'm in favor of ignoring anon boxes here.
<dael> Rossen_: Objections?
<dael> RESOLVED: Ignore anonymous boxes in this case