WIP fixing semantics tests

lib/web_ui/lib/src/engine/canvaskit/multi_surface_rasterizer.dart

@@ -36,7 +36,7 @@ class MultiSurfaceViewRasterizer extends ViewRasterizer {
   @override
   final OverlayCanvasFactory<Surface> overlayFactory =
       OverlayCanvasFactory<Surface>(
-          createCanvas: () => Surface(useOffscreenCanvas: false));
+          createCanvas: () => Surface(isRenderCanvas: true));
 
   @override
   void dispose() {
@@ -45,14 +45,14 @@ class MultiSurfaceViewRasterizer extends ViewRasterizer {
 
   @override
   void prepareToDraw() {
-    overlayFactory.baseCanvas.ensureSurface(currentFrameSize);
+    overlayFactory.baseCanvas.createOrUpdateSurface(currentFrameSize);
   }
 
   @override
   Future<void> rasterizeToCanvas(
       OverlayCanvas canvas, List<CkPicture> pictures) {
     final Surface surface = canvas as Surface;
-    surface.ensureSurface(currentFrameSize);
+    surface.createOrUpdateSurface(currentFrameSize);
     final CkCanvas skCanvas = surface.getCanvas();
     skCanvas.clear(const ui.Color(0x00000000));
     pictures.forEach(skCanvas.drawPicture);

lib/web_ui/lib/src/engine/canvaskit/offscreen_canvas_rasterizer.dart

@@ -56,6 +56,6 @@ class OffscreenCanvasViewRasterizer extends ViewRasterizer {
 
   @override
   void prepareToDraw() {
-    rasterizer.offscreenSurface.ensureSurface(currentFrameSize);
+    rasterizer.offscreenSurface.createOrUpdateSurface(currentFrameSize);
   }
 }

lib/web_ui/lib/src/engine/canvaskit/overlay_canvas_factory.dart

@@ -21,7 +21,7 @@ class OverlayCanvasFactory<T extends OverlayCanvas> {
   /// The base canvas to paint on. This is the default canvas which will be
   /// painted to. If there are no platform views, then this canvas will render
   /// the entire scene.
-  late final T baseCanvas = createCanvas();
+  late final T baseCanvas = createCanvas()..initialize();
 
   /// Canvases created by this factory which are currently in use.
   final List<T> _liveCanvases = <T>[];
@@ -51,6 +51,7 @@ class OverlayCanvasFactory<T extends OverlayCanvas> {
       return canvas;
     } else {
       final T canvas = createCanvas();
+      canvas.initialize();
       _liveCanvases.add(canvas);
       return canvas;
     }

lib/web_ui/lib/src/engine/canvaskit/rasterizer.dart

@@ -101,6 +101,12 @@ abstract class ViewRasterizer {
 abstract class OverlayCanvas {
   DomElement get htmlElement;
 
+  /// Whether or not this overlay canvas is attached to the DOM.
+  bool get isConnected;
+
+  /// Initialize the overlay.
+  void initialize();
+
   /// Disposes this overlay.
   void dispose();
 }

lib/web_ui/lib/src/engine/canvaskit/render_canvas.dart

@@ -134,6 +134,15 @@ class RenderCanvas extends OverlayCanvas {
     _updateLogicalHtmlCanvasSize();
   }
 
+  @override
+  bool get isConnected => canvasElement.isConnected!;
+
+  @override
+  void initialize() {
+    // No extra initialization needed.
+  }
+
+  @override
   void dispose() {
     htmlElement.remove();
   }

lib/web_ui/lib/src/engine/canvaskit/surface.dart

@@ -8,6 +8,7 @@ import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
 import '../configuration.dart';
+import '../display.dart';
 import '../dom.dart';
 import '../platform_dispatcher.dart';
 import '../util.dart';
@@ -49,15 +50,18 @@ class SurfaceFrame {
 /// successive frames if they are the same size. Otherwise, a new [CkSurface] is
 /// created.
 class Surface extends OverlayCanvas {
-  Surface({bool useOffscreenCanvas = true})
+  Surface({this.isRenderCanvas = false})
       : useOffscreenCanvas =
-            Surface.offscreenCanvasSupported && useOffscreenCanvas;
+            Surface.offscreenCanvasSupported && !isRenderCanvas;
 
   CkSurface? _surface;
 
   /// Whether or not to use an `OffscreenCanvas` to back this [Surface].
   final bool useOffscreenCanvas;
 
+  /// If `true`, this [Surface] is used for rendering.
+  final bool isRenderCanvas;
+
   /// If true, forces a new WebGL context to be created, even if the window
   /// size is the same. This is used to restore the UI after the browser tab
   /// goes dormant and loses the GL context.
@@ -99,10 +103,11 @@ class Surface extends OverlayCanvas {
   /// Note, if this getter is called, then this Surface is being used as an
   /// overlay and must be backed by an onscreen <canvas> element.
   @override
-  DomElement get htmlElement => _canvasElement!;
+  final DomElement htmlElement = createDomElement('flt-canvas-container');
 
   int _pixelWidth = -1;
   int _pixelHeight = -1;
+  double _currentDevicePixelRatio = -1;
   int _sampleCount = -1;
   int _stencilBits = -1;
 
@@ -179,6 +184,26 @@ class Surface extends OverlayCanvas {
   ui.Size? _currentCanvasPhysicalSize;
   ui.Size? _currentSurfaceSize;
 
+  /// Sets the CSS size of the canvas so that canvas pixels are 1:1 with device
+  /// pixels.
+  ///
+  /// The logical size of the canvas is not based on the size of the window
+  /// but on the size of the canvas, which, due to `ceil()` above, may not be
+  /// the same as the window. We do not round/floor/ceil the logical size as
+  /// CSS pixels can contain more than one physical pixel and therefore to
+  /// match the size of the window precisely we use the most precise floating
+  /// point value we can get.
+  void _updateLogicalHtmlCanvasSize() {
+    final double devicePixelRatio =
+        EngineFlutterDisplay.instance.devicePixelRatio;
+    final double logicalWidth = _pixelWidth / devicePixelRatio;
+    final double logicalHeight = _pixelHeight / devicePixelRatio;
+    final DomCSSStyleDeclaration style = _canvasElement!.style;
+    style.width = '${logicalWidth}px';
+    style.height = '${logicalHeight}px';
+    _currentDevicePixelRatio = devicePixelRatio;
+  }
+
   /// This is only valid after the first frame or if [ensureSurface] has been
   /// called
   bool get usingSoftwareBackend =>
@@ -218,6 +243,11 @@ class Surface extends OverlayCanvas {
       if (previousSurfaceSize != null &&
           size.width == previousSurfaceSize.width &&
           size.height == previousSurfaceSize.height) {
+        final double devicePixelRatio =
+            EngineFlutterDisplay.instance.devicePixelRatio;
+        if (isRenderCanvas && devicePixelRatio != _currentDevicePixelRatio) {
+          _updateLogicalHtmlCanvasSize();
+        }
         return _surface!;
       }
 
@@ -240,6 +270,9 @@ class Surface extends OverlayCanvas {
         _currentCanvasPhysicalSize = newSize;
         _pixelWidth = newSize.width.ceil();
         _pixelHeight = newSize.height.ceil();
+        if (isRenderCanvas) {
+          _updateLogicalHtmlCanvasSize();
+        }
       }
     }
 
@@ -311,6 +344,7 @@ class Surface extends OverlayCanvas {
         _cachedContextLostListener,
         false,
       );
+      _canvasElement!.remove();
       _canvasElement = null;
       _cachedContextRestoredListener = null;
       _cachedContextLostListener = null;
@@ -335,6 +369,12 @@ class Surface extends OverlayCanvas {
       htmlCanvas = canvas;
       _canvasElement = canvas;
       _offscreenCanvas = null;
+      if (isRenderCanvas) {
+        _canvasElement!.setAttribute('aria-hidden', 'true');
+        _canvasElement!.style.position = 'absolute';
+        htmlElement.append(_canvasElement!);
+        _updateLogicalHtmlCanvasSize();
+      }
     }
 
     // When the browser tab using WebGL goes dormant the browser and/or OS may
@@ -458,6 +498,15 @@ class Surface extends OverlayCanvas {
     return true;
   }
 
+  @override
+  bool get isConnected => _canvasElement!.isConnected!;
+
+  @override
+  void initialize() {
+    ensureSurface();
+  }
+
+  @override
   void dispose() {
     _offscreenCanvas?.removeEventListener(
         'webglcontextlost', _cachedContextLostListener, false);

lib/web_ui/lib/src/engine/platform_dispatcher.dart

@@ -1237,6 +1237,7 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
   /// Otherwise zones won't work properly.
   void invokeOnSemanticsAction(
       int nodeId, ui.SemanticsAction action, ByteData? args) {
+    print('invoking semantics action callback!');
     invoke1<ui.SemanticsActionEvent>(
       _onSemanticsActionEvent,
       _onSemanticsActionEventZone,

lib/web_ui/lib/src/engine/semantics/focusable.dart

@@ -58,7 +58,8 @@ class Focusable extends RoleManager {
       if (!_focusManager.isManaging) {
         _focusManager.manage(semanticsObject.id, owner.element);
       }
-      _focusManager.changeFocus(semanticsObject.hasFocus && (!semanticsObject.hasEnabledState || semanticsObject.isEnabled));
+      _focusManager.changeFocus(semanticsObject.hasFocus &&
+          (!semanticsObject.hasEnabledState || semanticsObject.isEnabled));
     } else {
       _focusManager.stopManaging();
     }
@@ -175,6 +176,7 @@ class AccessibilityFocusManager {
 
   void _setFocusFromDom(bool acquireFocus) {
     final _FocusTarget? target = _target;
+    print('hit setFocus callback on ${target?.element}');
 
     if (target == null) {
       // DOM events can be asynchronous. By the time the event reaches here, the
@@ -185,15 +187,16 @@ class AccessibilityFocusManager {
     EnginePlatformDispatcher.instance.invokeOnSemanticsAction(
       target.semanticsNodeId,
       acquireFocus
-        ? ui.SemanticsAction.didGainAccessibilityFocus
-        : ui.SemanticsAction.didLoseAccessibilityFocus,
+          ? ui.SemanticsAction.didGainAccessibilityFocus
+          : ui.SemanticsAction.didLoseAccessibilityFocus,
       null,
     );
   }
 
   /// Requests focus or blur on the DOM element.
   void changeFocus(bool value) {
     final _FocusTarget? target = _target;
+    print('calling changeFocus on $target!!!');
 
     if (target == null) {
       // If this branch is being executed, there's a bug somewhere already, but
@@ -203,9 +206,8 @@ class AccessibilityFocusManager {
       // Nothing is being managed right now.
       assert(() {
         printWarning(
-          'Cannot change focus to $value. No element is being managed by this '
-          'AccessibilityFocusManager.'
-        );
+            'Cannot change focus to $value. No element is being managed by this '
+            'AccessibilityFocusManager.');
         return true;
       }());
       return;
@@ -237,6 +239,8 @@ class AccessibilityFocusManager {
       return;
     }
 
+    print('ADDING POST UPDATE CALLBACK TO FOCUS THE ELEMENT!!!');
+
     // Delay the focus request until the final DOM structure is established
     // because the element may not yet be attached to the DOM, or it may be
     // reparented and lose focus again.
@@ -249,6 +253,7 @@ class AccessibilityFocusManager {
         return;
       }
 
+      print('CALLING FOCUS ON ${target.element}!!!!!');
       target.element.focus();
     });
   }