Bug 256178 – Container query length units use border box instead of a content box

• Component: CSS
• Status: RESOLVED FIXED

[Roman Komarov]

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.

[Tim Nguyen (:ntim)]

Consider contributing this testcase to web platform tests as a reftest in case you haven't: https://github.com/web-platform-tests/wpt

[Radar WebKit Bug Importer]

<rdar://problem/108754549>

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/13364

[Antti Koivisto]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39807

[EWS]

Committed 263595@main (e31e2eb9806e): <https://commits.webkit.org/263595@main>

Reviewed commits have been landed. Closing PR #13364 and removing active labels.