css/css-values/tree-counting/sibling-function-container-query-invalidation.html

<!DOCTYPE html>
<title>CSS Values and Units Test: sibling-index() and sibling-count() changes in container queries</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-features">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  @property --length {
    syntax: "<length>";
    initial-value: 0px;
    inherits: false;
  }
  .container { container-type: inline-size; }
  #c1 {
    width: 100px;
    --length: 100px;
  }
  #c2 {
    width: 400px;
    --length: 600px;
  }
  span {
    --match-100: no;
    --match-600: no;
  }
  @container (width = calc(100px * sibling-index())) {
    span { background-color: green; }
  }
  @container (width = calc(200px * sibling-count())) {
    span { color: lime; }
  }
  @container style(--length: calc(100px * sibling-index())) {
    span { --match-100: yes; }
  }
  @container style(--length: calc(300px * sibling-count())) {
    span { --match-600: yes; }
  }
</style>
<div style="color:black">
  <div id="rm1"></div>
  <div id="rm2"></div>
  <div id="c1" class="container">
    <span id="t1"></span>
  </div>
  <div id="c2" class="container">
    <span id="t2"></span>
  </div>
</div>
<script>
  test(() => {
    assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)");
    assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
  }, "sibling-index() in @container width query initially not matching");

  test(() => {
    assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)");
    assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
  }, "sibling-count() in @container width query initially not matching");

  test(() => {
    assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "no");
    assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no");
  }, "sibling-index() in @container style() query initially not matching");

  test(() => {
    assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no");
    assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "no");
  }, "sibling-count() in @container style() query initially not matching");

  rm1.remove();
  rm2.remove();

  test(() => {
    assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)");
    assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
  }, "sibling-index() in @container width query matching after removal");

  test(() => {
    assert_equals(getComputedStyle(t2).backgroundColor, "rgba(0, 0, 0, 0)");
    assert_equals(getComputedStyle(t2).color, "rgb(0, 255, 0)");
  }, "sibling-count() in @container width query matching after removal");

  test(() => {
    assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "yes");
    assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no");
  }, "sibling-index() in @container style() query matching after removal");

  test(() => {
    assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no");
    assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "yes");
  }, "sibling-count() in @container style() query matching after removal");
</script>