1790652 - Container Query Condition Using Viewport-Relative Units Not Re-Evaluated When Viewport Size Changes

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[David Shin[:dshin]]

Attachment: Minimum reproducible test case

STR: Load attached test case.
Expected: The small red div turns green after 1 second.
Actual: The small red div does not turn red, until inspecting the element, at which point it turns green.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I have a good sense of how to best fix this.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1790652 - Make a wrapper struct for extra matching data. r=dshin,#style

No behavior change but we're about to add some extra field to it.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1790652 - Split in_media_query and in_container_query bits from computed::Context. r=dshin,#style

No behavior change, but it makes more sense this way :)

Depends on D159850

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1790652 - Allow propagating computed style bits from the selector-matching process. r=dshin,#style

This allows us to propagate flags from the container query styles all the
way to the computed style of the element.

The flag for viewport units in container queries has to be different
because it requires rematching, see comments.

Depends on D159851

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1790652 - Invalidate viewport units on container-queries properly. r=dshin,#style

By re-selector-matching the element (thus re-evaluating the container
query condition).

Depends on D159852

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1be0d212745c
Make a wrapper struct for extra matching data. r=dshin
https://hg.mozilla.org/integration/autoland/rev/7d531d105e7d
Split in_media_query and in_container_query bits from computed::Context. r=dshin
https://hg.mozilla.org/integration/autoland/rev/fd529aed43a1
Allow propagating computed style bits from the selector-matching process. r=dshin

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cc47d7350b4b
Invalidate viewport units on container-queries properly. r=dshin

Comment 8

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/1be0d212745c
https://hg.mozilla.org/mozilla-central/rev/7d531d105e7d
https://hg.mozilla.org/mozilla-central/rev/fd529aed43a1
https://hg.mozilla.org/mozilla-central/rev/cc47d7350b4b

Comment 9

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Reproduced the issue with Firefox 106.0a1 (20220913213020) and layout.css.container-queries.enabled:true using the attached test case from comment 0 on Windows 10x64.
The issue is verified fixed with Firefox 108.0b2 on Windows 10x64, macOS 11, and Ubuntu 20.04 while having the layout.css.container-queries.enabled:true. The small red div turns green after the iframe resizes.