From 36ec23502a3a7d0897d6b3550f35d43cd7fa908a Mon Sep 17 00:00:00 2001 From: Harry Terkelsen Date: Mon, 7 Dec 2020 15:00:34 -0800 Subject: [PATCH 1/3] WIP on fixing platform view clip path in CanvasKit --- .../lib/src/engine/canvaskit/embedded_views.dart | 16 +++++++++------- lib/web_ui/lib/src/engine/util.dart | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) 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 92351db5e62a1..0e45ac71b964a 100644 --- a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart +++ b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart @@ -258,10 +258,12 @@ class HtmlViewEmbedder { html.Element pathDefs = _svgPathDefs!.querySelector('#sk_path_defs')!; _clipPathCount += 1; - html.Element newClipPath = - html.Element.html('' - '' - ''); + html.Element newClipPath = html.Element.html( + '' + '' + '', + treeSanitizer: _NullTreeSanitizer(), + ); pathDefs.append(newClipPath); clipView.style.clipPath = 'url(#svgClip$_clipPathCount)'; } else if (mutator.path != null) { @@ -272,8 +274,8 @@ class HtmlViewEmbedder { _clipPathCount += 1; html.Element newClipPath = html.Element.html('' - '' - ''); + '' + '', treeSanitizer: _NullTreeSanitizer(),); pathDefs.append(newClipPath); clipView.style.clipPath = 'url(#svgClip$_clipPathCount)'; } @@ -320,7 +322,7 @@ class HtmlViewEmbedder { return; } _svgPathDefs = html.Element.html( - '$kSvgResourceHeader>', + '$kSvgResourceHeader', treeSanitizer: _NullTreeSanitizer(), ); skiaSceneHost!.append(_svgPathDefs!); diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart index 877bd519f2b23..0c4343d9e5337 100644 --- a/lib/web_ui/lib/src/engine/util.dart +++ b/lib/web_ui/lib/src/engine/util.dart @@ -334,7 +334,7 @@ String _pathToSvgClipPath(ui.Path path, final String clipId = 'svgClip$_clipIdCounter'; - if (browserEngine == BrowserEngine.firefox) { + if (true || browserEngine == BrowserEngine.firefox) { // Firefox objectBoundingBox fails to scale to 1x1 units, instead use // no clipPathUnits but write the path in target units. sb.write(''); From a61668796cb62ece629286594ff1f74b24975a8d Mon Sep 17 00:00:00 2001 From: Harry Terkelsen Date: Tue, 8 Dec 2020 13:30:00 -0800 Subject: [PATCH 2/3] Use html.DocumentFragment.svg to work around lower-casing --- .../src/engine/canvaskit/embedded_views.dart | 12 +++-- lib/web_ui/lib/src/engine/util.dart | 2 +- .../test/canvaskit/embedded_views_test.dart | 48 +++++++++++++++++-- 3 files changed, 53 insertions(+), 9 deletions(-) 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 aeabea7a61c5a..b656e71784321 100644 --- a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart +++ b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart @@ -262,7 +262,7 @@ class HtmlViewEmbedder { html.Element pathDefs = _svgPathDefs!.querySelector('#sk_path_defs')!; _clipPathCount += 1; - html.Element newClipPath = html.Element.html( + html.Node newClipPath = html.DocumentFragment.svg( '' '' '', @@ -276,10 +276,12 @@ class HtmlViewEmbedder { html.Element pathDefs = _svgPathDefs!.querySelector('#sk_path_defs')!; _clipPathCount += 1; - html.Element newClipPath = - html.Element.html('' - '' - '', treeSanitizer: _NullTreeSanitizer(),); + html.Node newClipPath = html.DocumentFragment.svg( + '' + '' + '', + treeSanitizer: _NullTreeSanitizer(), + ); pathDefs.append(newClipPath); clipView.style.clipPath = 'url(#svgClip$_clipPathCount)'; } diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart index 0c4343d9e5337..877bd519f2b23 100644 --- a/lib/web_ui/lib/src/engine/util.dart +++ b/lib/web_ui/lib/src/engine/util.dart @@ -334,7 +334,7 @@ String _pathToSvgClipPath(ui.Path path, final String clipId = 'svgClip$_clipIdCounter'; - if (true || browserEngine == BrowserEngine.firefox) { + if (browserEngine == BrowserEngine.firefox) { // Firefox objectBoundingBox fails to scale to 1x1 units, instead use // no clipPathUnits but write the path in target units. sb.write(''); diff --git a/lib/web_ui/test/canvaskit/embedded_views_test.dart b/lib/web_ui/test/canvaskit/embedded_views_test.dart index decde96c999b0..d6a521fd8db17 100644 --- a/lib/web_ui/test/canvaskit/embedded_views_test.dart +++ b/lib/web_ui/test/canvaskit/embedded_views_test.dart @@ -15,7 +15,8 @@ import 'package:test/test.dart'; import 'common.dart'; const MethodCodec codec = StandardMethodCodec(); -final EngineSingletonFlutterWindow window = EngineSingletonFlutterWindow(0, EnginePlatformDispatcher.instance); +final EngineSingletonFlutterWindow window = + EngineSingletonFlutterWindow(0, EnginePlatformDispatcher.instance); void main() { internalBootstrapBrowserTest(() => testMain); @@ -32,16 +33,57 @@ void testMain() { ); await _createPlatformView(0, 'test-platform-view'); - final EnginePlatformDispatcher dispatcher = ui.window.platformDispatcher as EnginePlatformDispatcher; + final EnginePlatformDispatcher dispatcher = + ui.window.platformDispatcher as EnginePlatformDispatcher; final LayerSceneBuilder sb = LayerSceneBuilder(); sb.pushOffset(0, 0); sb.addPlatformView(0, width: 10, height: 10); dispatcher.rasterizer!.draw(sb.build().layerTree); expect( - domRenderer.sceneElement!.querySelectorAll('#view-0').single.style.pointerEvents, + domRenderer.sceneElement! + .querySelectorAll('#view-0') + .single + .style + .pointerEvents, 'auto', ); }); + + 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")', + ); + }); // TODO: https://github.com/flutter/flutter/issues/60040 }, skip: isIosSafari); } From 44c62a8d24e8293d95a6f704f55af9dfeb3db57e Mon Sep 17 00:00:00 2001 From: Harry Terkelsen Date: Tue, 8 Dec 2020 15:55:55 -0800 Subject: [PATCH 3/3] Remove fill="#FFFFFF" --- lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 b656e71784321..df34c4d95352b 100644 --- a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart +++ b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart @@ -264,7 +264,7 @@ class HtmlViewEmbedder { _clipPathCount += 1; html.Node newClipPath = html.DocumentFragment.svg( '' - '' + '' '', treeSanitizer: _NullTreeSanitizer(), ); @@ -278,7 +278,7 @@ class HtmlViewEmbedder { _clipPathCount += 1; html.Node newClipPath = html.DocumentFragment.svg( '' - '' + '' '', treeSanitizer: _NullTreeSanitizer(), );