[csswg-drafts] [css-sizing] Examples 6 and 7 imply circularities with container queries (#7868)

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

== [css-sizing] Examples 6 and 7 imply circularities with container queries ==
In [**§ 5.2.2. Interaction With overflow: auto**](https://w3c.github.io/csswg-drafts/css-sizing-4/#cis-scrollbars), example 6 is missing some code (#7867), but I think it implies that

```css
div {
  contain: size;
  width: max-content;
  height: 149px;
  contain-intrinsic-size: 100px 100px;
  overflow: auto;
}
div::before {
  content: "foo";
  display: block;
  height: 150px;
}
```

 - Should get an outer width of `100px`
 - Thus, with classic scrollbars, the width of the content area will be something smaller like `84px`.

This is a big problem, because the width of the content area would be `100px` if the contents were smaller, and https://w3c.github.io/csswg-drafts/css-contain-3/#width

> The [`width`](https://w3c.github.io/csswg-drafts/css-contain-3/#descdef-container-width) [container feature](https://w3c.github.io/csswg-drafts/css-contain-3/#container-feature) queries the [width](https://w3c.github.io/csswg-drafts/css-sizing-3/#width) of the [query container](https://w3c.github.io/csswg-drafts/css-contain-3/#query-container)’s [content box](https://w3c.github.io/csswg-drafts/css-box-4/#content-box).

So with CQ we would have a circularity.

Also, I don't get how this behavior described in example 6 follows from the normative text above.
In fact, the property is called `contain-intrinsic-size`, so just like normal intrinsic size I guess that [this](https://w3c.github.io/csswg-drafts/css-overflow-3/#scrollbar-layout) applies: 

> When the box is intrinsically sized, this reserved space is added to the size of its contents. It is otherwise subtracted from space alotted to the [content area](https://w3c.github.io/csswg-drafts/css-box-4/#content-area).

So actually the width of the content area should be `100px`, and then if scrollbars are needed, the outer width will be something bigger like `116px`.

In short: since container queries use the size of the content area, the presence of scrollbars shouldn't affect the content area of an element with size containment. They can affect the outer size, though.

Blink matches my expectations. Gecko does too for `overflow: scroll`, but for `overflow: auto` it seems it's not recalculating the sizes if a scrollbar is needed (regardless of size containment). In WebKit I'm getting overlay scrollbars and I don't know how to force classic ones. [Testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0Abody%20%7B%0A%20%20display%3A%20grid%3B%0A%20%20grid-template-columns%3A%20min-content%20min-content%3B%0A%7D%0A.wrapper%20%7B%0A%20%20width%3A%20max-content%3B%0A%20%20min-width%3A%201px%3B%0A%20%20height%3A%2050px%3B%0A%20%20margin%3A%205px%3B%0A%20%20border%3A%205px%20solid%3B%0A%7D%0A.wrapper%3A%3Abefore%20%7B%0A%20%20content%3A%20%22%22%3B%0A%20%20display%3A%20block%3B%0A%20%20width%3A%2050px%3B%0A%20%20height%3A%2010px%3B%0A%20%20border%3A%205px%20solid%20orange%3B%0A%7D%0A.wrapper.big-contents%3A%3Abefore%20%7B%0A%20%20height%3A%2050px%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20class%3D%22wrapper%20big-contents%22%20style%3D%22overflow%3A%20scroll%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%22%20style%3D%22overflow%3A%20scroll%22%3E%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22wrapper%20big-contents%22%20style%3D%22overflow%3A%20auto%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%22%20style%3D%22overflow%3A%20auto%22%3E%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22wrapper%20big-contents%22%20style%3D%22overflow%3A%20scroll%3B%20contain%3A%20size%3B%20contain-intrinsic-size%3A%2060px%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%22%20style%3D%22overflow%3A%20scroll%3B%20contain%3A%20size%3B%20contain-intrinsic-size%3A%2060px%22%3E%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22wrapper%20big-contents%22%20style%3D%22overflow%3A%20auto%3B%20contain%3A%20size%3B%20contain-intrinsic-size%3A%2060px%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22wrapper%22%20style%3D%22overflow%3A%20auto%3B%20contain%3A%20size%3B%20contain-intrinsic-size%3A%2060px%22%3E%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22wrapper%20big-contents%22%20style%3D%22overflow%3A%20scroll%3B%20contain%3A%20size%3B%20contain-intrinsic-size%3A%20none%22%3E%3C%2Fdiv%)

![](https://user-images.githubusercontent.com/7477678/195211764-0b268ee6-be04-4f7c-8c53-d22efce486f4.png)




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


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

Received on Wednesday, 12 October 2022 00:01:48 UTC