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',