chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/models/trace/handlers/Threads.ts

@@ -5,9 +5,9 @@
 import type * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import {type AuctionWorkletsData} from './AuctionWorkletsHandler.js';
+import type {AuctionWorkletsData} from './AuctionWorkletsHandler.js';
 import type * as Renderer from './RendererHandler.js';
-import {type ParsedTrace} from './types.js';
+import type {ParsedTrace} from './types.js';
 
 export interface ThreadData {
   pid: Types.Events.ProcessID;

package/front_end/models/trace/handlers/WarningsHandler.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type HandlerName} from './types.js';
+import type {HandlerName} from './types.js';
 import {data as userInteractionsHandlerData} from './UserInteractionsHandler.js';
 
 export interface WarningsData {

package/front_end/models/trace/helpers/Network.ts

@@ -2,8 +2,26 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type SyntheticNetworkRequest} from '../types/TraceEvents.js';
+import type {RenderBlocking, SyntheticNetworkRequest} from '../types/TraceEvents.js';
+
+// Important: we purposefully treat `potentially_blocking` as
+// non-render-blocking here because:
+// 1. An async script can run on the main thread at any point, including before
+//    the page is loaded
+// 2. An async script will never block the parsing and rendering process of the
+//    browser.
+// 3. Therefore, from a developer's point of view, there is nothing more they
+//    can do if they've put `async` on, and within the context of Insights, we
+//    shouldn't report an async script as render blocking.
+// In the future we may want to consider suggesting the use of `defer` over
+// `async`, as it doesn't have this concern, but for now we'll allow `async`
+// and not report it as an issue.
+const NON_RENDER_BLOCKING_VALUES = new Set<RenderBlocking>([
+  'non_blocking',
+  'dynamically_injected_non_blocking',
+  'potentially_blocking',
+]);
 
 export function isSyntheticNetworkRequestEventRenderBlocking(event: SyntheticNetworkRequest): boolean {
-  return event.args.data.renderBlocking !== 'non_blocking';
+  return !NON_RENDER_BLOCKING_VALUES.has(event.args.data.renderBlocking);
 }

package/front_end/models/trace/helpers/SyntheticEvents.test.ts

@@ -45,7 +45,7 @@ describe('SyntheticEvents', function() {
          const allSyntheticEvents = [
            ...parsedTrace.Animations.animations,
            ...parsedTrace.NetworkRequests.byTime,
-           ...parsedTrace.Screenshots,
+           ...parsedTrace.Screenshots.all,
          ];
          const syntheticEventsManager = Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager();
          for (const syntheticEvent of allSyntheticEvents) {

package/front_end/models/trace/helpers/Timing.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {microsecondsTraceWindow} from '../../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
@@ -351,4 +352,32 @@ describeWithEnvironment('Timing helpers', () => {
       assert.isFalse(timestampIsInBounds(bounds, MicroSeconds(11)));
     });
   });
+
+  describe('WindowFitsInsideBounds', () => {
+    const {windowFitsInsideBounds} = Trace.Helpers.Timing;
+    const {MicroSeconds} = Trace.Types.Timing;
+
+    const bounds: Trace.Types.Timing.TraceWindowMicroSeconds = {
+      min: MicroSeconds(5),
+      max: MicroSeconds(15),
+      range: MicroSeconds(10),
+    };
+
+    it('is true if the window fits within the bounds', () => {
+      assert.isTrue(windowFitsInsideBounds({window: microsecondsTraceWindow(5, 8), bounds}));
+      assert.isTrue(windowFitsInsideBounds({window: microsecondsTraceWindow(5, 14), bounds}));
+      assert.isTrue(windowFitsInsideBounds({window: microsecondsTraceWindow(5, 15), bounds}));
+    });
+
+    it('is false if the window does not fully fit within the bounds', () => {
+      // Outside the left hand edge
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(0, 8), bounds}));
+      // Outside the right hand edge
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(10, 20), bounds}));
+      // Outside entirely before
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(0, 5), bounds}));
+      // Outside entirely after
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(20, 25), bounds}));
+    });
+  });
 });

package/front_end/models/trace/helpers/Timing.ts

@@ -118,6 +118,14 @@ export function traceWindowMillisecondsToMicroSeconds(bounds: Types.Timing.Trace
     range: millisecondsToMicroseconds(bounds.range),
   };
 }
+export function traceWindowMicroSecondsToMilliSeconds(bounds: Types.Timing.TraceWindowMicroSeconds):
+    Types.Timing.TraceWindowMilliSeconds {
+  return {
+    min: microSecondsToMilliseconds(bounds.min),
+    max: microSecondsToMilliseconds(bounds.max),
+    range: microSecondsToMilliseconds(bounds.range),
+  };
+}
 
 export function traceWindowFromMilliSeconds(
     min: Types.Timing.MilliSeconds, max: Types.Timing.MilliSeconds): Types.Timing.TraceWindowMicroSeconds {
@@ -178,6 +186,16 @@ export interface WindowFitsInsideBounds {
   window: Types.Timing.TraceWindowMicroSeconds;
   bounds: Types.Timing.TraceWindowMicroSeconds;
 }
+
+/**
+ * Returns true if the window fits entirely within the bounds.
+ * Note that if the window is equivalent to the bounds, that is considered to fit
+ */
 export function windowFitsInsideBounds(data: WindowFitsInsideBounds): boolean {
   return data.window.min >= data.bounds.min && data.window.max <= data.bounds.max;
 }
+
+export function windowsEqual(
+    w1: Types.Timing.TraceWindowMicroSeconds, w2: Types.Timing.TraceWindowMicroSeconds): boolean {
+  return w1.min === w2.min && w1.max === w2.max;
+}

package/front_end/models/trace/helpers/Trace.test.ts

@@ -13,7 +13,7 @@ import {
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
-describeWithEnvironment('TraceModel helpers', function() {
+describeWithEnvironment('Trace helpers', function() {
   describe('extractOriginFromTrace', () => {
     it('extracts the origin of a parsed trace correctly', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
@@ -28,7 +28,7 @@ describeWithEnvironment('TraceModel helpers', function() {
     });
 
     it('returns null when no origin is found', async function() {
-      const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic.json.gz');
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'missing-url.json.gz');
       const origin = Trace.Helpers.Trace.extractOriginFromTrace(parsedTrace.Meta.mainFrameURL);
       assert.isNull(origin);
     });
@@ -123,7 +123,7 @@ describeWithEnvironment('TraceModel helpers', function() {
     it('returns the correct navigation for a page load event', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'multiple-navigations.json.gz');
       const {Meta, PageLoadMetrics} = parsedTrace;
-      const firstNavigationId = Meta.navigationsByNavigationId.keys().next().value;
+      const firstNavigationId = Meta.navigationsByNavigationId.keys().next().value!;
 
       const fcp = PageLoadMetrics.metricScoresByFrameId.get(Meta.mainFrameId)
                       ?.get(firstNavigationId)
@@ -728,4 +728,35 @@ describeWithEnvironment('TraceModel helpers', function() {
       assert.isTrue(Trace.Helpers.Trace.isTopLevelEvent(runTask));
     });
   });
+
+  describe('findNextEventAfterTimestamp', () => {
+    it('gets the first screenshot after a trace', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'cls-multiple-frames.json.gz');
+      const screenshots = parsedTrace.Screenshots.all;
+      const {clusters} = parsedTrace.LayoutShifts;
+      const shifts = clusters.flatMap(cluster => cluster.events);
+      assert.isAtLeast(shifts.length, 10);
+
+      shifts.forEach((shift, i) => {
+        const prevScreenshot = Trace.Helpers.Trace.findPreviousEventBeforeTimestamp(screenshots, shift.ts);
+        const nextScreenshot = Trace.Helpers.Trace.findNextEventAfterTimestamp(screenshots, shift.ts);
+
+        // There may be a screenshot after the last shift. but very possible there isn't.
+        if (i === shifts.length - 1) {
+          return;
+        }
+        assert.isNotNull(nextScreenshot);
+        assert.isNotNull(prevScreenshot);
+        // Make sure the screenshot came after the shift.
+        assert.isAbove(nextScreenshot!.ts, shift.ts);
+        // Make sure the previous screenshot came before the shift
+        assert.isBelow(prevScreenshot.ts, shift.ts);
+
+        // Bonus, we expect the result of calling prevEvent* to be the same as `items[nextIndex - 1]`
+        const nextIndex = screenshots.indexOf(nextScreenshot);
+        const alsoPrevious = screenshots[nextIndex - 1];
+        assert.strictEqual(prevScreenshot, alsoPrevious);
+      });
+    });
+  });
 });

package/front_end/models/trace/helpers/Trace.ts

@@ -510,6 +510,18 @@ export function findUpdateLayoutTreeEvents(
   return foundEvents;
 }
 
+export function findNextEventAfterTimestamp<T extends Types.Events.Event>(
+    candidates: T[], ts: Types.Timing.MicroSeconds): T|null {
+  const index = Platform.ArrayUtilities.nearestIndexFromBeginning(candidates, candidate => ts < candidate.ts);
+  return index === null ? null : candidates[index];
+}
+
+export function findPreviousEventBeforeTimestamp<T extends Types.Events.Event>(
+    candidates: T[], ts: Types.Timing.MicroSeconds): T|null {
+  const index = Platform.ArrayUtilities.nearestIndexFromEnd(candidates, candidate => candidate.ts < ts);
+  return index === null ? null : candidates[index];
+}
+
 export interface ForEachEventConfig {
   onStartEvent: (event: Types.Events.Event) => void;
   onEndEvent: (event: Types.Events.Event) => void;

package/front_end/models/trace/helpers/TreeHelpers.test.ts

@@ -455,4 +455,74 @@ describe('TreeHelpers', () => {
          assert.isFalse(Trace.Helpers.TreeHelpers.canBuildTreesFromEvents(data));
        });
   });
+  describe('buildTreesFromEventsForAI', () => {
+    it('returns the trace entry tree starting from the root task, highlighting the selected event', () => {
+      const evaluateScript = makeCompleteEvent(Trace.Types.Events.Name.EVALUATE_SCRIPT, 0, 500);
+      const v8Run = makeCompleteEvent('v8.run', 10, 490);
+      const parseFunction = makeCompleteEvent('V8.ParseFunction', 12, 1);
+
+      const traceEvents: Trace.Types.Events.Event[] = [evaluateScript, v8Run, parseFunction];
+      const profileCalls = [makeProfileCall('a', 100, 200), makeProfileCall('b', 300, 200)];
+
+      // Roughly this looks like:
+      // 0                                          500
+      // |------------- EvaluateScript -------------|
+      //  |-        v8.run                         -|
+      //    |--|   |-    a   -||-          b        |
+      //      ^ V8.ParseFunction
+
+      const allEntries = Trace.Helpers.Trace.mergeEventsInOrder(traceEvents, profileCalls);
+      const {tree, entryToNode} = Trace.Helpers.TreeHelpers.treify(allEntries, {filter: {has: () => true}});
+      const rootNode = entryToNode.get(evaluateScript);
+      // Select something from the middle.
+      const selectedNode = entryToNode.get(v8Run);
+
+      assert.strictEqual(tree.roots.size, 1);
+      assert.exists(rootNode);
+      assert.exists(selectedNode);
+
+      const aiNodeTree = Trace.Helpers.TreeHelpers.AINode.fromEntryNode(selectedNode, () => true);
+      const v8RunNode = Trace.Helpers.TreeHelpers.AINode.getSelectedNodeWithinTree(aiNodeTree);
+
+      assert.exists(aiNodeTree);
+      assert.exists(v8RunNode);
+
+      // First check the serialization as a while.
+      assert.deepStrictEqual(JSON.parse(JSON.stringify(aiNodeTree)), {
+        name: 'EvaluateScript',
+        dur: 0.5,
+        self: 0,
+        children: [{
+          selected: true,
+          name: 'v8.run',
+          dur: 0.5,
+          self: 0.1,
+          children: [
+            {name: 'V8.ParseFunction', dur: 0, self: 0},
+            {name: 'a', url: '', dur: 0.2, self: 0.2},
+            {name: 'b', url: '', dur: 0.2, self: 0.2},
+          ],
+        }],
+      });
+
+      // Now we can make sure the pre-serialized data is also correct.
+      assert.strictEqual(v8RunNode.name, 'v8.run');
+      assert.strictEqual(v8RunNode.selected, true);
+      assert.strictEqual(v8RunNode.duration, 0.49);
+      assert.strictEqual(v8RunNode.children?.length, 3);
+
+      assert.strictEqual(aiNodeTree.name, 'EvaluateScript');
+      assert.strictEqual(aiNodeTree.selected, undefined);
+      assert.strictEqual(aiNodeTree.duration, 0.5);
+      assert.strictEqual(aiNodeTree.children?.length, 1);
+
+      const parseFnAINode = v8RunNode.children?.at(0) as Trace.Helpers.TreeHelpers.AINode;
+      assert.exists(v8RunNode);
+
+      assert.strictEqual(parseFnAINode.name, 'V8.ParseFunction');
+      assert.strictEqual(parseFnAINode.selected, undefined);
+      assert.strictEqual(parseFnAINode.duration, 0.001);
+      assert.strictEqual(parseFnAINode.children, undefined);
+    });
+  });
 });

package/front_end/models/trace/helpers/TreeHelpers.ts

@@ -4,7 +4,7 @@
 
 import * as Types from '../types/types.js';
 
-import {eventIsInBounds} from './Timing.js';
+import {eventIsInBounds, microSecondsToMilliseconds} from './Timing.js';
 
 let nodeIdCount = 0;
 export const makeTraceEntryNodeId = (): TraceEntryNodeId => (++nodeIdCount) as TraceEntryNodeId;
@@ -27,6 +27,7 @@ export interface TraceEntryTree {
   maxDepth: number;
 }
 
+/** Node in the graph that defines all parent/child relationships. */
 export interface TraceEntryNode {
   entry: Types.Events.Event;
   depth: number;
@@ -36,6 +37,174 @@ export interface TraceEntryNode {
   children: TraceEntryNode[];
 }
 
+export interface AINodeSerialized {
+  name: string;
+  dur?: number;
+  self?: number;
+  children?: AINodeSerialized[];
+  url?: string;
+  selected?: boolean;
+}
+
+/**
+ * Node in a graph simplified for AI Assistance processing. The graph mirrors the TraceEntryNode one.
+ * Huge tip of the hat to Victor Porof for prototyping this with some great work: https://crrev.com/c/5711249
+ */
+export class AINode {
+  // event: Types.Events.Event; // Set in the constructor.
+  name: string;
+  duration?: Types.Timing.MilliSeconds;
+  selfDuration?: Types.Timing.MilliSeconds;
+  id?: TraceEntryNodeId;
+  children?: AINode[];
+  url?: string;
+  selected?: boolean;
+
+  constructor(public event: Types.Events.Event) {
+    this.name = event.name;
+    this.duration = event.dur === undefined ? undefined : microSecondsToMilliseconds(event.dur);
+
+    if (Types.Events.isProfileCall(event)) {
+      this.name = event.callFrame.functionName || '(anonymous)';
+      this.url = event.callFrame.url;
+    }
+  }
+
+  // Manually handle how nodes in this tree are serialized. We'll drop serveral properties that we don't need in the JSON string.
+  // FYI: toJSON() is invoked implicitly via JSON.stringify()
+  toJSON(): AINodeSerialized {
+    return {
+      selected: this.selected,
+      name: this.name,
+      url: this.url,
+      // Round milliseconds because we don't need the precision
+      dur: this.duration === undefined ? undefined : Math.round(this.duration * 10) / 10,
+      self: this.selfDuration === undefined ? undefined : Math.round(this.selfDuration * 10) / 10,
+      children: this.children?.length ? this.children : undefined,
+    };
+  }
+
+  static #fromTraceEvent(event: Types.Events.Event): AINode {
+    return new AINode(event);
+  }
+
+  /**
+   * Builds a TraceEntryNodeForAI tree from a node and marks the selected node. Primary entrypoint from EntriesFilter
+   */
+  static fromEntryNode(selectedNode: TraceEntryNode, entryIsVisibleInTimeline: (event: Types.Events.Event) => boolean):
+      AINode {
+    /**
+     * Builds a AINode tree from a TraceEntryNode tree and marks the selected node.
+     */
+    function fromEntryNodeAndTree(node: TraceEntryNode): AINode {
+      const aiNode = AINode.#fromTraceEvent(node.entry);
+      aiNode.id = node.id;
+      if (node === selectedNode) {
+        aiNode.selected = true;
+      }
+      aiNode.selfDuration = node.selfTime === undefined ? undefined : microSecondsToMilliseconds(node.selfTime);
+      for (const child of node.children) {
+        aiNode.children ??= [];
+        aiNode.children.push(fromEntryNodeAndTree(child));
+      }
+      return aiNode;
+    }
+
+    function findTopMostVisibleAncestor(node: TraceEntryNode): TraceEntryNode {
+      const parentNodes = [node];
+      let parent = node.parent;
+      while (parent) {
+        parentNodes.unshift(parent);
+        parent = parent.parent;
+      }
+      return parentNodes.find(node => entryIsVisibleInTimeline(node.entry)) ?? node;
+    }
+
+    const topMostVisibleRoot = findTopMostVisibleAncestor(selectedNode);
+    const aiNode = fromEntryNodeAndTree(topMostVisibleRoot);
+
+    // If our root wasn't visible, this could return an array of multiple RunTasks.
+    // But with a visible root, we safely get back the exact same root, now with its descendent tree updated.
+    // Filter to ensure our tree here only has "visible" entries
+    const [filteredAiNodeRoot] = AINode.#filterRecursive([aiNode], node => {
+      if (node.event.name === 'V8.CompileCode' || node.event.name === 'UpdateCounters') {
+        return false;
+      }
+      return entryIsVisibleInTimeline(node.event);
+    });
+    return filteredAiNodeRoot;
+  }
+
+  static getSelectedNodeWithinTree(node: AINode): AINode|null {
+    if (node.selected) {
+      return node;
+    }
+    if (!node.children) {
+      return null;
+    }
+    for (const child of node.children) {
+      const returnedNode = AINode.getSelectedNodeWithinTree(child);
+      if (returnedNode) {
+        return returnedNode;
+      }
+    }
+    return null;
+  }
+
+  static #filterRecursive(list: AINode[], predicate: (node: AINode) => boolean): AINode[] {
+    let done;
+    do {
+      done = true;
+      const filtered: AINode[] = [];
+      for (const node of list) {
+        if (predicate(node)) {
+          // Keep it
+          filtered.push(node);
+        } else if (node.children) {
+          filtered.push(...node.children);
+          done = false;
+        }
+      }
+      list = filtered;
+    } while (!done);
+
+    for (const node of list) {
+      if (node.children) {
+        node.children = AINode.#filterRecursive(node.children, predicate);
+      }
+    }
+    return list;
+  }
+
+  static #removeInexpensiveNodesRecursively(
+      list: AINode[],
+      options?: {minDuration?: number, minSelf?: number, minJsDuration?: number, minJsSelf?: number}): AINode[] {
+    const minDuration = options?.minDuration ?? 0;
+    const minSelf = options?.minSelf ?? 0;
+    const minJsDuration = options?.minJsDuration ?? 0;
+    const minJsSelf = options?.minJsSelf ?? 0;
+
+    const isJS = (node: AINode): boolean => Boolean(node.url);
+    const longEnough = (node: AINode): boolean =>
+        node.duration === undefined || node.duration >= (isJS(node) ? minJsDuration : minDuration);
+    const selfLongEnough = (node: AINode): boolean =>
+        node.selfDuration === undefined || node.selfDuration >= (isJS(node) ? minJsSelf : minSelf);
+
+    return AINode.#filterRecursive(list, node => longEnough(node) && selfLongEnough(node));
+  }
+
+  // Invoked from DrJonesPerformanceAgent
+  sanitize(): void {
+    if (this.children) {
+      this.children = AINode.#removeInexpensiveNodesRecursively(this.children, {
+        minDuration: Types.Timing.MilliSeconds(1),
+        minJsDuration: Types.Timing.MilliSeconds(1),
+        minJsSelf: Types.Timing.MilliSeconds(0.1),
+      });
+    }
+  }
+}
+
 class TraceEntryNodeIdTag {
   /* eslint-disable-next-line no-unused-private-class-members */
   readonly #tag: (symbol|undefined);

package/front_end/models/trace/insights/Common.ts

@@ -6,7 +6,7 @@ import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import {type InsightResults, type InsightSetContextWithNavigation, type TraceInsightSets} from './types.js';
+import type {InsightResults, InsightSetContextWithNavigation, TraceInsightSets} from './types.js';
 
 export function getInsight<InsightName extends keyof InsightResults>(
     insightName: InsightName, insights: TraceInsightSets|null, key: string|null): InsightResults[InsightName]|null {

package/front_end/models/trace/insights/CumulativeLayoutShift.test.ts

@@ -30,16 +30,28 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
       const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
       const {animationFailures} = insight;
 
+      const simpleAnimation = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'simple-animation';
+      });
+      const top = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'top';
+      });
+
       const expected: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [
         {
           name: 'simple-animation',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['color'],
+          animation: simpleAnimation,
         },
         {
           name: 'top',
-          failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
+          failureReasons: [
+            InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE,
+            InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
+          ],
           unsupportedProperties: ['top'],
+          animation: top,
         },
       ];
       assert.deepStrictEqual(animationFailures, expected);
@@ -51,8 +63,15 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
       const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
       const {shifts, animationFailures} = insight;
 
+      const simpleAnimation = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'simple-animation';
+      });
+      const top = data.Animations.animations.find(animation => {
+        return animation.args.data.beginEvent.args.data.displayName === 'top';
+      });
+
       const shiftAnimations: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [];
-      shifts?.forEach(entry => {
+      shifts.forEach(entry => {
         shiftAnimations.push(...entry.nonCompositedAnimations);
       });
       const expectedWithShift: InsightRunners.CumulativeLayoutShift.NoncompositedAnimationFailure[] = [
@@ -60,6 +79,7 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
           name: 'simple-animation',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['height', 'color', 'top'],
+          animation: simpleAnimation,
         },
       ];
       assert.deepStrictEqual(shiftAnimations, expectedWithShift);
@@ -69,11 +89,13 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
           name: 'simple-animation',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['height', 'color', 'top'],
+          animation: simpleAnimation,
         },
         {
           name: 'top',
           failureReasons: [InsightRunners.CumulativeLayoutShift.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY],
           unsupportedProperties: ['top'],
+          animation: top,
         },
       ];
       // animationFailures should include both root causes failures, and failures without associated shifts.
@@ -167,6 +189,28 @@ describeWithEnvironment('CumulativeLayoutShift', function() {
         assert.isOk(shift3);
         assert.isEmpty(shift3[1].fontRequests);
       });
+
+      it('handles potential unsized images root cause correctly', async function() {
+        const {data, insights} = await processTrace(this, 'unsized-images.json.gz');
+        const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+        const insight = getInsightOrError('CumulativeLayoutShift', insights, firstNav);
+        const {shifts} = insight;
+        assert.exists(shifts);
+        assert.strictEqual(shifts.size, 2);
+
+        const unsizedImages = data.LayoutShifts.layoutImageUnsizedEvents;
+        assert.strictEqual(unsizedImages.length, 2);
+
+        const layoutShiftEvents = Array.from(shifts.entries());
+        const shift1 = layoutShiftEvents.at(0);
+        assert.isOk(shift1);
+        // Root cause should match the nodeId of the unsized images events.
+        assert.strictEqual(shift1[1].unsizedImages[0], unsizedImages[0].args.data.nodeId);
+
+        const shift2 = layoutShiftEvents.at(1);
+        assert.isOk(shift2);
+        assert.strictEqual(shift2[1].unsizedImages[0], unsizedImages[1].args.data.nodeId);
+      });
     });
   });
   describe('clusters', function() {