chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/{panels/animation → core/sdk}/AnimationModel.ts

@@ -3,11 +3,272 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
-import {AnimationDOMNode} from './AnimationDOMNode.js';
+import {DeferredDOMNode, type DOMNode} from './DOMModel.js';
+import {RemoteObject} from './RemoteObject.js';
+import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTreeModel.js';
+import {Events as RuntimeModelEvents, type EventTypes as RuntimeModelEventTypes, RuntimeModel} from './RuntimeModel.js';
+import {ScreenCaptureModel} from './ScreenCaptureModel.js';
+import {SDKModel} from './SDKModel.js';
+import {Capability, type Target} from './Target.js';
+
+const DEVTOOLS_ANIMATIONS_WORLD_NAME = 'devtools_animations';
+const REPORT_SCROLL_POSITION_BINDING_NAME = '__devtools_report_scroll_position__';
+
+const getScrollListenerNameInPage = (id: number): string => `__devtools_scroll_listener_${id}__`;
+
+type ScrollListener = (param: {scrollLeft: number, scrollTop: number}) => void;
+type BindingListener =
+    (ev: Common.EventTarget.EventTargetEvent<Protocol.Runtime.BindingCalledEvent, RuntimeModelEventTypes>) => void;
+
+async function resolveToObjectInWorld(domNode: DOMNode, worldName: string): Promise<RemoteObject|null> {
+  const resourceTreeModel = domNode.domModel().target().model(ResourceTreeModel) as ResourceTreeModel;
+  const pageAgent = domNode.domModel().target().pageAgent();
+  for (const frame of resourceTreeModel.frames()) {
+    // This returns previously created world if it exists for the frame.
+    const {executionContextId} = await pageAgent.invoke_createIsolatedWorld({frameId: frame.id, worldName});
+    const object = await domNode.resolveToObject(undefined, executionContextId);
+    if (object) {
+      return object;
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides an extension over `DOMNode` that gives it additional
+ * capabilities for animation debugging, mainly:
+ * - getting a node's scroll information (scroll offsets and scroll range).
+ * - updating a node's scroll offset.
+ * - tracking the node's scroll offsets with event listeners.
+ *
+ * It works by running functions on the target page, see `DOMNode`s `callFunction` method
+ * for more details on how a function is called on the target page.
+ *
+ * For listening to events on the target page and getting notified on the devtools frontend
+ * side, we're adding a binding to the page `__devtools_report_scroll_position__` in a world `devtools_animation`
+ * we've created. Then, we're setting scroll listeners of the `node` in the same world which calls the binding
+ * itself with the scroll offsets.
+ */
+export class AnimationDOMNode {
+  #domNode: DOMNode;
+  #scrollListenersById: Map<number, ScrollListener>;
+  #scrollBindingListener?: BindingListener;
+
+  static lastAddedListenerId: number = 0;
+
+  constructor(domNode: DOMNode) {
+    this.#domNode = domNode;
+    this.#scrollListenersById = new Map();
+  }
+
+  async #addReportScrollPositionBinding(): Promise<void> {
+    // The binding is already added so we don't need to add it again.
+    if (this.#scrollBindingListener) {
+      return;
+    }
+
+    this.#scrollBindingListener = ev => {
+      const {name, payload} = ev.data;
+      if (name !== REPORT_SCROLL_POSITION_BINDING_NAME) {
+        return;
+      }
+
+      const {scrollTop, scrollLeft, id} = JSON.parse(payload) as {scrollTop: number, scrollLeft: number, id: number};
+      const scrollListener = this.#scrollListenersById.get(id);
+      if (!scrollListener) {
+        return;
+      }
+
+      scrollListener({scrollTop, scrollLeft});
+    };
+
+    const runtimeModel = this.#domNode.domModel().target().model(RuntimeModel) as RuntimeModel;
+    await runtimeModel.addBinding({
+      name: REPORT_SCROLL_POSITION_BINDING_NAME,
+      executionContextName: DEVTOOLS_ANIMATIONS_WORLD_NAME,
+    });
+    runtimeModel.addEventListener(RuntimeModelEvents.BindingCalled, this.#scrollBindingListener);
+  }
+
+  async #removeReportScrollPositionBinding(): Promise<void> {
+    // There isn't any binding added yet.
+    if (!this.#scrollBindingListener) {
+      return;
+    }
+
+    const runtimeModel = this.#domNode.domModel().target().model(RuntimeModel) as RuntimeModel;
+    await runtimeModel.removeBinding({
+      name: REPORT_SCROLL_POSITION_BINDING_NAME,
+    });
+    runtimeModel.removeEventListener(RuntimeModelEvents.BindingCalled, this.#scrollBindingListener);
+    this.#scrollBindingListener = undefined;
+  }
+
+  async addScrollEventListener(onScroll: ({scrollLeft, scrollTop}: {scrollLeft: number, scrollTop: number}) => void):
+      Promise<number|null> {
+    AnimationDOMNode.lastAddedListenerId++;
+    const id = AnimationDOMNode.lastAddedListenerId;
+    this.#scrollListenersById.set(id, onScroll);
+    // Add the binding for reporting scroll events from the page if it doesn't exist.
+    if (!this.#scrollBindingListener) {
+      await this.#addReportScrollPositionBinding();
+    }
+
+    const object = await resolveToObjectInWorld(this.#domNode, DEVTOOLS_ANIMATIONS_WORLD_NAME);
+    if (!object) {
+      return null;
+    }
+
+    await object.callFunction(scrollListenerInPage, [
+      id,
+      REPORT_SCROLL_POSITION_BINDING_NAME,
+      getScrollListenerNameInPage(id),
+    ].map(arg => RemoteObject.toCallArgument(arg)));
+    object.release();
+    return id;
+
+    function scrollListenerInPage(
+        this: HTMLElement|Document, id: number, reportScrollPositionBindingName: string,
+        scrollListenerNameInPage: string): void {
+      if ('scrollingElement' in this && !this.scrollingElement) {
+        return;
+      }
+
+      const scrollingElement = ('scrollingElement' in this ? this.scrollingElement : this) as HTMLElement;
+      // @ts-ignore We're setting a custom field on `Element` or `Document` for retaining the function on the page.
+      this[scrollListenerNameInPage] = () => {
+        // @ts-ignore `reportScrollPosition` binding is injected to the page before calling the function.
+        globalThis[reportScrollPositionBindingName](
+            JSON.stringify({scrollTop: scrollingElement.scrollTop, scrollLeft: scrollingElement.scrollLeft, id}));
+      };
+
+      // @ts-ignore We've already defined the function used below.
+      this.addEventListener('scroll', this[scrollListenerNameInPage], true);
+    }
+  }
+
+  async removeScrollEventListener(id: number): Promise<void> {
+    const object = await resolveToObjectInWorld(this.#domNode, DEVTOOLS_ANIMATIONS_WORLD_NAME);
+    if (!object) {
+      return;
+    }
+
+    await object.callFunction(
+        removeScrollListenerInPage, [getScrollListenerNameInPage(id)].map(arg => RemoteObject.toCallArgument(arg)));
+    object.release();
+
+    this.#scrollListenersById.delete(id);
+    // There aren't any scroll listeners remained on the page
+    // so we remove the binding.
+    if (this.#scrollListenersById.size === 0) {
+      await this.#removeReportScrollPositionBinding();
+    }
+
+    function removeScrollListenerInPage(this: HTMLElement|Document, scrollListenerNameInPage: string): void {
+      // @ts-ignore We've already set this custom field while adding scroll listener.
+      this.removeEventListener('scroll', this[scrollListenerNameInPage]);
+      // @ts-ignore We've already set this custom field while adding scroll listener.
+      delete this[scrollListenerNameInPage];
+    }
+  }
+
+  async scrollTop(): Promise<number|null> {
+    return this.#domNode.callFunction(scrollTopInPage).then(res => res?.value ?? null);
+
+    function scrollTopInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollTop;
+      }
+      return this.scrollTop;
+    }
+  }
+
+  async scrollLeft(): Promise<number|null> {
+    return this.#domNode.callFunction(scrollLeftInPage).then(res => res?.value ?? null);
+
+    function scrollLeftInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollLeft;
+      }
+      return this.scrollLeft;
+    }
+  }
+
+  async setScrollTop(offset: number): Promise<void> {
+    await this.#domNode.callFunction(setScrollTopInPage, [offset]);
+
+    function setScrollTopInPage(this: Element|Document, offsetInPage: number): void {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return;
+        }
+
+        this.scrollingElement.scrollTop = offsetInPage;
+      } else {
+        this.scrollTop = offsetInPage;
+      }
+    }
+  }
+
+  async setScrollLeft(offset: number): Promise<void> {
+    await this.#domNode.callFunction(setScrollLeftInPage, [offset]);
+
+    function setScrollLeftInPage(this: Element|Document, offsetInPage: number): void {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return;
+        }
+
+        this.scrollingElement.scrollLeft = offsetInPage;
+      } else {
+        this.scrollLeft = offsetInPage;
+      }
+    }
+  }
+
+  async verticalScrollRange(): Promise<number|null> {
+    return this.#domNode.callFunction(verticalScrollRangeInPage).then(res => res?.value ?? null);
+
+    function verticalScrollRangeInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollHeight - this.scrollingElement.clientHeight;
+      }
+
+      return this.scrollHeight - this.clientHeight;
+    }
+  }
+
+  async horizontalScrollRange(): Promise<number|null> {
+    return this.#domNode.callFunction(horizontalScrollRangeInPage).then(res => res?.value ?? null);
+
+    function horizontalScrollRangeInPage(this: Element|Document): number {
+      if ('scrollingElement' in this) {
+        if (!this.scrollingElement) {
+          return 0;
+        }
+
+        return this.scrollingElement.scrollWidth - this.scrollingElement.clientWidth;
+      }
+
+      return this.scrollWidth - this.clientWidth;
+    }
+  }
+}
 
 function shouldGroupAnimations(firstAnimation: AnimationImpl, anim: AnimationImpl): boolean {
   const firstAnimationTimeline = firstAnimation.viewOrScrollTimeline();
@@ -24,30 +285,33 @@ function shouldGroupAnimations(firstAnimation: AnimationImpl, anim: AnimationImp
   return !animationTimeline && firstAnimation.startTime() === anim.startTime();
 }
 
-export class AnimationModel extends SDK.SDKModel.SDKModel<EventTypes> {
-  readonly runtimeModel: SDK.RuntimeModel.RuntimeModel;
+export class AnimationModel extends SDKModel<EventTypes> {
+  readonly runtimeModel: RuntimeModel;
   readonly agent: ProtocolProxyApi.AnimationApi;
   #animationsById: Map<string, AnimationImpl>;
   readonly animationGroups: Map<string, AnimationGroup>;
   #pendingAnimations: Set<string>;
   playbackRate: number;
   readonly #screenshotCapture?: ScreenshotCapture;
-  #enabled?: boolean;
   #flushPendingAnimations: () => void;
 
-  constructor(target: SDK.Target.Target) {
+  constructor(target: Target) {
     super(target);
-    this.runtimeModel = (target.model(SDK.RuntimeModel.RuntimeModel) as SDK.RuntimeModel.RuntimeModel);
+    this.runtimeModel = (target.model(RuntimeModel) as RuntimeModel);
     this.agent = target.animationAgent();
     target.registerAnimationDispatcher(new AnimationDispatcher(this));
     this.#animationsById = new Map();
     this.animationGroups = new Map();
     this.#pendingAnimations = new Set();
     this.playbackRate = 1;
-    const resourceTreeModel =
-        (target.model(SDK.ResourceTreeModel.ResourceTreeModel) as SDK.ResourceTreeModel.ResourceTreeModel);
-    resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.reset, this);
-    const screenCaptureModel = target.model(SDK.ScreenCaptureModel.ScreenCaptureModel);
+
+    if (!target.suspended()) {
+      void this.agent.invoke_enable();
+    }
+
+    const resourceTreeModel = (target.model(ResourceTreeModel) as ResourceTreeModel);
+    resourceTreeModel.addEventListener(ResourceTreeModelEvents.PrimaryPageChanged, this.reset, this);
+    const screenCaptureModel = target.model(ScreenCaptureModel);
     if (screenCaptureModel) {
       this.#screenshotCapture = new ScreenshotCapture(this, screenCaptureModel);
     }
@@ -75,6 +339,21 @@ export class AnimationModel extends SDK.SDKModel.SDKModel<EventTypes> {
     return 1;
   }
 
+  async getAnimationGroupForAnimation(name: string, nodeId: Protocol.DOM.NodeId): Promise<AnimationGroup|null> {
+    for (const animationGroup of this.animationGroups.values()) {
+      for (const animation of animationGroup.animations()) {
+        if (animation.name() === name) {
+          const animationNode = await animation.source().node();
+          if (animationNode?.id === nodeId) {
+            return animationGroup;
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
   animationCanceled(id: string): void {
     this.#pendingAnimations.delete(id);
   }
@@ -183,23 +462,11 @@ export class AnimationModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   override async suspendModel(): Promise<void> {
-    this.reset();
-    await this.agent.invoke_disable();
+    await this.agent.invoke_disable().then(() => this.reset());
   }
 
   override async resumeModel(): Promise<void> {
-    if (!this.#enabled) {
-      return;
-    }
-    await this.agent.invoke_enable();
-  }
-
-  async ensureEnabled(): Promise<void> {
-    if (this.#enabled) {
-      return;
-    }
     await this.agent.invoke_enable();
-    this.#enabled = true;
   }
 }
 
@@ -408,7 +675,7 @@ export class AnimationImpl {
     void this.#animationModel.agent.invoke_setTiming({animationId: this.id(), duration, delay});
   }
 
-  private updateNodeStyle(duration: number, delay: number, node: SDK.DOMModel.DOMNode): void {
+  private updateNodeStyle(duration: number, delay: number, node: DOMNode): void {
     let animationPrefix;
     if (this.type() === Protocol.Animation.AnimationType.CSSTransition) {
       animationPrefix = 'transition-';
@@ -427,7 +694,7 @@ export class AnimationImpl {
     cssModel.setEffectivePropertyValueForNode(node.id, animationPrefix + 'delay', delay + 'ms');
   }
 
-  async remoteObjectPromise(): Promise<SDK.RemoteObject.RemoteObject|null> {
+  async remoteObjectPromise(): Promise<RemoteObject|null> {
     const payload = await this.#animationModel.agent.invoke_resolveAnimation({animationId: this.id()});
     if (!payload) {
       return null;
@@ -448,7 +715,7 @@ export class AnimationEffect {
   delayInternal!: number;     // Assertion is safe because `setPayload` call in `constructor` sets the value.
   durationInternal!: number;  // Assertion is safe because `setPayload` call in `constructor` sets the value.
   #keyframesRuleInternal: KeyframesRule|undefined;
-  #deferredNodeInternal?: SDK.DOMModel.DeferredDOMNode;
+  #deferredNodeInternal?: DeferredDOMNode;
   constructor(animationModel: AnimationModel, payload: Protocol.Animation.AnimationEffect) {
     this.#animationModel = animationModel;
     this.setPayload(payload);
@@ -494,16 +761,15 @@ export class AnimationEffect {
     return this.#payload.fill;
   }
 
-  node(): Promise<SDK.DOMModel.DOMNode|null> {
+  node(): Promise<DOMNode|null> {
     if (!this.#deferredNodeInternal) {
-      this.#deferredNodeInternal =
-          new SDK.DOMModel.DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
+      this.#deferredNodeInternal = new DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
     }
     return this.#deferredNodeInternal.resolvePromise();
   }
 
-  deferredNode(): SDK.DOMModel.DeferredDOMNode {
-    return new SDK.DOMModel.DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
+  deferredNode(): DeferredDOMNode {
+    return new DeferredDOMNode(this.#animationModel.target(), this.backendNodeId());
   }
 
   backendNodeId(): Protocol.DOM.BackendNodeId {
@@ -668,7 +934,7 @@ export class AnimationGroup {
       return null;
     }
 
-    const deferredScrollNode = new SDK.DOMModel.DeferredDOMNode(this.#animationModel.target(), sourceNodeId);
+    const deferredScrollNode = new DeferredDOMNode(this.#animationModel.target(), sourceNodeId);
     const scrollNode = await deferredScrollNode.resolvePromise();
     if (!scrollNode) {
       return null;
@@ -799,12 +1065,12 @@ export class AnimationDispatcher implements ProtocolProxyApi.AnimationDispatcher
 
 export class ScreenshotCapture {
   #requests: Request[];
-  readonly #screenCaptureModel: SDK.ScreenCaptureModel.ScreenCaptureModel;
+  readonly #screenCaptureModel: ScreenCaptureModel;
   readonly #animationModel: AnimationModel;
   #stopTimer?: number;
   #endTime?: number;
   #capturing?: boolean;
-  constructor(animationModel: AnimationModel, screenCaptureModel: SDK.ScreenCaptureModel.ScreenCaptureModel) {
+  constructor(animationModel: AnimationModel, screenCaptureModel: ScreenCaptureModel) {
     this.#requests = [];
     this.#screenCaptureModel = screenCaptureModel;
     this.#animationModel = animationModel;
@@ -860,7 +1126,7 @@ export class ScreenshotCapture {
   }
 }
 
-SDK.SDKModel.SDKModel.register(AnimationModel, {capabilities: SDK.Target.Capability.DOM, autostart: false});
+SDKModel.register(AnimationModel, {capabilities: Capability.DOM, autostart: true});
 export interface Request {
   endTime: number;
   screenshots: string[];

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -35,6 +35,10 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   setCPUThrottlingRate(rate: number): void {
+    if (rate === this.#cpuThrottlingRateInternal) {
+      return;
+    }
+
     this.#cpuThrottlingRateInternal = rate;
     for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
       void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingRateInternal);

package/front_end/core/sdk/CSSContainerQuery.test.ts

@@ -4,29 +4,23 @@
 
 import * as SDK from './sdk.js';
 
-const {getPhysicalAxisFromQueryAxis, getQueryAxis, PhysicalAxis, QueryAxis} = SDK.CSSContainerQuery;
+const {getPhysicalAxisFromQueryAxis, getQueryAxisFromContainerType, PhysicalAxis, QueryAxis} = SDK.CSSContainerQuery;
 
 describe('CSSContainerQuery', () => {
-  describe('getQueryAxis', () => {
-    it('gets the query axis of no containment correctly', () => {
-      assert.strictEqual(getQueryAxis(''), QueryAxis.NONE);
-      assert.strictEqual(getQueryAxis('style layout'), QueryAxis.NONE);
+  describe('getQueryAxisFromContainerType', () => {
+    it('gets the query axis of no container-type correctly', () => {
+      assert.strictEqual(getQueryAxisFromContainerType(''), QueryAxis.NONE);
+      assert.strictEqual(getQueryAxisFromContainerType('normal'), QueryAxis.NONE);
     });
 
     it('gets the query axis of an inline container query correctly', () => {
-      assert.strictEqual(getQueryAxis('inline-size layout style'), QueryAxis.INLINE);
-      assert.strictEqual(getQueryAxis('layout inline-size style inline-size'), QueryAxis.INLINE);
+      assert.strictEqual(getQueryAxisFromContainerType('inline-size'), QueryAxis.INLINE);
+      assert.strictEqual(getQueryAxisFromContainerType('scroll-state inline-size'), QueryAxis.INLINE);
     });
 
-    it('gets the query axis of a block container query correctly', () => {
-      assert.strictEqual(getQueryAxis('block-size layout style'), QueryAxis.BLOCK);
-      assert.strictEqual(getQueryAxis('layout block-size style block-size'), QueryAxis.BLOCK);
-    });
-
-    it('gets the query axis of inline-block container query correctly', () => {
-      assert.strictEqual(getQueryAxis('inline-size layout style block-size'), QueryAxis.BOTH);
-      assert.strictEqual(getQueryAxis('layout size style'), QueryAxis.BOTH);
-      assert.strictEqual(getQueryAxis('size'), QueryAxis.BOTH);
+    it('gets the query axis of size container query correctly', () => {
+      assert.strictEqual(getQueryAxisFromContainerType('size'), QueryAxis.BOTH);
+      assert.strictEqual(getQueryAxisFromContainerType('scroll-state size'), QueryAxis.BOTH);
     });
   });
 

package/front_end/core/sdk/CSSContainerQuery.ts

@@ -13,6 +13,7 @@ export class CSSContainerQuery extends CSSQuery {
   name?: string;
   physicalAxes?: Protocol.DOM.PhysicalAxes;
   logicalAxes?: Protocol.DOM.LogicalAxes;
+  queriesScrollState?: boolean;
 
   static parseContainerQueriesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSContainerQuery[]):
       CSSContainerQuery[] {
@@ -31,6 +32,7 @@ export class CSSContainerQuery extends CSSQuery {
     this.name = payload.name;
     this.physicalAxes = payload.physicalAxes;
     this.logicalAxes = payload.logicalAxes;
+    this.queriesScrollState = payload.queriesScrollState;
   }
 
   active(): boolean {
@@ -38,8 +40,8 @@ export class CSSContainerQuery extends CSSQuery {
   }
 
   async getContainerForNode(nodeId: Protocol.DOM.NodeId): Promise<CSSContainerQueryContainer|undefined> {
-    const containerNode =
-        await this.cssModel.domModel().getContainerForNode(nodeId, this.name, this.physicalAxes, this.logicalAxes);
+    const containerNode = await this.cssModel.domModel().getContainerForNode(
+        nodeId, this.name, this.physicalAxes, this.logicalAxes, this.queriesScrollState);
     if (!containerNode) {
       return;
     }
@@ -60,14 +62,12 @@ export class CSSContainerQueryContainer {
       return;
     }
     const containerType = styles.get('container-type');
-    const contain = styles.get('contain');
     const writingMode = styles.get('writing-mode');
-    if (!containerType || !contain || !writingMode) {
+    if (!containerType || !writingMode) {
       return;
     }
 
-    // The final queried axes are the union of both properties.
-    const queryAxis = getQueryAxis(`${containerType} ${contain}`);
+    const queryAxis = getQueryAxisFromContainerType(`${containerType}`);
     const physicalAxis = getPhysicalAxisFromQueryAxis(queryAxis, writingMode);
     let width, height;
     if (physicalAxis === PhysicalAxis.BOTH || physicalAxis === PhysicalAxis.HORIZONTAL) {
@@ -86,28 +86,18 @@ export class CSSContainerQueryContainer {
   }
 }
 
-export const getQueryAxis = (propertyValue: string): QueryAxis => {
+export const getQueryAxisFromContainerType = (propertyValue: string): QueryAxis => {
   const segments = propertyValue.split(' ');
   let isInline = false;
-  let isBlock = false;
   for (const segment of segments) {
     if (segment === 'size') {
       return QueryAxis.BOTH;
     }
     isInline = isInline || segment === 'inline-size';
-    isBlock = isBlock || segment === 'block-size';
-  }
-
-  if (isInline && isBlock) {
-    return QueryAxis.BOTH;
   }
   if (isInline) {
     return QueryAxis.INLINE;
   }
-  if (isBlock) {
-    return QueryAxis.BLOCK;
-  }
-
   return QueryAxis.NONE;
 };
 

package/front_end/core/sdk/CSSMatchedStyles.test.ts

@@ -60,10 +60,15 @@ 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'},
                 {name: '--dark', value: 'darkgrey'},
+                {name: '--empty', value: ''},
+                {name: '--empty2', value: 'var(--empty)'},
                 {name: '--light', value: 'lightgrey'},
                 {name: '--theme', value: 'var(--dark)'},
                 {name: '--shadow', value: '1px var(--theme)'},
@@ -106,6 +111,9 @@ describe('CSSMatchedStyles', () => {
       await testCssValueEquals('--theme', 'darkgrey');
       await testCssValueEquals('--shadow', '1px darkgrey');
       await testCssValueEquals('--width', '1px');
+      await testCssValueEquals('--diamond', 'active-foo active-foo');
+      await testCssValueEquals('--empty', '');
+      await testCssValueEquals('--empty2', '');
     });
 
     it('correctly resolves the declaration', async () => {

package/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 !== undefined) {
+            return cssVariableValue.value;
           }
 
           // Variable reference is not resolved, use the fallback.
@@ -1133,7 +1136,7 @@ class DOMInheritanceCascade {
         })]);
 
     const decl = PropertyParser.ASTUtils.siblings(PropertyParser.ASTUtils.declValue(matching.ast.tree));
-    const computedText = matching.getComputedTextRange(decl[0], decl[decl.length - 1]);
+    const computedText = decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
 
     if (record.isRootEntry) {
       // Variables are kept on the stack until all descendents in the same SCC have been visited. That's the case when
@@ -1141,13 +1144,13 @@ 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');
+          console.assert(entry.nodeCascade === nodeCascade, 'Circles should be within the cascade');
           computedCSSVariables.set(entry.name, null);
         }
         return null;
       }
     }
-    if (matching.hasUnresolvedVarsRange(decl[0], decl[decl.length - 1])) {
+    if (decl.length > 0 && matching.hasUnresolvedVarsRange(decl[0], decl[decl.length - 1])) {
       computedCSSVariables.set(variableName, null);
       return null;
     }