[css-position] Relative position treats percentages in the block axis as cyclic

[Loirooriol]

https://drafts.csswg.org/css-position-3/#valdef-top-percentage

The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom).

As far as I know, shifting the position of an element with relative positioning can't affect the size of the containing block (other than by triggering scrollbars, which is addressed in CSS Overflow). So these percentages should be able to resolve against the final size of the containing block as per the spec just fine.

However, there is interoperability that these percentages are considered cyclic and behave as auto if the containing block doesn't have a definite size during intrinsic sizing, and aren't re-resolved after the size of the containing block is known. That is, same behavior as percentages in block-size (https://drafts.csswg.org/css-sizing-3/#non-replaced-percentage-contribution).

Example:

<div style="display: inline-block; border: solid; margin-top: 50px">
  <div style="width: 100px; height: 100px; position: relative; top: 50%; bottom: 50px; left: 50%; right: 50px; background: cyan"></div>
</div>
<div style="display: inline-block; width: 100px; height: 100px; border: solid; margin-top: 50px">
  <div style="width: 100px; height: 100px; position: relative; top: 50%; bottom: 50px; left: 50%; right: 50px; background: magenta"></div>
</div>

Should all browser try to change, or update the spec to reflect reality?

(Initially discussed in #9267, but orthogonal to that issue)

[Loirooriol]

Servo's old layout system behaved as I'd expect:

The new layout seems to treat the percentage as 0px instead of auto like other browsers:

[Loirooriol]

I plan to align Servo with other browsers. There was already test coverage:

• /css/css-position/position-relative-007.html
• /css/css-values/calc-offsets-relative-bottom-1.html
• /css/css-values/calc-offsets-relative-top-1.html