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 79cc1ee1f93e95130094b0f5531ccfd6c383ba57..53f3386faca23b95732d35a2ed1ebc86fd872219 100644 --- a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart +++ b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart @@ -239,7 +239,7 @@ class HtmlViewEmbedder { for (final Mutator mutator in mutators) { switch (mutator.type) { case MutatorType.transform: - headTransform.multiply(mutator.matrix!); + headTransform = mutator.matrix!.multiplied(headTransform); head.style.transform = float64ListToCssTransform(headTransform.storage); break; diff --git a/lib/web_ui/test/canvaskit/embedded_views_test.dart b/lib/web_ui/test/canvaskit/embedded_views_test.dart index decde96c999b045404738511bd12de9f91fca783..eabfeb66d13651e9907b1e5dcb297ed0a91ef0fe 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,52 @@ 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('correctly transforms platform views', () 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); + 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); + dispatcher.rasterizer!.draw(sb.build().layerTree); + expect( + domRenderer.sceneElement! + .querySelectorAll('#view-0') + .single + .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)', + ); + }); // TODO: https://github.com/flutter/flutter/issues/60040 }, skip: isIosSafari); }