W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2021

[csswg-drafts] [css-contain] :root/body viewport propagation and containment (#5913)

From: Rune Lillesveen via GitHub <sysbot+gh@w3.org>
Date: Mon, 01 Feb 2021 12:15:04 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-798294320-1612181703-sysbot+gh@w3.org>
lilles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] :root/body viewport propagation and containment ==
While investigating containment for container queries I've encountered the issue of propagating html/body properties to the viewport. The simple case for container queries is that if you set containment on the html element, expecting the size of the html element being determined without looking at descendants. But if the body element changes the writing-mode, that writing-mode is propagated to the viewport, but also affects the used value for the html element.

This is a circularity problem for container queries because you can have:

```html
<style>
  html { contain: strict }
  body { writing-mode: horizontal-tb }
  @container (min-width: 1000px) { body { writing-mode: vertical-lr } }
</style>
```

and the width of html element may change because of the writing-mode which would then flip to a different writing-mode which gives a circularity.


Disregarding container queries, there is a question if there is an issue with propagation and containment for root/body propagation. Consider this case:

```html
<!doctype html>
<html>
  <head>
    <title>
      The layout of the html element depends on the overflow property of the
      body element which is propagated to the viewport. There are other properties
      which are propagated to the viewport, but also affects the used value of the
      html element. That is, the writing-mode. The used value for writing-mode on
      the html element depends on the computed value for writing-mode on the body
      element. Is there enough text to break this line now?
    </title>
    <style>
      html { overflow: visible }
      body { overflow: scroll; contain: strict }
      head, title { display: block; }
    </style>
  </head>
  <body></body>
</html>
```

All of Blink, WebKit, Gecko propagate the overflow:scroll to the viewport affecting the layout of the html root element.

Should containment somehow stop propagation to html/viewport?


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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 1 February 2021 12:15:07 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:27:20 UTC