Description
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:
<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:
<!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; contain: strict }
body { overflow: scroll; }
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?