CanvasKit fix embedded view clipping (flutter#22937)

Author: Harry Terkelsen

lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart

@@ -262,10 +262,12 @@ class HtmlViewEmbedder {
             html.Element pathDefs =
                 _svgPathDefs!.querySelector('#sk_path_defs')!;
             _clipPathCount += 1;
-            html.Element newClipPath =
-                html.Element.html('<clipPath id="svgClip$_clipPathCount">'
-                    '<path d="${path.toSvgString()}">'
-                    '</path></clipPath>');
+            html.Node newClipPath = html.DocumentFragment.svg(
+              '<clipPath id="svgClip$_clipPathCount">'
+              '<path d="${path.toSvgString()}">'
+              '</path></clipPath>',
+              treeSanitizer: _NullTreeSanitizer(),
+            );
             pathDefs.append(newClipPath);
             clipView.style.clipPath = 'url(#svgClip$_clipPathCount)';
           } else if (mutator.path != null) {
@@ -274,10 +276,12 @@ class HtmlViewEmbedder {
             html.Element pathDefs =
                 _svgPathDefs!.querySelector('#sk_path_defs')!;
             _clipPathCount += 1;
-            html.Element newClipPath =
-                html.Element.html('<clipPath id="svgClip$_clipPathCount">'
-                    '<path d="${path.toSvgString()}">'
-                    '</path></clipPath>');
+            html.Node newClipPath = html.DocumentFragment.svg(
+              '<clipPath id="svgClip$_clipPathCount">'
+              '<path d="${path.toSvgString()}">'
+              '</path></clipPath>',
+              treeSanitizer: _NullTreeSanitizer(),
+            );
             pathDefs.append(newClipPath);
             clipView.style.clipPath = 'url(#svgClip$_clipPathCount)';
           }
@@ -324,7 +328,7 @@ class HtmlViewEmbedder {
       return;
     }
     _svgPathDefs = html.Element.html(
-      '$kSvgResourceHeader><defs id="sk_path_defs"></defs></svg>',
+      '$kSvgResourceHeader<defs id="sk_path_defs"></defs></svg>',
       treeSanitizer: _NullTreeSanitizer(),
     );
     skiaSceneHost!.append(_svgPathDefs!);

lib/web_ui/test/canvaskit/embedded_views_test.dart

@@ -49,6 +49,41 @@ void testMain() {
       );
     });
 
+    test('clips platform views with RRects', () async {
+      ui.platformViewRegistry.registerViewFactory(
+        'test-platform-view',
+        (viewId) => html.DivElement()..id = 'view-0',
+      );
+      await _createPlatformView(0, 'test-platform-view');
+
+      final EnginePlatformDispatcher dispatcher =
+          ui.window.platformDispatcher as EnginePlatformDispatcher;
+      final LayerSceneBuilder sb = LayerSceneBuilder();
+      sb.pushOffset(0, 0);
+      sb.pushClipRRect(ui.RRect.fromLTRBR(0, 0, 10, 10, ui.Radius.circular(3)));
+      sb.addPlatformView(0, width: 10, height: 10);
+      dispatcher.rasterizer!.draw(sb.build().layerTree);
+      expect(
+        domRenderer.sceneElement!.querySelectorAll('#sk_path_defs').single,
+        isNotNull,
+      );
+      expect(
+        domRenderer.sceneElement!
+            .querySelectorAll('#sk_path_defs')
+            .single
+            .querySelectorAll('clipPath')
+            .single,
+        isNotNull,
+      );
+      expect(
+        domRenderer.sceneElement!
+            .querySelectorAll('flt-clip')
+            .single
+            .style
+            .clipPath,
+        'url("#svgClip1")',
+      );
+    });
     test('correctly transforms platform views', () async {
       ui.platformViewRegistry.registerViewFactory(
         'test-platform-view',