Find attributes on originating node of pseudo elements

Bug: 444208101
Change-Id: Iabe07c9bcb5e25ba64f8a6bcd6a09ff0a61cff56
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6939232
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Eric Leese <[email protected]>

Author: Eric Leese

front_end/core/sdk/CSSMatchedStyles.test.ts

@@ -698,6 +698,25 @@ describe('CSSMatchedStyles', () => {
     assert.isNull(matchedStyles.resolveProperty('background-color', styles[0]));
   });
 
+  it('reads attributes from the parent node of a pseudo-element', async () => {
+    const node = sinon.createStubInstance(SDK.DOMModel.DOMNode);
+    node.id = 1 as Protocol.DOM.NodeId;
+    node.nodeType.returns(Node.ELEMENT_NODE);
+    node.getAttribute.callsFake((name: string) => `parent-${name}`);
+    const pseudoElement = sinon.createStubInstance(SDK.DOMModel.DOMNode);
+    pseudoElement.id = 2 as Protocol.DOM.NodeId;
+    pseudoElement.nodeType.returns(Node.ELEMENT_NODE);
+    pseudoElement.parentNode = node;
+    pseudoElement.pseudoType.returns('before');
+    const matchedStyles = await getMatchedStyles({
+      matchedPayload: [ruleMatch('div::before', {content: 'attr(data-content)'})],
+      node: pseudoElement,
+    });
+
+    const property = matchedStyles.rawAttributeValueFromStyle(matchedStyles.nodeStyles()[0], 'data-content');
+    assert.strictEqual(property, 'parent-data-content');
+  });
+
   it('evaluates variables with attr() calls in the same way as blink', async () => {
     const attributes = [
       {name: 'data-test-nonexistent', value: 'attr(data-nonexistent)'},

front_end/core/sdk/CSSMatchedStyles.ts

@@ -868,6 +868,20 @@ export class CSSMatchedStyles {
     return domCascade ? domCascade.computeAttribute(style, attributeName, type) : null;
   }
 
+  rawAttributeValueFromStyle(style: CSSStyleDeclaration, attributeName: string): string|null {
+    let node: DOMNode|null = this.nodeForStyle(style) ?? this.node();
+
+    // If it's a pseudo-element, we need to find the originating element.
+    while (node?.pseudoType()) {
+      node = node.parentNode;
+    }
+
+    if (!node) {
+      return null;
+    }
+    return node.getAttribute(attributeName) ?? null;
+  }
+
   resolveProperty(name: string, ownerStyle: CSSStyleDeclaration): CSSProperty|null {
     return this.#styleToDOMCascade.get(ownerStyle)?.resolveProperty(name, ownerStyle) ?? null;
   }
@@ -1304,16 +1318,8 @@ class DOMInheritanceCascade {
     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);
+    const rawValue = this.#matchedStyles.rawAttributeValueFromStyle(style, attributeName);
     if (rawValue === null) {
       return null;
     }
@@ -1322,7 +1328,7 @@ class DOMInheritanceCascade {
 
   private attributeValueWithSubstitutions(
       nodeCascade: NodeCascade, style: CSSStyleDeclaration, attributeName: string, sccRecord: SCCRecord): string|null {
-    const rawValue = this.rawAttributeValue(style, attributeName);
+    const rawValue = this.#matchedStyles.rawAttributeValueFromStyle(style, attributeName);
     if (rawValue === null) {
       return null;
     }

front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -260,9 +260,8 @@ export class AttributeMatcher extends matcherBase(AttributeMatch) {
 
     const attrName = matching.ast.text(nameNode);
 
+    const rawValue = this.matchedStyles.rawAttributeValueFromStyle(this.style, attrName);
     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) {