style-query-change-with-ancestor-zoom.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/style-query-change-with-ancestor-zoom.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>CSS Container Queries Test: style query changes with ancestor zoom change</title>

<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#style-container">

<link rel="help" href="https://bugzil.la/2029949">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="support/cq-testcommon.js"></script>

<style>

  #outer { zoom: 1; }

  #container { container-name: my-container; }

  #child, #grandchild { color: red; }

  @container style(--target: child) {

    #child { color: green; }

  @container my-container style(--target: grandchild) {

    #grandchild { color: green; }

</style>

<div id="outer">

  <div id="container">

    <div id="child"></div>

    <div>

      <div id="grandchild"></div>

    </div>

  </div>

</div>

<script>

  setup(() => assert_implements_style_container_queries());

  const green = "rgb(0, 128, 0)";

  const red = "rgb(255, 0, 0)";

  test(() => {

    assert_equals(getComputedStyle(child).color, red);

    assert_equals(getComputedStyle(grandchild).color, red);

  }, "Initially no queries match.");

  test(() => {

    // Simultaneously change the zoom on an ancestor and set the custom property

    // on the container. The ancestor zoom change causes the container's

    // effective_zoom to change, which previously triggered an early return in

    // children hint computation, causing the style query update to be missed.

    outer.style.zoom = "2";

    container.style.setProperty("--target", "child");

    assert_equals(getComputedStyle(child).color, green);

    assert_equals(getComputedStyle(grandchild).color, red);

  }, "Style query updates when ancestor zoom and custom property change together (child).");

  test(() => {

    outer.style.zoom = "1";

    container.style.setProperty("--target", "grandchild");

    assert_equals(getComputedStyle(child).color, red);

    assert_equals(getComputedStyle(grandchild).color, green);

  }, "Style query updates when ancestor zoom and custom property change together (grandchild).");

</script>