[csswg-drafts] [css-contain] Container queries within display:none are difficult to implement (#8197)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] Container queries within display:none are difficult to implement ==
```html
<style>
@container (width >= 0) {
  #target { --x: BAD; }
}
</style>
<div id="outer-container" style="container-type: inline-size; --x: GOOD">
  <div id="none" style="display: none">
    <div id="inner-container" style="container-type: inline-size">
      <div id="target"></div>
    </div>
  </div>
</div>
<script>
document.body.append(getComputedStyle(target).getPropertyValue('--x'));
</script>
```

The query container for `#target` is `#inner-container`, since it has the right `container-type`. However, it generates no box since it's inside a `display: none` subtree, so `width >= 0` should be unknown and `--x: BAD` should not apply.

This is tricky to implement, though, because browsers typically avoid computing the style of elements inside `display: none` subtrees. So when collecting the rules for `#target`, we may not know the `container-type` for `#inner-container`, and thus not know whether to apply `--x: BAD`.

Currently,
 - WebKit implements it correctly.
 - Blink implements it partially: the testcase above is good, but adding this breaks it:
    ```js
    getComputedStyle(document.getElementById("inner-container")).getPropertyValue('--x');
    ```
 - Firefox skips `#inner-container` and thinks that the query container is `#outer-container`.

In https://phabricator.services.mozilla.com/D164113 @emilio says

> Our behavior doesn't seem too terrible to me. Maybe elements inside `display: none` subtrees should be considered to not have any container? Or maybe we should always match the query as "unknown", as that's really what's going on? I don't know.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8197 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 7 December 2022 19:47:44 UTC