Emilio Cobos Álvarez
ccb272d98f
This removes CustomPropertiesBuilder and moves custom property handling directly to cascade, so that we can deal with the interactions between custom properties and non-custom properties in one place. The keyframe stuff is still kinda gross (ugh, AnimationValue strikes again), but probably bearable? We should rework that too. We should probably try to merge substitution and cycle detection, I think it might be possible now? But follow-up probably, haven't thought it through super-thorougly. This fixes a couple of dependent bugs, and also at least bug 2048804 and bug 2042898. Added a few tests from those or that I hit while writing them. Notable changes: * This tracks color-scheme more like other properties now that it's not such a PITA. * SingleNonCustomReference no longer tracks root variants separately. When the node is the root, the root units and em units should point to the same node, for cycle detection purposes. * It also removes a few very hacky bits from our existing substitution functions that I think makes stuff easier to follow. In particular, now we only create edges to line-height / font-size iff the property is registered, which matches the spec more closely (before we had this kinda hacky thing of "if there's any custom property mark it as IACVT, otherwise don't). * It uses a SmallVec<&Atom> for cycles because that's generally pretty cheap and it grows with custom property depth. Differential Revision: https://phabricator.services.mozilla.com/D308158
35 lines
1.9 KiB
HTML
35 lines
1.9 KiB
HTML
<!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>
|