1790495 - Container Query Condition Using Font-Relative Units Not Re-Evaluated When the Font Size Changes

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[David Shin[:dshin]]

Attachment: Mimimum Reproducible Case

STR: Load attached test case with layout.css.container-queries.enabled set to true
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.

Prior to the load callback, the query in question (height = 10em) evaluates to false as font-size: 2px and 10em == 20px. After the callback, font-size is set to 1px and so 10em == 10px, which matches #container's height.

Seems that we should re-evaluate the condition when the value the relative length unit depends on changes.

Comment 1

[David Shin[:dshin]]

Attachment: Mimimum Reproducible Case

(Remove unnecessary web-platform-test tags that came from the source)

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Hmm, this is a bit tricky, but should be reasonably workable. Basically, we need to add a new ChildCascadeRequirement (and probably rename that type since now we'd not only cascade but also re-selector-match). If we're a container and our font-size changes we need to return this stronger hint. Ideally only if any query has matched already against relative units...

Comment 3

[Emilio Cobos Álvarez (:emilio)]

I can take this as time allows. Thanks!

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1790495 - React to font-size changes on query containers. r=dshin,#style

Much like we react to font-size changes on the root.

Comment 5

[David Shin[:dshin]]

Attachment: Mimimum Reproducible Case, with Viewport Units

Ahh - my bad. I was focused on distilling down the test case so I ended up using em units, but the same problem exists for viewport units (Found while working on container query units.)

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Those need a separate fix anyways, so probably worth filing in a separate bug

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dff049971660
React to font-size changes on query containers. r=dshin

Comment 8

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/dff049971660