[css-containment] Layout containment should block percentage resolution sizing

[chrishtr]

Percentage sizes resolve against the containing block for auto sized children. In quirks mode this can follow a whole chain of containing blocks, and in non-quirks mode it stops at the first containing block.

https://drafts.csswg.org/css-sizing-3/#percentage-sizing

This is a problem for layout containment, because it weakens the isolation between layout below contain:layout and outside. The behavior is also problematic in general because, especially in quirks mode, there is "action at a distance" happening in layout.

The containment spec should be amended to specify that percentage size resolution stops at a contain:layout element.

<div style="height: 100px;">
  <div>
    <div style="height: 50%;"> </div>
  </div>
</div>

In this example, the height of the inner div resolves to 50% of the outer div, i.e. 50px.

If the intermediate div had contain:layout, then the resolved height of the inner div should be 0px.

@tabatkins @bfgeek

[frivoal]

It's containment, not isolation. There are many things from outside the layout contained element that can influence what's inside it. It's the other way around that we're trying to block.

There may be merit to bidirectional isolation as well, and I think we've already run into a few situations where interesting optimization would be enabled by having it, but to get there there are many more holes than this one to plug, and it's not completely clear it's even doable.

I think looking into whether full isolation would be practical is reasonable, but the fact that containment as currently defined doesn't do it is not a bug.

[frivoal]

@chrishtr Closing based on the logic explained in the previous comment. Let me know if that's acceptable.

[chrishtr]

I agree with this reasoning, i.e. that containment is in one direction and so descendants depending on behavior outside of contain:layout is not the intent of contain:layout.