Blitz - WPT: scope-proximity.html

wpt / css / css-cascade / scope-proximity.html

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

Subtest	Status	Message
Alternating light/dark	FAIL	cannot convert 'null' or 'undefined' to object
Proximity wins over order of appearance	FAIL	cannot convert 'null' or 'undefined' to object
Specificity wins over proximity	FAIL	cannot convert 'null' or 'undefined' to object
Identical root with further proximity is not ignored	FAIL	cannot convert 'null' or 'undefined' to object
Most proximate match wins under multiple scoping roots	FAIL	cannot convert 'null' or 'undefined' to object

Enable JavaScript in test iframe

/css/css-cascade/scope-proximity.html

<!DOCTYPE html>
<title>@scope - proximity to root</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-proximity">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>

function test_scope(script_element, callback_fn, description) {
  test((t) => {
    // The provided <script> element must be an immedate subsequent sibling of
    // a <template> element.
    let template_element = script_element.previousElementSibling;
    assert_equals(template_element.tagName, 'TEMPLATE');

    t.add_cleanup(() => {
      while (main.firstChild)
        main.firstChild.remove()
    });

    main.append(template_element.content.cloneNode(true));

    callback_fn();
  }, description);
}

function assert_green(selector) {
  assert_equals(getComputedStyle(main.querySelector(selector)).backgroundColor, 'rgb(0, 128, 0)');
}
function assert_not_green(selector) {
  assert_equals(getComputedStyle(main.querySelector(selector)).backgroundColor, 'rgb(0, 0, 0)');
}
</script>
<style>
  main * {
    background-color: black;
  }
</style>
<main id=main>
</main>

<template>
  <style>
    .item {
      padding: 0px;
      border: 5px solid red;
    }

    @scope (.light) {
      [id] { border-color: rgb(100, 100, 100); }
    }

    @scope (.dark) {
      [id] { border-color: rgb(200, 200, 200); }
    }
  </style>
  <div class=light>
    <div id=item1>
      <div class=dark>
        <div id=item2>
          <div class=light>
            <div id=item3>
              <div class=dark>
                <div id=item4></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
test_scope(document.currentScript, () => {
  assert_equals(getComputedStyle(item1).borderColor, 'rgb(100, 100, 100)');
  assert_equals(getComputedStyle(item2).borderColor, 'rgb(200, 200, 200)');
  assert_equals(getComputedStyle(item3).borderColor, 'rgb(100, 100, 100)');
  assert_equals(getComputedStyle(item4).borderColor, 'rgb(200, 200, 200)');
}, 'Alternating light/dark');
</script>


<template>
  <style>
    @scope (.b) {
      [id] { border-color:green; }
    }
    @scope (.a) {
      [id] { border-color:red; }
    }
  </style>
  <div class=a>
    <div class=b>
      <span id=item></span>
    </div>
  </div>
</template>
<script>
test_scope(document.currentScript, () => {
  assert_equals(getComputedStyle(item).borderColor, 'rgb(0, 128, 0)');
}, 'Proximity wins over order of appearance');
</script>


<template>
  <style>
    @scope (.a) {
      span[id] { border-color:green; }
    }
    @scope (.b) {
      [id] { border-color:red; }
    }
  </style>
  <div class=a>
    <div class=b>
      <span id=item></span>
    </div>
  </div>
</template>
<script>
test_scope(document.currentScript, () => {
  assert_equals(getComputedStyle(item).borderColor, 'rgb(0, 128, 0)');
}, 'Specificity wins over proximity');
</script>

<template>
  <style>
    @scope (.foo) {
      .bar span[id] { border-color:green; }
    }
  </style>
  <div class=foo>
    <div class="foo bar">
      <span id=item></span>
    </div>
  </div>
</template>
<script>
test_scope(document.currentScript, () => {
  assert_equals(getComputedStyle(item).borderColor, 'rgb(0, 128, 0)');
}, 'Identical root with further proximity is not ignored');
</script>

<template>
  <style>
    @scope (.scope) {
      :where(&) { border-color:green; }
    }
    @scope (#outer) {
      :where(:scope) :where(#inner) { border-color:red; }
    }
  </style>
  <div id=outer class=scope>
    <div>
      <div id=inner class=scope>
      </div>
    </div>
  </div>
</template>
<script>
test_scope(document.currentScript, () => {
  assert_equals(getComputedStyle(inner).borderColor, 'rgb(0, 128, 0)');
}, 'Most proximate match wins under multiple scoping roots');
</script>