css/css-conditional/container-queries/pseudo-elements-005.html

<!doctype html>
<title>CSS Container Queries Test: Style container for pseudo elements</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
  #c1 {
    --theme: green;
  }
  @container style(--theme: green) {
    #c1::before {
      content: "";
      color: green;
      display: block;
      height: 100px;
    }
  }
</style>
<div id="c1"></div>
<script>
  setup(() => assert_implements_style_container_queries());

  test(() => {
    let style = getComputedStyle(c1, "::before");
    assert_equals(style.color, "rgb(0, 128, 0)");
    assert_equals(style.height, "100px");
  }, "::before pseudo element querying style() of originating element");
</script>

<style>
  #c2 {
    --theme: red;
  }
  #c2::before { color: red }
  #c2.green {
    --theme: green;
  }
  @container style(--theme: green) {
    #c2::before {
      content: "";
      color: green;
    }
  }
</style>
<div id="c2"></div>
<script>
  test(() => {
    let style = getComputedStyle(c2, "::before");
    assert_equals(style.color, "rgb(255, 0, 0)");
  }, "::before pseudo element not matching style()");

  test(() => {
    c2.className = "green";
    let style = getComputedStyle(c2, "::before");
    assert_equals(style.color, "rgb(0, 128, 0)");
  }, "::before pseudo element matching style() query after class change");
</script>