query-container-name.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/container-queries/query-container-name.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>@container: query container name, no query part</title>

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

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

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

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

<style>

  #inner { container-name: --foo }

  #outer { container-name: --bar }

  #target {

    --match-foo: no;

    --match-bar: no;

    --match-baz: no;

  @container --foo { #target { --match-foo: yes; } }

  @container --bar { #target { --match-bar: yes; } }

  @container --baz { #target { --match-baz: yes; } }

</style>

<div id="outer">

    <div id="inner">

      <div id="target"></div>

    </div>

  </div>

</div>

<script>

  test(() => {

    assert_equals(getComputedStyle(target).getPropertyValue("--match-foo"), "yes");

  }, "match closest named container");

  test(() => {

    assert_equals(getComputedStyle(target).getPropertyValue("--match-bar"), "yes");

  }, "match ancestor named container");

  test(() => {

    assert_equals(getComputedStyle(target).getPropertyValue("--match-baz"), "no");

  }, "no match for unused container name");

</script>