[css-display] Make 'flow-root' an independent keyword (original) (raw)

I have already found multiple people (myself included) confused because display: block and display: inline have the same inner display type, flow.

Making flow-root an inner display type overlaps with flow, and saying that inline-block has a flow-root inner display type is not intuitive and does not work well (#1246, #1486).

Additionally, there is the problem of adding layout containment to a ruby element (#1457). I think the obvious fix is making the principal box generated around the ruby container to become a block container (of the specified outer display type) and establish a BFC. But currently no display value allows this.

So I propose:

• Make flow-root an independent keyword (similarly to list-item) which forces the element to "become a formatting context", i.e an inline box becomes an inline-block, a block container establishes its own BFC, and for ruby this applies to the principal box around the ruby container.
• Restore the block inner display type from 2014 WD, rename flow to auto, let auto behave like block inner display type when block-level. To avoid name clashes, rename the outer display types to inline-level and block-level. That is, undo most part of https://lists.w3.org/Archives/Public/www-style/2015May/0098.html

So #1246 is solved as such: inline-block is syntactically equivalent to inline-level block, which behaves like inline-level flow-root. The difference is that, when blockified, the formers serializes to block (and may no longer establish a BFC) and the latter serializes to flow-root (and continues establishing a BFC). And the answer to #1486 is that the equivalence between inline-block and inline-level block is preserved, and the flow-root-ness is also preserved.

Letting an auto inner display type compute as block if the outer display type is block-level after possible blockifications or inlinifications also addresses #1341. You can use display: block-level (block-level auto) if you want a block box which inlinifies to inline (inline-level auto), or you can use display: block (block-level block) if you want a block box which inlinifies to inline-block (inline-level block).

See my proposed specification and the bikeshed changes.