[skwasm] Combine offset and transform properly.

Author: eyebrowsoffire

lib/web_ui/lib/src/engine/layers.dart

@@ -500,15 +500,15 @@ class PlatformViewPosition {
 
     // Otherwise, at least one of the positions involves a matrix transform.
     final Matrix4 newTransform;
-    if (outerOffset != null) {
-      newTransform = Matrix4.translationValues(outerOffset.dx, outerOffset.dy, 0);
+    if (innerOffset != null) {
+      newTransform = Matrix4.translationValues(innerOffset.dx, innerOffset.dy, 0);
     } else {
-      newTransform = outer.transform!.clone();
+      newTransform = inner.transform!.clone();
     }
-    if (innerOffset != null) {
-      newTransform.translate(innerOffset.dx, innerOffset.dy);
+    if (outerOffset != null) {
+      newTransform.translate(outerOffset.dx, outerOffset.dy);
     } else {
-      newTransform.multiply(inner.transform!);
+      newTransform.multiply(outer.transform!);
     }
     return PlatformViewPosition.transform(newTransform);
   }

lib/web_ui/lib/src/engine/scene_view.dart

@@ -308,26 +308,34 @@ final class PlatformViewContainer extends SliceContainer {
     assert(_bounds != null);
     if (_dirty) {
       final DomCSSStyleDeclaration style = container.style;
-      final double devicePixelRatio = EngineFlutterDisplay.instance.devicePixelRatio;
-      final double logicalWidth = _bounds!.width / devicePixelRatio;
-      final double logicalHeight = _bounds!.height / devicePixelRatio;
-      style.width = '${logicalWidth}px';
-      style.height = '${logicalHeight}px';
       style.position = 'absolute';
-
-      final PlatformViewPosition position = PlatformViewPosition.combine(
-        _styling!.position,
-        PlatformViewPosition.offset(_bounds!.topLeft),
-      );
+      final double devicePixelRatio = EngineFlutterDisplay.instance.devicePixelRatio;
+      final PlatformViewPosition position = _styling!.position;
 
       final ui.Offset offset = position.offset ?? ui.Offset.zero;
-      final double logicalLeft = offset.dx / devicePixelRatio;
-      final double logicalTop = offset.dy / devicePixelRatio;
-      style.left = '${logicalLeft}px';
-      style.top = '${logicalTop}px';
-
       final Matrix4? transform = position.transform;
-      style.transform = transform != null ? float64ListToCssTransform3d(transform.storage) : '';
+      if (transform == null) {
+        final ui.Offset newOffset = offset + _bounds!.topLeft;
+        final double logicalWidth = _bounds!.width / devicePixelRatio;
+        final double logicalHeight = _bounds!.height / devicePixelRatio;
+        final double logicalLeft = newOffset.dx / devicePixelRatio;
+        final double logicalTop = newOffset.dy / devicePixelRatio;
+        style.width = '${logicalWidth}px';
+        style.height = '${logicalHeight}px';
+        style.left = '${logicalLeft}px';
+        style.top = '${logicalTop}px';
+        style.transform = '';
+      } else {
+        style.width = '${_bounds!.width}px';
+        style.height = '${_bounds!.height}px';
+        style.left = '0px';
+        style.top = '0px';
+
+        final Matrix4 newTransform = transform.clone();
+        newTransform.translate(_bounds!.left, _bounds!.top);
+        newTransform.scale(1 / devicePixelRatio);
+        style.transform = float64ListToCssTransform3d(newTransform.storage);
+      }
       style.opacity = _styling!.opacity != 1.0 ? '${_styling!.opacity}' : '';
       // TODO(jacksongardner): Implement clip styling for platform views
 

lib/web_ui/test/ui/platform_view_test.dart

@@ -120,10 +120,14 @@ Future<void> testMain() async {
     sb.pushOffset(0, 0);
     sb.addPicture(const ui.Offset(100, 100), recorder.endRecording());
 
+    // Nest offsets both before and after the transform to make sure that they
+    // are applied properly.
+    sb.pushOffset(50, 50);
     sb.pushTransform(Matrix4.rotationZ(0.1).toFloat64());
+    sb.pushOffset(25, 25);
     sb.addPlatformView(
       1,
-      offset: const ui.Offset(125, 125),
+      offset: const ui.Offset(50, 50),
       width: 50,
       height: 50,
     );