diff --git a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart index 53f3386faca23..a685ef49afbc1 100644 --- a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart +++ b/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('' - '' - ''); + html.Node newClipPath = html.DocumentFragment.svg( + '' + '' + '', + 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('' - '' - ''); + html.Node newClipPath = html.DocumentFragment.svg( + '' + '' + '', + treeSanitizer: _NullTreeSanitizer(), + ); pathDefs.append(newClipPath); clipView.style.clipPath = 'url(#svgClip$_clipPathCount)'; } @@ -324,7 +328,7 @@ class HtmlViewEmbedder { return; } _svgPathDefs = html.Element.html( - '$kSvgResourceHeader>', + '$kSvgResourceHeader', treeSanitizer: _NullTreeSanitizer(), ); skiaSceneHost!.append(_svgPathDefs!); diff --git a/lib/web_ui/test/canvaskit/embedded_views_test.dart b/lib/web_ui/test/canvaskit/embedded_views_test.dart index eabfeb66d1365..73030372d372e 100644 --- a/lib/web_ui/test/canvaskit/embedded_views_test.dart +++ b/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',