chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -3,22 +3,25 @@
 // found in the LICENSE file.
 
 import * as Protocol from '../../generated/protocol.js';
+import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Platform from '../platform/platform.js';
 
 import {CSSMetadata, cssMetadata, CSSWideKeyword} from './CSSMetadata.js';
 import type {CSSModel} from './CSSModel.js';
 import {CSSProperty} from './CSSProperty.js';
 import * as PropertyParser from './CSSPropertyParser.js';
-import type {Match, Matcher} from './CSSPropertyParser.js';
+import type {Match, Matcher, SyntaxTree} from './CSSPropertyParser.js';
 import {
   AnchorFunctionMatcher,
   AngleMatcher,
+  AttributeMatcher,
   AutoBaseMatcher,
   BaseVariableMatcher,
   BezierMatcher,
   BinOpMatcher,
   ColorMatcher,
   ColorMixMatcher,
+  defaultValueForCSSType,
   EnvFunctionMatcher,
   FlexGridMatcher,
   GridTemplateMatcher,
@@ -26,6 +29,7 @@ import {
   LightDarkColorMatcher,
   LinearGradientMatcher,
   LinkableNameMatcher,
+  localEvalCSS,
   MathFunctionMatcher,
   PositionAnchorMatcher,
   PositionTryMatcher,
@@ -212,6 +216,11 @@ export interface CSSMatchedStylesPayload {
   functionRules: Protocol.CSS.CSSFunctionRule[];
 }
 
+export interface CSSType {
+  type: string;
+  isCSSTokens: boolean;
+}
+
 export class CSSRegisteredProperty {
   #registration: Protocol.CSS.CSSPropertyRegistration|CSSPropertyRule;
   #cssModel: CSSModel;
@@ -854,6 +863,11 @@ export class CSSMatchedStyles {
     return domCascade ? domCascade.computeCSSVariable(style, variableName) : null;
   }
 
+  computeAttribute(style: CSSStyleDeclaration, attributeName: string, type: CSSType): string|null {
+    const domCascade = this.#styleToDOMCascade.get(style);
+    return domCascade ? domCascade.computeAttribute(style, attributeName, type) : null;
+  }
+
   resolveProperty(name: string, ownerStyle: CSSStyleDeclaration): CSSProperty|null {
     return this.#styleToDOMCascade.get(ownerStyle)?.resolveProperty(name, ownerStyle) ?? null;
   }
@@ -909,6 +923,7 @@ export class CSSMatchedStyles {
       new AutoBaseMatcher(),
       new BinOpMatcher(),
       new RelativeColorChannelMatcher(),
+      new AttributeMatcher(this, style),
       new EnvFunctionMatcher(this),
     ];
   }
@@ -1031,6 +1046,10 @@ export interface CSSVariableValue {
   declaration: CSSValueSource;
 }
 
+interface CSSAttributeValue {
+  value: string;
+}
+
 class SCCRecordEntry {
   private rootDiscoveryTime: number;
   get isRootEntry(): boolean {
@@ -1090,7 +1109,7 @@ function* forEach<T>(array: T[], startAfter?: T): Generator<T> {
 class DOMInheritanceCascade {
   readonly #propertiesState = new Map<CSSProperty, PropertyState>();
   readonly #availableCSSVariables = new Map<NodeCascade, Map<string, CSSVariableValue|null>>();
-  readonly #computedCSSVariables = new Map<NodeCascade, Map<string, CSSVariableValue|null>>();
+  readonly #computedCSSVariables = new Map<NodeCascade, Map<string, CSSVariableValue|CSSAttributeValue|null>>();
   readonly #styleToNodeCascade = new Map<CSSStyleDeclaration, NodeCascade>();
   #initialized = false;
   readonly #nodeCascades: NodeCascade[];
@@ -1225,11 +1244,11 @@ class DOMInheritanceCascade {
   }
 
   computeCSSVariable(style: CSSStyleDeclaration, variableName: string): CSSVariableValue|null {
+    this.ensureInitialized();
     const nodeCascade = this.#styleToNodeCascade.get(style);
     if (!nodeCascade) {
       return null;
     }
-    this.ensureInitialized();
     return this.innerComputeCSSVariable(nodeCascade, variableName);
   }
 
@@ -1242,7 +1261,7 @@ class DOMInheritanceCascade {
     }
 
     if (computedCSSVariables?.has(variableName)) {
-      return computedCSSVariables.get(variableName) || null;
+      return (computedCSSVariables.get(variableName) as CSSVariableValue | null | undefined) || null;
     }
 
     let definedValue = availableCSSVariables.get(variableName);
@@ -1270,7 +1289,71 @@ class DOMInheritanceCascade {
       return null;
     }
 
-    // While computing CSS variable values we need to detect declaration cycles. Every declaration on the cycle is
+    return this.innerWalkTree(
+               nodeCascade, ast, definedValue.declaration.style, variableName, sccRecord, definedValue.declaration) as
+        CSSVariableValue |
+        null;
+  }
+
+  computeAttribute(style: CSSStyleDeclaration, attributeName: string, type: CSSType): string|null {
+    this.ensureInitialized();
+    const nodeCascade = this.#styleToNodeCascade.get(style);
+    if (!nodeCascade) {
+      return null;
+    }
+    return this.innerComputeAttribute(nodeCascade, style, attributeName, type, new SCCRecord());
+  }
+
+  private rawAttributeValue(style: CSSStyleDeclaration, attributeName: string): string|null {
+    const node = this.#matchedStyles.nodeForStyle(style) ?? this.#matchedStyles.node();
+    if (!node) {
+      return null;
+    }
+    return node.getAttribute(attributeName) ?? null;
+  }
+
+  private attributeValueAsType(style: CSSStyleDeclaration, attributeName: string, type: string): string|null {
+    const rawValue = this.rawAttributeValue(style, attributeName);
+    if (rawValue === null) {
+      return null;
+    }
+    return localEvalCSS(rawValue, type);
+  }
+
+  private attributeValueWithSubstitutions(
+      nodeCascade: NodeCascade, style: CSSStyleDeclaration, attributeName: string, sccRecord: SCCRecord): string|null {
+    const rawValue = this.rawAttributeValue(style, attributeName);
+    if (rawValue === null) {
+      return null;
+    }
+    const ast = PropertyParser.tokenizeDeclaration('--property', rawValue);
+    if (!ast) {
+      return null;
+    }
+    return this.innerWalkTree(nodeCascade, ast, style, `attr(${attributeName})`, sccRecord)?.value ?? null;
+  }
+
+  private innerComputeAttribute(
+      nodeCascade: NodeCascade, style: CSSStyleDeclaration, attributeName: string, type: CSSType,
+      sccRecord = new SCCRecord()): string|null {
+    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);
+  }
+
+  private innerWalkTree(
+      outerNodeCascade: NodeCascade, ast: SyntaxTree, parentStyle: CSSStyleDeclaration, substitutionName: string,
+      sccRecord: SCCRecord, declaration?: CSSValueSource): CSSVariableValue|CSSAttributeValue|null {
+    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
@@ -1278,54 +1361,65 @@ class DOMInheritanceCascade {
     // 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 record = sccRecord.add(nodeCascade, variableName);
-
     const matching = PropertyParser.BottomUpTreeMatching.walk(ast, [
       new BaseVariableMatcher(match => {
-        const parentStyle = definedValue.declaration.style;
-        const nodeCascade = this.#styleToNodeCascade.get(parentStyle);
-        if (!nodeCascade) {
-          return null;
-        }
-        const childRecord = sccRecord.get(nodeCascade, match.name);
-        if (childRecord) {
-          if (sccRecord.isInInProgressSCC(childRecord)) {
-            // Cycle detected, update the root.
-            record.updateRoot(childRecord);
-            return null;
-          }
-
-          // We've seen the variable before, so we can look up the text directly.
-          return this.#computedCSSVariables.get(nodeCascade)?.get(match.name)?.value ?? null;
-        }
-
-        const cssVariableValue = this.innerComputeCSSVariable(nodeCascade, match.name, sccRecord);
-        // Variable reference is resolved, so return it.
-        const newChildRecord = sccRecord.get(nodeCascade, match.name);
-        // 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);
-        if (cssVariableValue?.value !== undefined) {
-          return cssVariableValue.value;
+        const {value, mayFallback} = recurseWithCycleDetection(
+            match.name, nodeCascade => this.innerComputeCSSVariable(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;
         }
-        if (match.fallback.length === 0) {
-          return '';
-        }
-        if (match.matching.hasUnresolvedVarsRange(match.fallback[0], match.fallback[match.fallback.length - 1])) {
-          return null;
-        }
-        return match.matching.getComputedTextRange(match.fallback[0], match.fallback[match.fallback.length - 1]);
+        return evaluateFallback(match.fallback, match.matching);
       }),
-      new EnvFunctionMatcher(this.#matchedStyles)
-    ]);
+      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 computedText = decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
+    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
@@ -1333,20 +1427,61 @@ class DOMInheritanceCascade {
       const scc = sccRecord.finishSCC(record);
       if (scc.length > 1) {
         for (const entry of scc) {
-          console.assert(entry.nodeCascade === nodeCascade, 'Circles should be within the cascade');
-          computedCSSVariables.set(entry.name, null);
+          console.assert(entry.nodeCascade === outerNodeCascade, 'Circles should be within the cascade');
+          outerComputedCSSVariables.set(entry.name, null);
         }
         return null;
       }
     }
-    if (decl.length > 0 && matching.hasUnresolvedVarsRange(decl[0], decl[decl.length - 1])) {
-      computedCSSVariables.set(variableName, null);
+    if (computedText === null) {
+      outerComputedCSSVariables.set(substitutionName, null);
       return null;
     }
 
-    const cssVariableValue = {value: computedText, declaration: definedValue.declaration};
-    computedCSSVariables.set(variableName, cssVariableValue);
+    const cssVariableValue = {value: computedText, declaration};
+    outerComputedCSSVariables.set(substitutionName, cssVariableValue);
     return cssVariableValue;
+
+    function recurseWithCycleDetection(
+        recordName: string, func: (nc: NodeCascade) => string | null): {value: string|null, mayFallback: boolean} {
+      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: CodeMirror.SyntaxNode[], matching: PropertyParser.BottomUpTreeMatching): string|
+        null {
+      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(): CSSStyleDeclaration[] {

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -249,12 +249,12 @@ export class BottomUpTreeMatching extends TreeWalker {
     return this.#matchedNodes.get(this.#key(node));
   }
 
-  hasUnresolvedVars(node: CodeMirror.SyntaxNode): boolean {
-    return this.hasUnresolvedVarsRange(node, node);
+  hasUnresolvedSubstitutions(node: CodeMirror.SyntaxNode): boolean {
+    return this.hasUnresolvedSubstitutionsRange(node, node);
   }
 
-  hasUnresolvedVarsRange(from: CodeMirror.SyntaxNode, to: CodeMirror.SyntaxNode): boolean {
-    return this.computedText.hasUnresolvedVars(from.from - this.ast.tree.from, to.to - this.ast.tree.from);
+  hasUnresolvedSubstitutionsRange(from: CodeMirror.SyntaxNode, to: CodeMirror.SyntaxNode): boolean {
+    return this.computedText.hasUnresolvedSubstitutions(from.from - this.ast.tree.from, to.to - this.ast.tree.from);
   }
 
   getComputedText(node: CodeMirror.SyntaxNode, substitutionHook?: (match: Match) => string | null): string {
@@ -274,9 +274,9 @@ export class BottomUpTreeMatching extends TreeWalker {
     return this.computedText.countTopLevelValues(from.from - this.ast.tree.from, to.from - this.ast.tree.from);
   }
 
-  getComputedPropertyValueText(): string {
+  getComputedPropertyValueText(substitutionHook?: (match: Match) => string | null): string {
     const [from, to] = ASTUtils.range(ASTUtils.siblings(ASTUtils.declValue(this.ast.tree)));
-    return this.getComputedTextRange(from ?? this.ast.tree, to ?? this.ast.tree);
+    return this.getComputedTextRange(from ?? this.ast.tree, to ?? this.ast.tree, substitutionHook);
   }
 
   getComputedTextRange(
@@ -415,7 +415,7 @@ export class ComputedText {
     }
   }
 
-  hasUnresolvedVars(begin: number, end: number): boolean {
+  hasUnresolvedSubstitutions(begin: number, end: number): boolean {
     for (const chunk of this.#range(begin, end)) {
       if (chunk.computedText === null) {
         return true;

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -40,6 +40,20 @@ export class BaseVariableMatch implements Match {
   computedText(): string|null {
     return this.computedTextCallback(this, this.matching);
   }
+
+  fallbackValue(): string|null {
+    // Fallback can be missing but it can be also be empty: var(--v,)
+    if (!this.fallback) {
+      return null;
+    }
+    if (this.fallback.length === 0) {
+      return '';
+    }
+    if (this.matching.hasUnresolvedSubstitutionsRange(this.fallback[0], this.fallback[this.fallback.length - 1])) {
+      return null;
+    }
+    return this.matching.getComputedTextRange(this.fallback[0], this.fallback[this.fallback.length - 1]);
+  }
 }
 
 // This matcher provides matching for var() functions and basic computedText support. Computed text is resolved by a
@@ -57,35 +71,21 @@ export class BaseVariableMatcher extends matcherBase(BaseVariableMatch) {
 
   override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): BaseVariableMatch|null {
     const callee = node.getChild('Callee');
-    const args = node.getChild('ArgList');
-    if (node.name !== 'CallExpression' || !callee || (matching.ast.text(callee) !== 'var') || !args) {
+    if (node.name !== 'CallExpression' || !callee || (matching.ast.text(callee) !== 'var')) {
       return null;
     }
 
-    const [lparenNode, nameNode, ...fallbackOrRParenNodes] = ASTUtils.children(args);
-
-    if (lparenNode?.name !== '(' || nameNode?.name !== 'VariableName') {
+    const args = ASTUtils.callArgs(node).map(args => Array.from(ASTUtils.stripComments(args)));
+    if (args.length < 1 || args[0].length !== 1) {
       return null;
     }
+    const nameNode = args[0][0];
+    const fallback = args.length === 2 ? args[1] : undefined;
 
-    if (fallbackOrRParenNodes.length <= 1 && fallbackOrRParenNodes[0]?.name !== ')') {
+    if (nameNode?.name !== 'VariableName') {
       return null;
     }
 
-    let fallback;
-    if (fallbackOrRParenNodes.length > 1) {
-      if (fallbackOrRParenNodes.shift()?.name !== ',') {
-        return null;
-      }
-      if (fallbackOrRParenNodes.pop()?.name !== ')') {
-        return null;
-      }
-      fallback = fallbackOrRParenNodes;
-      if (fallback.some(n => n.name === ',')) {
-        return null;
-      }
-    }
-
     const varName = matching.ast.text(nameNode);
     if (!varName.startsWith('--')) {
       return null;
@@ -112,20 +112,6 @@ export class VariableMatch extends BaseVariableMatch {
   resolveVariable(): CSSVariableValue|null {
     return this.matchedStyles.computeCSSVariable(this.style, this.name);
   }
-
-  fallbackValue(): string|null {
-    // Fallback can be missing but it can be also be empty: var(--v,)
-    if (!this.fallback) {
-      return null;
-    }
-    if (this.fallback.length === 0) {
-      return '';
-    }
-    if (this.matching.hasUnresolvedVarsRange(this.fallback[0], this.fallback[this.fallback.length - 1])) {
-      return null;
-    }
-    return this.matching.getComputedTextRange(this.fallback[0], this.fallback[this.fallback.length - 1]);
-  }
 }
 
 // clang-format off
@@ -144,6 +130,158 @@ export class VariableMatcher extends matcherBase(VariableMatch) {
   }
 }
 
+export class AttributeMatch extends BaseVariableMatch {
+  constructor(
+      text: string,
+      node: CodeMirror.SyntaxNode,
+      name: string,
+      fallback: CodeMirror.SyntaxNode[]|undefined,
+      matching: BottomUpTreeMatching,
+      readonly type: string|null,
+      readonly isCSSTokens: boolean,
+      readonly isValidType: boolean,
+      readonly rawValue: string|null,
+      readonly substitutionText: string|null,
+      readonly matchedStyles: CSSMatchedStyles,
+      readonly style: CSSStyleDeclaration,
+      computedTextCallback: (match: AttributeMatch, matching: BottomUpTreeMatching) => string | null,
+  ) {
+    super(text, node, name, fallback, matching, (_, matching) => computedTextCallback(this, matching));
+  }
+
+  rawAttributeValue(): string|null {
+    return this.rawValue;
+  }
+
+  cssType(): string {
+    return this.type ?? RAW_STRING_TYPE;
+  }
+
+  resolveAttributeValue(): string|null {
+    return this.matchedStyles.computeAttribute(
+        this.style, this.name, {type: this.cssType(), isCSSTokens: this.isCSSTokens});
+  }
+}
+
+let cssEvaluationElement: HTMLElement|null = null;
+function getCssEvaluationElement(): HTMLElement {
+  const id = 'css-evaluation-element';
+  if (!cssEvaluationElement) {
+    cssEvaluationElement = document.getElementById(id);
+    if (!cssEvaluationElement) {
+      cssEvaluationElement = document.createElement('div');
+      cssEvaluationElement.setAttribute('id', id);
+      cssEvaluationElement.setAttribute('style', 'hidden: true; --evaluation: attr(data-custom-expr type(*))');
+      document.body.appendChild(cssEvaluationElement);
+    }
+  }
+  return cssEvaluationElement;
+}
+
+// These functions use an element in the frontend to evaluate CSS. The advantage
+// of this is that it is synchronous and doesn't require a CDP method. The
+// disadvantage is it lacks context that would allow substitutions such as
+// `var()` and `calc()` to be resolved correctly, and if the user is doing
+// remote debugging there is a possibility that the CSS behavior is different
+// between the two browser versions. We use it for type checking after
+// substitutions (but not for actual evaluation) and for applying units.
+export function localEvalCSS(value: string, type: string): string|null {
+  const element = getCssEvaluationElement();
+  element.setAttribute('data-value', value);
+  element.setAttribute('data-custom-expr', `attr(data-value ${type})`);
+  return element.computedStyleMap().get('--evaluation')?.toString() ?? null;
+}
+
+// It is important to establish whether a type is valid, because if it is not,
+// the current behavior of blink is to ignore the fallback and parse as a
+// raw string, returning '' if the attribute is not set.
+export function isValidCSSType(type: string): boolean {
+  const element = getCssEvaluationElement();
+  element.setAttribute('data-custom-expr', `attr(data-nonexistent ${type}, "good")`);
+  return '"good"' === (element.computedStyleMap().get('--evaluation')?.toString() ?? null);
+}
+
+export function defaultValueForCSSType(type: string|null): string|null {
+  const element = getCssEvaluationElement();
+  element.setAttribute('data-custom-expr', `attr(data-nonexistent ${type ?? ''})`);
+  return element.computedStyleMap().get('--evaluation')?.toString() ?? null;
+}
+
+export const RAW_STRING_TYPE = 'raw-string';
+
+// This matcher provides matching for attr() functions and basic computedText support. Computed text is resolved by a
+// callback.
+// clang-format off
+export class AttributeMatcher extends matcherBase(AttributeMatch) {
+  // clang-format on
+  constructor(
+      private readonly matchedStyles: CSSMatchedStyles,
+      private readonly style: CSSStyleDeclaration,
+      private readonly computedTextCallback?: (match: AttributeMatch, matching: BottomUpTreeMatching) => string | null,
+
+  ) {
+    super();
+  }
+
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): AttributeMatch|null {
+    const callee = node.getChild('Callee');
+    if (node.name !== 'CallExpression' || !callee || (matching.ast.text(callee) !== 'attr')) {
+      return null;
+    }
+
+    const args = ASTUtils.callArgs(node).map(args => Array.from(ASTUtils.stripComments(args)));
+    if (args.length < 1) {
+      return null;
+    }
+    const nameNode = args[0][0];
+
+    if (args[0].length < 1 || args[0].length > 2 || nameNode?.name !== 'ValueName') {
+      return null;
+    }
+
+    const fallback = args.length === 2 ? args[1] : undefined;
+    let type: string|null = null;
+    let isCSSTokens = false;
+    if (args[0].length === 2) {
+      const typeNode = args[0][1] as CodeMirror.SyntaxNode;
+      type = matching.ast.text(typeNode);
+      if (typeNode.name === 'CallExpression') {
+        if (matching.ast.text(typeNode.getChild('Callee')) !== 'type') {
+          return null;
+        }
+        isCSSTokens = true;
+      } else if (typeNode.name !== 'ValueName' && type !== '%') {
+        return null;
+      }
+    }
+
+    const isValidType = type === null || isValidCSSType(type);
+    isCSSTokens = isCSSTokens && isValidType;
+
+    const attrName = matching.ast.text(nameNode);
+
+    let substitutionText: string|null = null;
+    const domNode = this.matchedStyles.nodeForStyle(this.style) ?? this.matchedStyles.node();
+    const rawValue = domNode.getAttribute(attrName) ?? null;
+    if (rawValue !== null) {
+      substitutionText = isCSSTokens ? rawValue : localEvalCSS(rawValue, type ?? RAW_STRING_TYPE);
+    } else if (!fallback) {
+      // In the case of unspecified type, there is a default value
+      substitutionText = defaultValueForCSSType(type);
+    }
+
+    return new AttributeMatch(
+        matching.ast.text(node), node, attrName, fallback, matching, type, isCSSTokens, isValidType, rawValue,
+        substitutionText, this.matchedStyles, this.style, this.computedTextCallback ?? defaultComputeText);
+
+    function defaultComputeText(match: AttributeMatch, _matching: BottomUpTreeMatching): string|null {
+      // Don't fall back if the type is invalid.
+      return match.resolveAttributeValue() ??
+          (isValidType ? match.fallbackValue() : defaultValueForCSSType(match.type));
+    }
+  }
+}
+
 export class BinOpMatch implements Match {
   constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode) {
   }
@@ -393,7 +531,7 @@ export class ColorMatcher extends matcherBase(ColorMatch) {
         // colorText holds the fully substituted parenthesized expression, so colorFunc + colorText is the color
         // function call.
         const isRelativeColorSyntax = Boolean(
-            colorText.match(/^[^)]*\(\W*from\W+/) && !matching.hasUnresolvedVars(node) &&
+            colorText.match(/^[^)]*\(\W*from\W+/) && !matching.hasUnresolvedSubstitutions(node) &&
             CSS.supports('color', colorFunc + colorText));
         if (!isRelativeColorSyntax) {
           return new ColorMatch(text, node);
@@ -899,7 +1037,7 @@ export class MathFunctionMatcher extends matcherBase(MathFunctionMatch) {
       return null;
     }
     const args = ASTUtils.callArgs(node);
-    if (args.some(arg => arg.length === 0 || matching.hasUnresolvedVarsRange(arg[0], arg[arg.length - 1]))) {
+    if (args.some(arg => arg.length === 0 || matching.hasUnresolvedSubstitutionsRange(arg[0], arg[arg.length - 1]))) {
       return null;
     }
     const text = matching.ast.text(node);
@@ -959,7 +1097,7 @@ export class GridTemplateMatcher extends matcherBase(GridTemplateMatch) {
     return cssMetadata().isGridAreaDefiningProperty(propertyName);
   }
   override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): GridTemplateMatch|null {
-    if (node.name !== 'Declaration' || matching.hasUnresolvedVars(node)) {
+    if (node.name !== 'Declaration' || matching.hasUnresolvedSubstitutions(node)) {
       return null;
     }
 

package/front_end/core/sdk/CSSStyleSheetHeader.ts

@@ -13,6 +13,7 @@ import {DeferredDOMNode} from './DOMModel.js';
 import type {FrameAssociated} from './FrameAssociated.js';
 import type {PageResourceLoadInitiator} from './PageResourceLoader.js';
 import {ResourceTreeModel} from './ResourceTreeModel.js';
+import type {DebugId} from './SourceMap.js';
 
 const UIStrings = {
   /**
@@ -188,4 +189,8 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
       initiatorUrl: this.hasSourceURL ? Platform.DevToolsPath.EmptyUrlString : this.sourceURL,
     };
   }
+
+  debugId(): DebugId|null {
+    return null;
+  }
 }