variable-resolution-during-prioritary-properties.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-variables/variable-resolution-during-prioritary-properties.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Variables: prioritary properties referencing custom properties resolve fully</title>

<link rel="help" href="https://drafts.csswg.org/css-variables/#substitute-a-var">

<link rel="help" href="https://drafts.csswg.org/css-variables/#cycles">

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

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

<style>

  @property --len-a { syntax: "<length>"; inherits: false; initial-value: 0px; }

  @property --len-b { syntax: "<length>"; inherits: false; initial-value: 0px; }

  @property --len-c { syntax: "<length>"; inherits: false; initial-value: 0px; }

  @property --len-d { syntax: "<length>"; inherits: false; initial-value: 0px; }

  .case { font-size: 20px; }

  #a { --src-a: monospace; --fam-a: var(--src-a); --len-a: 1em; font-family: var(--fam-a); }

  #b { --src-b: monospace; --fam-b: var(--src-b); --len-b: 1em; font-family: var(--fam-b); }

  #c { --src-c: monospace; --fam-c: var(--src-c); --len-c: 1em; font-family: var(--fam-c); }

  #d { --src-d: monospace; --fam-d: var(--src-d); --len-d: 1em; font-family: var(--fam-d); }

  #w { --weight: 700; --weight-ref: var(--weight); --len-a: 1em; font-weight: var(--weight-ref); }

</style>

<div class="case" id="a">hello</div>

<div class="case" id="b">hello</div>

<div class="case" id="c">hello</div>

<div class="case" id="d">hello</div>

<div class="case" id="w">hello</div>

<script>

for (const id of ["a", "b", "c", "d"]) {

  test(() => {

    assert_equals(getComputedStyle(document.getElementById(id)).fontFamily, "monospace");

  }, `#${id}: font-family resolves through a chained custom property with a registered font-relative custom present`);

test(() => {

  assert_equals(getComputedStyle(document.getElementById("w")).fontWeight, "700");

}, "#w: font-weight resolves through a chained custom property with a registered font-relative custom present");

</script>