[CSS2][css-position-3] Negative containing blocks and auto margins

[fantasai]

Alan Baradlay noticed that we have an incompatibility between browsers in the case of a negative containing block and block-axis auto margins. Example:

<div style="border: solid; width: 100px; height: 100px; position: relative">
  <div style="position: absolute; border: solid orange 10px; margin: auto; inset: 90px"></div>
</div>

This creates a 20px orange abspos inside a 100x100 containing block, with auto margins on all sides.

But the insets are 90px, which means the inset-modified containing block would be a negative size.

CSS2 defines the vertical-axis positioning rules in terms of an equation in section 10.6.4, which results in this box being centered.

Position 3 defines a slightly different behavior. First, the negative-size IMCB is adjusted to zero-size by altering the weaker inset in section 3.5.1. Then, auto margins get an equal negative size, centering the element on the IMCB in section 4.2. (In the inline axis the spec instead start-aligns the item into the IMCB, presumably to match the asymmetry of CSS2.)

WebKit currently exhibits the CSS2 behavior, while Firefox and Chrome exhibit the css-position-3 behavior.

The difference between the two specs was not intentional. What should we do?

[Loirooriol]

WebKit currently exhibits the CSS2 behavior, while Firefox and Chrome exhibit the css-position-3 behavior.

I'm seeing something different:

Webkit	Firefox	Chrome	Servo

[bfgeek]

The difference in axis behaviour in Blink is due to the (compat required) difference in auto margins. See:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/absolute_utils.cc;l=276-279?q=is_block_direction&ss=chromium

(In the block-direction of the child auto-margins are "unsafe", in the inline-direction they are "safe").
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13386

Gecko & Blink match behaviour in the above case, Firefox appears to change its behaviour based on if the width/height & min-width/min-height are auto. E.g.
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13387

Safari starts to match Servo in the above case.

Blink is consistent in behaviour across the different cases.

[Loirooriol]

	https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13386
Blink Gecko
WebKit Servo

	https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13387
Blink
Gecko
WebKit
Servo