Bug 256178

Created attachment 466160 [details]
HTML with the bug reproduced, saved from CodePen

Per specs, container query length units should be evaluated relative to the query container's **content box**, while currently they're evaluated relative to the border box.

Link to reproduce: https://codepen.io/kizu/pen/ExdwZaB — the square in it should be of a lime color, as with the content box of the container have 0x0 dimensions, but in Safari the units get evaluated related to the border box, so we can see the red square (the HTML from this example is also attached to this report as a file)

This example works correctly in Chrome and Firefox.

Spec quote from https://www.w3.org/TR/css-contain-3/#container-query-length

> For each element, container query length units are evaluated as container size queries on the relevant axis (or axes) described by the unit.

Spec quotes from https://www.w3.org/TR/css-contain-3/#container-size-query

> The width container feature queries the width of the query container’s content box.
> The height container feature queries the height of the query container’s content box.
> The inline-size container feature queries the size of the query container’s content box in the query container’s inline axis.
> The block-size container feature queries the size of the query container’s content box in the query container’s block axis.