@mcp-b/chrome-devtools-mcp 1.1.0 → 1.1.1

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSMatchedStyles.js

@@ -0,0 +1,1318 @@
+// Copyright 2016 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as Platform from '../platform/platform.js';
+import { CSSMetadata, cssMetadata } from './CSSMetadata.js';
+import { CSSProperty } from './CSSProperty.js';
+import * as PropertyParser from './CSSPropertyParser.js';
+import { AnchorFunctionMatcher, AngleMatcher, AttributeMatcher, AutoBaseMatcher, BaseVariableMatcher, BezierMatcher, BinOpMatcher, ColorMatcher, ColorMixMatcher, CustomFunctionMatcher, defaultValueForCSSType, EnvFunctionMatcher, FlexGridGridLanesMatcher, GridTemplateMatcher, LengthMatcher, LightDarkColorMatcher, LinearGradientMatcher, LinkableNameMatcher, localEvalCSS, MathFunctionMatcher, PositionAnchorMatcher, PositionTryMatcher, RelativeColorChannelMatcher, ShadowMatcher, StringMatcher, URLMatcher, VariableMatcher } from './CSSPropertyParserMatchers.js';
+import { CSSAtRule, CSSFunctionRule, CSSKeyframeRule, CSSKeyframesRule, CSSPositionTryRule, CSSPropertyRule, CSSStyleRule, } from './CSSRule.js';
+import { CSSStyleDeclaration, Type } from './CSSStyleDeclaration.js';
+function containsStyle(styles, query) {
+    if (!query.styleSheetId || !query.range) {
+        return false;
+    }
+    for (const style of styles) {
+        if (query.styleSheetId === style.styleSheetId && style.range && query.range.equal(style.range)) {
+            return true;
+        }
+    }
+    return false;
+}
+function containsCustomProperties(style) {
+    const properties = style.allProperties();
+    return properties.some(property => cssMetadata().isCustomProperty(property.name));
+}
+function containsInherited(style) {
+    const properties = style.allProperties();
+    for (let i = 0; i < properties.length; ++i) {
+        const property = properties[i];
+        // Does this style contain non-overridden inherited property?
+        if (property.activeInStyle() && cssMetadata().isPropertyInherited(property.name)) {
+            return true;
+        }
+    }
+    return false;
+}
+function cleanUserAgentPayload(payload) {
+    for (const ruleMatch of payload) {
+        cleanUserAgentSelectors(ruleMatch);
+    }
+    // Merge UA rules that are sequential and have similar selector/media.
+    const cleanMatchedPayload = [];
+    for (const ruleMatch of payload) {
+        const lastMatch = cleanMatchedPayload[cleanMatchedPayload.length - 1];
+        if (!lastMatch || ruleMatch.rule.origin !== 'user-agent' || lastMatch.rule.origin !== 'user-agent' ||
+            ruleMatch.rule.selectorList.text !== lastMatch.rule.selectorList.text ||
+            mediaText(ruleMatch) !== mediaText(lastMatch)) {
+            cleanMatchedPayload.push(ruleMatch);
+            continue;
+        }
+        mergeRule(ruleMatch, lastMatch);
+    }
+    return cleanMatchedPayload;
+    function mergeRule(from, to) {
+        const shorthands = new Map();
+        const properties = new Map();
+        for (const entry of to.rule.style.shorthandEntries) {
+            shorthands.set(entry.name, entry.value);
+        }
+        for (const entry of to.rule.style.cssProperties) {
+            properties.set(entry.name, entry.value);
+        }
+        for (const entry of from.rule.style.shorthandEntries) {
+            shorthands.set(entry.name, entry.value);
+        }
+        for (const entry of from.rule.style.cssProperties) {
+            properties.set(entry.name, entry.value);
+        }
+        to.rule.style.shorthandEntries = [...shorthands.entries()].map(([name, value]) => ({ name, value }));
+        to.rule.style.cssProperties = [...properties.entries()].map(([name, value]) => ({ name, value }));
+    }
+    function mediaText(ruleMatch) {
+        if (!ruleMatch.rule.media) {
+            return null;
+        }
+        return ruleMatch.rule.media.map(media => media.text).join(', ');
+    }
+    function cleanUserAgentSelectors(ruleMatch) {
+        const { matchingSelectors, rule } = ruleMatch;
+        if (rule.origin !== 'user-agent' || !matchingSelectors.length) {
+            return;
+        }
+        rule.selectorList.selectors = rule.selectorList.selectors.filter((_, i) => matchingSelectors.includes(i));
+        rule.selectorList.text = rule.selectorList.selectors.map(item => item.text).join(', ');
+        ruleMatch.matchingSelectors = matchingSelectors.map((_, i) => i);
+    }
+}
+/**
+ * Return a mapping of the highlight names in the specified RuleMatch to
+ * the indices of selectors in that selector list with that highlight name.
+ *
+ * For example, consider the following ruleset:
+ * span::highlight(foo), div, #mySpan::highlight(bar), .highlighted::highlight(foo) {
+ *   color: blue;
+ * }
+ *
+ * For a <span id="mySpan" class="highlighted"></span>, a RuleMatch for that span
+ * would have matchingSelectors [0, 2, 3] indicating that the span
+ * matches all of the highlight selectors.
+ *
+ * For that RuleMatch, this function would produce the following map:
+ * {
+ *  "foo": [0, 3],
+ *  "bar": [2]
+ * }
+ *
+ * @param ruleMatch
+ * @returns A mapping of highlight names to lists of indices into the selector
+ * list associated with ruleMatch. The indices correspond to the selectors in the rule
+ * associated with the key's highlight name.
+ */
+function customHighlightNamesToMatchingSelectorIndices(ruleMatch) {
+    const highlightNamesToMatchingSelectors = new Map();
+    for (let i = 0; i < ruleMatch.matchingSelectors.length; i++) {
+        const matchingSelectorIndex = ruleMatch.matchingSelectors[i];
+        const selectorText = ruleMatch.rule.selectorList.selectors[matchingSelectorIndex].text;
+        const highlightNameMatch = selectorText.match(/::highlight\((.*)\)/);
+        if (highlightNameMatch) {
+            const highlightName = highlightNameMatch[1];
+            const selectorsForName = highlightNamesToMatchingSelectors.get(highlightName);
+            if (selectorsForName) {
+                selectorsForName.push(matchingSelectorIndex);
+            }
+            else {
+                highlightNamesToMatchingSelectors.set(highlightName, [matchingSelectorIndex]);
+            }
+        }
+    }
+    return highlightNamesToMatchingSelectors;
+}
+function queryMatches(style) {
+    if (!style.parentRule) {
+        return true;
+    }
+    const parentRule = style.parentRule;
+    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports, ...parentRule.scopes];
+    for (const query of queries) {
+        if (!query.active()) {
+            return false;
+        }
+    }
+    return true;
+}
+export class CSSRegisteredProperty {
+    #registration;
+    #cssModel;
+    #style;
+    constructor(cssModel, registration) {
+        this.#cssModel = cssModel;
+        this.#registration = registration;
+    }
+    propertyName() {
+        return this.#registration instanceof CSSPropertyRule ? this.#registration.propertyName().text :
+            this.#registration.propertyName;
+    }
+    initialValue() {
+        return this.#registration instanceof CSSPropertyRule ? this.#registration.initialValue() :
+            this.#registration.initialValue?.text ?? null;
+    }
+    inherits() {
+        return this.#registration instanceof CSSPropertyRule ? this.#registration.inherits() : this.#registration.inherits;
+    }
+    syntax() {
+        return this.#registration instanceof CSSPropertyRule ? this.#registration.syntax() :
+            `"${this.#registration.syntax}"`;
+    }
+    parseValue(matchedStyles, computedStyles) {
+        const value = this.initialValue();
+        if (!value) {
+            return null;
+        }
+        return PropertyParser.matchDeclaration(this.propertyName(), value, matchedStyles.propertyMatchers(this.style(), computedStyles));
+    }
+    #asCSSProperties() {
+        if (this.#registration instanceof CSSPropertyRule) {
+            return [];
+        }
+        const { inherits, initialValue, syntax } = this.#registration;
+        const properties = [
+            { name: 'inherits', value: `${inherits}` },
+            { name: 'syntax', value: `"${syntax}"` },
+        ];
+        if (initialValue !== undefined) {
+            properties.push({ name: 'initial-value', value: initialValue.text });
+        }
+        return properties;
+    }
+    style() {
+        if (!this.#style) {
+            this.#style = this.#registration instanceof CSSPropertyRule ?
+                this.#registration.style :
+                new CSSStyleDeclaration(this.#cssModel, null, { cssProperties: this.#asCSSProperties(), shorthandEntries: [] }, Type.Pseudo);
+        }
+        return this.#style;
+    }
+}
+export class CSSMatchedStyles {
+    #cssModel;
+    #node;
+    #addedStyles = new Map();
+    #matchingSelectors = new Map();
+    #keyframes = [];
+    #registeredProperties;
+    #registeredPropertyMap = new Map();
+    #nodeForStyle = new Map();
+    #inheritedStyles = new Set();
+    #styleToDOMCascade = new Map();
+    #parentLayoutNodeId;
+    #positionTryRules;
+    #activePositionFallbackIndex;
+    #mainDOMCascade;
+    #pseudoDOMCascades;
+    #customHighlightPseudoDOMCascades;
+    #functionRules;
+    #atRules;
+    #functionRuleMap = new Map();
+    #environmentVariables = {};
+    static async create(payload) {
+        const cssMatchedStyles = new CSSMatchedStyles(payload);
+        await cssMatchedStyles.init(payload);
+        return cssMatchedStyles;
+    }
+    constructor({ cssModel, node, animationsPayload, parentLayoutNodeId, positionTryRules, propertyRules, cssPropertyRegistrations, activePositionFallbackIndex, functionRules, atRules, }) {
+        this.#cssModel = cssModel;
+        this.#node = node;
+        this.#registeredProperties = [
+            ...propertyRules.map(rule => new CSSPropertyRule(cssModel, rule)),
+            ...cssPropertyRegistrations,
+        ].map(r => new CSSRegisteredProperty(cssModel, r));
+        if (animationsPayload) {
+            this.#keyframes = animationsPayload.map(rule => new CSSKeyframesRule(cssModel, rule));
+        }
+        this.#positionTryRules = positionTryRules.map(rule => new CSSPositionTryRule(cssModel, rule));
+        this.#parentLayoutNodeId = parentLayoutNodeId;
+        this.#activePositionFallbackIndex = activePositionFallbackIndex;
+        this.#functionRules = functionRules.map(rule => new CSSFunctionRule(cssModel, rule));
+        this.#atRules = atRules.map(rule => new CSSAtRule(cssModel, rule));
+    }
+    async init({ matchedPayload, inheritedPayload, inlinePayload, attributesPayload, pseudoPayload, inheritedPseudoPayload, animationStylesPayload, transitionsStylePayload, inheritedAnimatedPayload, }) {
+        matchedPayload = cleanUserAgentPayload(matchedPayload);
+        for (const inheritedResult of inheritedPayload) {
+            inheritedResult.matchedCSSRules = cleanUserAgentPayload(inheritedResult.matchedCSSRules);
+        }
+        this.#environmentVariables = await this.cssModel().getEnvironmentVariables();
+        this.#mainDOMCascade = await this.buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload, animationStylesPayload, transitionsStylePayload, inheritedAnimatedPayload);
+        [this.#pseudoDOMCascades, this.#customHighlightPseudoDOMCascades] =
+            this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
+        for (const domCascade of Array.from(this.#customHighlightPseudoDOMCascades.values())
+            .concat(Array.from(this.#pseudoDOMCascades.values()))
+            .concat(this.#mainDOMCascade)) {
+            for (const style of domCascade.styles()) {
+                this.#styleToDOMCascade.set(style, domCascade);
+            }
+        }
+        for (const prop of this.#registeredProperties) {
+            this.#registeredPropertyMap.set(prop.propertyName(), prop);
+        }
+        for (const rule of this.#functionRules) {
+            this.#functionRuleMap.set(rule.functionName().text, rule);
+        }
+    }
+    async buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload, animationStylesPayload, transitionsStylePayload, inheritedAnimatedPayload) {
+        const nodeCascades = [];
+        const nodeStyles = [];
+        function addAttributesStyle() {
+            if (!attributesPayload) {
+                return;
+            }
+            const style = new CSSStyleDeclaration(this.#cssModel, null, attributesPayload, Type.Attributes);
+            this.#nodeForStyle.set(style, this.#node);
+            nodeStyles.push(style);
+        }
+        // Transition styles take precedence over animation styles & inline styles.
+        if (transitionsStylePayload) {
+            const style = new CSSStyleDeclaration(this.#cssModel, null, transitionsStylePayload, Type.Transition);
+            this.#nodeForStyle.set(style, this.#node);
+            nodeStyles.push(style);
+        }
+        // Animation styles take precedence over inline styles.
+        for (const animationsStyle of animationStylesPayload) {
+            const style = new CSSStyleDeclaration(this.#cssModel, null, animationsStyle.style, Type.Animation, animationsStyle.name);
+            this.#nodeForStyle.set(style, this.#node);
+            nodeStyles.push(style);
+        }
+        // Inline style takes precedence over regular and inherited rules.
+        if (inlinePayload && this.#node.nodeType() === Node.ELEMENT_NODE) {
+            const style = new CSSStyleDeclaration(this.#cssModel, null, inlinePayload, Type.Inline);
+            this.#nodeForStyle.set(style, this.#node);
+            nodeStyles.push(style);
+        }
+        // Add rules in reverse order to match the cascade order.
+        let addedAttributesStyle;
+        for (let i = matchedPayload.length - 1; i >= 0; --i) {
+            const rule = new CSSStyleRule(this.#cssModel, matchedPayload[i].rule);
+            if ((rule.isInjected() || rule.isUserAgent()) && !addedAttributesStyle) {
+                // Show element's Style Attributes after all author rules.
+                addedAttributesStyle = true;
+                addAttributesStyle.call(this);
+            }
+            this.#nodeForStyle.set(rule.style, this.#node);
+            nodeStyles.push(rule.style);
+            this.addMatchingSelectors(this.#node, rule, matchedPayload[i].matchingSelectors);
+        }
+        if (!addedAttributesStyle) {
+            addAttributesStyle.call(this);
+        }
+        nodeCascades.push(new NodeCascade(this, nodeStyles, this.#node, false /* #isInherited */));
+        // Walk the node structure and identify styles with inherited properties.
+        let parentNode = this.#node.parentNode;
+        const traverseParentInFlatTree = async (node) => {
+            if (node.hasAssignedSlot()) {
+                return await node.assignedSlot?.deferredNode.resolvePromise() ?? null;
+            }
+            return node.parentNode;
+        };
+        for (let i = 0; parentNode && inheritedPayload && i < inheritedPayload.length; ++i) {
+            const inheritedStyles = [];
+            const entryPayload = inheritedPayload[i];
+            const inheritedAnimatedEntryPayload = inheritedAnimatedPayload[i];
+            const inheritedInlineStyle = entryPayload.inlineStyle ?
+                new CSSStyleDeclaration(this.#cssModel, null, entryPayload.inlineStyle, Type.Inline) :
+                null;
+            const inheritedTransitionsStyle = inheritedAnimatedEntryPayload?.transitionsStyle ?
+                new CSSStyleDeclaration(this.#cssModel, null, inheritedAnimatedEntryPayload?.transitionsStyle, Type.Transition) :
+                null;
+            const inheritedAnimationStyles = inheritedAnimatedEntryPayload?.animationStyles?.map(animationStyle => new CSSStyleDeclaration(this.#cssModel, null, animationStyle.style, Type.Animation, animationStyle.name)) ??
+                [];
+            if (inheritedTransitionsStyle && containsInherited(inheritedTransitionsStyle)) {
+                this.#nodeForStyle.set(inheritedTransitionsStyle, parentNode);
+                inheritedStyles.push(inheritedTransitionsStyle);
+                this.#inheritedStyles.add(inheritedTransitionsStyle);
+            }
+            for (const inheritedAnimationsStyle of inheritedAnimationStyles) {
+                if (!containsInherited(inheritedAnimationsStyle)) {
+                    continue;
+                }
+                this.#nodeForStyle.set(inheritedAnimationsStyle, parentNode);
+                inheritedStyles.push(inheritedAnimationsStyle);
+                this.#inheritedStyles.add(inheritedAnimationsStyle);
+            }
+            if (inheritedInlineStyle && containsInherited(inheritedInlineStyle)) {
+                this.#nodeForStyle.set(inheritedInlineStyle, parentNode);
+                inheritedStyles.push(inheritedInlineStyle);
+                this.#inheritedStyles.add(inheritedInlineStyle);
+            }
+            const inheritedMatchedCSSRules = entryPayload.matchedCSSRules || [];
+            for (let j = inheritedMatchedCSSRules.length - 1; j >= 0; --j) {
+                const inheritedRule = new CSSStyleRule(this.#cssModel, inheritedMatchedCSSRules[j].rule);
+                this.addMatchingSelectors(parentNode, inheritedRule, inheritedMatchedCSSRules[j].matchingSelectors);
+                if (!containsInherited(inheritedRule.style)) {
+                    continue;
+                }
+                if (!containsCustomProperties(inheritedRule.style)) {
+                    if (containsStyle(nodeStyles, inheritedRule.style) ||
+                        containsStyle(this.#inheritedStyles, inheritedRule.style)) {
+                        continue;
+                    }
+                }
+                this.#nodeForStyle.set(inheritedRule.style, parentNode);
+                inheritedStyles.push(inheritedRule.style);
+                this.#inheritedStyles.add(inheritedRule.style);
+            }
+            const node = parentNode;
+            parentNode = await traverseParentInFlatTree(parentNode);
+            nodeCascades.push(new NodeCascade(this, inheritedStyles, node, true /* #isInherited */));
+        }
+        return new DOMInheritanceCascade(this, nodeCascades, this.#registeredProperties);
+    }
+    /**
+     * Pseudo rule matches received via the inspector protocol are grouped by pseudo type.
+     * For custom highlight pseudos, we need to instead group the rule matches by highlight
+     * name in order to produce separate cascades for each highlight name. This is necessary
+     * so that styles of ::highlight(foo) are not shown as overriding styles of ::highlight(bar).
+     *
+     * This helper function takes a list of rule matches and generates separate NodeCascades
+     * for each custom highlight name that was matched.
+     */
+    buildSplitCustomHighlightCascades(rules, node, isInherited, pseudoCascades) {
+        const splitHighlightRules = new Map();
+        for (let j = rules.length - 1; j >= 0; --j) {
+            const highlightNamesToMatchingSelectorIndices = customHighlightNamesToMatchingSelectorIndices(rules[j]);
+            for (const [highlightName, matchingSelectors] of highlightNamesToMatchingSelectorIndices) {
+                const pseudoRule = new CSSStyleRule(this.#cssModel, rules[j].rule);
+                this.#nodeForStyle.set(pseudoRule.style, node);
+                if (isInherited) {
+                    this.#inheritedStyles.add(pseudoRule.style);
+                }
+                this.addMatchingSelectors(node, pseudoRule, matchingSelectors);
+                const ruleListForHighlightName = splitHighlightRules.get(highlightName);
+                if (ruleListForHighlightName) {
+                    ruleListForHighlightName.push(pseudoRule.style);
+                }
+                else {
+                    splitHighlightRules.set(highlightName, [pseudoRule.style]);
+                }
+            }
+        }
+        for (const [highlightName, highlightStyles] of splitHighlightRules) {
+            const nodeCascade = new NodeCascade(this, highlightStyles, node, isInherited, true /* #isHighlightPseudoCascade*/);
+            const cascadeListForHighlightName = pseudoCascades.get(highlightName);
+            if (cascadeListForHighlightName) {
+                cascadeListForHighlightName.push(nodeCascade);
+            }
+            else {
+                pseudoCascades.set(highlightName, [nodeCascade]);
+            }
+        }
+    }
+    buildPseudoCascades(pseudoPayload, inheritedPseudoPayload) {
+        const pseudoInheritanceCascades = new Map();
+        const customHighlightPseudoInheritanceCascades = new Map();
+        if (!pseudoPayload) {
+            return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
+        }
+        const pseudoCascades = new Map();
+        const customHighlightPseudoCascades = new Map();
+        for (let i = 0; i < pseudoPayload.length; ++i) {
+            const entryPayload = pseudoPayload[i];
+            // PseudoElement nodes are not created unless "content" css property is set.
+            const pseudoElement = this.#node.pseudoElements().get(entryPayload.pseudoType)?.at(-1) || null;
+            const pseudoStyles = [];
+            const rules = entryPayload.matches || [];
+            if (entryPayload.pseudoType === "highlight" /* Protocol.DOM.PseudoType.Highlight */) {
+                this.buildSplitCustomHighlightCascades(rules, this.#node, false /* #isInherited */, customHighlightPseudoCascades);
+            }
+            else {
+                for (let j = rules.length - 1; j >= 0; --j) {
+                    const pseudoRule = new CSSStyleRule(this.#cssModel, rules[j].rule);
+                    pseudoStyles.push(pseudoRule.style);
+                    const nodeForStyle = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType) ? this.#node : pseudoElement;
+                    this.#nodeForStyle.set(pseudoRule.style, nodeForStyle);
+                    if (nodeForStyle) {
+                        this.addMatchingSelectors(nodeForStyle, pseudoRule, rules[j].matchingSelectors);
+                    }
+                }
+                const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
+                const nodeCascade = new NodeCascade(this, pseudoStyles, this.#node, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+                pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
+            }
+        }
+        if (inheritedPseudoPayload) {
+            let parentNode = this.#node.parentNode;
+            for (let i = 0; parentNode && i < inheritedPseudoPayload.length; ++i) {
+                const inheritedPseudoMatches = inheritedPseudoPayload[i].pseudoElements;
+                for (let j = 0; j < inheritedPseudoMatches.length; ++j) {
+                    const inheritedEntryPayload = inheritedPseudoMatches[j];
+                    const rules = inheritedEntryPayload.matches || [];
+                    if (inheritedEntryPayload.pseudoType === "highlight" /* Protocol.DOM.PseudoType.Highlight */) {
+                        this.buildSplitCustomHighlightCascades(rules, parentNode, true /* #isInherited */, customHighlightPseudoCascades);
+                    }
+                    else {
+                        const pseudoStyles = [];
+                        for (let k = rules.length - 1; k >= 0; --k) {
+                            const pseudoRule = new CSSStyleRule(this.#cssModel, rules[k].rule);
+                            pseudoStyles.push(pseudoRule.style);
+                            this.#nodeForStyle.set(pseudoRule.style, parentNode);
+                            this.#inheritedStyles.add(pseudoRule.style);
+                            this.addMatchingSelectors(parentNode, pseudoRule, rules[k].matchingSelectors);
+                        }
+                        const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(inheritedEntryPayload.pseudoType);
+                        const nodeCascade = new NodeCascade(this, pseudoStyles, parentNode, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+                        const cascadeListForPseudoType = pseudoCascades.get(inheritedEntryPayload.pseudoType);
+                        if (cascadeListForPseudoType) {
+                            cascadeListForPseudoType.push(nodeCascade);
+                        }
+                        else {
+                            pseudoCascades.set(inheritedEntryPayload.pseudoType, [nodeCascade]);
+                        }
+                    }
+                }
+                parentNode = parentNode.parentNode;
+            }
+        }
+        // Now that we've built the arrays of NodeCascades for each pseudo type, convert them into
+        // DOMInheritanceCascades.
+        for (const [pseudoType, nodeCascade] of pseudoCascades.entries()) {
+            pseudoInheritanceCascades.set(pseudoType, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
+        }
+        for (const [highlightName, nodeCascade] of customHighlightPseudoCascades.entries()) {
+            customHighlightPseudoInheritanceCascades.set(highlightName, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
+        }
+        return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
+    }
+    addMatchingSelectors(node, rule, matchingSelectorIndices) {
+        for (const matchingSelectorIndex of matchingSelectorIndices) {
+            const selector = rule.selectors[matchingSelectorIndex];
+            if (selector) {
+                this.setSelectorMatches(node, selector.text, true);
+            }
+        }
+    }
+    node() {
+        return this.#node;
+    }
+    cssModel() {
+        return this.#cssModel;
+    }
+    hasMatchingSelectors(rule) {
+        return (rule.selectors.length === 0 || this.getMatchingSelectors(rule).length > 0) && queryMatches(rule.style);
+    }
+    getParentLayoutNodeId() {
+        return this.#parentLayoutNodeId;
+    }
+    getMatchingSelectors(rule) {
+        const node = this.nodeForStyle(rule.style);
+        if (!node || typeof node.id !== 'number') {
+            return [];
+        }
+        const map = this.#matchingSelectors.get(node.id);
+        if (!map) {
+            return [];
+        }
+        const result = [];
+        for (let i = 0; i < rule.selectors.length; ++i) {
+            if (map.get(rule.selectors[i].text)) {
+                result.push(i);
+            }
+        }
+        return result;
+    }
+    async recomputeMatchingSelectors(rule) {
+        const node = this.nodeForStyle(rule.style);
+        if (!node) {
+            return;
+        }
+        const promises = [];
+        for (const selector of rule.selectors) {
+            promises.push(querySelector.call(this, node, selector.text));
+        }
+        await Promise.all(promises);
+        async function querySelector(node, selectorText) {
+            const ownerDocument = node.ownerDocument;
+            if (!ownerDocument) {
+                return;
+            }
+            // We assume that "matching" property does not ever change during the
+            // MatchedStyleResult's lifetime.
+            if (typeof node.id === 'number') {
+                const map = this.#matchingSelectors.get(node.id);
+                if (map?.has(selectorText)) {
+                    return;
+                }
+            }
+            if (typeof ownerDocument.id !== 'number') {
+                return;
+            }
+            const matchingNodeIds = await this.#node.domModel().querySelectorAll(ownerDocument.id, selectorText);
+            if (matchingNodeIds) {
+                if (typeof node.id === 'number') {
+                    this.setSelectorMatches(node, selectorText, matchingNodeIds.indexOf(node.id) !== -1);
+                }
+                else {
+                    this.setSelectorMatches(node, selectorText, false);
+                }
+            }
+        }
+    }
+    addNewRule(rule, node) {
+        this.#addedStyles.set(rule.style, node);
+        return this.recomputeMatchingSelectors(rule);
+    }
+    setSelectorMatches(node, selectorText, value) {
+        if (typeof node.id !== 'number') {
+            return;
+        }
+        let map = this.#matchingSelectors.get(node.id);
+        if (!map) {
+            map = new Map();
+            this.#matchingSelectors.set(node.id, map);
+        }
+        map.set(selectorText, value);
+    }
+    nodeStyles() {
+        Platform.assertNotNullOrUndefined(this.#mainDOMCascade);
+        return this.#mainDOMCascade.styles();
+    }
+    inheritedStyles() {
+        return this.#mainDOMCascade?.styles().filter(style => this.isInherited(style)) ?? [];
+    }
+    animationStyles() {
+        return this.#mainDOMCascade?.styles().filter(style => !this.isInherited(style) && style.type === Type.Animation) ??
+            [];
+    }
+    transitionsStyle() {
+        return this.#mainDOMCascade?.styles().find(style => !this.isInherited(style) && style.type === Type.Transition) ??
+            null;
+    }
+    registeredProperties() {
+        return this.#registeredProperties;
+    }
+    getRegisteredProperty(name) {
+        return this.#registeredPropertyMap.get(name);
+    }
+    getRegisteredFunction(name) {
+        const functionRule = this.#functionRuleMap.get(name);
+        return functionRule ? functionRule.nameWithParameters() : undefined;
+    }
+    functionRules() {
+        return this.#functionRules;
+    }
+    atRules() {
+        return this.#atRules;
+    }
+    keyframes() {
+        return this.#keyframes;
+    }
+    positionTryRules() {
+        return this.#positionTryRules;
+    }
+    activePositionFallbackIndex() {
+        return this.#activePositionFallbackIndex;
+    }
+    pseudoStyles(pseudoType) {
+        Platform.assertNotNullOrUndefined(this.#pseudoDOMCascades);
+        const domCascade = this.#pseudoDOMCascades.get(pseudoType);
+        return domCascade ? domCascade.styles() : [];
+    }
+    pseudoTypes() {
+        Platform.assertNotNullOrUndefined(this.#pseudoDOMCascades);
+        return new Set(this.#pseudoDOMCascades.keys());
+    }
+    customHighlightPseudoStyles(highlightName) {
+        Platform.assertNotNullOrUndefined(this.#customHighlightPseudoDOMCascades);
+        const domCascade = this.#customHighlightPseudoDOMCascades.get(highlightName);
+        return domCascade ? domCascade.styles() : [];
+    }
+    customHighlightPseudoNames() {
+        Platform.assertNotNullOrUndefined(this.#customHighlightPseudoDOMCascades);
+        return new Set(this.#customHighlightPseudoDOMCascades.keys());
+    }
+    nodeForStyle(style) {
+        return this.#addedStyles.get(style) || this.#nodeForStyle.get(style) || null;
+    }
+    availableCSSVariables(style) {
+        const domCascade = this.#styleToDOMCascade.get(style);
+        return domCascade ? domCascade.findAvailableCSSVariables(style) : [];
+    }
+    computeCSSVariable(style, variableName) {
+        if (style.parentRule instanceof CSSKeyframeRule) {
+            // The resolution of the variables inside of a CSS keyframe rule depends on where this keyframe rule is used.
+            // So, we need to find the style with active CSS property `animation-name` that equals to the keyframe's name.
+            const keyframeName = style.parentRule.parentRuleName();
+            const activeStyle = this.#mainDOMCascade?.styles().find(searchStyle => {
+                return searchStyle.allProperties().some(property => property.name === 'animation-name' && property.value === keyframeName &&
+                    this.#mainDOMCascade?.propertyState(property) === "Active" /* PropertyState.ACTIVE */);
+            });
+            if (!activeStyle) {
+                return null;
+            }
+            style = activeStyle;
+        }
+        const domCascade = this.#styleToDOMCascade.get(style);
+        return domCascade ? domCascade.computeCSSVariable(style, variableName) : null;
+    }
+    computeAttribute(style, attributeName, type) {
+        const domCascade = this.#styleToDOMCascade.get(style);
+        return domCascade ? domCascade.computeAttribute(style, attributeName, type) : null;
+    }
+    originatingNodeForStyle(style) {
+        let node = this.nodeForStyle(style) ?? this.node();
+        // If it's a pseudo-element, we need to find the originating element.
+        while (node?.pseudoType()) {
+            node = node.parentNode;
+        }
+        return node;
+    }
+    rawAttributeValueFromStyle(style, attributeName) {
+        const node = this.originatingNodeForStyle(style);
+        if (!node) {
+            return null;
+        }
+        return node.getAttribute(attributeName) ?? null;
+    }
+    resolveProperty(name, ownerStyle) {
+        return this.#styleToDOMCascade.get(ownerStyle)?.resolveProperty(name, ownerStyle) ?? null;
+    }
+    resolveGlobalKeyword(property, keyword) {
+        const resolved = this.#styleToDOMCascade.get(property.ownerStyle)?.resolveGlobalKeyword(property, keyword);
+        return resolved ? new CSSValueSource(resolved) : null;
+    }
+    isInherited(style) {
+        return this.#inheritedStyles.has(style);
+    }
+    propertyState(property) {
+        const domCascade = this.#styleToDOMCascade.get(property.ownerStyle);
+        return domCascade ? domCascade.propertyState(property) : null;
+    }
+    resetActiveProperties() {
+        Platform.assertNotNullOrUndefined(this.#mainDOMCascade);
+        Platform.assertNotNullOrUndefined(this.#pseudoDOMCascades);
+        Platform.assertNotNullOrUndefined(this.#customHighlightPseudoDOMCascades);
+        this.#mainDOMCascade.reset();
+        for (const domCascade of this.#pseudoDOMCascades.values()) {
+            domCascade.reset();
+        }
+        for (const domCascade of this.#customHighlightPseudoDOMCascades.values()) {
+            domCascade.reset();
+        }
+    }
+    propertyMatchers(style, computedStyles) {
+        return [
+            new VariableMatcher(this, style),
+            new ColorMatcher(() => computedStyles?.get('color') ?? null),
+            new ColorMixMatcher(),
+            new URLMatcher(),
+            new AngleMatcher(),
+            new LinkableNameMatcher(),
+            new BezierMatcher(),
+            new StringMatcher(),
+            new ShadowMatcher(),
+            new LightDarkColorMatcher(style),
+            new GridTemplateMatcher(),
+            new LinearGradientMatcher(),
+            new AnchorFunctionMatcher(),
+            new PositionAnchorMatcher(),
+            new FlexGridGridLanesMatcher(),
+            new PositionTryMatcher(),
+            new LengthMatcher(),
+            new MathFunctionMatcher(),
+            new CustomFunctionMatcher(),
+            new AutoBaseMatcher(),
+            new BinOpMatcher(),
+            new RelativeColorChannelMatcher(),
+            new AttributeMatcher(this, style),
+            new EnvFunctionMatcher(this),
+        ];
+    }
+    environmentVariable(name) {
+        return this.#environmentVariables[name];
+    }
+}
+class NodeCascade {
+    #matchedStyles;
+    styles;
+    #isInherited;
+    #isHighlightPseudoCascade;
+    propertiesState = new Map();
+    activeProperties = new Map();
+    #node;
+    constructor(matchedStyles, styles, node, isInherited, isHighlightPseudoCascade = false) {
+        this.#matchedStyles = matchedStyles;
+        this.styles = styles;
+        this.#isInherited = isInherited;
+        this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
+        this.#node = node;
+    }
+    computeActiveProperties() {
+        this.propertiesState.clear();
+        this.activeProperties.clear();
+        for (let i = this.styles.length - 1; i >= 0; i--) {
+            const style = this.styles[i];
+            const rule = style.parentRule;
+            // Compute cascade for CSSStyleRules only.
+            if (rule && !(rule instanceof CSSStyleRule)) {
+                continue;
+            }
+            if (rule && !this.#matchedStyles.hasMatchingSelectors(rule)) {
+                continue;
+            }
+            for (const property of style.allProperties()) {
+                // Do not pick non-inherited properties from inherited styles.
+                const metadata = cssMetadata();
+                // All properties are inherited for highlight pseudos.
+                if (this.#isInherited && !this.#isHighlightPseudoCascade && !metadata.isPropertyInherited(property.name)) {
+                    continue;
+                }
+                // When a property does not have a range in an otherwise ranged CSSStyleDeclaration,
+                // we consider it as a non-leading property (see computeLeadingProperties()), and most
+                // of them are computed longhands. We exclude these from activeProperties calculation,
+                // and use parsed longhands instead (see below).
+                if (style.range && !property.range) {
+                    continue;
+                }
+                if (!property.activeInStyle()) {
+                    this.propertiesState.set(property, "Overloaded" /* PropertyState.OVERLOADED */);
+                    continue;
+                }
+                // If the custom property was registered with `inherits: false;`, inherited properties are invalid.
+                if (this.#isInherited) {
+                    const registration = this.#matchedStyles.getRegisteredProperty(property.name);
+                    if (registration && !registration.inherits()) {
+                        this.propertiesState.set(property, "Overloaded" /* PropertyState.OVERLOADED */);
+                        continue;
+                    }
+                }
+                const canonicalName = metadata.canonicalPropertyName(property.name);
+                this.updatePropertyState(property, canonicalName);
+                for (const longhand of property.getLonghandProperties()) {
+                    if (metadata.isCSSPropertyName(longhand.name)) {
+                        this.updatePropertyState(longhand, longhand.name);
+                    }
+                }
+            }
+        }
+    }
+    #treeScopeDistance(property) {
+        if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
+            return -1;
+        }
+        const root = this.#node.getTreeRoot();
+        const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
+        if (nodeId === undefined) {
+            return -1;
+        }
+        let distance = 0;
+        for (let ancestor = this.#node; ancestor; ancestor = ancestor.parentNode) {
+            if (ancestor.backendNodeId() === nodeId) {
+                return distance;
+            }
+            distance++;
+        }
+        return -1;
+    }
+    #needsCascadeContextStep() {
+        if (!this.#node.isInShadowTree()) {
+            return false;
+        }
+        if (this.#node.ancestorShadowRoot()?.shadowRootType() === 'user-agent') {
+            // In UA shadow dom, only standards-track pseudo elements override style attributes. -webkit-* and -internal-*
+            // pseudos are still exempt from that to retain legacy behavior.
+            const pseudoElement = this.#node.getAttribute('pseudo');
+            return !pseudoElement?.startsWith('-webkit-') && !pseudoElement?.startsWith('-internal-');
+        }
+        return true;
+    }
+    updatePropertyState(propertyWithHigherSpecificity, canonicalName) {
+        const activeProperty = this.activeProperties.get(canonicalName);
+        if (activeProperty?.important && !propertyWithHigherSpecificity.important ||
+            activeProperty && this.#needsCascadeContextStep() &&
+                this.#treeScopeDistance(activeProperty) > this.#treeScopeDistance(propertyWithHigherSpecificity)) {
+            this.propertiesState.set(propertyWithHigherSpecificity, "Overloaded" /* PropertyState.OVERLOADED */);
+            return;
+        }
+        if (activeProperty) {
+            this.propertiesState.set(activeProperty, "Overloaded" /* PropertyState.OVERLOADED */);
+        }
+        this.propertiesState.set(propertyWithHigherSpecificity, "Active" /* PropertyState.ACTIVE */);
+        this.activeProperties.set(canonicalName, propertyWithHigherSpecificity);
+    }
+}
+function isRegular(declaration) {
+    return 'ownerStyle' in declaration;
+}
+export class CSSValueSource {
+    declaration;
+    constructor(declaration) {
+        this.declaration = declaration;
+    }
+    get value() {
+        return isRegular(this.declaration) ? this.declaration.value : this.declaration.initialValue();
+    }
+    get style() {
+        return isRegular(this.declaration) ? this.declaration.ownerStyle : this.declaration.style();
+    }
+    get name() {
+        return isRegular(this.declaration) ? this.declaration.name : this.declaration.propertyName();
+    }
+}
+class SCCRecordEntry {
+    nodeCascade;
+    name;
+    discoveryTime;
+    rootDiscoveryTime;
+    get isRootEntry() {
+        return this.rootDiscoveryTime === this.discoveryTime;
+    }
+    updateRoot(neighbor) {
+        this.rootDiscoveryTime = Math.min(this.rootDiscoveryTime, neighbor.rootDiscoveryTime);
+    }
+    constructor(nodeCascade, name, discoveryTime) {
+        this.nodeCascade = nodeCascade;
+        this.name = name;
+        this.discoveryTime = discoveryTime;
+        this.rootDiscoveryTime = discoveryTime;
+    }
+}
+class SCCRecord {
+    #time = 0;
+    #stack = [];
+    #entries = new Map();
+    get(nodeCascade, variable) {
+        return this.#entries.get(nodeCascade)?.get(variable);
+    }
+    add(nodeCascade, variable) {
+        const existing = this.get(nodeCascade, variable);
+        if (existing) {
+            return existing;
+        }
+        const entry = new SCCRecordEntry(nodeCascade, variable, this.#time++);
+        this.#stack.push(entry);
+        let map = this.#entries.get(nodeCascade);
+        if (!map) {
+            map = new Map();
+            this.#entries.set(nodeCascade, map);
+        }
+        map.set(variable, entry);
+        return entry;
+    }
+    isInInProgressSCC(childRecord) {
+        return this.#stack.includes(childRecord);
+    }
+    finishSCC(root) {
+        const startIndex = this.#stack.lastIndexOf(root);
+        console.assert(startIndex >= 0, 'Root is not an in-progress scc');
+        return this.#stack.splice(startIndex);
+    }
+}
+function* forEach(array, startAfter) {
+    const startIdx = startAfter !== undefined ? array.indexOf(startAfter) + 1 : 0;
+    for (let i = startIdx; i < array.length; ++i) {
+        yield array[i];
+    }
+}
+class DOMInheritanceCascade {
+    #propertiesState = new Map();
+    #availableCSSVariables = new Map();
+    #computedCSSVariables = new Map();
+    #styleToNodeCascade = new Map();
+    #initialized = false;
+    #nodeCascades;
+    #registeredProperties;
+    #matchedStyles;
+    constructor(matchedStyles, nodeCascades, registeredProperties) {
+        this.#nodeCascades = nodeCascades;
+        this.#matchedStyles = matchedStyles;
+        this.#registeredProperties = registeredProperties;
+        for (const nodeCascade of nodeCascades) {
+            for (const style of nodeCascade.styles) {
+                this.#styleToNodeCascade.set(style, nodeCascade);
+            }
+        }
+    }
+    findAvailableCSSVariables(style) {
+        const nodeCascade = this.#styleToNodeCascade.get(style);
+        if (!nodeCascade) {
+            return [];
+        }
+        this.ensureInitialized();
+        const availableCSSVariables = this.#availableCSSVariables.get(nodeCascade);
+        if (!availableCSSVariables) {
+            return [];
+        }
+        return Array.from(availableCSSVariables.keys());
+    }
+    #findPropertyInPreviousStyle(property, filter) {
+        const cascade = this.#styleToNodeCascade.get(property.ownerStyle);
+        if (!cascade) {
+            return null;
+        }
+        for (const style of forEach(cascade.styles, property.ownerStyle)) {
+            const candidate = style.allProperties().findLast(candidate => candidate.name === property.name && filter(candidate));
+            if (candidate) {
+                return candidate;
+            }
+        }
+        return null;
+    }
+    resolveProperty(name, ownerStyle) {
+        const cascade = this.#styleToNodeCascade.get(ownerStyle);
+        if (!cascade) {
+            return null;
+        }
+        for (const style of cascade.styles) {
+            const candidate = style.allProperties().findLast(candidate => candidate.name === name);
+            if (candidate) {
+                return candidate;
+            }
+        }
+        return this.#findPropertyInParentCascadeIfInherited({ name, ownerStyle });
+    }
+    #findPropertyInParentCascade(property) {
+        const nodeCascade = this.#styleToNodeCascade.get(property.ownerStyle);
+        if (!nodeCascade) {
+            return null;
+        }
+        for (const cascade of forEach(this.#nodeCascades, nodeCascade)) {
+            for (const style of cascade.styles) {
+                const inheritedProperty = style.allProperties().findLast(inheritedProperty => inheritedProperty.name === property.name);
+                if (inheritedProperty) {
+                    return inheritedProperty;
+                }
+            }
+        }
+        return null;
+    }
+    #findPropertyInParentCascadeIfInherited(property) {
+        if (!cssMetadata().isPropertyInherited(property.name) ||
+            !(this.#findCustomPropertyRegistration(property.name)?.inherits() ?? true)) {
+            return null;
+        }
+        return this.#findPropertyInParentCascade(property);
+    }
+    #findCustomPropertyRegistration(property) {
+        const registration = this.#registeredProperties.find(registration => registration.propertyName() === property);
+        return registration ? registration : null;
+    }
+    resolveGlobalKeyword(property, keyword) {
+        const isPreviousLayer = (other) => {
+            // If there's no parent rule on then it isn't layered and is thus not in a previous one.
+            if (!(other.ownerStyle.parentRule instanceof CSSStyleRule)) {
+                return false;
+            }
+            // Element-attached style -> author origin counts as a previous layer transition for revert-layer.
+            if (property.ownerStyle.type === Type.Inline) {
+                return true;
+            }
+            // Compare layers
+            if (property.ownerStyle.parentRule instanceof CSSStyleRule &&
+                other.ownerStyle.parentRule?.origin === "regular" /* Protocol.CSS.StyleSheetOrigin.Regular */) {
+                return JSON.stringify(other.ownerStyle.parentRule.layers) !==
+                    JSON.stringify(property.ownerStyle.parentRule.layers);
+            }
+            return false;
+        };
+        switch (keyword) {
+            case "initial" /* CSSWideKeyword.INITIAL */:
+                return this.#findCustomPropertyRegistration(property.name);
+            case "inherit" /* CSSWideKeyword.INHERIT */:
+                return this.#findPropertyInParentCascade(property) ?? this.#findCustomPropertyRegistration(property.name);
+            case "revert" /* CSSWideKeyword.REVERT */:
+                return this.#findPropertyInPreviousStyle(property, other => other.ownerStyle.parentRule !== null &&
+                    other.ownerStyle.parentRule.origin !==
+                        (property.ownerStyle.parentRule?.origin ?? "regular" /* Protocol.CSS.StyleSheetOrigin.Regular */)) ??
+                    this.resolveGlobalKeyword(property, "unset" /* CSSWideKeyword.UNSET */);
+            case "revert-layer" /* CSSWideKeyword.REVERT_LAYER */:
+                return this.#findPropertyInPreviousStyle(property, isPreviousLayer) ??
+                    this.resolveGlobalKeyword(property, "revert" /* CSSWideKeyword.REVERT */);
+            case "unset" /* CSSWideKeyword.UNSET */:
+                return this.#findPropertyInParentCascadeIfInherited(property) ??
+                    this.#findCustomPropertyRegistration(property.name);
+        }
+    }
+    computeCSSVariable(style, variableName) {
+        this.ensureInitialized();
+        const nodeCascade = this.#styleToNodeCascade.get(style);
+        if (!nodeCascade) {
+            return null;
+        }
+        return this.#computeCSSVariable(nodeCascade, variableName);
+    }
+    #computeCSSVariable(nodeCascade, variableName, sccRecord = new SCCRecord()) {
+        const availableCSSVariables = this.#availableCSSVariables.get(nodeCascade);
+        const computedCSSVariables = this.#computedCSSVariables.get(nodeCascade);
+        if (!computedCSSVariables || !availableCSSVariables?.has(variableName)) {
+            return null;
+        }
+        if (computedCSSVariables?.has(variableName)) {
+            return computedCSSVariables.get(variableName) || null;
+        }
+        let definedValue = availableCSSVariables.get(variableName);
+        if (definedValue === undefined || definedValue === null) {
+            return null;
+        }
+        if (definedValue.declaration.declaration instanceof CSSProperty && definedValue.declaration.value &&
+            CSSMetadata.isCSSWideKeyword(definedValue.declaration.value)) {
+            const resolvedProperty = this.resolveGlobalKeyword(definedValue.declaration.declaration, definedValue.declaration.value);
+            if (!resolvedProperty) {
+                return definedValue;
+            }
+            const declaration = new CSSValueSource(resolvedProperty);
+            const { value } = declaration;
+            if (!value) {
+                return definedValue;
+            }
+            definedValue = { declaration, value };
+        }
+        const ast = PropertyParser.tokenizeDeclaration(`--${variableName}`, definedValue.value);
+        if (!ast) {
+            return null;
+        }
+        return this.#walkTree(nodeCascade, ast, definedValue.declaration.style, variableName, sccRecord, definedValue.declaration);
+    }
+    computeAttribute(style, attributeName, type) {
+        this.ensureInitialized();
+        const nodeCascade = this.#styleToNodeCascade.get(style);
+        if (!nodeCascade) {
+            return null;
+        }
+        return this.#computeAttribute(nodeCascade, style, attributeName, type, new SCCRecord());
+    }
+    attributeValueAsType(style, attributeName, type) {
+        const rawValue = this.#matchedStyles.rawAttributeValueFromStyle(style, attributeName);
+        if (rawValue === null) {
+            return null;
+        }
+        return localEvalCSS(rawValue, type);
+    }
+    attributeValueWithSubstitutions(nodeCascade, style, attributeName, sccRecord) {
+        const rawValue = this.#matchedStyles.rawAttributeValueFromStyle(style, attributeName);
+        if (rawValue === null) {
+            return null;
+        }
+        const ast = PropertyParser.tokenizeDeclaration('--property', rawValue);
+        if (!ast) {
+            return null;
+        }
+        return this.#walkTree(nodeCascade, ast, style, `attr(${attributeName})`, sccRecord)?.value ?? null;
+    }
+    #computeAttribute(nodeCascade, style, attributeName, type, sccRecord = new SCCRecord()) {
+        if (type.isCSSTokens) {
+            const value = this.attributeValueWithSubstitutions(nodeCascade, style, attributeName, sccRecord);
+            if (value !== null && localEvalCSS(value, type.type) !== null) {
+                return value;
+            }
+            return null;
+        }
+        return this.attributeValueAsType(style, attributeName, type.type);
+    }
+    #walkTree(outerNodeCascade, ast, parentStyle, substitutionName, sccRecord, declaration) {
+        const record = sccRecord.add(outerNodeCascade, substitutionName);
+        const computedCSSVariablesMap = this.#computedCSSVariables;
+        const innerNodeCascade = this.#styleToNodeCascade.get(parentStyle);
+        // While computing CSS variable and attribute values we need to detect declaration cycles. Every declaration on the cycle is
+        // invalid. However, var()s outside of the cycle that reference a property on the cycle are not automatically
+        // invalid, but rather use the fallback value. We use a version of Tarjan's algorithm to detect cycles, which are
+        // SCCs on the custom property dependency graph. Computing variable values is DFS. When encountering a previously
+        // unseen variable, we record its discovery time. We keep a stack of visited variables and detect cycles when we
+        // find a reference to a variable already on the stack. For each node we also keep track of the "root" of the
+        // corresponding SCC, which is the node in that component with the smallest discovery time. This is determined by
+        // bubbling up the minimum discovery time whenever we close a cycle.
+        const matching = PropertyParser.BottomUpTreeMatching.walk(ast, [
+            new BaseVariableMatcher(match => {
+                const { value, mayFallback } = recurseWithCycleDetection(match.name, nodeCascade => this.#computeCSSVariable(nodeCascade, match.name, sccRecord)?.value ?? null);
+                if (!mayFallback || value !== null) {
+                    return value;
+                }
+                // Variable reference is not resolved, use the fallback.
+                if (!match.fallback) {
+                    return null;
+                }
+                return evaluateFallback(match.fallback, match.matching);
+            }),
+            new EnvFunctionMatcher(this.#matchedStyles),
+            new AttributeMatcher(this.#matchedStyles, parentStyle, match => {
+                const recordName = `attr(${match.name})`;
+                let attributeValue = null;
+                if (!match.isCSSTokens) {
+                    const { value, mayFallback } = recurseWithCycleDetection(recordName, () => this.attributeValueAsType(parentStyle, match.name, match.cssType()));
+                    if (value === null && !mayFallback) {
+                        return null;
+                    }
+                    attributeValue = value;
+                }
+                else {
+                    const { value, mayFallback } = recurseWithCycleDetection(recordName, nodeCascade => this.attributeValueWithSubstitutions(nodeCascade, parentStyle, match.name, sccRecord));
+                    if (value === null && !mayFallback) {
+                        return null;
+                    }
+                    if (value !== null && localEvalCSS(value, match.cssType()) !== null) {
+                        attributeValue = value;
+                    }
+                }
+                if (attributeValue !== null) {
+                    return attributeValue;
+                }
+                // Variable reference is not resolved, use the fallback.
+                if (!match.fallback || !match.isValidType) {
+                    // Except in this case, we use the default value for the type.
+                    return defaultValueForCSSType(match.type);
+                }
+                return evaluateFallback(match.fallback, match.matching);
+            })
+        ]);
+        const decl = PropertyParser.ASTUtils.siblings(PropertyParser.ASTUtils.declValue(matching.ast.tree));
+        const declText = decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
+        const hasUnresolvedSubstitutions = decl.length > 0 && matching.hasUnresolvedSubstitutionsRange(decl[0], decl[decl.length - 1]);
+        const computedText = hasUnresolvedSubstitutions ? null : declText;
+        const outerComputedCSSVariables = computedCSSVariablesMap.get(outerNodeCascade);
+        if (!outerComputedCSSVariables) {
+            return null;
+        }
+        if (record.isRootEntry) {
+            // Variables are kept on the stack until all descendents in the same SCC have been visited. That's the case when
+            // completing the recursion on the root of the SCC.
+            const scc = sccRecord.finishSCC(record);
+            if (scc.length > 1) {
+                for (const entry of scc) {
+                    console.assert(entry.nodeCascade === outerNodeCascade, 'Circles should be within the cascade');
+                    outerComputedCSSVariables.set(entry.name, null);
+                }
+                return null;
+            }
+        }
+        if (computedText === null) {
+            outerComputedCSSVariables.set(substitutionName, null);
+            return null;
+        }
+        const cssVariableValue = { value: computedText, declaration };
+        outerComputedCSSVariables.set(substitutionName, cssVariableValue);
+        return cssVariableValue;
+        function recurseWithCycleDetection(recordName, func) {
+            if (!innerNodeCascade) {
+                return { value: null, mayFallback: false };
+            }
+            const childRecord = sccRecord.get(innerNodeCascade, recordName);
+            if (childRecord) {
+                if (sccRecord.isInInProgressSCC(childRecord)) {
+                    // Cycle detected, update the root.
+                    record.updateRoot(childRecord);
+                    return { value: null, mayFallback: false };
+                }
+                // We've seen the variable before, so we can look up the text directly.
+                return {
+                    value: computedCSSVariablesMap.get(innerNodeCascade)?.get(recordName)?.value ?? null,
+                    mayFallback: false
+                };
+            }
+            const value = func(innerNodeCascade);
+            // Variable reference is resolved, so return it.
+            const newChildRecord = sccRecord.get(innerNodeCascade, recordName);
+            // The SCC record for the referenced variable may not exist if the var was already computed in a previous
+            // iteration. That means it's in a different SCC.
+            newChildRecord && record.updateRoot(newChildRecord);
+            return { value, mayFallback: true };
+        }
+        function evaluateFallback(fallback, matching) {
+            if (fallback.length === 0) {
+                return '';
+            }
+            if (matching.hasUnresolvedSubstitutionsRange(fallback[0], fallback[fallback.length - 1])) {
+                return null;
+            }
+            return matching.getComputedTextRange(fallback[0], fallback[fallback.length - 1]);
+        }
+    }
+    styles() {
+        return Array.from(this.#styleToNodeCascade.keys());
+    }
+    propertyState(property) {
+        this.ensureInitialized();
+        return this.#propertiesState.get(property) || null;
+    }
+    reset() {
+        this.#initialized = false;
+        this.#propertiesState.clear();
+        this.#availableCSSVariables.clear();
+        this.#computedCSSVariables.clear();
+    }
+    ensureInitialized() {
+        if (this.#initialized) {
+            return;
+        }
+        this.#initialized = true;
+        const activeProperties = new Map();
+        for (const nodeCascade of this.#nodeCascades) {
+            nodeCascade.computeActiveProperties();
+            for (const [property, state] of nodeCascade.propertiesState) {
+                if (state === "Overloaded" /* PropertyState.OVERLOADED */) {
+                    this.#propertiesState.set(property, "Overloaded" /* PropertyState.OVERLOADED */);
+                    continue;
+                }
+                const canonicalName = cssMetadata().canonicalPropertyName(property.name);
+                if (activeProperties.has(canonicalName)) {
+                    this.#propertiesState.set(property, "Overloaded" /* PropertyState.OVERLOADED */);
+                    continue;
+                }
+                activeProperties.set(canonicalName, property);
+                this.#propertiesState.set(property, "Active" /* PropertyState.ACTIVE */);
+            }
+        }
+        // If every longhand of the shorthand is not active, then the shorthand is not active too.
+        for (const [canonicalName, shorthandProperty] of activeProperties) {
+            const shorthandStyle = shorthandProperty.ownerStyle;
+            const longhands = shorthandProperty.getLonghandProperties();
+            if (!longhands.length) {
+                continue;
+            }
+            let hasActiveLonghands = false;
+            for (const longhand of longhands) {
+                const longhandCanonicalName = cssMetadata().canonicalPropertyName(longhand.name);
+                const longhandActiveProperty = activeProperties.get(longhandCanonicalName);
+                if (!longhandActiveProperty) {
+                    continue;
+                }
+                if (longhandActiveProperty.ownerStyle === shorthandStyle) {
+                    hasActiveLonghands = true;
+                    break;
+                }
+            }
+            if (hasActiveLonghands) {
+                continue;
+            }
+            activeProperties.delete(canonicalName);
+            this.#propertiesState.set(shorthandProperty, "Overloaded" /* PropertyState.OVERLOADED */);
+        }
+        // Work inheritance chain backwards to compute visible CSS Variables.
+        const accumulatedCSSVariables = new Map();
+        for (const rule of this.#registeredProperties) {
+            const initialValue = rule.initialValue();
+            accumulatedCSSVariables.set(rule.propertyName(), initialValue !== null ? { value: initialValue, declaration: new CSSValueSource(rule) } : null);
+        }
+        for (let i = this.#nodeCascades.length - 1; i >= 0; --i) {
+            const nodeCascade = this.#nodeCascades[i];
+            const variableNames = [];
+            for (const entry of nodeCascade.activeProperties.entries()) {
+                const propertyName = entry[0];
+                const property = entry[1];
+                if (propertyName.startsWith('--')) {
+                    accumulatedCSSVariables.set(propertyName, { value: property.value, declaration: new CSSValueSource(property) });
+                    variableNames.push(propertyName);
+                }
+            }
+            const availableCSSVariablesMap = new Map(accumulatedCSSVariables);
+            const computedVariablesMap = new Map();
+            this.#availableCSSVariables.set(nodeCascade, availableCSSVariablesMap);
+            this.#computedCSSVariables.set(nodeCascade, computedVariablesMap);
+            for (const variableName of variableNames) {
+                const prevValue = accumulatedCSSVariables.get(variableName);
+                accumulatedCSSVariables.delete(variableName);
+                const computedValue = this.#computeCSSVariable(nodeCascade, variableName);
+                if (prevValue && computedValue?.value === prevValue.value) {
+                    computedValue.declaration = prevValue.declaration;
+                }
+                accumulatedCSSVariables.set(variableName, computedValue);
+            }
+        }
+    }
+}