1344545 - display: inline-flex resets inherited text-decoration

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[tomasz]

Attachment: inline-flex-text-decoration.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce:

1. Create element A with: text-decoration: underline;
2. Create element B (child of element A) with: display: inline-flex;

Example: http://codepen.io/anon/pen/wJWEVL
  


Actual results:

Text inside element B doesn't have underline.


Expected results:

Text inside element B should have underline.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report!  It's interesting that Chrome differs from us here.

I think we're actually matching the spec here, though (and we're being consistent with how "inline-block" and "inline-table" work.  Try loading these versions in Chrome, and you'll see that they *do not* draw an underline:
 inline-block: http://codepen.io/anon/pen/gmMqPE
 inline-table: http://codepen.io/anon/pen/qrNgbx


Even in Chrome with your original testcase, if you inspect the computed style, you can see that element "B" has "text-decoration: none".  So the underline isn't actually being *inherited* to that element (in the style system) -- rather, it gets drawn by virtue of the way text-decorations "propagating" to children in CSS.  That behavior is described here:
  https://drafts.csswg.org/css-text-decor-3/#line-decoration

And in particular, see the green box there:
>  Note that text decorations are not propagated to [...] the contents
>  of atomic inline-level descendants such as inline blocks and inline tables.

"inline-flex" *is* an atomic inline-level descendant here, so it's correct that the decoration does not propagate to the contents of our inline-flex.

Would you mind filing a Chrome bug on this behavior, since they're not matching the spec? :)  Or I can, if you don't.

Comment 2

[Daniel Holbert [:dholbert]]

For reference, "atomic inline" (the term used in that green box) is defined here:
> An inline-level box that is replaced [...]
> or that establishes a new formatting context
https://drafts.csswg.org/css-display-3/#atomic-inline

And the flexbox spec says the flex containers *do* establish a "new formatting context", here:
> A flex container establishes a new flex formatting context for its contents.
https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context

Comment 4

[Daniel Holbert [:dholbert]]

Looks like Chrome still draws the underline here, for inline-flex (though not for inline-block or inline-table), so we still need a Chrome bug here. I'll file one.

Comment 5

[Daniel Holbert [:dholbert]]

Filed: https://bugs.chromium.org/p/chromium/issues/detail?id=1414859