[csswg-drafts] [css-contain-3] Need style containment for container queries (#6213)

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

== [css-contain-3] Need style containment for container queries ==
I have worked on a case for container queries where we have a counter-increment inside a container inside a flex item which affects the generated counter inside a sibling flex item which is outside the container (see below).

When you make the flex item with the container to grow to use the remaining space after the sibling item taking up space based on generated counter content, and having a container query inside the container modifying this counter, you end up with a circularity.

I think we might have to require style containment for containers as well.

```html
<!doctype html>
<title>CSS Counters inside container affects container size via flex layout</title>
<link rel="stylesheet" href="/fonts/ahem.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #flex {
    width: 200px;
    display: flex;
    flex-direction: row;
    counter-reset: my-count 0;
  }
  /* #item1 grows to use remaining space given #item2's content */
  #item1 {
    flex-grow: 1;
    height: 100px;
  }
  #container {
    contain: size layout;
  }
  #item2 {
    flex-grow: 0;
    font: 50px/1 Ahem;
  }
  /* #item2 size depends on generated content which depends on my-count
     counter. */
  #item2::before {
    display: inline-block;
    content: counter(my-count);
  }
  /* Circularity without style containment. If this query does not match, the
     counter is a single 50px glyph which means item1/container will be 150px
     which will make the query start matching. That means the counter will be
     extended to two glyphs which will cause the query to no longer match. */
  @container (min-width: 125px) {
    #inner {
      counter-increment: my-count 10;
      background-color: green;
    }
  }
</style>
<div id="flex">
  <div id="item1">
    <div id="container">
      <div id="inner"></div>
    </div>
  </div>
  <div id="item2"></div>
</div>
<script>
  const item1_width = parseInt(getComputedStyle(item1).width);
  const item2_width = parseInt(getComputedStyle(item2).width);
  const container_width = parseInt(getComputedStyle(container).width);
  const inner_width = parseInt(getComputedStyle(inner).width);

  test(() => {
    assert_equals(item1_width, container_width);
    assert_equals(item1_width, inner_width);
  }, "#item1, #container, and #inner should all have the same width: " + item1_width);

  test(() => {
    let expected_background = container_width >= 125 ? "rgb(0, 128, 0)" : "rgba(0, 0, 0, 0)";
    assert_equals(getComputedStyle(inner).backgroundColor, expected_background);
  }, "The container query should match the layed out width");

  test(() => {
    assert_equals(item1_width + item2_width, 200);
  }, "The sum of the item widths should match the flexbox width");

  test(() => {
    assert_equals(parseInt(getComputedStyle(item2, "::before").width), item2_width);
  }, "The size of the flex item #2 should be given by its contents");
</script>
```


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


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

Received on Wednesday, 14 April 2021 19:09:46 UTC