[css-ui?] Define interaction of block layout and editing.

[emilio]

It seems all browsers except Gecko hack block layout so that an editable block has at least one non-empty line, see this test-case.

That is, other browsers render <div contenteditable></div> the same as <div><br></div>.

I'm on the fence on whether this is a browser bug on other browsers, or something that we should match and should be specified. If the later, how we do define this?

It seems other browsers only apply it to the editable root?

In blink this is done in LayoutBlock::HasLineIfEmpty, which seems inherited from WebKit's RenderBlock::hasLineIfEmpty.

I see the "do what I mean" intent of this, but it seems a bit of a layering violation / hack to me :(

cc @jfkthame @masayuki-nakano @kojiishi @rniwa

[emilio]

WebKit/WebKit@590ce13 seems to be the first time this specialness was introduced.

[masayuki-nakano]

I think that [contenteditable]:read-write should have one line height at least by default UA stylesheet.

[emilio]

Maybe you can fix this in a non-hacky way with min-height: 1em;? But that only works if your box-sizing is content-box of course :/

[masayuki-nakano]

Maybe you can fix this in a non-hacky way with min-height: 1em;? But that only works if your box-sizing is content-box of course :/

Well, but using em would cause changing the height when first character is typed.

And I wonder, there is same issue for empty inline element's width, isn't it? E.g., <span contenteditable></span>.

[jfkthame]

I'm also somewhat on the fence about this too; on the one hand, I think in an ideal world adding or removing contenteditable shouldn't cause any layout changes, but on the other hand that makes a simple <div contenteditable></div> essentially unusable.

So maybe something involving min-height: 1lh would be a reasonable hack.

[emilio]

So firefox has an existing line-height hack which applies when we find white-space: pre (or similar, see the preMode stuff in there).

This is pretty old code but it may be worth making it apply consistently for empty blocks, or something of that sort.

[emilio]

Ah, there's also w3c/editing#70 for this.

[MatsPalmgren]

Fwiw, Chrome does it also for Grid containers for example:
data:text/html,<div style="display:grid; border:solid" contenteditable></div>

Also worth noting that a non-auto value has other side-effects for Grid/Flex items.

[emilio]

Yeah, chrome does it as a used-value-time hack. Also for flexbox: WebKit/WebKit@e293e4a... :(

[rniwa]

As far as I know, forcing an empty contentediable to behave as if it had BR is a compatibility requirement.