Fix custom property value computation for the diamond pattern

Previously, cycle detection for custom property value compuation to
diamond patterns wrong, which looks like this:
--root: var(--a) var(--b);
--a: var(--sink);
--b: var(--sink);
--sink: 0px;

We detected there was no cycle, but having visited --sink before we
would fall back to the fallback instead of using the previously computed
value.

Fixed: 364687927
Change-Id: I296935ca24a491ff8c03aa39660bd844940a7ce5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5975686
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSMatchedStyles.test.ts

@@ -60,6 +60,9 @@ describe('CSSMatchedStyles', () => {
           ruleMatch(
               'div',
               [
+                {name: '--diamond', value: 'var(--diamond-a) var(--diamond-b)'},
+                {name: '--diamond-a', value: 'var(--foo)'},
+                {name: '--diamond-b', value: 'var(--foo)'},
                 {name: '--foo', value: 'active-foo'},
                 {name: '--baz', value: 'active-baz !important', important: true},
                 {name: '--baz', value: 'passive-baz'},
@@ -106,6 +109,7 @@ describe('CSSMatchedStyles', () => {
       await testCssValueEquals('--theme', 'darkgrey');
       await testCssValueEquals('--shadow', '1px darkgrey');
       await testCssValueEquals('--width', '1px');
+      await testCssValueEquals('--diamond', 'active-foo active-foo');
     });
 
     it('correctly resolves the declaration', async () => {

front_end/core/sdk/CSSMatchedStyles.ts

@@ -1112,16 +1112,19 @@ class DOMInheritanceCascade {
               record.updateRoot(childRecord);
               return null;
             }
-          } else {
-            const cssVariableValue = this.innerComputeCSSVariable(nodeCascade, match.name, sccRecord);
-            // Variable reference is resolved, so return it.
-            const childRecord = 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.
-            childRecord && record.updateRoot(childRecord);
-            if (cssVariableValue?.value) {
-              return cssVariableValue?.value;
-            }
+
+            // 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) {
+            return cssVariableValue?.value;
           }
 
           // Variable reference is not resolved, use the fallback.