Fix scene view canvas/platform view placement. (#45199)

I wasn't adjusting the `left` and `top` css styles based on the device pixel ratio. This fixes that and also sets up unit tests for `SceneView`.

Author: eyebrowsoffire

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

@@ -163,11 +163,13 @@ final class PictureSliceContainer extends SliceContainer {
       final DomCSSStyleDeclaration style = canvas.style;
       final double logicalWidth = roundedOutBounds.width / window.devicePixelRatio;
       final double logicalHeight = roundedOutBounds.height / window.devicePixelRatio;
+      final double logicalLeft = roundedOutBounds.left / window.devicePixelRatio;
+      final double logicalTop = roundedOutBounds.top / window.devicePixelRatio;
       style.width = '${logicalWidth}px';
       style.height = '${logicalHeight}px';
       style.position = 'absolute';
-      style.left = '${roundedOutBounds.left}px';
-      style.top = '${roundedOutBounds.top}px';
+      style.left = '${logicalLeft}px';
+      style.top = '${logicalTop}px';
       canvas.width = roundedOutBounds.width.ceilToDouble();
       canvas.height = roundedOutBounds.height.ceilToDouble();
     }
@@ -221,8 +223,10 @@ final class PlatformViewContainer extends SliceContainer {
       style.position = 'absolute';
 
       final ui.Offset? offset = _styling!.position.offset;
-      style.left = '${offset?.dx ?? 0}px';
-      style.top = '${offset?.dy ?? 0}px';
+      final double logicalLeft = (offset?.dx ?? 0) / window.devicePixelRatio;
+      final double logicalTop = (offset?.dy ?? 0) / window.devicePixelRatio;
+      style.left = '${logicalLeft}px';
+      style.top = '${logicalTop}px';
 
       final Matrix4? transform = _styling!.position.transform;
       style.transform = transform != null ? float64ListToCssTransform3d(transform.storage) : '';

lib/web_ui/test/engine/scene_builder_test.dart

@@ -2,14 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:typed_data';
-
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
 
 import 'package:ui/ui.dart' as ui;
 
+import 'scene_builder_utils.dart';
+
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }
@@ -229,181 +229,3 @@ class PlatformViewSliceMatcher extends Matcher {
     return true;
   }
 }
-
-class StubPicture implements ScenePicture {
-  StubPicture(this.cullRect);
-
-  @override
-  final ui.Rect cullRect;
-
-  @override
-  int get approximateBytesUsed => throw UnimplementedError();
-
-  @override
-  bool get debugDisposed => throw UnimplementedError();
-
-  @override
-  void dispose() {}
-
-  @override
-  Future<ui.Image> toImage(int width, int height) {
-    throw UnimplementedError();
-  }
-
-  @override
-  ui.Image toImageSync(int width, int height) {
-    throw UnimplementedError();
-  }
-}
-
-class StubCompositePicture extends StubPicture {
-  StubCompositePicture(this.children) : super(
-    children.fold(null, (ui.Rect? previousValue, StubPicture child) {
-      return previousValue?.expandToInclude(child.cullRect) ?? child.cullRect;
-    })!
-  );
-
-  final List<StubPicture> children;
-}
-
-class StubPictureRecorder implements ui.PictureRecorder {
-  StubPictureRecorder(this.canvas);
-
-  final StubSceneCanvas canvas;
-
-  @override
-  ui.Picture endRecording() {
-    return StubCompositePicture(canvas.pictures);
-  }
-
-  @override
-  bool get isRecording => throw UnimplementedError();
-}
-
-class StubSceneCanvas implements SceneCanvas {
-  List<StubPicture> pictures = <StubPicture>[];
-
-  @override
-  void drawPicture(ui.Picture picture) {
-    pictures.add(picture as StubPicture);
-  }
-
-  @override
-  void clipPath(ui.Path path, {bool doAntiAlias = true}) {}
-
-  @override
-  void clipRRect(ui.RRect rrect, {bool doAntiAlias = true}) {}
-
-  @override
-  void clipRect(ui.Rect rect, {ui.ClipOp clipOp = ui.ClipOp.intersect, bool doAntiAlias = true}) {}
-
-  @override
-  void drawArc(ui.Rect rect, double startAngle, double sweepAngle, bool useCenter, ui.Paint paint) {}
-
-  @override
-  void drawAtlas(ui.Image atlas, List<ui.RSTransform> transforms, List<ui.Rect> rects, List<ui.Color>? colors, ui.BlendMode? blendMode, ui.Rect? cullRect, ui.Paint paint) {}
-
-  @override
-  void drawCircle(ui.Offset c, double radius, ui.Paint paint) {}
-
-  @override
-  void drawColor(ui.Color color, ui.BlendMode blendMode) {}
-
-  @override
-  void drawDRRect(ui.RRect outer, ui.RRect inner, ui.Paint paint) {}
-
-  @override
-  void drawImage(ui.Image image, ui.Offset offset, ui.Paint paint) {}
-
-  @override
-  void drawImageNine(ui.Image image, ui.Rect center, ui.Rect dst, ui.Paint paint) {}
-
-  @override
-  void drawImageRect(ui.Image image, ui.Rect src, ui.Rect dst, ui.Paint paint) {}
-
-  @override
-  void drawLine(ui.Offset p1, ui.Offset p2, ui.Paint paint) {}
-
-  @override
-  void drawOval(ui.Rect rect, ui.Paint paint) {}
-
-  @override
-  void drawPaint(ui.Paint paint) {}
-
-  @override
-  void drawParagraph(ui.Paragraph paragraph, ui.Offset offset) {}
-
-  @override
-  void drawPath(ui.Path path, ui.Paint paint) {}
-
-  @override
-  void drawPoints(ui.PointMode pointMode, List<ui.Offset> points, ui.Paint paint) {}
-
-  @override
-  void drawRRect(ui.RRect rrect, ui.Paint paint) {}
-
-  @override
-  void drawRawAtlas(ui.Image atlas, Float32List rstTransforms, Float32List rects, Int32List? colors, ui.BlendMode? blendMode, ui.Rect? cullRect, ui.Paint paint) {}
-
-  @override
-  void drawRawPoints(ui.PointMode pointMode, Float32List points, ui.Paint paint) {}
-
-  @override
-  void drawRect(ui.Rect rect, ui.Paint paint) {}
-
-  @override
-  void drawShadow(ui.Path path, ui.Color color, double elevation, bool transparentOccluder) {}
-
-  @override
-  void drawVertices(ui.Vertices vertices, ui.BlendMode blendMode, ui.Paint paint) {}
-
-  @override
-  ui.Rect getDestinationClipBounds() {
-    throw UnimplementedError();
-  }
-
-  @override
-  ui.Rect getLocalClipBounds() {
-    throw UnimplementedError();
-  }
-
-  @override
-  int getSaveCount() {
-    throw UnimplementedError();
-  }
-
-  @override
-  Float64List getTransform() {
-    throw UnimplementedError();
-  }
-
-  @override
-  void restore() {}
-
-  @override
-  void restoreToCount(int count) {}
-
-  @override
-  void rotate(double radians) {}
-
-  @override
-  void save() {}
-
-  @override
-  void saveLayer(ui.Rect? bounds, ui.Paint paint) {}
-
-  @override
-  void saveLayerWithFilter(ui.Rect? bounds, ui.Paint paint, ui.ImageFilter backdropFilter) {}
-
-  @override
-  void scale(double sx, [double? sy]) {}
-
-  @override
-  void skew(double sx, double sy) {}
-
-  @override
-  void transform(Float64List matrix4) {}
-
-  @override
-  void translate(double dx, double dy) {}
-}