lib/web_ui/test/canvaskit/embedded_views_test.dart

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:async';
import 'dart:js_interop';

import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
import 'package:ui/ui.dart' as ui;
import 'package:ui/ui_web/src/ui_web.dart' as ui_web;

import 'common.dart';
import 'test_data.dart';

EngineFlutterWindow get implicitView =>
    EnginePlatformDispatcher.instance.implicitView!;

DomElement get platformViewsHost => implicitView.dom.platformViewsHost;
DomElement get sceneHost => implicitView.dom.sceneHost;

void main() {
  internalBootstrapBrowserTest(() => testMain);
}

void testMain() {
  group('$HtmlViewEmbedder', () {
    setUpCanvasKitTest(withImplicitView: true);

    setUp(() {
      EngineFlutterDisplay.instance.debugOverrideDevicePixelRatio(1);
    });

    tearDown(() {
      PlatformViewManager.instance.debugClear();
      CanvasKitRenderer.instance.debugClear();
      Instrumentation.enabled = false;
    });

    test('embeds interactive platform views', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());

      // The platform view is now split in two parts. The contents live
      // as a child of the glassPane, and the slot lives in the glassPane
      // shadow root. The slot is the one that has pointer events auto.
      final DomElement contents = platformViewsHost.querySelector('#view-0')!;
      final DomElement slot = sceneHost.querySelector('slot')!;
      final DomElement contentsHost = contents.parent!;
      final DomElement slotHost = slot.parent!;

      expect(contents, isNotNull,
          reason: 'The view from the factory is injected in the DOM.');

      expect(contentsHost.tagName, equalsIgnoringCase('flt-platform-view'));
      expect(slotHost.tagName, equalsIgnoringCase('flt-platform-view-slot'));

      expect(slotHost.style.pointerEvents, 'auto',
          reason: 'The slot reenables pointer events.');
      expect(contentsHost.getAttribute('slot'), slot.getAttribute('name'),
          reason: 'The contents and slot are correctly related.');
    });

    test('clips platform views with RRects', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.pushClipRRect(
          ui.RRect.fromLTRBR(0, 0, 10, 10, const ui.Radius.circular(3)));
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());

      expect(
        sceneHost.querySelectorAll('#sk_path_defs').single,
        isNotNull,
      );
      expect(
        sceneHost
            .querySelectorAll('#sk_path_defs')
            .single
            .querySelectorAll('clipPath')
            .single,
        isNotNull,
      );
      expect(
        sceneHost.querySelectorAll('flt-clip').single.style.clipPath,
        'url("#svgClip1")',
      );
      expect(
        sceneHost.querySelectorAll('flt-clip').single.style.width,
        '100%',
      );
      expect(
        sceneHost.querySelectorAll('flt-clip').single.style.height,
        '100%',
      );
    });

    test('correctly transforms platform views', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      final Matrix4 scaleMatrix = Matrix4.identity()
        ..scale(5, 5)
        ..translate(100, 100);
      sb.pushTransform(scaleMatrix.toFloat64());
      sb.pushOffset(3, 3);
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());

      // Transformations happen on the slot element.
      final DomElement slotHost =
          sceneHost.querySelector('flt-platform-view-slot')!;

      expect(
        slotHost.style.transform,
        // We should apply the scale matrix first, then the offset matrix.
        // So the translate should be 515 (5 * 100 + 5 * 3), and not
        // 503 (5 * 100 + 3).
        'matrix3d(5, 0, 0, 0, 0, 5, 0, 0, 0, 0, 5, 0, 515, 515, 0, 1)',
      );
    });

    test('correctly offsets platform views', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.addPlatformView(0, offset: const ui.Offset(3, 4), width: 5, height: 6);
      await renderScene(sb.build());

      final DomElement slotHost =
          sceneHost.querySelector('flt-platform-view-slot')!;
      final DomCSSStyleDeclaration style = slotHost.style;

      expect(style.transform, 'matrix(1, 0, 0, 1, 3, 4)');
      expect(style.width, '5px');
      expect(style.height, '6px');

      final DomRect slotRect = slotHost.getBoundingClientRect();
      expect(slotRect.left, 3);
      expect(slotRect.top, 4);
      expect(slotRect.right, 8);
      expect(slotRect.bottom, 10);
    });

    // Returns the list of CSS transforms applied to the ancestor chain of
    // elements starting from `viewHost`, up until and excluding
    // <flt-scene-host>.
    List<String> getTransformChain(DomElement viewHost) {
      final List<String> chain = <String>[];
      DomElement? element = viewHost;
      while (element != null &&
          element.tagName.toLowerCase() != 'flt-scene-host') {
        chain.add(element.style.transform);
        element = element.parent;
      }
      return chain;
    }

    test('correctly offsets when clip chain length is changed', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(3, 3);
      sb.pushClipRect(ui.Rect.largest);
      sb.pushOffset(6, 6);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());

      // Transformations happen on the slot element.
      DomElement slotHost = sceneHost.querySelector('flt-platform-view-slot')!;

      expect(
        getTransformChain(slotHost),
        <String>[
          'matrix(1, 0, 0, 1, 6, 6)',
          'matrix(1, 0, 0, 1, 3, 3)',
        ],
      );

      sb = LayerSceneBuilder();
      sb.pushOffset(3, 3);
      sb.pushClipRect(ui.Rect.largest);
      sb.pushOffset(6, 6);
      sb.pushClipRect(ui.Rect.largest);
      sb.pushOffset(9, 9);
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());

      // Transformations happen on the slot element.
      slotHost = sceneHost.querySelector('flt-platform-view-slot')!;

      expect(
        getTransformChain(slotHost),
        <String>[
          'matrix(1, 0, 0, 1, 9, 9)',
          'matrix(1, 0, 0, 1, 6, 6)',
          'matrix(1, 0, 0, 1, 3, 3)',
        ],
      );
    });

    test('converts device pixels to logical pixels (no clips)', () async {
      EngineFlutterDisplay.instance.debugOverrideDevicePixelRatio(4);
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(1, 1);
      sb.pushOffset(2, 2);
      sb.pushOffset(3, 3);
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());

      // Transformations happen on the slot element.
      final DomElement slotHost =
          sceneHost.querySelector('flt-platform-view-slot')!;

      expect(
        getTransformChain(slotHost),
        <String>['matrix(0.25, 0, 0, 0.25, 1.5, 1.5)'],
      );
    });

    test('converts device pixels to logical pixels (with clips)', () async {
      EngineFlutterDisplay.instance.debugOverrideDevicePixelRatio(4);
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(3, 3);
      sb.pushClipRect(ui.Rect.largest);
      sb.pushOffset(6, 6);
      sb.pushClipRect(ui.Rect.largest);
      sb.pushOffset(9, 9);
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());

      // Transformations happen on the slot element.
      final DomElement slotHost =
          sceneHost.querySelector('flt-platform-view-slot')!;

      expect(
        getTransformChain(slotHost),
        <String>[
          'matrix(1, 0, 0, 1, 9, 9)',
          'matrix(1, 0, 0, 1, 6, 6)',
          'matrix(0.25, 0, 0, 0.25, 0.75, 0.75)',
        ],
      );
    });

    test('renders overlays on top of platform views', () async {
      final CkPicture testPicture =
          paintPicture(const ui.Rect.fromLTRB(0, 0, 10, 10), (CkCanvas canvas) {
        canvas.drawCircle(const ui.Offset(5, 5), 5, CkPaint());
      });

      // Initialize all platform views to be used in the test.
      final List<int> platformViewIds = <int>[];
      for (int i = 0; i < 16; i++) {
        ui_web.platformViewRegistry.registerViewFactory(
          'test-platform-view',
          (int viewId) => createDomHTMLDivElement()..id = 'view-$i',
        );
        await createPlatformView(i, 'test-platform-view');
        platformViewIds.add(i);
      }

      Future<void> renderTestScene({required int viewCount}) async {
        final LayerSceneBuilder sb = LayerSceneBuilder();
        sb.pushOffset(0, 0);
        for (int i = 0; i < viewCount; i++) {
          sb.addPicture(ui.Offset.zero, testPicture);
          sb.addPlatformView(i, width: 10, height: 10);
        }
        await renderScene(sb.build());
      }

      // Frame 1:
      //   Render: up to cache size platform views.
      //   Expect: main canvas plus platform view overlays.
      await renderTestScene(viewCount: 8);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // Frame 2:
      //   Render: zero platform views.
      //   Expect: main canvas, no overlays.
      await renderTestScene(viewCount: 0);
      _expectSceneMatches(<_EmbeddedViewMarker>[]);

      // Frame 3:
      //   Render: less than cache size platform views.
      //   Expect: overlays reused.
      await renderTestScene(viewCount: 6);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // Frame 4:
      //   Render: more platform views than max overlay count.
      //   Expect: main canvas, backup overlay, maximum overlays.
      await renderTestScene(viewCount: 16);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // Frame 5:
      //   Render: zero platform views.
      //   Expect: main canvas, no overlays.
      await renderTestScene(viewCount: 0);
      _expectSceneMatches(<_EmbeddedViewMarker>[]);

      // Frame 6:
      //   Render: deleted platform views.
      //   Expect: error.
      for (final int id in platformViewIds) {
        const StandardMethodCodec codec = StandardMethodCodec();
        final Completer<void> completer = Completer<void>();
        ui.PlatformDispatcher.instance.sendPlatformMessage(
          'flutter/platform_views',
          codec.encodeMethodCall(MethodCall(
            'dispose',
            id,
          )),
          completer.complete,
        );
        await completer.future;
      }

      try {
        await renderTestScene(viewCount: platformViewIds.length);
        fail('Expected to throw');
      } on AssertionError catch (error) {
        expect(
          error.toString(),
          contains(
              'Cannot render platform views: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15. These views have not been created, or they have been deleted.'),
        );
      }

      // Frame 7:
      //   Render: a platform view after error.
      //   Expect: success. Just checking the system is not left in a corrupted state.
      await createPlatformView(0, 'test-platform-view');
      await renderTestScene(viewCount: 0);
      _expectSceneMatches(<_EmbeddedViewMarker>[]);
    });

    test('correctly reuses overlays', () async {
      final CkPicture testPicture =
          paintPicture(const ui.Rect.fromLTRB(0, 0, 10, 10), (CkCanvas canvas) {
        canvas.drawCircle(const ui.Offset(5, 5), 5, CkPaint());
      });

      // Initialize all platform views to be used in the test.
      final List<int> platformViewIds = <int>[];
      for (int i = 0; i < 20; i++) {
        ui_web.platformViewRegistry.registerViewFactory(
          'test-platform-view',
          (int viewId) => createDomHTMLDivElement()..id = 'view-$i',
        );
        await createPlatformView(i, 'test-platform-view');
        platformViewIds.add(i);
      }

      Future<void> renderTestScene(List<int> views) async {
        final LayerSceneBuilder sb = LayerSceneBuilder();
        sb.pushOffset(0, 0);
        for (final int view in views) {
          sb.addPicture(ui.Offset.zero, testPicture);
          sb.addPlatformView(view, width: 10, height: 10);
        }
        await renderScene(sb.build());
      }

      // Frame 1:
      //   Render: Views 1-10
      //   Expect: main canvas plus platform view overlays; empty cache.
      await renderTestScene(<int>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // Frame 2:
      //   Render: Views 2-11
      //   Expect: main canvas plus platform view overlays; empty cache.
      await renderTestScene(<int>[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // Frame 3:
      //   Render: Views 3-12
      //   Expect: main canvas plus platform view overlays; empty cache.
      await renderTestScene(<int>[3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // Frame 4:
      //   Render: Views 3-12 again (same as last frame)
      //   Expect: main canvas plus platform view overlays; empty cache.
      await renderTestScene(<int>[3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);
    });

    test('embeds and disposes of a platform view', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
      ]);

      expect(platformViewsHost.querySelector('flt-platform-view'), isNotNull);

      await disposePlatformView(0);

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      await renderScene(sb.build());

      _expectSceneMatches(<_EmbeddedViewMarker>[]);

      expect(platformViewsHost.querySelector('flt-platform-view'), isNull);
    });

    test(
        'does not crash when resizing the window after textures have been registered',
        () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final CkBrowserImageDecoder image = await CkBrowserImageDecoder.create(
        contentType: 'image/gif',
        data: kAnimatedGif,
        debugSource: 'test',
      );
      final ui.FrameInfo frame = await image.getNextFrame();
      final CkImage ckImage = frame.image as CkImage;

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      final CkPictureRecorder recorder = CkPictureRecorder();
      final CkCanvas canvas = recorder.beginRecording(ui.Rect.largest);
      canvas.drawImage(ckImage, ui.Offset.zero, CkPaint());
      final CkPicture picture = recorder.endRecording();
      sb.addPicture(ui.Offset.zero, picture);
      sb.addPlatformView(0, width: 10, height: 10);

      implicitView.debugPhysicalSizeOverride = const ui.Size(100, 100);
      implicitView.debugForceResize();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
      ]);

      implicitView.debugPhysicalSizeOverride = const ui.Size(200, 200);
      implicitView.debugForceResize();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
      ]);

      implicitView.debugPhysicalSizeOverride = null;
      implicitView.debugForceResize();

      // ImageDecoder is not supported in Safari or Firefox.
    }, skip: isSafari || isFirefox);

    test('removes the DOM node of an unrendered platform view', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPlatformView(0, width: 10, height: 10);
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
      ]);

      expect(platformViewsHost.querySelector('flt-platform-view'), isNotNull);

      // Render a frame with a different platform view.
      await createPlatformView(1, 'test-platform-view');
      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPlatformView(1, width: 10, height: 10);
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
      ]);

      expect(
        platformViewsHost.querySelectorAll('flt-platform-view'),
        hasLength(2),
      );

      // Render a frame without a platform view, but also without disposing of
      // the platform view.
      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[]);

      // The actual contents of the platform view are kept in the dom, until
      // it's actually disposed of!
      expect(
        platformViewsHost.querySelectorAll('flt-platform-view'),
        hasLength(2),
      );
    });

    test(
        'removes old SVG clip definitions from the DOM when the view is recomposited',
        () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'test-view',
      );
      await createPlatformView(0, 'test-platform-view');

      Future<void> renderTestScene() async {
        final LayerSceneBuilder sb = LayerSceneBuilder();
        sb.pushOffset(0, 0);
        sb.pushClipRRect(
            ui.RRect.fromLTRBR(0, 0, 10, 10, const ui.Radius.circular(3)));
        sb.addPlatformView(0, width: 10, height: 10);
        await renderScene(sb.build());
      }

      final DomNode skPathDefs = sceneHost.querySelector('#sk_path_defs')!;

      expect(skPathDefs.childNodes, hasLength(0));

      await renderTestScene();
      expect(skPathDefs.childNodes, hasLength(1));

      await renderTestScene();
      expect(skPathDefs.childNodes, hasLength(1));

      await renderTestScene();
      expect(skPathDefs.childNodes, hasLength(1));
    });

    test('does not crash when a prerolled platform view is not composited',
        () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-platform-view',
        (int viewId) => createDomHTMLDivElement()..id = 'view-0',
      );
      await createPlatformView(0, 'test-platform-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.pushClipRect(ui.Rect.zero);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.pop();
      // The below line should not throw an error.
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[]);
    });

    test('does not create overlays for invisible platform views', () async {
      final CkPicture testPicture =
          paintPicture(const ui.Rect.fromLTRB(0, 0, 10, 10), (CkCanvas canvas) {
        canvas.drawCircle(const ui.Offset(5, 5), 5, CkPaint());
      });
      ui_web.platformViewRegistry.registerViewFactory(
          'test-visible-view',
          (int viewId) =>
              createDomHTMLDivElement()..className = 'visible-platform-view');
      ui_web.platformViewRegistry.registerViewFactory(
        'test-invisible-view',
        (int viewId) =>
            createDomHTMLDivElement()..className = 'invisible-platform-view',
        isVisible: false,
      );
      await createPlatformView(0, 'test-visible-view');
      await createPlatformView(1, 'test-invisible-view');
      await createPlatformView(2, 'test-visible-view');
      await createPlatformView(3, 'test-invisible-view');
      await createPlatformView(4, 'test-invisible-view');
      await createPlatformView(5, 'test-invisible-view');
      await createPlatformView(6, 'test-invisible-view');

      expect(PlatformViewManager.instance.isInvisible(0), isFalse);
      expect(PlatformViewManager.instance.isInvisible(1), isTrue);

      LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _overlay,
      ], reason: 'Invisible view renders, followed by an overlay.');

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
      ], reason: 'Overlay created after a group containing a visible view.');

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(2, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ],
          reason:
              'Overlays created after each group containing a visible view.');

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(2, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(3, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _overlay,
      ], reason: 'Invisible views grouped in with visible views.');

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(2, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(3, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(4, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ]);

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(2, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(3, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(4, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(5, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ]);

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(0, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(2, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(3, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(4, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(5, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(6, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ]);

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(3, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(4, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(5, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(6, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ],
          reason:
              'Many invisible views can be rendered on top of the base overlay.');

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(2, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(3, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(4, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ]);

      sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(4, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(3, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(2, width: 10, height: 10);
      sb.addPicture(ui.Offset.zero, testPicture);
      sb.addPlatformView(1, width: 10, height: 10);
      sb.pop();
      await renderScene(sb.build());
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _overlay,
      ]);
    });

    test('can dispose without crashing', () async {
      ui_web.platformViewRegistry.registerViewFactory(
          'test-view',
          (int viewId) =>
              createDomHTMLDivElement()..className = 'platform-view',
          isVisible: false);

      await createPlatformView(0, 'test-view');
      await createPlatformView(1, 'test-view');
      await createPlatformView(2, 'test-view');

      final LayerSceneBuilder sb = LayerSceneBuilder()
        ..pushOffset(0, 0)
        ..addPlatformView(0, width: 10, height: 10)
        ..addPlatformView(1, width: 10, height: 10)
        ..addPlatformView(2, width: 10, height: 10)
        ..pop();

      await renderScene(sb.build());

      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _platformView,
        _platformView,
      ]);

      expect(() {
        final HtmlViewEmbedder embedder = (renderer as CanvasKitRenderer)
            .debugGetRasterizerForView(implicitView)!
            .viewEmbedder;
        // The following line used to cause a "Concurrent modification during iteration"
        embedder.dispose();
      }, returnsNormally);
    });

    test('optimizes overlays when pictures and platform views do not overlap',
        () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-view',
        (int viewId) => createDomHTMLDivElement()..className = 'platform-view',
      );

      CkPicture rectPicture(ui.Rect rect) {
        return paintPicture(rect, (CkCanvas canvas) {
          canvas.drawRect(
              rect, CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0));
        });
      }

      await createPlatformView(0, 'test-view');
      await createPlatformView(1, 'test-view');
      await createPlatformView(2, 'test-view');

      expect(PlatformViewManager.instance.isVisible(0), isTrue);
      expect(PlatformViewManager.instance.isVisible(1), isTrue);
      expect(PlatformViewManager.instance.isVisible(2), isTrue);

      // Scene 1: Pictures just overlap with the most recently painted platform
      // view. Analogous to third-party images with subtitles overlaid. Should
      // only need one overlay at the end of the scene.
      final LayerSceneBuilder sb1 = LayerSceneBuilder();
      sb1.pushOffset(0, 0);
      sb1.addPlatformView(0,
          offset: const ui.Offset(10, 10), width: 50, height: 50);
      sb1.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(12, 12, 10, 10)));
      sb1.addPlatformView(1,
          offset: const ui.Offset(70, 10), width: 50, height: 50);
      sb1.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(72, 12, 10, 10)));
      sb1.addPlatformView(2,
          offset: const ui.Offset(130, 10), width: 50, height: 50);
      sb1.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(132, 12, 10, 10)));
      final LayerScene scene1 = sb1.build();
      await renderScene(scene1);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ]);

      // Scene 2: Same as scene 1 but with a background painted first. Should only
      // need a canvas for the background and one more for the rest of the
      // pictures.
      final LayerSceneBuilder sb2 = LayerSceneBuilder();
      sb2.pushOffset(0, 0);
      sb2.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 300, 300)));
      sb2.addPlatformView(0,
          offset: const ui.Offset(10, 10), width: 50, height: 50);
      sb2.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(12, 12, 10, 10)));
      sb2.addPlatformView(1,
          offset: const ui.Offset(70, 10), width: 50, height: 50);
      sb2.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(72, 12, 10, 10)));
      sb2.addPlatformView(2,
          offset: const ui.Offset(130, 10), width: 50, height: 50);
      sb2.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(132, 12, 10, 10)));
      final LayerScene scene2 = sb2.build();
      await renderScene(scene2);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ]);

      // Scene 3: Paints a full-screen picture between each platform view. This
      // is the worst case scenario. There should be an overlay between each
      // platform view.
      final LayerSceneBuilder sb3 = LayerSceneBuilder();
      sb3.pushOffset(0, 0);
      sb3.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 300, 300)));
      sb3.addPlatformView(0,
          offset: const ui.Offset(10, 10), width: 50, height: 50);
      sb3.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 300, 300)));
      sb3.addPlatformView(1,
          offset: const ui.Offset(70, 10), width: 50, height: 50);
      sb3.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 300, 300)));
      sb3.addPlatformView(2,
          offset: const ui.Offset(130, 10), width: 50, height: 50);
      sb3.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 300, 300)));
      final LayerScene scene3 = sb3.build();
      await renderScene(scene3);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
      ]);

      // Scene 4: Same as scene 1 but with a placeholder rectangle painted
      // under each platform view. This is closer to how the real Flutter
      // framework would render a grid of platform views. Interestingly, in this
      // case every drawing can go in a base canvas.
      final LayerSceneBuilder sb4 = LayerSceneBuilder();
      sb4.pushOffset(0, 0);
      sb4.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 300, 300)));
      sb4.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(10, 10, 50, 50)));
      sb4.addPlatformView(0,
          offset: const ui.Offset(10, 10), width: 50, height: 50);
      sb4.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(70, 10, 50, 50)));
      sb4.addPlatformView(1,
          offset: const ui.Offset(70, 10), width: 50, height: 50);
      sb4.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(130, 10, 50, 50)));
      sb4.addPlatformView(2,
          offset: const ui.Offset(130, 10), width: 50, height: 50);
      final LayerScene scene4 = sb4.build();
      await renderScene(scene4);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _platformView,
      ]);

      // Scene 5: A combination of scene 1 and scene 4, where a subtitle is
      // painted over each platform view and a placeholder is painted under each
      // one.
      final LayerSceneBuilder sb5 = LayerSceneBuilder();
      sb5.pushOffset(0, 0);
      sb5.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 300, 300)));
      sb5.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(10, 10, 50, 50)));
      sb5.addPlatformView(0,
          offset: const ui.Offset(10, 10), width: 50, height: 50);
      sb5.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(12, 12, 10, 10)));
      sb5.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(70, 10, 50, 50)));
      sb5.addPlatformView(1,
          offset: const ui.Offset(70, 10), width: 50, height: 50);
      sb5.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(72, 12, 10, 10)));
      sb5.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(130, 10, 50, 50)));
      sb5.addPlatformView(2,
          offset: const ui.Offset(130, 10), width: 50, height: 50);
      sb5.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(132, 12, 10, 10)));
      final LayerScene scene5 = sb5.build();
      await renderScene(scene5);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
      ]);
    });

    test(
        'correctly places pictures in case where next '
        'picture intersects multiple elements', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-view',
        (int viewId) => createDomHTMLDivElement()..className = 'platform-view',
      );
      ui_web.platformViewRegistry.registerViewFactory(
        'invisible-view',
        (int viewId) =>
            createDomHTMLDivElement()..className = 'invisible-platform-view',
        isVisible: false,
      );

      CkPicture rectPicture(ui.Rect rect) {
        return paintPicture(rect, (CkCanvas canvas) {
          canvas.drawRect(
              rect, CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0));
        });
      }

      await createPlatformView(0, 'test-view');
      await createPlatformView(1, 'invisible-view');

      expect(PlatformViewManager.instance.isVisible(0), isTrue);
      expect(PlatformViewManager.instance.isVisible(1), isFalse);

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      sb.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 100, 100)));
      sb.addPlatformView(0,
          offset: const ui.Offset(10, 10), width: 50, height: 50);
      sb.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 100, 100)));
      sb.addPlatformView(1,
          offset: const ui.Offset(10, 10), width: 50, height: 50);
      sb.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 5, 5)));
      final LayerScene scene = sb.build();
      await renderScene(scene);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
      ]);

      final Rendering rendering = CanvasKitRenderer.instance
          .debugGetRasterizerForView(implicitView)!
          .viewEmbedder
          .debugActiveRendering;
      final List<int> picturesPerCanvas = rendering.canvases
          .map((RenderingRenderCanvas canvas) => canvas.pictures.length)
          .toList();
      expect(picturesPerCanvas, <int>[1, 2]);
    });

    test(
        'sinks platform view under the canvas if it does not overlap with the picture',
        () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-view',
        (int viewId) => createDomHTMLDivElement()..className = 'platform-view',
      );

      CkPicture rectPicture(double l, double t, double w, double h) {
        final ui.Rect rect = ui.Rect.fromLTWH(l, t, w, h);
        return paintPicture(rect, (CkCanvas canvas) {
          canvas.drawRect(
              rect, CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0));
        });
      }

      await createPlatformView(0, 'test-view');
      await createPlatformView(1, 'test-view');

      expect(PlatformViewManager.instance.isVisible(0), isTrue);
      expect(PlatformViewManager.instance.isVisible(1), isTrue);

      final LayerSceneBuilder sb = LayerSceneBuilder();

      // First picture-view-picture stack.
      {
        sb.pushOffset(0, 0);
        sb.addPicture(
          ui.Offset.zero,
          rectPicture(0, 0, 10, 10),
        );
        sb.addPlatformView(
          0,
          width: 10,
          height: 10,
        );
        sb.addPicture(
          ui.Offset.zero,
          rectPicture(2, 2, 5, 5),
        );
        sb.pop();
      }

      // Second picture-view-picture stack that does not overlap with the first one.
      {
        sb.pushOffset(20, 0);
        sb.addPicture(
          ui.Offset.zero,
          rectPicture(0, 0, 10, 10),
        );
        sb.addPlatformView(
          1,
          width: 10,
          height: 10,
        );
        sb.addPicture(
          ui.Offset.zero,
          rectPicture(2, 2, 5, 5),
        );
        sb.pop();
      }

      final LayerScene scene1 = sb.build();
      await renderScene(scene1);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _platformView,
        _overlay,
      ]);
    });

    test('optimizes overlays correctly with transforms and clips', () async {
      ui_web.platformViewRegistry.registerViewFactory(
        'test-view',
        (int viewId) => createDomHTMLDivElement()..className = 'platform-view',
      );

      CkPicture rectPicture(ui.Rect rect) {
        return paintPicture(rect, (CkCanvas canvas) {
          canvas.drawRect(
              rect, CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0));
        });
      }

      await createPlatformView(0, 'test-view');

      expect(PlatformViewManager.instance.isVisible(0), isTrue);

      // Test optimization correctly computes bounds with transforms and clips.
      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.pushOffset(0, 0);
      final Matrix4 scaleMatrix = Matrix4.identity()..scale(3, 3, 1);
      sb.pushTransform(scaleMatrix.toFloat64());
      sb.pushClipRect(const ui.Rect.fromLTWH(10, 10, 10, 10));
      sb.addPicture(
          ui.Offset.zero, rectPicture(const ui.Rect.fromLTWH(0, 0, 20, 20)));
      sb.addPlatformView(0, width: 20, height: 20);
      final LayerScene scene = sb.build();
      await renderScene(scene);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
      ]);
    });

    test('can customize amount of overlays', () async {
      final CkPicture testPicture =
          paintPicture(const ui.Rect.fromLTRB(0, 0, 10, 10), (CkCanvas canvas) {
        canvas.drawCircle(const ui.Offset(5, 5), 5, CkPaint());
      });

      // Initialize all platform views to be used in the test.
      final List<int> platformViewIds = <int>[];
      for (int i = 0; i < 16; i++) {
        ui_web.platformViewRegistry.registerViewFactory(
          'test-platform-view',
          (int viewId) => createDomHTMLDivElement()..id = 'view-$i',
        );
        await createPlatformView(i, 'test-platform-view');
        platformViewIds.add(i);
      }

      Future<void> renderTestScene({required int viewCount}) async {
        final LayerSceneBuilder sb = LayerSceneBuilder();
        sb.pushOffset(0, 0);
        for (int i = 0; i < viewCount; i++) {
          sb.addPicture(ui.Offset.zero, testPicture);
          sb.addPlatformView(i, width: 10, height: 10);
        }
        await renderScene(sb.build());
      }

      // Set maximum overlays to 4.
      debugOverrideJsConfiguration(<String, Object?>{
        'canvasKitMaximumSurfaces': 4,
      }.jsify() as JsFlutterConfiguration?);

      await renderTestScene(viewCount: 8);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // Set maximum overlays to -1. Should default to 1.
      debugOverrideJsConfiguration(<String, Object?>{
        'canvasKitMaximumSurfaces': -1,
      }.jsify() as JsFlutterConfiguration?);

      await renderTestScene(viewCount: 8);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      debugOverrideJsConfiguration(null);
    });

    test(
        'correctly rearranges pictures to second-to-last canvas '
        'when hitting canvas limit', () async {
      final CkPicture testPicture =
          paintPicture(const ui.Rect.fromLTRB(0, 0, 10, 10), (CkCanvas canvas) {
        canvas.drawCircle(const ui.Offset(5, 5), 5, CkPaint());
      });

      // Initialize all platform views to be used in the test.
      final List<int> platformViewIds = <int>[];
      for (int i = 0; i < 20; i++) {
        ui_web.platformViewRegistry.registerViewFactory(
          'test-platform-view',
          (int viewId) => createDomHTMLDivElement()..id = 'view-$i',
        );
        await createPlatformView(i, 'test-platform-view');
        platformViewIds.add(i);
      }

      Future<void> renderTestScene(List<int> views) async {
        final LayerSceneBuilder sb = LayerSceneBuilder();
        sb.pushOffset(0, 0);
        for (final int view in views) {
          sb.addPicture(ui.Offset.zero, testPicture);
          sb.addPlatformView(view, width: 10, height: 10);
        }
        await renderScene(sb.build());
      }

      // Render scene with 20 pictures. Check that the second-to-last canvas
      // contains the pictures from the canvases that were deleted.
      await renderTestScene(<int>[
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
      ]);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _overlay,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // The second-to-last canvas should have all the extra pictures.
      final Rendering rendering = CanvasKitRenderer.instance
          .debugGetRasterizerForView(implicitView)!
          .viewEmbedder
          .debugActiveRendering;
      final List<int> numPicturesPerCanvas = rendering.canvases
          .map((RenderingRenderCanvas canvas) => canvas.pictures.length)
          .toList();
      expect(numPicturesPerCanvas, <int>[1, 1, 1, 1, 1, 1, 12, 1]);

      // It should also work when the maximum canvases is just one.
      debugOverrideJsConfiguration(<String, Object?>{
        'canvasKitMaximumSurfaces': 1,
      }.jsify() as JsFlutterConfiguration?);

      // Render scene with 20 pictures. Check that the last canvas contains the
      // pictures from the canvases that were deleted.
      await renderTestScene(<int>[
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
      ]);
      _expectSceneMatches(<_EmbeddedViewMarker>[
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _platformView,
        _overlay,
        _platformView,
      ]);

      // The last canvas should have all the pictures.
      final Rendering secondRendering = CanvasKitRenderer.instance
          .debugGetRasterizerForView(implicitView)!
          .viewEmbedder
          .debugActiveRendering;
      final List<int> picturesPerCanvasInSecondRendering = secondRendering
          .canvases
          .map((RenderingRenderCanvas canvas) => canvas.pictures.length)
          .toList();
      expect(picturesPerCanvasInSecondRendering, <int>[19]);
      debugOverrideJsConfiguration(null);
    });

    test('disposes render pictures', () async {
      Instrumentation.enabled = true;
      Instrumentation.instance.debugCounters.clear();

      ui_web.platformViewRegistry.registerViewFactory(
        'test-view',
        (int viewId) => createDomHTMLDivElement()..className = 'platform-view',
      );

      CkPicture rectPicture(ui.Rect rect) {
        return paintPicture(rect, (CkCanvas canvas) {
          canvas.drawRect(
              rect, CkPaint()..color = const ui.Color.fromARGB(255, 255, 0, 0));
        });
      }
      final CkPicture picture = rectPicture(const ui.Rect.fromLTWH(0, 0, 20, 20));

      await createPlatformView(0, 'test-view');

      final LayerSceneBuilder sb = LayerSceneBuilder();
      sb.addPicture(ui.Offset.zero, picture);
      sb.addPlatformView(0, width: 20, height: 20);
      final LayerScene scene = sb.build();
      await renderScene(scene);

      picture.dispose();
      final Map<String, int> debugCounters = Instrumentation.instance.debugCounters;
      expect(debugCounters['Picture Created'], debugCounters['Picture Deleted']);
    });
  });
}

// Used to test that the platform views and overlays are in the correct order in
// the scene.
enum _EmbeddedViewMarker {
  overlay,
  platformView,
}

_EmbeddedViewMarker get _overlay => _EmbeddedViewMarker.overlay;
_EmbeddedViewMarker get _platformView => _EmbeddedViewMarker.platformView;

const Map<String, _EmbeddedViewMarker> _tagToViewMarker =
    <String, _EmbeddedViewMarker>{
  'flt-canvas-container': _EmbeddedViewMarker.overlay,
  'flt-platform-view-slot': _EmbeddedViewMarker.platformView,
  'flt-clip': _EmbeddedViewMarker.platformView,
};

void _expectSceneMatches(
  List<_EmbeddedViewMarker> expectedMarkers, {
  String? reason,
}) {
  // Convert the scene elements to its corresponding array of _EmbeddedViewMarker
  final List<_EmbeddedViewMarker> sceneElements = sceneHost.children
      .where((DomElement element) => element.tagName != 'svg')
      .map((DomElement element) =>
          _tagToViewMarker[element.tagName.toLowerCase()]!)
      .toList();

  expect(sceneElements, expectedMarkers, reason: reason);
}