sync web engine; run web engine tests (#11031)

sync web engine; run web engine tests

.cirrus.yml

@@ -35,6 +35,10 @@ task:
       test_host_script: |
         cd $ENGINE_PATH/src
         ./flutter/testing/run_tests.sh host_debug_unopt
+      test_web_engine_script: |
+        cd $ENGINE_PATH/src/flutter/lib/web_ui
+        $ENGINE_PATH/src/out/host_debug_unopt/dart-sdk/bin/pub get
+        $ENGINE_PATH/src/out/host_debug_unopt/dart-sdk/bin/dart dev/test.dart
       fetch_framework_script: |
         mkdir -p $FRAMEWORK_PATH
         cd $FRAMEWORK_PATH

ci/licenses_golden/licenses_flutter

@@ -345,6 +345,8 @@ FILE: ../../../flutter/lib/ui/window/viewport_metrics.cc
 FILE: ../../../flutter/lib/ui/window/viewport_metrics.h
 FILE: ../../../flutter/lib/ui/window/window.cc
 FILE: ../../../flutter/lib/ui/window/window.h
+FILE: ../../../flutter/lib/web_ui/dev/test.dart
+FILE: ../../../flutter/lib/web_ui/lib/assets/houdini_painter.js
 FILE: ../../../flutter/lib/web_ui/lib/src/engine.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/alarm_clock.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/assets.dart
@@ -353,11 +355,12 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/browser_detection.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/browser_location.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/canvas.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/engine_delegate.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/fonts.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/image.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/initialization.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/layer.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/layer_scene_builder.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/layer_tree.dart
-FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/matrix.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/path.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/picture.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/picture_recorder.dart
@@ -367,6 +370,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/rasterizer.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/recording_canvas.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/runtime_delegate.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/surface.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/util.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/viewport_metrics.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/conic.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/dom_canvas.dart
@@ -395,6 +399,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/services/buffers.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/services/message_codec.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/services/message_codecs.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/services/serialization.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/shader.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/shadow.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/surface/backdrop_filter.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/surface/clip.dart

ci/licenses_golden/tool_signature

-Signature: 2009f69daad0d2b8a8037b2903f145ee
+Signature: 24e0fa6ad08ae80380158c2b4ba44c65
 

lib/web_ui/dart_test.yaml

+# Sources of inspiration for this file:
+#
+# * https://github.com/dart-lang/angular/blob/master/dev/tool/test/dart_test_repo.yaml
+# * https://github.com/dart-lang/angular/blob/master/_tests/dart_test.yaml
+
+platforms:
+  - chrome
+  - vm
+presets:
+  cirrus:
+    override_platforms:
+      chrome:
+        settings:
+          # Required because Cirrus runs us as root.
+          # https://chromium.googlesource.com/chromium/src/+/master/docs/design/sandbox.md
+          # https://docs.travis-ci.com/user/chrome#Sandboxing
+          arguments: --no-sandbox
+    reporter: expanded

lib/web_ui/dev/test.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async';
+import 'dart:io' as io;
+
+import 'package:path/path.dart' as pathlib;
+
+final Environment environment = Environment();
+
+void main() async {
+  if (io.Directory.current.absolute.path != environment.webUiRootDir.absolute.path) {
+    io.stderr.writeln('Current directory is not the root of the web_ui package directory.');
+    io.stderr.writeln('web_ui directory is: ${environment.webUiRootDir.absolute.path}');
+    io.stderr.writeln('current directory is: ${io.Directory.current.absolute.path}');
+    io.exit(1);
+  }
+
+  await _checkLicenseHeaders();
+  await _runTests();
+}
+
+void _checkLicenseHeaders() {
+  final List<io.File> allSourceFiles = _flatListSourceFiles(environment.webUiRootDir);
+  _expect(allSourceFiles.isNotEmpty, 'Dart source listing of ${environment.webUiRootDir.path} must not be empty.');
+
+  final List<String> allDartPaths = allSourceFiles.map((f) => f.path).toList();
+  print(allDartPaths.join('\n'));
+
+  for (String expectedDirectory in const <String>['lib', 'test', 'dev', 'tool']) {
+    final String expectedAbsoluteDirectory = pathlib.join(environment.webUiRootDir.path, expectedDirectory);
+    _expect(
+      allDartPaths.where((p) => p.startsWith(expectedAbsoluteDirectory)).isNotEmpty,
+      'Must include the $expectedDirectory/ directory',
+    );
+  }
+
+  allSourceFiles.forEach(_expectLicenseHeader);
+}
+
+final _copyRegex = RegExp(r'// Copyright 2013 The Flutter Authors\. All rights reserved\.');
+
+void _expectLicenseHeader(io.File file) {
+  List<String> head = file.readAsStringSync().split('\n').take(3).toList();
+
+  _expect(head.length >= 3, 'File too short: ${file.path}');
+  _expect(
+    _copyRegex.firstMatch(head[0]) != null,
+    'Invalid first line of license header in file ${file.path}',
+  );
+  _expect(
+    head[1] == '// Use of this source code is governed by a BSD-style license that can be',
+    'Invalid second line of license header in file ${file.path}',
+  );
+  _expect(
+    head[2] == '// found in the LICENSE file.',
+    'Invalid second line of license header in file ${file.path}',
+  );
+}
+
+void _expect(bool value, String requirement) {
+  if (!value) {
+    throw Exception('Test failed: ${requirement}');
+  }
+}
+
+List<io.File> _flatListSourceFiles(io.Directory directory) {
+  return directory
+      .listSync(recursive: true)
+      .whereType<io.File>()
+      .where((f) => f.path.endsWith('.dart') || f.path.endsWith('.js'))
+      .toList();
+}
+
+Future<void> _runTests() async {
+  // TODO(yjbanov): make the following tests pass.
+  const List<String> testBlacklist = <String>[
+    'test/text/measurement_test.dart',
+    'test/paragraph_test.dart',
+    'test/text_test.dart',
+  ];
+
+  final List<String> testFiles = io.Directory('test')
+    .listSync(recursive: true)
+    .whereType<io.File>()
+    .map<String>((io.File file) => file.path)
+    .where((String path) => path.endsWith('_test.dart') && !testBlacklist.contains(path))
+    .toList();
+
+  final io.Process pubRunTest = await io.Process.start(
+    environment.pubExecutable,
+    <String>[
+      'run',
+      'test',
+      '--preset=cirrus',
+      '--platform=chrome',
+      ...testFiles,
+    ],
+  );
+
+  final StreamSubscription stdoutSub = pubRunTest.stdout.listen(io.stdout.add);
+  final StreamSubscription stderrSub = pubRunTest.stderr.listen(io.stderr.add);
+  final int exitCode = await pubRunTest.exitCode;
+  stdoutSub.cancel();
+  stderrSub.cancel();
+
+  if (exitCode != 0) {
+    io.stderr.writeln('Test process exited with exit code $exitCode');
+    io.exit(1);
+  }
+}
+
+class Environment {
+  factory Environment() {
+    final io.File self = io.File.fromUri(io.Platform.script);
+    final io.Directory webUiRootDir = self.parent.parent;
+    final io.Directory engineSrcDir = webUiRootDir.parent.parent.parent;
+    final io.Directory outDir = io.Directory(pathlib.join(engineSrcDir.path, 'out'));
+    final io.Directory hostDebugUnoptDir = io.Directory(pathlib.join(outDir.path, 'host_debug_unopt'));
+    final String dartExecutable = pathlib.canonicalize(io.File(_which(io.Platform.executable)).absolute.path);
+    final io.Directory dartSdkDir = io.File(dartExecutable).parent.parent;
+
+    // Googlers frequently have their Dart SDK misconfigured for open-source projects. Let's help them out.
+    if (dartExecutable.startsWith('/usr/lib/google-dartlang')) {
+      io.stderr.writeln('ERROR: Using unsupported version of the Dart SDK: $dartExecutable');
+      io.exit(1);
+    }
+
+    return Environment._(
+      self: self,
+      webUiRootDir: webUiRootDir,
+      engineSrcDir: engineSrcDir,
+      outDir: outDir,
+      hostDebugUnoptDir: hostDebugUnoptDir,
+      dartExecutable: dartExecutable,
+      dartSdkDir: dartSdkDir,
+    );
+  }
+
+  Environment._({
+    this.self,
+    this.webUiRootDir,
+    this.engineSrcDir,
+    this.outDir,
+    this.hostDebugUnoptDir,
+    this.dartSdkDir,
+    this.dartExecutable,
+  });
+
+  final io.File self;
+  final io.Directory webUiRootDir;
+  final io.Directory engineSrcDir;
+  final io.Directory outDir;
+  final io.Directory hostDebugUnoptDir;
+  final io.Directory dartSdkDir;
+  final String dartExecutable;
+
+  String get pubExecutable => pathlib.join(dartSdkDir.path, 'bin', 'pub');
+
+  @override
+  String toString() {
+    return '''
+runTest.dart script:
+  ${self.path}
+web_ui directory:
+  ${webUiRootDir.path}
+engine/src directory:
+  ${engineSrcDir.path}
+out directory:
+  ${outDir.path}
+out/host_debug_unopt directory:
+  ${hostDebugUnoptDir.path}
+Dart SDK directory:
+  ${dartSdkDir.path}
+dart executable:
+  ${dartExecutable}
+''';
+  }
+}
+
+String _which(String executable) {
+  final io.ProcessResult result = io.Process.runSync('which', <String>[executable]);
+  if (result.exitCode != 0) {
+    io.stderr.writeln(result.stderr);
+    io.exit(result.exitCode);
+  }
+  return result.stdout;
+}

lib/web_ui/lib/assets/.gitignore

+ahem.ttf
\ No newline at end of file

lib/web_ui/lib/src/engine.dart

@@ -25,11 +25,12 @@ part 'engine/browser_detection.dart';
 part 'engine/browser_location.dart';
 part 'engine/compositor/canvas.dart';
 part 'engine/compositor/engine_delegate.dart';
+part 'engine/compositor/fonts.dart';
+part 'engine/compositor/image.dart';
 part 'engine/compositor/initialization.dart';
 part 'engine/compositor/layer.dart';
 part 'engine/compositor/layer_scene_builder.dart';
 part 'engine/compositor/layer_tree.dart';
-part 'engine/compositor/matrix.dart';
 part 'engine/compositor/path.dart';
 part 'engine/compositor/picture.dart';
 part 'engine/compositor/picture_recorder.dart';
@@ -39,6 +40,7 @@ part 'engine/compositor/rasterizer.dart';
 part 'engine/compositor/recording_canvas.dart';
 part 'engine/compositor/runtime_delegate.dart';
 part 'engine/compositor/surface.dart';
+part 'engine/compositor/util.dart';
 part 'engine/compositor/viewport_metrics.dart';
 part 'engine/conic.dart';
 part 'engine/dom_canvas.dart';
@@ -67,6 +69,7 @@ part 'engine/services/buffers.dart';
 part 'engine/services/message_codec.dart';
 part 'engine/services/message_codecs.dart';
 part 'engine/services/serialization.dart';
+part 'engine/shader.dart';
 part 'engine/shadow.dart';
 part 'engine/surface/backdrop_filter.dart';
 part 'engine/surface/clip.dart';

lib/web_ui/lib/src/engine/assets.dart

@@ -6,7 +6,8 @@ part of engine;
 
 /// This class downloads assets over the network.
 ///
-/// The assets are resolved relative to [assetsDir].
+/// The assets are resolved relative to [assetsDir] inside the directory
+/// containing the currently executing JS script.
 class AssetManager {
   static const String _defaultAssetsDir = 'assets';
 
@@ -15,18 +16,19 @@ class AssetManager {
 
   const AssetManager({this.assetsDir = _defaultAssetsDir});
 
-  String getAssetUrl(String asset) {
-    final Uri assetUri = Uri.parse(asset);
-
-    String url;
+  String get _baseUrl {
+    return html.window.document
+        .querySelectorAll('meta')
+        .whereType<html.MetaElement>()
+        .firstWhere((dynamic e) => e.name == 'assetBase', orElse: () => null)
+        ?.content;
+  }
 
-    if (assetUri.hasScheme) {
-      url = asset;
-    } else {
-      url = '$assetsDir/$asset';
+  String getAssetUrl(String asset) {
+    if (Uri.parse(asset).hasScheme) {
+      return asset;
     }
-
-    return url;
+    return (_baseUrl ?? '') + '$assetsDir/$asset';
   }
 
   Future<ByteData> load(String asset) async {
@@ -72,6 +74,9 @@ class WebOnlyMockAssetManager implements AssetManager {
   @override
   String get assetsDir => defaultAssetsDir;
 
+  @override
+  String get _baseUrl => '';
+
   @override
   String getAssetUrl(String asset) => '$asset';
 

lib/web_ui/lib/src/engine/bitmap_canvas.dart

@@ -226,7 +226,8 @@ class BitmapCanvas extends EngineCanvas with SaveStackTracking {
       ctx.lineJoin = 'miter';
     }
     if (paint.shader != null) {
-      final Object paintStyle = paint.shader.createPaintStyle(ctx);
+      final EngineGradient engineShader = paint.shader;
+      final Object paintStyle = engineShader.createPaintStyle(ctx);
       _setFillAndStrokeStyle(paintStyle, paintStyle);
     } else if (paint.color != null) {
       final String colorString = paint.color.toCssString();
@@ -367,20 +368,6 @@ class BitmapCanvas extends EngineCanvas with SaveStackTracking {
     //
     // This matrix is sufficient to represent 2D rotates, translates, scales,
     // and skews.
-    assert(() {
-      if (matrix4[2] != 0.0 ||
-          matrix4[3] != 0.0 ||
-          matrix4[7] != 0.0 ||
-          matrix4[8] != 0.0 ||
-          matrix4[9] != 0.0 ||
-          matrix4[10] != 1.0 ||
-          matrix4[11] != 0.0 ||
-          matrix4[14] != 0.0 ||
-          matrix4[15] != 1.0) {
-        print('WARNING: 3D transformation matrix was passed to BitmapCanvas.');
-      }
-      return true;
-    }());
     _ctx.transform(
       matrix4[0],
       matrix4[1],
@@ -505,12 +492,12 @@ class BitmapCanvas extends EngineCanvas with SaveStackTracking {
     final double blRadiusY = rrect.blRadiusY.abs();
     final double brRadiusY = rrect.brRadiusY.abs();
 
-    ctx.moveTo(left + trRadiusX, top);
-
     if (startNewPath) {
       ctx.beginPath();
     }
 
+    ctx.moveTo(left + trRadiusX, top);
+
     // Top side and top-right corner
     ctx.lineTo(right - trRadiusX, top);
     ctx.ellipse(
@@ -838,7 +825,9 @@ class BitmapCanvas extends EngineCanvas with SaveStackTracking {
     } else {
       final String cssTransform =
           matrix4ToCssTransform(transformWithOffset(currentTransform, offset));
-      paragraphElement.style.transform = cssTransform;
+      paragraphElement.style
+        ..transformOrigin = '0 0 0'
+        ..transform = cssTransform;
       rootElement.append(paragraphElement);
     }
     _children.add(paragraphElement);
@@ -1075,8 +1064,9 @@ List<html.Element> _clipContent(List<_SaveClipEntry> clipStack,
 
   root.style.position = 'absolute';
   domRenderer.append(curElement, content);
-  content.style.transform =
-      _cssTransformAtOffset(currentTransform, offset.dx, offset.dy);
+  content.style
+    ..transformOrigin = '0 0 0'
+    ..transform = _cssTransformAtOffset(currentTransform, offset.dx, offset.dy);
   return <html.Element>[root]..addAll(clipDefs);
 }
 

lib/web_ui/lib/src/engine/compositor/canvas.dart

@@ -30,7 +30,7 @@ class SkCanvas {
 
   int saveLayer(ui.Rect bounds, ui.Paint paint) {
     return skCanvas.callMethod(
-        'saveLayer', <js.JsObject>[_makeSkRect(bounds), _makeSkPaint(paint)]);
+        'saveLayer', <js.JsObject>[makeSkRect(bounds), makeSkPaint(paint)]);
   }
 
   void restore() {
@@ -50,16 +50,26 @@ class SkCanvas {
   }
 
   void transform(Float64List matrix) {
-    skCanvas.callMethod('concat', <js.JsArray<double>>[toSkMatrix(matrix)]);
+    skCanvas.callMethod('concat', <js.JsArray<double>>[makeSkMatrix(matrix)]);
   }
 
-  void clipPath(ui.Path path) {
+  void clipPath(ui.Path path, {bool doAntiAlias = true}) {
     final SkPath skPath = path;
-    skCanvas.callMethod('clipPath', <js.JsObject>[skPath._skPath]);
+    final js.JsObject intersectClipOp = canvasKit['ClipOp']['Intersect'];
+    skCanvas.callMethod('clipPath', <dynamic>[
+      skPath._skPath,
+      intersectClipOp,
+      doAntiAlias,
+    ]);
   }
 
-  void clipRect(ui.Rect rect) {
-    skCanvas.callMethod('clipRect', <js.JsObject>[_makeSkRect(rect)]);
+  void clipRect(ui.Rect rect, {bool doAntiAlias = true}) {
+    final js.JsObject intersectClipOp = canvasKit['ClipOp']['Intersect'];
+    skCanvas.callMethod('clipRect', <dynamic>[
+      makeSkRect(rect),
+      intersectClipOp,
+      doAntiAlias,
+    ]);
   }
 
   void clipRRect(ui.RRect rrect) {
@@ -76,30 +86,17 @@ class SkCanvas {
   void drawPath(ui.Path path, ui.Paint paint) {
     final SkPath skPath = path;
     skCanvas.callMethod(
-        'drawPath', <js.JsObject>[skPath._skPath, _makeSkPaint(paint)]);
+        'drawPath', <js.JsObject>[skPath._skPath, makeSkPaint(paint)]);
   }
 
   void drawPaint(ui.Paint paint) {
-    skCanvas.callMethod('drawPaint', <js.JsObject>[_makeSkPaint(paint)]);
+    skCanvas.callMethod('drawPaint', <js.JsObject>[makeSkPaint(paint)]);
   }
 
   void drawShadow(ui.Path path, ui.Color color, double elevation,
       bool transparentOccluder) {
-    throw 'drawShadow';
+    drawSkShadow(skCanvas, path, color, elevation, transparentOccluder);
   }
 
   Matrix4 get currentTransform => throw 'currentTransform';
-
-  js.JsObject _makeSkRect(ui.Rect rect) {
-    return js.JsObject(canvasKit['LTRBRect'],
-        <double>[rect.left, rect.top, rect.right, rect.bottom]);
-  }
-
-  js.JsObject _makeSkPaint(ui.Paint paint) {
-    final js.JsObject skPaint = js.JsObject(canvasKit['SkPaint']);
-    if (paint.color != null) {
-      skPaint.callMethod('setColor', <int>[paint.color.value]);
-    }
-    return skPaint;
-  }
 }

lib/web_ui/lib/src/engine/compositor/fonts.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+part of engine;
+
+class SkiaFontCollection {
+  final Map<String, Map<Map<String, String>, js.JsObject>>
+      _registeredTypefaces = <String, Map<Map<String, String>, js.JsObject>>{};
+
+  final List<Future<void>> _fontLoadingFutures = <Future<void>>[];
+
+  Future<void> ensureFontsLoaded() async {
+    await Future.wait(_fontLoadingFutures);
+  }
+
+  Future<void> registerFonts(AssetManager assetManager) async {
+    ByteData byteData;
+
+    try {
+      byteData = await assetManager.load('FontManifest.json');
+    } on AssetManagerException catch (e) {
+      if (e.httpStatus == 404) {
+        html.window.console
+            .warn('Font manifest does not exist at `${e.url}` – ignoring.');
+        return;
+      } else {
+        rethrow;
+      }
+    }
+
+    if (byteData == null) {
+      throw AssertionError(
+          'There was a problem trying to load FontManifest.json');
+    }
+
+    final List<dynamic> fontManifest =
+        json.decode(utf8.decode(byteData.buffer.asUint8List()));
+    if (fontManifest == null) {
+      throw AssertionError(
+          'There was a problem trying to load FontManifest.json');
+    }
+
+    // Add Roboto to the bundled fonts since it is provided by default by
+    // Flutter.
+    _fontLoadingFutures
+        .add(_registerFont('Roboto', _robotoFontUrl, <String, String>{}));
+
+    for (Map<String, dynamic> fontFamily in fontManifest) {
+      final String family = fontFamily['family'];
+      final List<dynamic> fontAssets = fontFamily['fonts'];
+
+      for (dynamic fontAssetItem in fontAssets) {
+        final Map<String, dynamic> fontAsset = fontAssetItem;
+        final String asset = fontAsset['asset'];
+        final Map<String, String> descriptors = <String, String>{};
+        for (String descriptor in fontAsset.keys) {
+          if (descriptor != 'asset') {
+            descriptors[descriptor] = '${fontAsset[descriptor]}';
+          }
+        }
+        _fontLoadingFutures.add(_registerFont(
+            family, assetManager.getAssetUrl(asset), descriptors));
+      }
+    }
+  }
+
+  Future<void> _registerFont(
+      String family, String url, Map<String, String> descriptors) async {
+    final dynamic fetchResult = await html.window.fetch(url);
+    final ByteBuffer resultBuffer = await fetchResult.arrayBuffer();
+    final js.JsObject skTypeFace = skFontMgr.callMethod(
+        'MakeTypefaceFromData', <Uint8List>[resultBuffer.asUint8List()]);
+    _registeredTypefaces.putIfAbsent(
+        family, () => <Map<String, String>, js.JsObject>{});
+    _registeredTypefaces[family][descriptors] = skTypeFace;
+  }
+
+  js.JsObject getFont(String family, double size) {
+    if (_registeredTypefaces[family] == null) {
+      if (family == 'sans-serif') {
+        // If it's the default font, return a default SkFont
+        return js.JsObject(canvasKit['SkFont'], <dynamic>[null, size]);
+      }
+      throw Exception('Unregistered font: $family');
+    }
+    final js.JsObject skTypeface = _registeredTypefaces[family].values.first;
+    return js.JsObject(canvasKit['SkFont'], <dynamic>[skTypeface, size]);
+  }
+
+  final js.JsObject skFontMgr =
+      js.JsObject(canvasKit['SkFontMgr']['RefDefault']);
+}

lib/web_ui/lib/src/engine/compositor/image.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+part of engine;
+
+/// Instantiates a [ui.Codec] backed by an `SkImage` from Skia.
+void skiaInstantiateImageCodec(Uint8List list, Callback<ui.Codec> callback,
+    [int width, int height, int format, int rowBytes]) {
+  final js.JsObject skImage =
+      canvasKit.callMethod('MakeImageFromEncoded', <Uint8List>[list]);
+  final SkImage image = SkImage(skImage);
+  final SkImageCodec codec = SkImageCodec(image);
+  callback(codec);
+}
+
+/// A [ui.Image] backed by an `SkImage` from Skia.
+class SkImage implements ui.Image {
+  js.JsObject skImage;
+
+  SkImage(this.skImage);
+
+  @override
+  void dispose() {
+    skImage = null;
+  }
+
+  @override
+  int get width => skImage.callMethod('width');
+
+  @override
+  int get height => skImage.callMethod('height');
+
+  @override
+  Future<ByteData> toByteData(
+      {ui.ImageByteFormat format = ui.ImageByteFormat.rawRgba}) {
+    throw 'unimplemented';
+  }
+}
+
+/// A [ui.Codec] backed by an `SkImage` from Skia.
+class SkImageCodec implements ui.Codec {
+  final SkImage skImage;
+
+  SkImageCodec(this.skImage);
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+  }
+
+  @override
+  int get frameCount => 1;
+
+  @override
+  Future<ui.FrameInfo> getNextFrame() {
+    return Future<ui.FrameInfo>.value(SingleFrameInfo(skImage));
+  }
+
+  @override
+  int get repetitionCount => 0;
+}

lib/web_ui/lib/src/engine/compositor/initialization.dart

@@ -5,7 +5,8 @@
 part of engine;
 
 /// EXPERIMENTAL: Enable the Skia-based rendering backend.
-const bool experimentalUseSkia = false;
+const bool experimentalUseSkia =
+    bool.fromEnvironment('FLUTTER_WEB_USE_SKIA', defaultValue: false);
 
 /// The URL to use when downloading the CanvasKit script and associated wasm.
 const String canvasKitBaseUrl = 'https://unpkg.com/canvaskit-wasm@0.6.0/bin/';
@@ -18,17 +19,17 @@ Future<void> initializeSkia() {
   StreamSubscription<html.Event> loadSubscription;
   loadSubscription = domRenderer.canvasKitScript.onLoad.listen((_) {
     loadSubscription.cancel();
-    final js.JsObject canvasKitInitArgs = js.JsObject.jsify(<dynamic, dynamic>{
-      'locateFile': js.allowInterop((String file) => canvasKitBaseUrl + file)
+    final js.JsObject canvasKitInitArgs = js.JsObject.jsify(<String, dynamic>{
+      'locateFile': (String file, String unusedBase) => canvasKitBaseUrl + file,
     });
     final js.JsObject canvasKitInit =
         js.JsObject(js.context['CanvasKitInit'], <dynamic>[canvasKitInitArgs]);
     final js.JsObject canvasKitInitPromise = canvasKitInit.callMethod('ready');
     canvasKitInitPromise.callMethod('then', <dynamic>[
-      js.allowInterop((js.JsObject ck) {
+      (js.JsObject ck) {
         canvasKit = ck;
         canvasKitCompleter.complete();
-      })
+      },
     ]);
   });
   return canvasKitCompleter.future;
@@ -38,3 +39,6 @@ Future<void> initializeSkia() {
 ///
 /// This is created by [initializeSkia].
 js.JsObject canvasKit;
+
+/// The Skia font collection.
+SkiaFontCollection skiaFontCollection;

lib/web_ui/lib/src/engine/compositor/layer.dart

@@ -172,6 +172,42 @@ class ClipRRectLayer extends ContainerLayer {
   }
 }
 
+/// A layer that paints its children with the given opacity.
+class OpacityLayer extends ContainerLayer implements ui.OpacityEngineLayer {
+  final int _alpha;
+  final ui.Offset _offset;
+
+  OpacityLayer(this._alpha, this._offset);
+
+  @override
+  void preroll(PrerollContext prerollContext, Matrix4 matrix) {
+    Matrix4 childMatrix = Matrix4.copy(matrix);
+    childMatrix.translate(_offset.dx, _offset.dy);
+    final ui.Rect childPaintBounds =
+        prerollChildren(prerollContext, childMatrix);
+    paintBounds = childPaintBounds.translate(_offset.dx, _offset.dy);
+  }
+
+  @override
+  void paint(PaintContext context) {
+    assert(needsPainting);
+
+    final ui.Paint paint = ui.Paint();
+    paint.color = ui.Color.fromARGB(_alpha, 0, 0, 0);
+
+    context.canvas.save();
+    context.canvas.translate(_offset.dx, _offset.dy);
+
+    final ui.Rect saveLayerBounds = paintBounds.shift(-_offset);
+
+    context.canvas.saveLayer(saveLayerBounds, paint);
+    paintChildren(context);
+    // Restore twice: once for the translate and once for the saveLayer.
+    context.canvas.restore();
+    context.canvas.restore();
+  }
+}
+
 /// A layer that transforms its child layers by the given transform matrix.
 class TransformLayer extends ContainerLayer
     implements ui.OffsetEngineLayer, ui.TransformEngineLayer {
@@ -330,16 +366,13 @@ class PhysicalShapeLayer extends ContainerLayer
     final int saveCount = paintContext.canvas.save();
     switch (_clipBehavior) {
       case ui.Clip.hardEdge:
-        paintContext.canvas.clipPath(_path);
+        paintContext.canvas.clipPath(_path, doAntiAlias: false);
         break;
       case ui.Clip.antiAlias:
-        // TODO(het): This is supposed to be different from Clip.hardEdge in
-        // that it anti-aliases the clip. The canvas clipPath() method
-        // should support this.
-        paintContext.canvas.clipPath(_path);
+        paintContext.canvas.clipPath(_path, doAntiAlias: true);
         break;
       case ui.Clip.antiAliasWithSaveLayer:
-        paintContext.canvas.clipPath(_path);
+        paintContext.canvas.clipPath(_path, doAntiAlias: true);
         paintContext.canvas.saveLayer(paintBounds, null);
         break;
       case ui.Clip.none:

lib/web_ui/lib/src/engine/compositor/layer_scene_builder.dart

@@ -118,7 +118,8 @@ class LayerSceneBuilder implements ui.SceneBuilder {
 
   @override
   ui.ColorFilterEngineLayer pushColorFilter(ui.ColorFilter filter,
-      {ui.EngineLayer oldLayer}) {
+      {ui.ColorFilterEngineLayer oldLayer}) {
+    assert(filter != null);
     throw UnimplementedError();
   }
 
@@ -134,9 +135,9 @@ class LayerSceneBuilder implements ui.SceneBuilder {
   @override
   ui.OpacityEngineLayer pushOpacity(int alpha,
       {ui.EngineLayer oldLayer, ui.Offset offset = ui.Offset.zero}) {
-    // TODO(het): Implement opacity
-    pushOffset(0.0, 0.0);
-    return null;
+    final OpacityLayer layer = OpacityLayer(alpha, offset);
+    pushLayer(layer);
+    return layer;
   }
 
   @override

lib/web_ui/lib/src/engine/compositor/matrix.dart

-// Copyright 2013 The Flutter Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-part of engine;
-
-// Mappings from SkMatrix-index to input-index.
-const List<int> _skMatrixIndexToMatrix4Index = <int>[
-  0, 4, 12, // Row 1
-  1, 5, 13, // Row 2
-  3, 7, 15, // Row 3
-];
-
-/// Converts a 4x4 Flutter matrix (represented as a [Float64List]) to an
-/// SkMatrix, which is a 3x3 transform matrix.
-js.JsArray<double> toSkMatrix(Float64List matrix4) {
-  js.JsArray<double> skMatrix = new js.JsArray<double>();
-  skMatrix.length = 9;
-  for (int i = 0; i < 9; ++i) {
-    int matrix4Index = _skMatrixIndexToMatrix4Index[i];
-    if (matrix4Index < matrix4.length)
-      skMatrix[i] = matrix4[matrix4Index];
-    else
-      skMatrix[i] = 0.0;
-  }
-  return skMatrix;
-}

lib/web_ui/lib/src/engine/compositor/path.dart

@@ -12,15 +12,32 @@ class SkPath implements ui.Path {
 
   SkPath() {
     _skPath = js.JsObject(canvasKit['SkPath']);
+    fillType = ui.PathFillType.nonZero;
   }
 
-  js.JsObject _makeSkRect(ui.Rect rect) {
-    return js.JsObject(canvasKit['LTRBRect'],
-        <double>[rect.left, rect.top, rect.right, rect.bottom]);
-  }
+  SkPath._fromSkPath(js.JsObject skPath) : _skPath = skPath;
+
+  ui.PathFillType _fillType;
 
   @override
-  ui.PathFillType fillType;
+  ui.PathFillType get fillType => _fillType;
+
+  @override
+  set fillType(ui.PathFillType newFillType) {
+    _fillType = newFillType;
+
+    js.JsObject skFillType;
+    switch (newFillType) {
+      case ui.PathFillType.nonZero:
+        skFillType = canvasKit['FillType']['Winding'];
+        break;
+      case ui.PathFillType.evenOdd:
+        skFillType = canvasKit['FillType']['EvenOdd'];
+        break;
+    }
+
+    _skPath.callMethod('setFillType', <js.JsObject>[skFillType]);
+  }
 
   @override
   void addArc(ui.Rect oval, double startAngle, double sweepAngle) {
@@ -29,7 +46,9 @@ class SkPath implements ui.Path {
 
   @override
   void addOval(ui.Rect oval) {
-    throw 'addOval';
+    // TODO(het): Use `addOval` instead when CanvasKit exposes it.
+    // Since CanvasKit doesn't expose `addOval`, use `addArc` instead.
+    _skPath.callMethod('addArc', <dynamic>[makeSkRect(oval), 0.0, 360.0]);
   }
 
   @override
@@ -39,13 +58,26 @@ class SkPath implements ui.Path {
 
   @override
   void addPolygon(List<ui.Offset> points, bool close) {
-    throw 'addPolygon';
+    // TODO(het): Use `addPoly` once CanvasKit makes it available.
+    assert(points != null);
+    if (points.isEmpty) {
+      return;
+    }
+
+    moveTo(points.first.dx, points.first.dy);
+    for (int i = 1; i < points.length; i++) {
+      final ui.Offset point = points[i];
+      lineTo(point.dx, point.dy);
+    }
+    if (close) {
+      this.close();
+    }
   }
 
   @override
   void addRRect(ui.RRect rrect) {
-    final js.JsObject skRect = _makeSkRect(rrect.outerRect);
-    final List<num> radii = <num>[
+    final js.JsObject skRect = makeSkRect(rrect.outerRect);
+    final List<double> radii = <double>[
       rrect.tlRadiusX,
       rrect.tlRadiusY,
       rrect.trRadiusX,
@@ -55,18 +87,25 @@ class SkPath implements ui.Path {
       rrect.blRadiusX,
       rrect.blRadiusY,
     ];
-    _skPath.callMethod('addRoundRect', <dynamic>[skRect, radii]);
+    _skPath.callMethod('addRoundRect',
+        <dynamic>[skRect, js.JsArray<double>.from(radii), false]);
   }
 
   @override
   void addRect(ui.Rect rect) {
-    throw 'addRect';
+    _skPath.callMethod('addRect', <js.JsObject>[makeSkRect(rect)]);
   }
 
   @override
   void arcTo(
       ui.Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) {
-    throw 'arcTo';
+    const double radsToDegrees = 180.0 / math.pi;
+    _skPath.callMethod('arcTo', <dynamic>[
+      makeSkRect(rect),
+      startAngle * radsToDegrees,
+      sweepAngle * radsToDegrees,
+      forceMoveTo,
+    ]);
   }
 
   @override
@@ -75,12 +114,31 @@ class SkPath implements ui.Path {
       double rotation = 0.0,
       bool largeArc = false,
       bool clockwise = true}) {
-    throw 'arcToPoint';
+    assert(rotation == 0.0,
+        'Skia backend does not support `arcToPoint` rotation.');
+    assert(!largeArc, 'Skia backend does not support `arcToPoint` largeArc.');
+    assert(radius.x == radius.y,
+        'Skia backend does not support `arcToPoint` with elliptical radius.');
+
+    // TODO(het): Remove asserts above and use the correct override of `arcTo`
+    //   when it is available in CanvasKit.
+    // The only `arcTo` method exposed in CanvasKit is:
+    //   arcTo(x1, y1, x2, y2, radius)
+    final ui.Offset lastPoint = _getCurrentPoint();
+    _skPath.callMethod('arcTo',
+        <double>[lastPoint.dx, lastPoint.dy, arcEnd.dx, arcEnd.dy, radius.x]);
+  }
+
+  ui.Offset _getCurrentPoint() {
+    final int pointCount = _skPath.callMethod('countPoints');
+    final js.JsObject lastPoint =
+        _skPath.callMethod('getPoint', <int>[pointCount - 1]);
+    return ui.Offset(lastPoint[0], lastPoint[1]);
   }
 
   @override
   void close() {
-    throw 'close';
+    _skPath.callMethod('close');
   }
 
   @override
@@ -95,38 +153,62 @@ class SkPath implements ui.Path {
 
   @override
   bool contains(ui.Offset point) {
-    throw 'contains';
+    return _skPath.callMethod('contains', <double>[point.dx, point.dy]);
   }
 
   @override
   void cubicTo(
       double x1, double y1, double x2, double y2, double x3, double y3) {
-    throw 'cubicTo';
+    _skPath.callMethod('cubicTo', <double>[x1, y1, x2, y2, x3, y3]);
   }
 
   @override
   void extendWithPath(ui.Path path, ui.Offset offset, {Float64List matrix4}) {
-    throw 'extendWithPath';
+    List<double> skMatrix;
+    if (matrix4 == null) {
+      skMatrix = makeSkMatrix(
+          Matrix4.translationValues(offset.dx, offset.dy, 0.0).storage);
+    } else {
+      skMatrix = makeSkMatrix(matrix4);
+      skMatrix[2] += offset.dx;
+      skMatrix[5] += offset.dy;
+    }
+    final SkPath otherPath = path;
+    _skPath.callMethod('addPath', <dynamic>[
+      otherPath._skPath,
+      skMatrix[0],
+      skMatrix[1],
+      skMatrix[2],
+      skMatrix[3],
+      skMatrix[4],
+      skMatrix[5],
+      skMatrix[6],
+      skMatrix[7],
+      skMatrix[8],
+      true,
+    ]);
   }
 
   @override
   ui.Rect getBounds() {
-    throw 'getBounds';
+    final js.JsObject bounds = _skPath.callMethod('getBounds');
+    return ui.Rect.fromLTRB(
+        bounds['fLeft'], bounds['fTop'], bounds['fRight'], bounds['fBottom']);
   }
 
   @override
   void lineTo(double x, double y) {
-    throw 'lineTo';
+    _skPath.callMethod('lineTo', <double>[x, y]);
   }
 
   @override
   void moveTo(double x, double y) {
-    throw 'moveTo';
+    _skPath.callMethod('moveTo', <double>[x, y]);
   }
 
   @override
   void quadraticBezierTo(double x1, double y1, double x2, double y2) {
-    throw 'quadraticBezierTo';
+    _skPath.callMethod('quadTo', <double>[x1, y1, x2, y2]);
   }
 
   @override
@@ -166,12 +248,17 @@ class SkPath implements ui.Path {
 
   @override
   void reset() {
-    throw 'reset';
+    _skPath.callMethod('reset');
   }
 
   @override
   ui.Path shift(ui.Offset offset) {
-    throw 'shift';
+    // Since CanvasKit does not expose `SkPath.offset`, create a copy of this
+    // path and call `transform` on it.
+    final js.JsObject newPath = _skPath.callMethod('copy');
+    newPath.callMethod('transform',
+        <double>[1.0, 0.0, offset.dx, 0.0, 1.0, offset.dy, 0.0, 0.0, 0.0]);
+    return SkPath._fromSkPath(newPath);
   }
 
   @override
@@ -182,21 +269,18 @@ class SkPath implements ui.Path {
     throw 'transform';
   }
 
+  // TODO(het): Remove these.
   @override
-  // TODO: implement webOnlyPathAsCircle
   Ellipse get webOnlyPathAsCircle => null;
 
   @override
-  // TODO: implement webOnlyPathAsRect
   ui.Rect get webOnlyPathAsRect => null;
 
   @override
-  // TODO: implement webOnlyPathAsRoundedRect
   ui.RRect get webOnlyPathAsRoundedRect => null;
 
   @override
-  List webOnlySerializeToCssPaint() {
-    // TODO: implement webOnlySerializeToCssPaint
+  List<dynamic> webOnlySerializeToCssPaint() {
     return null;
   }
 }

lib/web_ui/lib/src/engine/compositor/picture_recorder.dart

@@ -23,7 +23,8 @@ class SkPictureRecorder implements ui.PictureRecorder {
 
   @override
   ui.Picture endRecording() {
-    js.JsObject skPicture = _recorder.callMethod('finishRecordingAsPicture');
+    final js.JsObject skPicture =
+        _recorder.callMethod('finishRecordingAsPicture');
     _recorder.callMethod('delete');
     return SkPicture(skPicture, cullRect);
   }

lib/web_ui/lib/src/engine/compositor/recording_canvas.dart

@@ -8,31 +8,6 @@ class SkRecordingCanvas implements RecordingCanvas {
   final js.JsObject skCanvas;
   SkRecordingCanvas(this.skCanvas);
 
-  js.JsObject _makeSkRect(ui.Rect rect) {
-    return js.JsObject(canvasKit['LTRBRect'],
-        <double>[rect.left, rect.top, rect.right, rect.bottom]);
-  }
-
-  js.JsObject _makeSkPaint(ui.Paint paint) {
-    final skPaint = js.JsObject(canvasKit['SkPaint']);
-
-    skPaint.callMethod('setColor', <int>[paint.color.value]);
-
-    js.JsObject skPaintStyle;
-    switch (paint.style) {
-      case ui.PaintingStyle.stroke:
-        skPaintStyle = canvasKit['PaintStyle']['Stroke'];
-        break;
-      case ui.PaintingStyle.fill:
-        skPaintStyle = canvasKit['PaintStyle']['Fill'];
-        break;
-    }
-    skPaint.callMethod('setStyle', <js.JsObject>[skPaintStyle]);
-
-    skPaint.callMethod('setAntiAlias', <bool>[paint.isAntiAlias]);
-    return skPaint;
-  }
-
   @override
   bool _didDraw = true;
 
@@ -40,7 +15,7 @@ class SkRecordingCanvas implements RecordingCanvas {
   bool _hasArbitraryPaint = true;
 
   @override
-  int saveCount;
+  int saveCount = 0;
 
   @override
   // TODO: implement _commands
@@ -56,18 +31,47 @@ class SkRecordingCanvas implements RecordingCanvas {
   }
 
   @override
-  void clipPath(ui.Path path) {
-    throw 'clipPath';
+  void clipPath(ui.Path path, {bool doAntiAlias = true}) {
+    final SkPath skPath = path;
+    final js.JsObject intersectClipOp = canvasKit['ClipOp']['Intersect'];
+    skCanvas.callMethod('clipPath', <dynamic>[
+      skPath._skPath,
+      intersectClipOp,
+      doAntiAlias,
+    ]);
   }
 
   @override
-  void clipRRect(ui.RRect rrect) {
-    throw 'clipRRect';
+  void clipRRect(
+    ui.RRect rrect, {
+    bool doAntiAlias = true,
+  }) {
+    // TODO(het): Use `clipRRect` when CanvasKit makes it available.
+    // CanvasKit doesn't expose `Canvas.clipRRect`, so we create a path, add the
+    // RRect to it, and call clipPath with it.
+    final SkPath rrectPath = SkPath();
+    rrectPath.addRRect(rrect);
+    clipPath(rrectPath, doAntiAlias: doAntiAlias);
   }
 
   @override
-  void clipRect(ui.Rect rect) {
-    throw 'clipRect';
+  void clipRect(
+    ui.Rect rect, {
+    ui.ClipOp clipOp = ui.ClipOp.intersect,
+    bool doAntiAlias = true,
+  }) {
+    js.JsObject skClipOp;
+    switch (clipOp) {
+      case ui.ClipOp.difference:
+        skClipOp = canvasKit['ClipOp']['Difference'];
+        break;
+      case ui.ClipOp.intersect:
+        skClipOp = canvasKit['ClipOp']['Intersect'];
+        break;
+    }
+
+    skCanvas.callMethod(
+        'clipRect', <dynamic>[makeSkRect(rect), skClipOp, doAntiAlias]);
   }
 
   @override
@@ -95,7 +99,12 @@ class SkRecordingCanvas implements RecordingCanvas {
 
   @override
   void drawCircle(ui.Offset c, double radius, ui.Paint paint) {
-    throw 'drawCircle';
+    final js.JsObject skPaint = makeSkPaint(paint);
+    // TODO(het): Use `drawCircle` when CanvasKit makes it available.
+    // Since CanvasKit does not expose `drawCircle`, use `drawOval` instead.
+    final js.JsObject skRect = makeSkRect(ui.Rect.fromLTWH(
+        c.dx - radius, c.dy - radius, 2.0 * radius, 2.0 * radius));
+    skCanvas.callMethod('drawOval', <js.JsObject>[skRect, skPaint]);
   }
 
   @override
@@ -115,12 +124,25 @@ class SkRecordingCanvas implements RecordingCanvas {
 
   @override
   void drawImageRect(ui.Image image, ui.Rect src, ui.Rect dst, ui.Paint paint) {
-    throw 'drawImageRect';
+    final SkImage skImage = image;
+    skCanvas.callMethod('drawImageRect', <dynamic>[
+      skImage.skImage,
+      makeSkRect(src),
+      makeSkRect(dst),
+      makeSkPaint(paint),
+      false,
+    ]);
   }
 
   @override
   void drawLine(ui.Offset p1, ui.Offset p2, ui.Paint paint) {
-    throw 'drawLine';
+    skCanvas.callMethod('drawLine', <dynamic>[
+      p1.dx,
+      p1.dy,
+      p2.dx,
+      p2.dy,
+      makeSkPaint(paint),
+    ]);
   }
 
   @override
@@ -135,30 +157,67 @@ class SkRecordingCanvas implements RecordingCanvas {
 
   @override
   void drawParagraph(ui.Paragraph paragraph, ui.Offset offset) {
-    throw 'drawParagraph';
+    // TODO(het): This doesn't support most paragraph features. We are just
+    // creating a font from the family and size, and drawing it with
+    // ShapedText.
+    final EngineParagraph engineParagraph = paragraph;
+    final ParagraphGeometricStyle style = engineParagraph.geometricStyle;
+    final js.JsObject skFont =
+        skiaFontCollection.getFont(style.effectiveFontFamily, style.fontSize);
+    final js.JsObject skShapedTextOpts = js.JsObject.jsify(<String, dynamic>{
+      'font': skFont,
+      'leftToRight': true,
+      'text': engineParagraph.plainText,
+      'width': engineParagraph.width + 1,
+    });
+    final js.JsObject skShapedText =
+        js.JsObject(canvasKit['ShapedText'], <js.JsObject>[skShapedTextOpts]);
+    skCanvas.callMethod('drawText', <dynamic>[
+      skShapedText,
+      offset.dx + engineParagraph._alignOffset,
+      offset.dy,
+      makeSkPaint(engineParagraph._paint)
+    ]);
   }
 
   @override
   void drawPath(ui.Path path, ui.Paint paint) {
-    throw 'drawPath';
+    final js.JsObject skPaint = makeSkPaint(paint);
+    final SkPath enginePath = path;
+    final js.JsObject skPath = enginePath._skPath;
+    skCanvas.callMethod('drawPath', <js.JsObject>[skPath, skPaint]);
   }
 
   @override
   void drawRRect(ui.RRect rrect, ui.Paint paint) {
-    throw 'drawRRect';
+    // Since CanvasKit does not expose `drawRRect` we have to make do with
+    // `drawRoundRect`. The downside of `drawRoundRect` is that all of the
+    // corner radii must be the same.
+    assert(
+      rrect.tlRadius == rrect.trRadius &&
+          rrect.tlRadius == rrect.brRadius &&
+          rrect.tlRadius == rrect.blRadius,
+      'CanvasKit only supports drawing RRects where the radii are all the same.',
+    );
+    skCanvas.callMethod('drawRoundRect', <dynamic>[
+      makeSkRect(rrect.outerRect),
+      rrect.tlRadiusX,
+      rrect.tlRadiusY,
+      makeSkPaint(paint),
+    ]);
   }
 
   @override
   void drawRect(ui.Rect rect, ui.Paint paint) {
-    final js.JsObject skRect = _makeSkRect(rect);
-    final js.JsObject skPaint = _makeSkPaint(paint);
+    final js.JsObject skRect = makeSkRect(rect);
+    final js.JsObject skPaint = makeSkPaint(paint);
     skCanvas.callMethod('drawRect', <js.JsObject>[skRect, skPaint]);
   }
 
   @override
   void drawShadow(ui.Path path, ui.Color color, double elevation,
       bool transparentOccluder) {
-    throw 'drawShadow';
+    drawSkShadow(skCanvas, path, color, elevation, transparentOccluder);
   }
 
   @override
@@ -166,22 +225,29 @@ class SkRecordingCanvas implements RecordingCanvas {
 
   @override
   void restore() {
-    throw 'restore';
+    skCanvas.callMethod('restore');
+    saveCount--;
   }
 
   @override
   void rotate(double radians) {
-    throw 'rotate';
+    skCanvas
+        .callMethod('rotate', <double>[radians * 180.0 / math.pi, 0.0, 0.0]);
   }
 
   @override
   void save() {
-    throw 'save';
+    skCanvas.callMethod('save');
+    saveCount++;
   }
 
   @override
   void saveLayer(ui.Rect bounds, ui.Paint paint) {
-    throw 'saveLayer';
+    skCanvas.callMethod('saveLayer', <js.JsObject>[
+      makeSkRect(bounds),
+      makeSkPaint(paint),
+    ]);
+    saveCount++;
   }
 
   @override
@@ -191,7 +257,7 @@ class SkRecordingCanvas implements RecordingCanvas {
 
   @override
   void scale(double sx, double sy) {
-    throw 'scale';
+    skCanvas.callMethod('scale', <double>[sx, sy]);
   }
 
   @override
@@ -201,11 +267,11 @@ class SkRecordingCanvas implements RecordingCanvas {
 
   @override
   void transform(Float64List matrix4) {
-    throw 'transform';
+    skCanvas.callMethod('concat', <js.JsArray<double>>[makeSkMatrix(matrix4)]);
   }
 
   @override
   void translate(double dx, double dy) {
-    throw 'translate';
+    skCanvas.callMethod('translate', <double>[dx, dy]);
   }
 }

lib/web_ui/lib/src/engine/compositor/util.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+part of engine;
+
+js.JsObject makeSkRect(ui.Rect rect) {
+  return js.JsObject(canvasKit['LTRBRect'],
+      <double>[rect.left, rect.top, rect.right, rect.bottom]);
+}
+
+js.JsArray<double> makeSkPoint(ui.Offset point) {
+  js.JsArray<double> skPoint = new js.JsArray<double>();
+  skPoint.length = 2;
+  skPoint[0] = point.dx;
+  skPoint[1] = point.dy;
+  return skPoint;
+}
+
+js.JsObject makeSkPaint(ui.Paint paint) {
+  final dynamic skPaint = js.JsObject(canvasKit['SkPaint']);
+
+  if (paint.shader != null) {
+    final EngineGradient engineShader = paint.shader;
+    skPaint.callMethod(
+        'setShader', <js.JsObject>[engineShader.createSkiaShader()]);
+  }
+
+  if (paint.color != null) {
+    skPaint.callMethod('setColor', <int>[paint.color.value]);
+  }
+
+  js.JsObject skPaintStyle;
+  switch (paint.style) {
+    case ui.PaintingStyle.stroke:
+      skPaintStyle = canvasKit['PaintStyle']['Stroke'];
+      break;
+    case ui.PaintingStyle.fill:
+      skPaintStyle = canvasKit['PaintStyle']['Fill'];
+      break;
+  }
+  skPaint.callMethod('setStyle', <js.JsObject>[skPaintStyle]);
+
+  js.JsObject skBlendMode;
+  switch (paint.blendMode) {
+    case ui.BlendMode.clear:
+      skBlendMode = canvasKit['BlendMode']['Clear'];
+      break;
+
+    case ui.BlendMode.src:
+      skBlendMode = canvasKit['BlendMode']['Src'];
+      break;
+
+    case ui.BlendMode.dst:
+      skBlendMode = canvasKit['BlendMode']['Dst'];
+      break;
+
+    case ui.BlendMode.srcOver:
+      skBlendMode = canvasKit['BlendMode']['SrcOver'];
+      break;
+
+    case ui.BlendMode.dstOver:
+      skBlendMode = canvasKit['BlendMode']['DstOver'];
+      break;
+
+    case ui.BlendMode.srcIn:
+      skBlendMode = canvasKit['BlendMode']['SrcIn'];
+      break;
+
+    case ui.BlendMode.dstIn:
+      skBlendMode = canvasKit['BlendMode']['DstIn'];
+      break;
+
+    case ui.BlendMode.srcOut:
+      skBlendMode = canvasKit['BlendMode']['SrcOut'];
+      break;
+
+    case ui.BlendMode.dstOut:
+      skBlendMode = canvasKit['BlendMode']['DstOut'];
+      break;
+
+    case ui.BlendMode.srcATop:
+      skBlendMode = canvasKit['BlendMode']['SrcATop'];
+      break;
+
+    case ui.BlendMode.dstATop:
+      skBlendMode = canvasKit['BlendMode']['DstATop'];
+      break;
+
+    case ui.BlendMode.xor:
+      skBlendMode = canvasKit['BlendMode']['Xor'];
+      break;
+
+    case ui.BlendMode.plus:
+      skBlendMode = canvasKit['BlendMode']['Plus'];
+      break;
+
+    case ui.BlendMode.modulate:
+      skBlendMode = canvasKit['BlendMode']['Modulate'];
+      break;
+
+    case ui.BlendMode.screen:
+      skBlendMode = canvasKit['BlendMode']['Screen'];
+      break;
+
+    case ui.BlendMode.overlay:
+      skBlendMode = canvasKit['BlendMode']['Overlay'];
+      break;
+
+    case ui.BlendMode.darken:
+      skBlendMode = canvasKit['BlendMode']['Darken'];
+      break;
+
+    case ui.BlendMode.lighten:
+      skBlendMode = canvasKit['BlendMode']['Lighten'];
+      break;
+
+    case ui.BlendMode.colorDodge:
+      skBlendMode = canvasKit['BlendMode']['ColorDodge'];
+      break;
+
+    case ui.BlendMode.colorBurn:
+      skBlendMode = canvasKit['BlendMode']['ColorBurn'];
+      break;
+
+    case ui.BlendMode.hardLight:
+      skBlendMode = canvasKit['BlendMode']['HardLight'];
+      break;
+
+    case ui.BlendMode.softLight:
+      skBlendMode = canvasKit['BlendMode']['SoftLight'];
+      break;
+
+    case ui.BlendMode.difference:
+      skBlendMode = canvasKit['BlendMode']['Difference'];
+      break;
+
+    case ui.BlendMode.exclusion:
+      skBlendMode = canvasKit['BlendMode']['Exclusion'];
+      break;
+
+    case ui.BlendMode.multiply:
+      skBlendMode = canvasKit['BlendMode']['Multiply'];
+      break;
+
+    case ui.BlendMode.hue:
+      skBlendMode = canvasKit['BlendMode']['Hue'];
+      break;
+
+    case ui.BlendMode.saturation:
+      skBlendMode = canvasKit['BlendMode']['Saturation'];
+      break;
+
+    case ui.BlendMode.color:
+      skBlendMode = canvasKit['BlendMode']['Color'];
+      break;
+
+    case ui.BlendMode.luminosity:
+      skBlendMode = canvasKit['BlendMode']['Luminosity'];
+      break;
+  }
+  if (skBlendMode != null) {
+    skPaint.callMethod('setBlendMode', <js.JsObject>[skBlendMode]);
+  }
+
+  skPaint.callMethod('setAntiAlias', <bool>[paint.isAntiAlias]);
+
+  if (paint.strokeWidth != 0.0) {
+    skPaint.callMethod('setStrokeWidth', <double>[paint.strokeWidth]);
+  }
+
+  if (paint.maskFilter != null) {
+    final ui.BlurStyle blurStyle = paint.maskFilter.webOnlyBlurStyle;
+    final double sigma = paint.maskFilter.webOnlySigma;
+
+    js.JsObject skBlurStyle;
+    switch (blurStyle) {
+      case ui.BlurStyle.normal:
+        skBlurStyle = canvasKit['BlurStyle']['Normal'];
+        break;
+      case ui.BlurStyle.solid:
+        skBlurStyle = canvasKit['BlurStyle']['Solid'];
+        break;
+      case ui.BlurStyle.outer:
+        skBlurStyle = canvasKit['BlurStyle']['Outer'];
+        break;
+      case ui.BlurStyle.inner:
+        skBlurStyle = canvasKit['BlurStyle']['Inner'];
+        break;
+    }
+
+    final js.JsObject skMaskFilter = canvasKit
+        .callMethod('MakeBlurMaskFilter', <dynamic>[skBlurStyle, sigma, true]);
+    skPaint.callMethod('setMaskFilter', <js.JsObject>[skMaskFilter]);
+  }
+
+  return skPaint;
+}
+
+// Mappings from SkMatrix-index to input-index.
+const List<int> _skMatrixIndexToMatrix4Index = <int>[
+  0, 4, 12, // Row 1
+  1, 5, 13, // Row 2
+  3, 7, 15, // Row 3
+];
+
+/// Converts a 4x4 Flutter matrix (represented as a [Float64List]) to an
+/// SkMatrix, which is a 3x3 transform matrix.
+js.JsArray<double> makeSkMatrix(Float64List matrix4) {
+  final js.JsArray<double> skMatrix = js.JsArray<double>();
+  skMatrix.length = 9;
+  for (int i = 0; i < 9; ++i) {
+    final int matrix4Index = _skMatrixIndexToMatrix4Index[i];
+    if (matrix4Index < matrix4.length)
+      skMatrix[i] = matrix4[matrix4Index];
+    else
+      skMatrix[i] = 0.0;
+  }
+  return skMatrix;
+}
+
+void drawSkShadow(
+  js.JsObject skCanvas,
+  SkPath path,
+  ui.Color color,
+  double elevation,
+  bool transparentOccluder,
+) {
+  const double ambientAlpha = 0.039;
+  const double spotAlpha = 0.25;
+
+  final int flags = transparentOccluder ? 0x01 : 0x00;
+
+  final ui.Rect bounds = path.getBounds();
+  final double shadowX = (bounds.left + bounds.right) / 2.0;
+  final double shadowY = bounds.top - 600.0;
+
+  final ui.Color ambientColor =
+      ui.Color.fromARGB((color.alpha * ambientAlpha).round(), 0, 0, 0);
+
+  // This is a port of SkShadowUtils::ComputeTonalColors
+  final int minSpot = math.min(color.red, math.min(color.green, color.blue));
+  final int maxSpot = math.max(color.red, math.max(color.green, color.blue));
+  final double luminance = 0.5 * (maxSpot + minSpot) / 255.0;
+  final double originalAlpha = (color.alpha * spotAlpha) / 255.0;
+  final double alphaAdjust =
+      (2.6 + (-2.66667 + 1.06667 * originalAlpha) * originalAlpha) *
+          originalAlpha;
+  double colorAlpha =
+      (3.544762 + (-4.891428 + 2.3466 * luminance) * luminance) * luminance;
+  colorAlpha = (colorAlpha * alphaAdjust).clamp(0.0, 1.0);
+
+  final double greyscaleAlpha =
+      (originalAlpha * (1.0 - 0.4 * luminance)).clamp(0.0, 1.0);
+
+  final double colorScale = colorAlpha * (1.0 - greyscaleAlpha);
+  final double tonalAlpha = colorScale + greyscaleAlpha;
+  final double unPremulScale = colorScale / tonalAlpha;
+
+  final ui.Color spotColor = ui.Color.fromARGB(
+    (tonalAlpha * 255.999).round(),
+    (unPremulScale * color.red).round(),
+    (unPremulScale * color.green).round(),
+    (unPremulScale * color.blue).round(),
+  );
+
+  skCanvas.callMethod('drawShadow', <dynamic>[
+    path._skPath,
+    js.JsArray<double>.from(<double>[0, 0, elevation]),
+    js.JsArray<double>.from(<double>[shadowX, shadowY, 600]),
+    800,
+    ambientColor.value,
+    spotColor.value,
+    flags,
+  ]);
+}

lib/web_ui/lib/src/engine/html_image_codec.dart

@@ -4,7 +4,7 @@
 
 part of engine;
 
-final _supportsDecode =
+final bool _supportsDecode =
     js_util.hasProperty(js.JsObject(js.context['Image']), 'decode');
 
 class HtmlCodec implements ui.Codec {

lib/web_ui/lib/src/engine/pointer_binding.dart

@@ -14,6 +14,12 @@ class PointerBinding {
   /// The singleton instance of this object.
   static PointerBinding get instance => _instance;
   static PointerBinding _instance;
+  // Set of pointerIds that are added before routing hover and mouse wheel
+  // events.
+  //
+  // The device needs to send a one time PointerChange.add before hover and
+  // wheel events.
+  Set<int> _activePointerIds = <int>{};
 
   PointerBinding(this.domRenderer) {
     if (_instance == null) {
@@ -24,6 +30,7 @@ class PointerBinding {
     assert(() {
       registerHotRestartListener(() {
         _adapter?.clearListeners();
+        _activePointerIds.clear();
       });
       return true;
     }());
@@ -75,7 +82,7 @@ class PointerBinding {
 
   void _onPointerData(List<ui.PointerData> data) {
     final ui.PointerDataPacket packet = ui.PointerDataPacket(data: data);
-    ui.window.onPointerDataPacket(packet);
+    ui.window?.onPointerDataPacket(packet);
   }
 }
 
@@ -183,10 +190,21 @@ class PointerAdapter extends BaseAdapter {
       // button to -1 as opposed to mouse move which sets it to 2.
       // This check is currently defaulting to primary button for now.
       // Change this when context gesture is implemented in flutter framework.
-      if (!_isButtonDown(_pointerButtonFromHtmlEvent(event))) {
-        return;
-      }
-      _callback(_convertEventToPointerData(ui.PointerChange.move, event));
+      final html.PointerEvent pointerEvent = event;
+      final int pointerButton = _pointerButtonFromHtmlEvent(pointerEvent);
+      final List<ui.PointerData> data = _convertEventToPointerData(
+          _isButtonDown(pointerButton)
+              ? ui.PointerChange.move
+              : ui.PointerChange.hover,
+          pointerEvent);
+      _ensureMouseDeviceAdded(
+          data,
+          pointerEvent.client.x,
+          pointerEvent.client.y,
+          pointerEvent.buttons,
+          pointerEvent.timeStamp,
+          pointerEvent.pointerId);
+      _callback(data);
     });
 
     _addEventListener('pointerup', (html.Event event) {
@@ -203,6 +221,8 @@ class PointerAdapter extends BaseAdapter {
     // A browser fires cancel event if it concludes the pointer will no longer
     // be able to generate events (example: device is deactivated)
     _addEventListener('pointercancel', (html.Event event) {
+      final int pointerButton = _pointerButtonFromHtmlEvent(event);
+      _updateButtonDownState(pointerButton, false);
       _callback(_convertEventToPointerData(ui.PointerChange.cancel, event));
     });
 
@@ -222,10 +242,10 @@ class PointerAdapter extends BaseAdapter {
     html.PointerEvent evt,
   ) {
     final List<html.PointerEvent> allEvents = _expandEvents(evt);
-    final List<ui.PointerData> data = List<ui.PointerData>(allEvents.length);
+    final List<ui.PointerData> data = <ui.PointerData>[];
     for (int i = 0; i < allEvents.length; i++) {
       final html.PointerEvent event = allEvents[i];
-      data[i] = ui.PointerData(
+      data.add(ui.PointerData(
         change: change,
         timeStamp: _eventTimeStampToDuration(event.timeStamp),
         kind: _pointerTypeToDeviceKind(event.pointerType),
@@ -237,7 +257,7 @@ class PointerAdapter extends BaseAdapter {
         pressureMin: 0.0,
         pressureMax: 1.0,
         tilt: _computeHighestTilt(event),
-      );
+      ));
     }
     return data;
   }
@@ -356,10 +376,13 @@ class MouseAdapter extends BaseAdapter {
     });
 
     _addEventListener('mousemove', (html.Event event) {
-      if (!_isButtonDown(_pointerButtonFromHtmlEvent(event))) {
-        return;
-      }
-      _callback(_convertEventToPointerData(ui.PointerChange.move, event));
+      final int pointerButton = _pointerButtonFromHtmlEvent(event);
+      final List<ui.PointerData> data = _convertEventToPointerData(
+          _isButtonDown(pointerButton)
+              ? ui.PointerChange.move
+              : ui.PointerChange.hover,
+          event);
+      _callback(data);
     });
 
     _addEventListener('mouseup', (html.Event event) {
@@ -380,21 +403,25 @@ class MouseAdapter extends BaseAdapter {
     ui.PointerChange change,
     html.MouseEvent event,
   ) {
-    return <ui.PointerData>[
-      ui.PointerData(
-        change: change,
-        timeStamp: _eventTimeStampToDuration(event.timeStamp),
-        kind: ui.PointerDeviceKind.mouse,
-        signalKind: ui.PointerSignalKind.none,
-        device: _mouseDeviceId,
-        physicalX: event.client.x,
-        physicalY: event.client.y,
-        buttons: event.buttons,
-        pressure: 1.0,
-        pressureMin: 0.0,
-        pressureMax: 1.0,
-      )
-    ];
+    final List<ui.PointerData> data = <ui.PointerData>[];
+    if (event.type == 'mousemove') {
+      _ensureMouseDeviceAdded(data, event.client.x, event.client.y,
+          event.buttons, event.timeStamp, _mouseDeviceId);
+    }
+    data.add(ui.PointerData(
+      change: change,
+      timeStamp: _eventTimeStampToDuration(event.timeStamp),
+      kind: ui.PointerDeviceKind.mouse,
+      signalKind: ui.PointerSignalKind.none,
+      device: _mouseDeviceId,
+      physicalX: event.client.x,
+      physicalY: event.client.y,
+      buttons: event.buttons,
+      pressure: 1.0,
+      pressureMin: 0.0,
+      pressureMax: 1.0,
+    ));
+    return data;
   }
 }
 
@@ -407,7 +434,33 @@ Duration _eventTimeStampToDuration(num milliseconds) {
   return Duration(milliseconds: ms, microseconds: micro);
 }
 
-bool _isWheelDeviceAdded = false;
+void _ensureMouseDeviceAdded(List<ui.PointerData> data, double clientX,
+    double clientY, int buttons, double timeStamp, int deviceId) {
+  if (PointerBinding.instance._activePointerIds.contains(deviceId)) {
+    return;
+  }
+  PointerBinding.instance._activePointerIds.add(deviceId);
+  // Only send [PointerChange.add] the first time.
+  data.insert(
+      0,
+      ui.PointerData(
+        change: ui.PointerChange.add,
+        timeStamp: _eventTimeStampToDuration(timeStamp),
+        kind: ui.PointerDeviceKind.mouse,
+        // In order for Flutter to actually add this pointer, we need to set the
+        // signal to none.
+        signalKind: ui.PointerSignalKind.none,
+        device: deviceId,
+        physicalX: clientX,
+        physicalY: clientY,
+        buttons: buttons,
+        pressure: 1.0,
+        pressureMin: 0.0,
+        pressureMax: 1.0,
+        scrollDeltaX: 0,
+        scrollDeltaY: 0,
+      ));
+}
 
 List<ui.PointerData> _convertWheelEventToPointerData(
   html.WheelEvent event,
@@ -435,27 +488,8 @@ List<ui.PointerData> _convertWheelEventToPointerData(
   }
 
   final List<ui.PointerData> data = <ui.PointerData>[];
-  // Only send [PointerChange.add] the first time.
-  if (!_isWheelDeviceAdded) {
-    _isWheelDeviceAdded = true;
-    data.add(ui.PointerData(
-      change: ui.PointerChange.add,
-      timeStamp: _eventTimeStampToDuration(event.timeStamp),
-      kind: ui.PointerDeviceKind.mouse,
-      // In order for Flutter to actually add this pointer, we need to set the
-      // signal to none.
-      signalKind: ui.PointerSignalKind.none,
-      device: _mouseDeviceId,
-      physicalX: event.client.x,
-      physicalY: event.client.y,
-      buttons: event.buttons,
-      pressure: 1.0,
-      pressureMin: 0.0,
-      pressureMax: 1.0,
-      scrollDeltaX: deltaX,
-      scrollDeltaY: deltaY,
-    ));
-  }
+  _ensureMouseDeviceAdded(data, event.client.x, event.client.y, event.buttons,
+      event.timeStamp, _mouseDeviceId);
   data.add(ui.PointerData(
     change: ui.PointerChange.hover,
     timeStamp: _eventTimeStampToDuration(event.timeStamp),

lib/web_ui/lib/src/engine/recording_canvas.dart

@@ -154,7 +154,7 @@ class RecordingCanvas {
     _commands.add(PaintClipRRect(rrect));
   }
 
-  void clipPath(ui.Path path) {
+  void clipPath(ui.Path path, {bool doAntiAlias = true}) {
     _paintBounds.clipRect(path.getBounds());
     _hasArbitraryPaint = true;
     _commands.add(PaintClipPath(path));
@@ -267,7 +267,10 @@ class RecordingCanvas {
       pathBounds = pathBounds.inflate(paint.strokeWidth);
     }
     _paintBounds.grow(pathBounds);
-    _commands.add(PaintDrawPath(path, paint.webOnlyPaintData));
+    // Clone path so it can be reused for subsequent draw calls.
+    final ui.Path clone = ui.Path.from(path);
+    clone.fillType = path.fillType;
+    _commands.add(PaintDrawPath(clone, paint.webOnlyPaintData));
   }
 
   void drawImage(ui.Image image, ui.Offset offset, ui.Paint paint) {
@@ -982,6 +985,7 @@ class PaintDrawParagraph extends PaintCommand {
 }
 
 List<dynamic> _serializePaintToCssPaint(ui.PaintData paint) {
+  final EngineGradient engineShader = paint.shader;
   return <dynamic>[
     paint.blendMode?.index,
     paint.style?.index,
@@ -989,7 +993,7 @@ List<dynamic> _serializePaintToCssPaint(ui.PaintData paint) {
     paint.strokeCap?.index,
     paint.isAntiAlias,
     paint.color.toCssString(),
-    paint.shader?.webOnlySerializeToCssPaint(),
+    engineShader?.webOnlySerializeToCssPaint(),
     paint.maskFilter?.webOnlySerializeToCssPaint(),
     paint.filterQuality?.index,
     paint.colorFilter?.webOnlySerializeToCssPaint(),

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

@@ -585,11 +585,6 @@ class SemanticsObject {
   /// Whether this object represents an editable text field.
   bool get isTextField => hasFlag(ui.SemanticsFlag.isTextField);
 
-  /// Whether this object is read only.
-  ///
-  /// Only applicable when [isTextField] is true.
-  bool get isReadOnly => hasFlag(ui.SemanticsFlag.isReadOnly);
-
   /// Whether this object needs screen readers attention right away.
   bool get isLiveRegion =>
       hasFlag(ui.SemanticsFlag.isLiveRegion) &&

lib/web_ui/lib/src/engine/shader.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+part of engine;
+
+bool _offsetIsValid(ui.Offset offset) {
+  assert(offset != null, 'Offset argument was null.');
+  assert(!offset.dx.isNaN && !offset.dy.isNaN,
+      'Offset argument contained a NaN value.');
+  return true;
+}
+
+bool _matrix4IsValid(Float64List matrix4) {
+  assert(matrix4 != null, 'Matrix4 argument was null.');
+  assert(matrix4.length == 16, 'Matrix4 must have 16 entries.');
+  return true;
+}
+
+abstract class EngineGradient implements ui.Gradient {
+  /// Hidden constructor to prevent subclassing.
+  EngineGradient._();
+
+  /// Creates a fill style to be used in painting.
+  Object createPaintStyle(html.CanvasRenderingContext2D ctx);
+
+  List<dynamic> webOnlySerializeToCssPaint() {
+    throw UnsupportedError('CSS paint not implemented for this shader type');
+  }
+
+  /// Create a shader for use in the Skia backend.
+  js.JsObject createSkiaShader();
+}
+
+class GradientSweep extends EngineGradient {
+  GradientSweep(this.center, this.colors, this.colorStops, this.tileMode,
+      this.startAngle, this.endAngle, this.matrix4)
+      : assert(_offsetIsValid(center)),
+        assert(colors != null),
+        assert(tileMode != null),
+        assert(startAngle != null),
+        assert(endAngle != null),
+        assert(startAngle < endAngle),
+        assert(matrix4 == null || _matrix4IsValid(matrix4)),
+        super._() {
+    _validateColorStops(colors, colorStops);
+  }
+
+  @override
+  Object createPaintStyle(_) {
+    throw UnimplementedError();
+  }
+
+  final ui.Offset center;
+  final List<ui.Color> colors;
+  final List<double> colorStops;
+  final ui.TileMode tileMode;
+  final double startAngle;
+  final double endAngle;
+  final Float64List matrix4;
+
+  @override
+  js.JsObject createSkiaShader() {
+    throw UnimplementedError();
+  }
+}
+
+void _validateColorStops(List<ui.Color> colors, List<double> colorStops) {
+  if (colorStops == null) {
+    if (colors.length != 2)
+      throw ArgumentError(
+          '"colors" must have length 2 if "colorStops" is omitted.');
+  } else {
+    if (colors.length != colorStops.length)
+      throw ArgumentError(
+          '"colors" and "colorStops" arguments must have equal length.');
+  }
+}
+
+class GradientLinear extends EngineGradient {
+  GradientLinear(
+    this.from,
+    this.to,
+    this.colors,
+    this.colorStops,
+    this.tileMode,
+  )   : assert(_offsetIsValid(from)),
+        assert(_offsetIsValid(to)),
+        assert(colors != null),
+        assert(tileMode != null),
+        super._() {
+    _validateColorStops(colors, colorStops);
+  }
+
+  final ui.Offset from;
+  final ui.Offset to;
+  final List<ui.Color> colors;
+  final List<double> colorStops;
+  final ui.TileMode tileMode;
+
+  @override
+  html.CanvasGradient createPaintStyle(html.CanvasRenderingContext2D ctx) {
+    final html.CanvasGradient gradient =
+        ctx.createLinearGradient(from.dx, from.dy, to.dx, to.dy);
+    if (colorStops == null) {
+      assert(colors.length == 2);
+      gradient.addColorStop(0, colors[0].toCssString());
+      gradient.addColorStop(1, colors[1].toCssString());
+      return gradient;
+    }
+    for (int i = 0; i < colors.length; i++) {
+      gradient.addColorStop(colorStops[i], colors[i].toCssString());
+    }
+    return gradient;
+  }
+
+  @override
+  List<dynamic> webOnlySerializeToCssPaint() {
+    final List<dynamic> serializedColors = <dynamic>[];
+    for (int i = 0; i < colors.length; i++) {
+      serializedColors.add(colors[i].toCssString());
+    }
+    return <dynamic>[
+      1,
+      from.dx,
+      from.dy,
+      to.dx,
+      to.dy,
+      serializedColors,
+      colorStops,
+      tileMode.index
+    ];
+  }
+
+  @override
+  js.JsObject createSkiaShader() {
+    assert(experimentalUseSkia);
+
+    js.JsArray<num> jsColors = js.JsArray<num>();
+    jsColors.length = colors.length;
+    for (int i = 0; i < colors.length; i++) {
+      jsColors[i] = colors[i].value;
+    }
+
+    js.JsArray<double> jsColorStops;
+    if (colorStops == null) {
+      jsColorStops = js.JsArray<double>();
+      jsColorStops.length = 2;
+      jsColorStops[0] = 0;
+      jsColorStops[1] = 1;
+    } else {
+      jsColorStops = js.JsArray<double>.from(colorStops);
+      jsColorStops.length = colorStops.length;
+    }
+    return canvasKit.callMethod('MakeLinearGradientShader', <dynamic>[
+      makeSkPoint(from),
+      makeSkPoint(to),
+      jsColors,
+      jsColorStops,
+      tileMode.index,
+    ]);
+  }
+}
+
+class GradientRadial extends EngineGradient {
+  GradientRadial(this.center, this.radius, this.colors, this.colorStops,
+      this.tileMode, this.matrix4)
+      : super._();
+
+  final ui.Offset center;
+  final double radius;
+  final List<ui.Color> colors;
+  final List<double> colorStops;
+  final ui.TileMode tileMode;
+  final Float64List matrix4;
+
+  @override
+  Object createPaintStyle(_) {
+    throw UnimplementedError();
+  }
+
+  @override
+  js.JsObject createSkiaShader() {
+    throw UnimplementedError();
+  }
+}
+
+class GradientConical extends EngineGradient {
+  GradientConical(this.focal, this.focalRadius, this.center, this.radius,
+      this.colors, this.colorStops, this.tileMode, this.matrix4)
+      : super._();
+
+  final ui.Offset focal;
+  final double focalRadius;
+  final ui.Offset center;
+  final double radius;
+  final List<ui.Color> colors;
+  final List<double> colorStops;
+  final ui.TileMode tileMode;
+  final Float64List matrix4;
+
+  @override
+  Object createPaintStyle(_) {
+    throw UnimplementedError();
+  }
+
+  @override
+  js.JsObject createSkiaShader() {
+    throw UnimplementedError();
+  }
+}

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

@@ -114,7 +114,7 @@ class PersistedHoudiniPicture extends PersistedPicture {
       paintWorklet,
       'addModule',
       <dynamic>[
-        '/packages/flutter_web/assets/houdini_painter.js',
+        '/packages/flutter_web_ui/assets/houdini_painter.js',
       ],
     );
   }

lib/web_ui/lib/src/engine/text/font_collection.dart

@@ -5,7 +5,7 @@
 part of engine;
 
 const String _testFontFamily = 'Ahem';
-const String _testFontUrl = 'packages/flutter_web/assets/Ahem.ttf';
+const String _testFontUrl = 'packages/ui/assets/ahem.ttf';
 const String _robotoFontUrl =
     'packages/flutter_web_ui/assets/Roboto-Regular.ttf';
 

lib/web_ui/lib/src/engine/text/measurement.dart

@@ -231,6 +231,10 @@ abstract class TextMeasurementService {
   /// constraints.
   double measureSubstringWidth(EngineParagraph paragraph, int start, int end);
 
+  /// Returns text position given a paragraph, constraints and offset.
+  ui.TextPosition getTextPositionForOffset(EngineParagraph paragraph,
+      ui.ParagraphConstraints constraints, ui.Offset offset);
+
   /// Delegates to a [ParagraphRuler] to measure a list of text boxes that
   /// enclose the given range of text.
   List<ui.TextBox> measureBoxesForRange(
@@ -318,6 +322,7 @@ class DomTextMeasurementService extends TextMeasurementService {
 
   @override
   double measureSubstringWidth(EngineParagraph paragraph, int start, int end) {
+    assert(paragraph._plainText != null);
     final ParagraphGeometricStyle style = paragraph._geometricStyle;
     final ParagraphRuler ruler =
         TextMeasurementService.rulerManager.findOrCreateRuler(style);
@@ -332,6 +337,20 @@ class DomTextMeasurementService extends TextMeasurementService {
     return dimensions.width;
   }
 
+  @override
+  ui.TextPosition getTextPositionForOffset(EngineParagraph paragraph,
+      ui.ParagraphConstraints constraints, ui.Offset offset) {
+    assert(paragraph._plainText == null, 'should only be called for multispan');
+
+    final ParagraphGeometricStyle style = paragraph._geometricStyle;
+    final ParagraphRuler ruler =
+        TextMeasurementService.rulerManager.findOrCreateRuler(style);
+    ruler.willMeasure(paragraph);
+    final int position = ruler.hitTest(constraints, offset);
+    ruler.didMeasure();
+    return ui.TextPosition(offset: position);
+  }
+
   /// Called when we have determined that the paragraph fits the [constraints]
   /// without wrapping.
   ///
@@ -528,6 +547,7 @@ class CanvasTextMeasurementService extends TextMeasurementService {
 
   @override
   double measureSubstringWidth(EngineParagraph paragraph, int start, int end) {
+    assert(paragraph._plainText != null);
     final String text = paragraph._plainText;
     final ParagraphGeometricStyle style = paragraph._geometricStyle;
     _canvasContext.font = style.cssFontString;
@@ -539,6 +559,13 @@ class CanvasTextMeasurementService extends TextMeasurementService {
       end,
     );
   }
+
+  @override
+  ui.TextPosition getTextPositionForOffset(EngineParagraph paragraph,
+      ui.ParagraphConstraints constraints, ui.Offset offset) {
+    // TODO(flutter_web): implement.
+    return new ui.TextPosition(offset: 0);
+  }
 }
 
 // These global variables are used to memoize calls to [_measureSubstring]. They

lib/web_ui/lib/src/engine/text/paragraph.dart

@@ -236,9 +236,8 @@ class EngineParagraph implements ui.Paragraph {
   @override
   ui.TextPosition getPositionForOffset(ui.Offset offset) {
     if (_plainText == null) {
-      return const ui.TextPosition(offset: 0);
+      return getPositionForMultiSpanOffset(offset);
     }
-
     final double dx = offset.dx - _alignOffset;
     final TextMeasurementService instance = _measurementService;
 
@@ -273,6 +272,14 @@ class EngineParagraph implements ui.Paragraph {
     }
   }
 
+  ui.TextPosition getPositionForMultiSpanOffset(ui.Offset offset) {
+    assert(_lastUsedConstraints != null,
+        'missing call to paragraph layout before reading text position');
+    final TextMeasurementService instance = _measurementService;
+    return instance.getTextPositionForOffset(
+        this, _lastUsedConstraints, offset);
+  }
+
   @override
   List<int> getWordBoundary(int offset) {
     if (_plainText == null) {
@@ -707,7 +714,7 @@ class EngineParagraphBuilder implements ui.ParagraphBuilder {
     double baselineOffset,
     ui.TextBaseline baseline,
   }) {
-    // TODO(garyq): Implement web_ui version of this.
+    // TODO(garyq): Implement stub_ui version of this.
     throw UnimplementedError();
   }
 

lib/web_ui/lib/src/engine/text/ruler.dart

@@ -571,6 +571,53 @@ class ParagraphRuler {
     constrainedDimensions.updateWidth('${constraints.width + 0.5}px');
   }
 
+  /// Returns text position in a paragraph that contains multiple
+  /// nested spans given an offset.
+  int hitTest(ui.ParagraphConstraints constraints, ui.Offset offset) {
+    measureWithConstraints(constraints);
+    // Get paragraph element root used to measure constrainedDimensions.
+    final html.HtmlElement el = constrainedDimensions._element;
+    final List<html.Node> textNodes = <html.Node>[];
+    // Collect all text nodes (breadth first traversal).
+    // Since there is no api to get bounds of text nodes directly we work
+    // upwards and measure span elements and finally the paragraph.
+    _collectTextNodes(el.childNodes, textNodes);
+    // Hit test spans starting from leaf nodes up (backwards).
+    for (int i = textNodes.length - 1; i >= 0; i--) {
+      final html.Node node = textNodes[i];
+      // Check if offset is within client rect bounds of text node's
+      // parent element.
+      final html.Element parent = node.parentNode;
+      final html.Rectangle<num> bounds = parent.getBoundingClientRect();
+      final double dx = offset.dx;
+      final double dy = offset.dy;
+      if (dx >= bounds.left &&
+          dy < bounds.right &&
+          dy >= bounds.top &&
+          dy < bounds.bottom) {
+        // We found the element bounds that contains offset.
+        // Calculate text position for this node.
+        int textPosition = 0;
+        for (int nodeIndex = 0; nodeIndex < i; nodeIndex++) {
+          textPosition += textNodes[nodeIndex].text.length;
+        }
+        return textPosition;
+      }
+    }
+    return 0;
+  }
+
+  void _collectTextNodes(Iterable<html.Node> nodes, List<html.Node> textNodes) {
+    for (html.Node node in nodes) {
+      if (node.nodeType == html.Node.TEXT_NODE) {
+        textNodes.add(node);
+      }
+      if (node.hasChildNodes()) {
+        _collectTextNodes(node.childNodes, textNodes);
+      }
+    }
+  }
+
   /// Performs clean-up after a measurement is done, preparing this ruler for
   /// a future reuse.
   ///

lib/web_ui/lib/src/engine/text_editing.dart

@@ -467,9 +467,9 @@ class PersistentTextEditingElement extends TextEditingElement {
   PersistentTextEditingElement(
     html.HtmlElement domElement, {
     @required html.VoidCallback onDomElementSwap,
-  })  : _onDomElementSwap = onDomElementSwap,
-        // Make sure the dom element is of a type that we support for text editing.
-        assert(_getTypeFromElement(domElement) != null) {
+  })  : _onDomElementSwap = onDomElementSwap {
+    // Make sure the dom element is of a type that we support for text editing.
+    assert(_getTypeFromElement(domElement) != null);
     this.domElement = domElement;
   }
 

lib/web_ui/lib/src/ui/canvas.dart

@@ -436,7 +436,7 @@ class Canvas {
   }
 
   void _clipPath(Path path, bool doAntiAlias) {
-    _canvas.clipPath(path);
+    _canvas.clipPath(path, doAntiAlias: doAntiAlias);
   }
 
   /// Paints the given [Color] onto the canvas, applying the given

lib/web_ui/lib/src/ui/compositing.dart

@@ -266,9 +266,14 @@ class SceneBuilder {
   /// The given color is applied to the objects' rasterization using the given
   /// blend mode.
   ///
+  /// {@macro dart.ui.sceneBuilder.oldLayer}
+  ///
+  /// {@macro dart.ui.sceneBuilder.oldLayerVsRetained}
+  ///
   /// See [pop] for details about the operation stack.
   ColorFilterEngineLayer pushColorFilter(ColorFilter filter,
       {ColorFilterEngineLayer oldLayer}) {
+    assert(filter != null);
     throw UnimplementedError();
   }
 

lib/web_ui/lib/src/ui/initialization.dart

@@ -12,9 +12,6 @@ Future<void> webOnlyInitializePlatform({
     engine.window.webOnlyLocationStrategy = const engine.HashLocationStrategy();
   }
 
-  assetManager ??= const engine.AssetManager();
-  await webOnlySetAssetManager(assetManager);
-  await _fontCollection.ensureFontsLoaded();
   engine.webOnlyInitializeEngine();
 
   // This needs to be after `webOnlyInitializeEngine` because that is where the
@@ -22,6 +19,14 @@ Future<void> webOnlyInitializePlatform({
   if (engine.experimentalUseSkia) {
     await engine.initializeSkia();
   }
+
+  assetManager ??= const engine.AssetManager();
+  await webOnlySetAssetManager(assetManager);
+  await _fontCollection.ensureFontsLoaded();
+  if (engine.experimentalUseSkia) {
+    await engine.skiaFontCollection.ensureFontsLoaded();
+  }
+
   _webOnlyIsInitialized = true;
 }
 
@@ -43,10 +48,19 @@ Future<void> webOnlySetAssetManager(engine.AssetManager assetManager) async {
 
   _assetManager = assetManager;
 
+  if (engine.experimentalUseSkia) {
+    engine.skiaFontCollection ??= engine.SkiaFontCollection();
+  }
+
   _fontCollection ??= engine.FontCollection();
+
   _fontCollection.clear();
   if (_assetManager != null) {
     await _fontCollection.registerFonts(_assetManager);
+
+    if (engine.experimentalUseSkia) {
+      await engine.skiaFontCollection.registerFonts(_assetManager);
+    }
   }
 
   if (debugEmulateFlutterTesterEnvironment) {

lib/web_ui/lib/src/ui/painting.dart

@@ -17,6 +17,18 @@ bool _matrix4IsValid(Float64List matrix4) {
   return true;
 }
 
+void _validateColorStops(List<Color> colors, List<double> colorStops) {
+  if (colorStops == null) {
+    if (colors.length != 2)
+      throw ArgumentError(
+          '"colors" must have length 2 if "colorStops" is omitted.');
+  } else {
+    if (colors.length != colorStops.length)
+      throw ArgumentError(
+          '"colors" and "colorStops" arguments must have equal length.');
+  }
+}
+
 Color _scaleAlpha(Color a, double factor) {
   return a.withAlpha((a.alpha * factor).round().clamp(0, 255));
 }
@@ -1217,13 +1229,6 @@ abstract class Shader {
   /// This class is created by the engine, and should not be instantiated
   /// or extended directly.
   Shader._();
-
-  /// Creates a fill style to be used in painting.
-  Object createPaintStyle(html.CanvasRenderingContext2D ctx);
-
-  List<dynamic> webOnlySerializeToCssPaint() {
-    throw UnsupportedError('CSS paint not implemented for this shader type');
-  }
 }
 
 /// A shader (as used by [Paint.shader]) that renders a color gradient.
@@ -1259,7 +1264,7 @@ abstract class Gradient extends Shader {
     Float64List
         matrix4, // TODO(flutter_web): see https://github.com/flutter/flutter/issues/32819
   ]) =>
-      _GradientLinear(from, to, colors, colorStops, tileMode);
+      engine.GradientLinear(from, to, colors, colorStops, tileMode);
 
   /// Creates a radial gradient centered at `center` that ends at `radius`
   /// distance from the center.
@@ -1301,12 +1306,12 @@ abstract class Gradient extends Shader {
     // If focal is null or focal radius is null, this should be treated as a regular radial gradient
     // If focal == center and the focal radius is 0.0, it's still a regular radial gradient
     if (focal == null || (focal == center && focalRadius == 0.0)) {
-      return _GradientRadial(
+      return engine.GradientRadial(
           center, radius, colors, colorStops, tileMode, matrix4);
     } else {
       assert(center != Offset.zero ||
           focal != Offset.zero); // will result in exception(s) in Skia side
-      return _GradientConical(focal, focalRadius, center, radius, colors,
+      return engine.GradientConical(focal, focalRadius, center, radius, colors,
           colorStops, tileMode, matrix4);
     }
   }
@@ -1346,144 +1351,10 @@ abstract class Gradient extends Shader {
     double endAngle = math.pi * 2,
     Float64List matrix4,
   ]) =>
-      _GradientSweep(
+      engine.GradientSweep(
           center, colors, colorStops, tileMode, startAngle, endAngle, matrix4);
 }
 
-class _GradientSweep extends Gradient {
-  _GradientSweep(this.center, this.colors, this.colorStops, this.tileMode,
-      this.startAngle, this.endAngle, this.matrix4)
-      : assert(_offsetIsValid(center)),
-        assert(colors != null),
-        assert(tileMode != null),
-        assert(startAngle != null),
-        assert(endAngle != null),
-        assert(startAngle < endAngle),
-        assert(matrix4 == null || _matrix4IsValid(matrix4)),
-        super._() {
-    _validateColorStops(colors, colorStops);
-  }
-
-  @override
-  Object createPaintStyle(_) {
-    throw UnimplementedError();
-  }
-
-  final Offset center;
-  final List<Color> colors;
-  final List<double> colorStops;
-  final TileMode tileMode;
-  final double startAngle;
-  final double endAngle;
-  final Float64List matrix4;
-}
-
-void _validateColorStops(List<Color> colors, List<double> colorStops) {
-  if (colorStops == null) {
-    if (colors.length != 2)
-      throw ArgumentError(
-          '"colors" must have length 2 if "colorStops" is omitted.');
-  } else {
-    if (colors.length != colorStops.length)
-      throw ArgumentError(
-          '"colors" and "colorStops" arguments must have equal length.');
-  }
-}
-
-class _GradientLinear extends Gradient {
-  _GradientLinear(
-    this.from,
-    this.to,
-    this.colors,
-    this.colorStops,
-    this.tileMode,
-  )   : assert(_offsetIsValid(from)),
-        assert(_offsetIsValid(to)),
-        assert(colors != null),
-        assert(tileMode != null),
-        super._() {
-    _validateColorStops(colors, colorStops);
-  }
-
-  final Offset from;
-  final Offset to;
-  final List<Color> colors;
-  final List<double> colorStops;
-  final TileMode tileMode;
-
-  @override
-  html.CanvasGradient createPaintStyle(html.CanvasRenderingContext2D ctx) {
-    final html.CanvasGradient gradient =
-        ctx.createLinearGradient(from.dx, from.dy, to.dx, to.dy);
-    if (colorStops == null) {
-      assert(colors.length == 2);
-      gradient.addColorStop(0, colors[0].toCssString());
-      gradient.addColorStop(1, colors[1].toCssString());
-      return gradient;
-    }
-    for (int i = 0; i < colors.length; i++) {
-      gradient.addColorStop(colorStops[i], colors[i].toCssString());
-    }
-    return gradient;
-  }
-
-  @override
-  List<dynamic> webOnlySerializeToCssPaint() {
-    final List<dynamic> serializedColors = <dynamic>[];
-    for (int i = 0; i < colors.length; i++) {
-      serializedColors.add(colors[i].toCssString());
-    }
-    return <dynamic>[
-      1,
-      from.dx,
-      from.dy,
-      to.dx,
-      to.dy,
-      serializedColors,
-      colorStops,
-      tileMode.index
-    ];
-  }
-}
-
-class _GradientRadial extends Gradient {
-  _GradientRadial(this.center, this.radius, this.colors, this.colorStops,
-      this.tileMode, this.matrix4)
-      : super._();
-
-  final Offset center;
-  final double radius;
-  final List<Color> colors;
-  final List<double> colorStops;
-  final TileMode tileMode;
-  final Float64List matrix4;
-
-  @override
-  Object createPaintStyle(_) {
-    throw UnimplementedError();
-  }
-}
-
-class _GradientConical extends Gradient {
-  _GradientConical(this.focal, this.focalRadius, this.center, this.radius,
-      this.colors, this.colorStops, this.tileMode, this.matrix4)
-      : super._();
-
-  final Offset focal;
-  final double focalRadius;
-  final Offset center;
-  final double radius;
-  final List<Color> colors;
-  final List<double> colorStops;
-  final TileMode tileMode;
-  final Float64List matrix4;
-
-  @override
-  Object createPaintStyle(_) {
-    throw UnimplementedError();
-  }
-}
-
 /// Opaque handle to raw decoded image data (pixels).
 ///
 /// To obtain an [Image] object, use [instantiateImageCodec].
@@ -1637,6 +1508,9 @@ class MaskFilter {
   /// On the web returns the value of sigma passed to [MaskFilter.blur].
   double get webOnlySigma => _sigma;
 
+  /// On the web returns the value of `style` passed to [MaskFilter.blur].
+  BlurStyle get webOnlyBlurStyle => _style;
+
   @override
   bool operator ==(dynamic other) {
     if (other is! MaskFilter) {
@@ -1848,6 +1722,15 @@ Future<Codec> instantiateImageCodec(Uint8List list,
 /// Returns an error message if the instantiation has failed, null otherwise.
 String _instantiateImageCodec(
     Uint8List list, engine.Callback<Codec> callback, _ImageInfo imageInfo) {
+  if (engine.experimentalUseSkia) {
+    if (imageInfo == null) {
+      engine.skiaInstantiateImageCodec(list, callback);
+    } else {
+      engine.skiaInstantiateImageCodec(list, callback, imageInfo.width,
+          imageInfo.height, imageInfo.format, imageInfo.rowBytes);
+    }
+    return null;
+  }
   final html.Blob blob = html.Blob(<dynamic>[list.buffer]);
   callback(engine.HtmlBlobCodec(blob));
   return null;

lib/web_ui/lib/src/ui/semantics.dart

@@ -346,6 +346,11 @@ class SemanticsFlag {
   /// affordances.
   static const SemanticsFlag isTextField = SemanticsFlag._(_kIsTextFieldIndex);
 
+  /// Whether the semantic node is read only.
+  ///
+  /// Only applicable when [isTextField] is true.
+  static const SemanticsFlag isReadOnly = SemanticsFlag._(_kIsReadOnlyIndex);
+
   /// Whether the semantic node currently holds the user's focus.
   ///
   /// The focused element is usually the current receiver of keyboard inputs.
@@ -360,12 +365,6 @@ class SemanticsFlag {
   static const SemanticsFlag hasEnabledState =
       SemanticsFlag._(_kHasEnabledStateIndex);
 
-  /// Whether the semantic node is read only.
-  ///
-  /// Only applicable when [isTextField] is true.
-  static const SemanticsFlag isReadOnly =
-      const SemanticsFlag._(_kIsReadOnlyIndex);
-
   /// Whether a semantic node that [hasEnabledState] is currently enabled.
   ///
   /// A disabled element does not respond to user interaction. For example, a
@@ -506,6 +505,9 @@ class SemanticsFlag {
   /// multi-line ones.
   static const SemanticsFlag isMultiline = SemanticsFlag._(_kIsMultilineIndex);
 
+  /// The possible semantics flags.
+  ///
+  /// The map's key is the [index] of the flag and the value is the flag itself.
   /// The possible semantics flags.
   ///
   /// The map's key is the [index] of the flag and the value is the flag itself.
@@ -530,6 +532,7 @@ class SemanticsFlag {
     _kIsToggledIndex: isToggled,
     _kHasImplicitScrollingIndex: hasImplicitScrolling,
     _kIsMultilineIndex: isMultiline,
+    _kIsReadOnlyIndex: isReadOnly,
   };
 
   @override
@@ -575,6 +578,8 @@ class SemanticsFlag {
         return 'SemanticsFlag.hasImplicitScrolling';
       case _kIsMultilineIndex:
         return 'SemanticsFlag.isMultiline';
+      case _kIsReadOnlyIndex:
+        return 'SemanticsFlag.isReadOnly';
     }
     return null;
   }

lib/web_ui/lib/src/ui/window.dart

@@ -782,7 +782,6 @@ abstract class Window {
   @Deprecated('Use frameTimings instead.')
   TimingsCallback get onReportTimings => _onReportTimings;
   TimingsCallback _onReportTimings;
-  Zone _onReportTimingsZone;
   @Deprecated('Use frameTimings instead.')
   set onReportTimings(TimingsCallback callback) {
     _internalSetOnReportTimings(callback);
@@ -790,7 +789,6 @@ abstract class Window {
 
   void _internalSetOnReportTimings(TimingsCallback callback) {
     _onReportTimings = callback;
-    _onReportTimingsZone = Zone.current;
   }
 
   // ignore: deprecated_member_use_from_same_package

lib/web_ui/pubspec.yaml

@@ -2,14 +2,15 @@ name: ui
 publish_to: none
 
 environment:
-  sdk: ">=2.2.0 <3.0.0"
+  sdk: ">=2.2.2 <3.0.0"
 
 dependencies:
-  meta: ^1.1.5
+  meta: 1.1.7
 
 dev_dependencies:
-  test: ^1.3.0
-  quiver:
-  build_runner:
-  build_test:
-  build_web_compilers:
+  path: 1.6.4
+  test: 1.6.5
+  quiver: 2.0.5
+  build_runner: 1.6.5
+  build_test: 0.10.8
+  build_web_compilers: 2.1.5

lib/web_ui/test/alarm_clock_test.dart

@@ -17,7 +17,7 @@ void main() {
 void _alarmClockTests() {
   int callCount = 0;
 
-  testCallback() {
+  void testCallback() {
     callCount += 1;
   }
 
@@ -43,11 +43,11 @@ void _alarmClockTests() {
     expect(callCount, 0);
 
     // Not enough time has passed; the callback should not be called.
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
     expect(callCount, 0);
 
     // Exactly 1 minute has passed; fire the callback.
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
     expect(callCount, 1);
 
     // Timers should be cleaned up.
@@ -56,7 +56,7 @@ void _alarmClockTests() {
     // Rescheduling.
     alarm.datetime = clock.fromNow(minutes: 1);
     expect(fakeAsync.nonPeriodicTimerCount, 1);
-    fakeAsync.elapse(Duration(minutes: 1));
+    fakeAsync.elapse(const Duration(minutes: 1));
     expect(fakeAsync.nonPeriodicTimerCount, 0);
     expect(callCount, 2);
   });
@@ -75,13 +75,13 @@ void _alarmClockTests() {
     expect(fakeAsync.nonPeriodicTimerCount, 1);
     expect(callCount, 0);
 
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
 
     alarm.datetime = alarm.datetime.add(Duration.zero);
     expect(fakeAsync.nonPeriodicTimerCount, 1);
     expect(callCount, 0);
 
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
     expect(fakeAsync.nonPeriodicTimerCount, 0);
     expect(callCount, 1);
   });
@@ -107,18 +107,18 @@ void _alarmClockTests() {
     expect(fakeAsync.nonPeriodicTimerCount, 1);
 
     expect(callCount, 0);
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
     expect(callCount, 0);
 
     // Reschedule.
     alarm.datetime = alarm.datetime.add(const Duration(minutes: 1));
 
-    fakeAsync.elapse(Duration(minutes: 1));
+    fakeAsync.elapse(const Duration(minutes: 1));
 
     // Still no calls because we rescheduled.
     expect(callCount, 0);
 
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
     expect(callCount, 1);
     expect(fakeAsync.nonPeriodicTimerCount, 0);
   });
@@ -132,13 +132,13 @@ void _alarmClockTests() {
     expect(fakeAsync.nonPeriodicTimerCount, 1);
 
     expect(callCount, 0);
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
     expect(callCount, 0);
 
     // Reschedule to an earlier time that's still in the future.
     alarm.datetime = alarm.datetime.subtract(const Duration(seconds: 15));
 
-    fakeAsync.elapse(Duration(seconds: 45));
+    fakeAsync.elapse(const Duration(seconds: 45));
     expect(callCount, 1);
     expect(fakeAsync.nonPeriodicTimerCount, 0);
   });
@@ -158,7 +158,7 @@ void _alarmClockTests() {
     expect(callCount, 0);
 
     // Make sure nothing fires even if we wait long enough.
-    fakeAsync.elapse(Duration(minutes: 2));
+    fakeAsync.elapse(const Duration(minutes: 2));
     expect(callCount, 0);
     expect(fakeAsync.nonPeriodicTimerCount, 0);
   });
@@ -171,7 +171,7 @@ void _alarmClockTests() {
 
     alarm.datetime = clock.fromNow(minutes: 1);
     expect(fakeAsync.nonPeriodicTimerCount, 1);
-    fakeAsync.elapse(Duration(seconds: 30));
+    fakeAsync.elapse(const Duration(seconds: 30));
     expect(callCount, 0);
     expect(fakeAsync.nonPeriodicTimerCount, 1);
 
@@ -181,7 +181,7 @@ void _alarmClockTests() {
     expect(callCount, 0);
 
     // Make sure nothing fires even if we wait long enough.
-    fakeAsync.elapse(Duration(minutes: 2));
+    fakeAsync.elapse(const Duration(minutes: 2));
     expect(callCount, 0);
     expect(fakeAsync.nonPeriodicTimerCount, 0);
   });

lib/web_ui/test/canvas_test.dart

@@ -17,7 +17,7 @@ void main() {
     void testCanvas(
         String description, void Function(EngineCanvas canvas) testFn,
         {ui.Rect canvasSize, ui.VoidCallback whenDone}) {
-      canvasSize ??= ui.Rect.fromLTWH(0, 0, 100, 100);
+      canvasSize ??= const ui.Rect.fromLTWH(0, 0, 100, 100);
       test(description, () {
         testFn(BitmapCanvas(canvasSize));
         testFn(DomCanvas());
@@ -31,12 +31,12 @@ void main() {
 
     testCanvas('draws laid out paragraph', (EngineCanvas canvas) {
       final RecordingCanvas recordingCanvas =
-          RecordingCanvas(ui.Rect.fromLTWH(0, 0, 100, 100));
+          RecordingCanvas(const ui.Rect.fromLTWH(0, 0, 100, 100));
       final ui.ParagraphBuilder builder =
           ui.ParagraphBuilder(ui.ParagraphStyle());
       builder.addText('sample');
       paragraph = builder.build();
-      paragraph.layout(ui.ParagraphConstraints(width: 100));
+      paragraph.layout(const ui.ParagraphConstraints(width: 100));
       recordingCanvas.drawParagraph(paragraph, const ui.Offset(10, 10));
       canvas.clear();
       recordingCanvas.apply(canvas);
@@ -55,7 +55,7 @@ void main() {
     testCanvas('ignores paragraphs that were not laid out',
         (EngineCanvas canvas) {
       final RecordingCanvas recordingCanvas =
-          RecordingCanvas(ui.Rect.fromLTWH(0, 0, 100, 100));
+          RecordingCanvas(const ui.Rect.fromLTWH(0, 0, 100, 100));
       final ui.ParagraphBuilder builder =
           ui.ParagraphBuilder(ui.ParagraphStyle());
       builder.addText('sample');

lib/web_ui/test/color_test.dart

@@ -21,7 +21,7 @@ void main() {
 
   test('paint set to black', () {
     const Color c = Color(0x00000000);
-    final Paint p = new Paint();
+    final Paint p = Paint();
     p.color = c;
     expect(c.toString(), equals('Color(0x00000000)'));
   });
@@ -29,7 +29,7 @@ void main() {
   test('color created with out of bounds value', () {
     try {
       const Color c = Color(0x100 << 24);
-      final Paint p = new Paint();
+      final Paint p = Paint();
       p.color = c;
     } catch (e) {
       expect(e != null, equals(true));
@@ -39,7 +39,7 @@ void main() {
   test('color created with wildly out of bounds value', () {
     try {
       const Color c = Color(1 << 1000000);
-      final Paint p = new Paint();
+      final Paint p = Paint();
       p.color = c;
     } catch (e) {
       expect(e != null, equals(true));

lib/web_ui/test/colors_test.dart

-// Copyright 2013 The Flutter Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'package:ui/ui.dart';
-
-import 'package:test/test.dart';
-
-class NotAColor extends Color {
-  const NotAColor(int value) : super(value);
-}
-
-void main() {
-  test('color accessors should work', () {
-    const Color foo = Color(0x12345678);
-    expect(foo.alpha, equals(0x12));
-    expect(foo.red, equals(0x34));
-    expect(foo.green, equals(0x56));
-    expect(foo.blue, equals(0x78));
-  });
-
-  test('paint set to black', () {
-    const Color c = Color(0x00000000);
-    final Paint p = new Paint();
-    p.color = c;
-    expect(c.toString(), equals('Color(0x00000000)'));
-  });
-
-  test('color created with out of bounds value', () {
-    try {
-      const Color c = Color(0x100 << 24);
-      final Paint p = new Paint();
-      p.color = c;
-    } catch (e) {
-      expect(e != null, equals(true));
-    }
-  });
-
-  test('color created with wildly out of bounds value', () {
-    try {
-      const Color c = Color(1 << 1000000);
-      final Paint p = new Paint();
-      p.color = c;
-    } catch (e) {
-      expect(e != null, equals(true));
-    }
-  });
-
-  test('two colors are only == if they have the same runtime type', () {
-    expect(const Color(123), equals(const Color(123)));
-    expect(const Color(123),
-        equals(Color(123))); // ignore: prefer_const_constructors
-    expect(const Color(123), isNot(equals(const Color(321))));
-    expect(const Color(123), isNot(equals(const NotAColor(123))));
-    expect(const NotAColor(123), isNot(equals(const Color(123))));
-    expect(const NotAColor(123), equals(const NotAColor(123)));
-  });
-
-  test('Color.lerp', () {
-    expect(
-      Color.lerp(const Color(0x00000000), const Color(0xFFFFFFFF), 0.0),
-      const Color(0x00000000),
-    );
-    expect(
-      Color.lerp(const Color(0x00000000), const Color(0xFFFFFFFF), 0.5),
-      const Color(0x7F7F7F7F),
-    );
-    expect(
-      Color.lerp(const Color(0x00000000), const Color(0xFFFFFFFF), 1.0),
-      const Color(0xFFFFFFFF),
-    );
-    expect(
-      Color.lerp(const Color(0x00000000), const Color(0xFFFFFFFF), -0.1),
-      const Color(0x00000000),
-    );
-    expect(
-      Color.lerp(const Color(0x00000000), const Color(0xFFFFFFFF), 1.1),
-      const Color(0xFFFFFFFF),
-    );
-  });
-
-  test('Color.alphaBlend', () {
-    expect(
-      Color.alphaBlend(const Color(0x00000000), const Color(0x00000000)),
-      const Color(0x00000000),
-    );
-    expect(
-      Color.alphaBlend(const Color(0x00000000), const Color(0xFFFFFFFF)),
-      const Color(0xFFFFFFFF),
-    );
-    expect(
-      Color.alphaBlend(const Color(0xFFFFFFFF), const Color(0x00000000)),
-      const Color(0xFFFFFFFF),
-    );
-    expect(
-      Color.alphaBlend(const Color(0xFFFFFFFF), const Color(0xFFFFFFFF)),
-      const Color(0xFFFFFFFF),
-    );
-    expect(
-      Color.alphaBlend(const Color(0x80FFFFFF), const Color(0xFF000000)),
-      const Color(0xFF808080),
-    );
-    expect(
-      Color.alphaBlend(const Color(0x80808080), const Color(0xFFFFFFFF)),
-      const Color(0xFFBFBFBF),
-    );
-    expect(
-      Color.alphaBlend(const Color(0x80808080), const Color(0xFF000000)),
-      const Color(0xFF404040),
-    );
-    expect(
-      Color.alphaBlend(const Color(0x01020304), const Color(0xFF000000)),
-      const Color(0xFF000000),
-    );
-    expect(
-      Color.alphaBlend(const Color(0x11223344), const Color(0xFF000000)),
-      const Color(0xFF020304),
-    );
-    expect(
-      Color.alphaBlend(const Color(0x11223344), const Color(0x80000000)),
-      const Color(0x88040608),
-    );
-  });
-
-  test('compute gray luminance', () {
-    // Each color component is at 20%.
-    const Color lightGray = Color(0xFF333333);
-    // Relative luminance's formula is just the linearized color value for gray.
-    // ((0.2 + 0.055) / 1.055) ^ 2.4.
-    expect(lightGray.computeLuminance(), equals(0.033104766570885055));
-  });
-
-  test('compute color luminance', () {
-    const Color brightRed = Color(0xFFFF3B30);
-    // 0.2126 * ((1.0 + 0.055) / 1.055) ^ 2.4 +
-    // 0.7152 * ((0.23137254902 +0.055) / 1.055) ^ 2.4 +
-    // 0.0722 * ((0.18823529411 + 0.055) / 1.055) ^ 2.4
-    expect(brightRed.computeLuminance(), equals(0.24601329637099723));
-  });
-}

lib/web_ui/test/compositing_test.dart

@@ -14,25 +14,27 @@ import 'matchers.dart';
 void main() {
   group('SceneBuilder', () {
     test('pushOffset implements surface lifecycle', () {
-      testLayerLifeCycle((sceneBuilder, paintedBy) {
-        return sceneBuilder.pushOffset(10, 20);
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
+        return sceneBuilder.pushOffset(10, 20, oldLayer: oldLayer);
       }, () {
         return '''<s><flt-offset></flt-offset></s>''';
       });
     });
 
     test('pushTransform implements surface lifecycle', () {
-      testLayerLifeCycle((sceneBuilder, paintedBy) {
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
         return sceneBuilder.pushTransform(
-            Matrix4.translationValues(10, 20, 0).storage);
+            Matrix4.translationValues(10, 20, 0).storage,
+            oldLayer: oldLayer);
       }, () {
         return '''<s><flt-transform></flt-transform></s>''';
       });
     });
 
     test('pushClipRect implements surface lifecycle', () {
-      testLayerLifeCycle((sceneBuilder, paintedBy) {
-        return sceneBuilder.pushClipRect(Rect.fromLTRB(10, 20, 30, 40));
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
+        return sceneBuilder.pushClipRect(const Rect.fromLTRB(10, 20, 30, 40),
+            oldLayer: oldLayer);
       }, () {
         return '''
 <s>
@@ -43,9 +45,10 @@ void main() {
     });
 
     test('pushClipRRect implements surface lifecycle', () {
-      testLayerLifeCycle((sceneBuilder, paintedBy) {
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
         return sceneBuilder.pushClipRRect(
-            RRect.fromLTRBR(10, 20, 30, 40, Radius.circular(3)));
+            RRect.fromLTRBR(10, 20, 30, 40, const Radius.circular(3)),
+            oldLayer: oldLayer);
       }, () {
         return '''
 <s>
@@ -56,9 +59,9 @@ void main() {
     });
 
     test('pushClipPath implements surface lifecycle', () {
-      testLayerLifeCycle((sceneBuilder, paintedBy) {
-        final Path path = Path()..addRect(Rect.fromLTRB(10, 20, 30, 40));
-        return sceneBuilder.pushClipPath(path);
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
+        final Path path = Path()..addRect(const Rect.fromLTRB(10, 20, 30, 40));
+        return sceneBuilder.pushClipPath(path, oldLayer: oldLayer);
       }, () {
         return '''
 <s>
@@ -71,39 +74,52 @@ void main() {
     });
 
     test('pushOpacity implements surface lifecycle', () {
-      testLayerLifeCycle((sceneBuilder, paintedBy) {
-        return sceneBuilder.pushOpacity(10);
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
+        return sceneBuilder.pushOpacity(10, oldLayer: oldLayer);
       }, () {
         return '''<s><o></o></s>''';
       });
     });
 
     test('pushPhysicalShape implements surface lifecycle', () {
-      testLayerLifeCycle((sceneBuilder, paintedBy) {
-        final Path path = Path()..addRect(Rect.fromLTRB(10, 20, 30, 40));
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
+        final Path path = Path()..addRect(const Rect.fromLTRB(10, 20, 30, 40));
         return sceneBuilder.pushPhysicalShape(
           path: path,
           elevation: 2,
-          color: Color.fromRGBO(0, 0, 0, 1),
-          shadowColor: Color.fromRGBO(0, 0, 0, 1),
+          color: const Color.fromRGBO(0, 0, 0, 1),
+          shadowColor: const Color.fromRGBO(0, 0, 0, 1),
+          oldLayer: oldLayer,
         );
       }, () {
         return '''<s><pshape><clip-i></clip-i></pshape></s>''';
       });
     });
+
+    test('pushBackdropFilter implements surface lifecycle', () {
+      testLayerLifeCycle((SceneBuilder sceneBuilder, EngineLayer oldLayer) {
+        return sceneBuilder.pushBackdropFilter(
+          ImageFilter.blur(sigmaX: 1.0, sigmaY: 1.0),
+          oldLayer: oldLayer,
+        );
+      }, () {
+        return '<s><flt-backdrop>'
+            '<flt-backdrop-filter></flt-backdrop-filter>'
+            '<flt-backdrop-interior></flt-backdrop-interior>'
+            '</flt-backdrop></s>';
+      });
+    });
   });
 
   group('parent child lifecycle', () {
     test(
         'build, retain, update, and applyPaint are called the right number of times',
         () {
-      final Object paintedBy = Object();
-      final PersistedScene scene1 = PersistedScene();
+      final PersistedScene scene1 = PersistedScene(null);
       final PersistedClipRect clip1 =
-          PersistedClipRect(paintedBy, Rect.fromLTRB(10, 10, 20, 20));
-      final PersistedOpacity opacity =
-          PersistedOpacity(paintedBy, 100, Offset.zero);
-      final MockPersistedPicture picture = MockPersistedPicture(paintedBy);
+          PersistedClipRect(null, const Rect.fromLTRB(10, 10, 20, 20));
+      final PersistedOpacity opacity = PersistedOpacity(null, 100, Offset.zero);
+      final MockPersistedPicture picture = MockPersistedPicture();
 
       scene1.appendChild(clip1);
       clip1.appendChild(opacity);
@@ -114,7 +130,9 @@ void main() {
       expect(picture.updateCount, 0);
       expect(picture.applyPaintCount, 0);
 
+      scene1.preroll();
       scene1.build();
+      commitScene(scene1);
       expect(picture.retainCount, 0);
       expect(picture.buildCount, 1);
       expect(picture.updateCount, 0);
@@ -122,14 +140,17 @@ void main() {
 
       // The second scene graph retains the opacity, but not the clip. However,
       // because the clip didn't change no repaints should happen.
-      final PersistedScene scene2 = PersistedScene();
+      final PersistedScene scene2 = PersistedScene(scene1);
       final PersistedClipRect clip2 =
-          PersistedClipRect(paintedBy, Rect.fromLTRB(10, 10, 20, 20));
+          PersistedClipRect(clip1, const Rect.fromLTRB(10, 10, 20, 20));
+      clip1.state = PersistedSurfaceState.pendingUpdate;
       scene2.appendChild(clip2);
-      opacity.reuseStrategy = PersistedSurfaceReuseStrategy.retain;
+      opacity.state = PersistedSurfaceState.pendingRetention;
       clip2.appendChild(opacity);
 
+      scene2.preroll();
       scene2.update(scene1);
+      commitScene(scene1);
       expect(picture.retainCount, 1);
       expect(picture.buildCount, 1);
       expect(picture.updateCount, 0);
@@ -137,14 +158,17 @@ void main() {
 
       // The third scene graph retains the opacity, and produces a new clip.
       // This should cause the picture to repaint despite being retained.
-      final PersistedScene scene3 = PersistedScene();
+      final PersistedScene scene3 = PersistedScene(scene2);
       final PersistedClipRect clip3 =
-          PersistedClipRect(paintedBy, Rect.fromLTRB(10, 10, 50, 50));
+          PersistedClipRect(clip2, const Rect.fromLTRB(10, 10, 50, 50));
+      clip2.state = PersistedSurfaceState.pendingUpdate;
       scene3.appendChild(clip3);
-      opacity.reuseStrategy = PersistedSurfaceReuseStrategy.retain;
+      opacity.state = PersistedSurfaceState.pendingRetention;
       clip3.appendChild(opacity);
 
+      scene3.preroll();
       scene3.update(scene2);
+      commitScene(scene1);
       expect(picture.retainCount, 2);
       expect(picture.buildCount, 1);
       expect(picture.updateCount, 0);
@@ -154,7 +178,7 @@ void main() {
 }
 
 typedef TestLayerBuilder = EngineLayer Function(
-    SceneBuilder sceneBuilder, Object paintedBy);
+    SceneBuilder sceneBuilder, EngineLayer oldLayer);
 typedef ExpectedHtmlGetter = String Function();
 
 void testLayerLifeCycle(
@@ -163,11 +187,9 @@ void testLayerLifeCycle(
   // scene starts from the "build" phase.
   SceneBuilder.debugForgetFrameScene();
 
-  final Object paintedBy = Object();
-
   // Build: builds a brand new layer.
   SceneBuilder sceneBuilder = SceneBuilder();
-  final EngineLayer layer1 = layerBuilder(sceneBuilder, paintedBy);
+  final EngineLayer layer1 = layerBuilder(sceneBuilder, null);
   final Type surfaceType = layer1.runtimeType;
   sceneBuilder.pop();
 
@@ -176,7 +198,7 @@ void testLayerLifeCycle(
 
   PersistedSurface findSurface() {
     return enumerateSurfaces()
-        .where((s) => s.runtimeType == surfaceType)
+        .where((PersistedSurface s) => s.runtimeType == surfaceType)
         .single;
   }
 
@@ -198,7 +220,7 @@ void testLayerLifeCycle(
 
   // Reuse: reuses a layer's DOM elements by matching it.
   sceneBuilder = SceneBuilder();
-  final EngineLayer layer3 = layerBuilder(sceneBuilder, paintedBy);
+  final EngineLayer layer3 = layerBuilder(sceneBuilder, layer1);
   sceneBuilder.pop();
   expect(layer3, isNot(same(layer1)));
   tester = SceneTester(sceneBuilder.build());
@@ -232,22 +254,26 @@ void testLayerLifeCycle(
 }
 
 class MockPersistedPicture extends PersistedPicture {
-  factory MockPersistedPicture(Object paintedBy) {
+  factory MockPersistedPicture() {
     final PictureRecorder recorder = PictureRecorder();
     // Use the largest cull rect so that layer clips are effective. The tests
     // rely on this.
     recorder.beginRecording(Rect.largest)..drawPaint(Paint());
-    return MockPersistedPicture._(paintedBy, recorder.endRecording());
+    return MockPersistedPicture._(recorder.endRecording());
   }
 
-  MockPersistedPicture._(Object paintedBy, Picture picture)
-      : super(paintedBy, 0, 0, picture, 0);
+  MockPersistedPicture._(Picture picture) : super(0, 0, picture, 0);
 
   int retainCount = 0;
   int buildCount = 0;
   int updateCount = 0;
   int applyPaintCount = 0;
 
+  @override
+  double matchForUpdate(PersistedPicture existingSurface) {
+    return identical(existingSurface.picture, picture) ? 0.0 : 1.0;
+  }
+
   @override
   void build() {
     super.build();

lib/web_ui/test/dom_renderer_test.dart

@@ -9,102 +9,103 @@ import 'package:test/test.dart';
 
 void main() {
   test('creating elements works', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     expect(element, isNotNull);
   });
   test('can append children to parents', () {
-    var renderer = new DomRenderer();
-    var parent = renderer.createElement('div');
-    var child = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element parent = renderer.createElement('div');
+    final html.Element child = renderer.createElement('div');
     renderer.append(parent, child);
     expect(parent.children, hasLength(1));
   });
   test('can set text on elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     renderer.setText(element, 'Hello World');
     expect(element.text, 'Hello World');
   });
   test('can set attributes on elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     renderer.setElementAttribute(element, 'id', 'foo');
     expect(element.id, 'foo');
   });
   test('can add classes to elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     renderer.addElementClass(element, 'foo');
     renderer.addElementClass(element, 'bar');
-    expect(element.classes, ['foo', 'bar']);
+    expect(element.classes, <String>['foo', 'bar']);
   });
   test('can remove classes from elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     renderer.addElementClass(element, 'foo');
     renderer.addElementClass(element, 'bar');
-    expect(element.classes, ['foo', 'bar']);
+    expect(element.classes, <String>['foo', 'bar']);
     renderer.removeElementClass(element, 'foo');
-    expect(element.classes, ['bar']);
+    expect(element.classes, <String>['bar']);
   });
   test('can set style properties on elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     renderer.setElementStyle(element, 'color', 'red');
     expect(element.style.color, 'red');
   });
   test('can remove style properties from elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     renderer.setElementStyle(element, 'color', 'blue');
     expect(element.style.color, 'blue');
     renderer.setElementStyle(element, 'color', null);
     expect(element.style.color, '');
   });
   test('elements can have children', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
     renderer.createElement('div', parent: element);
     expect(element.children, hasLength(1));
   });
   test('can detach elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
-    var child = renderer.createElement('div', parent: element);
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
+    final html.Element child = renderer.createElement('div', parent: element);
     renderer.detachElement(child);
     expect(element.children, isEmpty);
   });
   test('can reattach detached elements', () {
-    var renderer = new DomRenderer();
-    var element = renderer.createElement('div');
-    var child = renderer.createElement('div', parent: element);
-    var otherChild = renderer.createElement('foo', parent: element);
+    final DomRenderer renderer = DomRenderer();
+    final html.Element element = renderer.createElement('div');
+    final html.Element child = renderer.createElement('div', parent: element);
+    final html.Element otherChild =
+        renderer.createElement('foo', parent: element);
     renderer.detachElement(child);
     expect(element.children, hasLength(1));
     renderer.attachBeforeElement(element, otherChild, child);
     expect(element.children, hasLength(2));
   });
   test('insert two elements in the middle of a child list', () {
-    var renderer = new DomRenderer();
-    var parent = renderer.createElement('div');
+    final DomRenderer renderer = DomRenderer();
+    final html.Element parent = renderer.createElement('div');
     renderer.createElement('a', parent: parent);
-    var childD = renderer.createElement('d', parent: parent);
+    final html.Element childD = renderer.createElement('d', parent: parent);
     expect(parent.innerHtml, '<a></a><d></d>');
-    var childB = renderer.createElement('b', parent: parent);
-    var childC = renderer.createElement('c', parent: parent);
+    final html.Element childB = renderer.createElement('b', parent: parent);
+    final html.Element childC = renderer.createElement('c', parent: parent);
     renderer.attachBeforeElement(parent, childD, childB);
     renderer.attachBeforeElement(parent, childD, childC);
     expect(parent.innerHtml, '<a></a><b></b><c></c><d></d>');
   });
   test('replaces viewport meta tags during style reset', () {
-    html.MetaElement existingMeta = html.MetaElement()
+    final html.MetaElement existingMeta = html.MetaElement()
       ..name = 'viewport'
       ..content = 'foo=bar';
     html.document.head.append(existingMeta);
     expect(existingMeta.isConnected, true);
 
-    var renderer = new DomRenderer();
+    final DomRenderer renderer = DomRenderer();
     renderer.reset();
   });
 }

lib/web_ui/test/engine/semantics/accessibility_test.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async' show Future;
+import 'dart:html';
+
+import 'package:ui/src/engine.dart';
+import 'package:test/test.dart';
+
+const MessageCodec<dynamic> codec = StandardMessageCodec();
+const String testMessage = 'This is an tooltip.';
+const Map<dynamic, dynamic> testInput = <dynamic, dynamic>{
+  'data': <dynamic, dynamic>{'message': testMessage}
+};
+
+void main() {
+  AccessibilityAnnouncements accessibilityAnnouncements;
+
+  group('$AccessibilityAnnouncements', () {
+    setUp(() {
+      accessibilityAnnouncements = AccessibilityAnnouncements.instance;
+    });
+
+    test(
+        'Creates element when handling a message and removes '
+        'is after a delay', () {
+      // Set the a11y announcement's duration on DOM to half seconds.
+      accessibilityAnnouncements.durationA11yMessageIsOnDom =
+          Duration(milliseconds: 500);
+
+      // Initially there is no accessibility-element
+      expect(document.getElementById('accessibility-element'), isNull);
+
+      accessibilityAnnouncements.handleMessage(codec.encodeMessage(testInput));
+      expect(
+        document.getElementById('accessibility-element'),
+        isNotNull,
+      );
+      final LabelElement input =
+          document.getElementById('accessibility-element');
+      expect(input.getAttribute('aria-live'), equals('polite'));
+      expect(input.text, testMessage);
+
+      // The element should have been removed after the duration.
+      Future<void>.delayed(
+          accessibilityAnnouncements.durationA11yMessageIsOnDom,
+          () =>
+              expect(document.getElementById('accessibility-element'), isNull));
+    });
+  });
+}

lib/web_ui/test/engine/services/serialization_test.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// 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:ui/ui.dart';
+import 'package:ui/src/engine.dart';
+import 'package:test/test.dart';
+
+void main() {
+  group('Write and read buffer round-trip', () {
+    test('of single byte', () {
+      final WriteBuffer write = WriteBuffer();
+      write.putUint8(201);
+      final ByteData written = write.done();
+      expect(written.lengthInBytes, equals(1));
+      final ReadBuffer read = ReadBuffer(written);
+      expect(read.getUint8(), equals(201));
+    });
+    test('of 32-bit integer', () {
+      final WriteBuffer write = WriteBuffer();
+      write.putInt32(-9);
+      final ByteData written = write.done();
+      expect(written.lengthInBytes, equals(4));
+      final ReadBuffer read = ReadBuffer(written);
+      expect(read.getInt32(), equals(-9));
+    });
+    test('of 64-bit integer', () {
+      final WriteBuffer write = WriteBuffer();
+      write.putInt64(-9000000000000);
+      final ByteData written = write.done();
+      expect(written.lengthInBytes, equals(8));
+      final ReadBuffer read = ReadBuffer(written);
+      expect(read.getInt64(), equals(-9000000000000));
+    }, skip: isWeb);
+    test('of double', () {
+      final WriteBuffer write = WriteBuffer();
+      write.putFloat64(3.14);
+      final ByteData written = write.done();
+      expect(written.lengthInBytes, equals(8));
+      final ReadBuffer read = ReadBuffer(written);
+      expect(read.getFloat64(), equals(3.14));
+    });
+    test('of 32-bit int list when unaligned', () {
+      final Int32List integers = Int32List.fromList(<int>[-99, 2, 99]);
+      final WriteBuffer write = WriteBuffer();
+      write.putUint8(9);
+      write.putInt32List(integers);
+      final ByteData written = write.done();
+      expect(written.lengthInBytes, equals(16));
+      final ReadBuffer read = ReadBuffer(written);
+      read.getUint8();
+      expect(read.getInt32List(3), equals(integers));
+    });
+    test('of 64-bit int list when unaligned', () {
+      final Int64List integers = Int64List.fromList(<int>[-99, 2, 99]);
+      final WriteBuffer write = WriteBuffer();
+      write.putUint8(9);
+      write.putInt64List(integers);
+      final ByteData written = write.done();
+      expect(written.lengthInBytes, equals(32));
+      final ReadBuffer read = ReadBuffer(written);
+      read.getUint8();
+      expect(read.getInt64List(3), equals(integers));
+    }, skip: isWeb);
+    test('of double list when unaligned', () {
+      final Float64List doubles =
+          Float64List.fromList(<double>[3.14, double.nan]);
+      final WriteBuffer write = WriteBuffer();
+      write.putUint8(9);
+      write.putFloat64List(doubles);
+      final ByteData written = write.done();
+      expect(written.lengthInBytes, equals(24));
+      final ReadBuffer read = ReadBuffer(written);
+      read.getUint8();
+      final Float64List readDoubles = read.getFloat64List(2);
+      expect(readDoubles[0], equals(3.14));
+      expect(readDoubles[1], isNaN);
+    });
+  });
+}

lib/web_ui/test/engine/surface/surface_test.dart

+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:html' as html;
+
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart';
+
+import 'package:test/test.dart';
+
+void main() {
+  group('Surface', () {
+    setUp(() {
+      SceneBuilder.debugForgetFrameScene();
+    });
+
+    test('is created', () {
+      final SceneBuilder builder = SceneBuilder();
+      final PersistedOpacity opacityLayer = builder.pushOpacity(100);
+      builder.pop();
+
+      expect(opacityLayer, isNotNull);
+      expect(opacityLayer.rootElement, isNull);
+      expect(opacityLayer.isCreated, true);
+
+      builder.build();
+
+      expect(opacityLayer.rootElement.tagName.toLowerCase(), 'flt-opacity');
+      expect(opacityLayer.isActive, true);
+    });
+
+    test('is released', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer = builder1.pushOpacity(100);
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer.isActive, true);
+
+      SceneBuilder().build();
+      expect(opacityLayer.isReleased, true);
+      expect(opacityLayer.rootElement, isNull);
+    });
+
+    test('discarding is recursive', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer = builder1.pushOpacity(100);
+      final PersistedTransform transformLayer =
+          builder1.pushTransform(Matrix4.identity().storage);
+      builder1.pop();
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer.isActive, true);
+      expect(transformLayer.isActive, true);
+
+      SceneBuilder().build();
+      expect(opacityLayer.isReleased, true);
+      expect(transformLayer.isReleased, true);
+      expect(opacityLayer.rootElement, isNull);
+      expect(transformLayer.rootElement, isNull);
+    });
+
+    test('is updated', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer1 = builder1.pushOpacity(100);
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer1.isActive, true);
+      final html.Element element = opacityLayer1.rootElement;
+
+      final SceneBuilder builder2 = SceneBuilder();
+      final PersistedOpacity opacityLayer2 =
+          builder2.pushOpacity(200, oldLayer: opacityLayer1);
+      expect(opacityLayer1.isPendingUpdate, true);
+      expect(opacityLayer2.isCreated, true);
+      expect(opacityLayer2.oldLayer, same(opacityLayer1));
+      builder2.pop();
+
+      builder2.build();
+      expect(opacityLayer1.isReleased, true);
+      expect(opacityLayer1.rootElement, isNull);
+      expect(opacityLayer2.isActive, true);
+      expect(
+          opacityLayer2.rootElement, element); // adopts old surface's element
+      expect(opacityLayer2.oldLayer, isNull);
+    });
+
+    test('ignores released surface when updated', () {
+      // Build a surface
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer1 = builder1.pushOpacity(100);
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer1.isActive, true);
+      final html.Element element = opacityLayer1.rootElement;
+
+      // Release it
+      SceneBuilder().build();
+      expect(opacityLayer1.isReleased, true);
+      expect(opacityLayer1.rootElement, isNull);
+
+      // Attempt to update it
+      final SceneBuilder builder2 = SceneBuilder();
+      final PersistedOpacity opacityLayer2 =
+          builder2.pushOpacity(200, oldLayer: opacityLayer1);
+      builder2.pop();
+      expect(opacityLayer1.isReleased, true);
+      expect(opacityLayer2.isCreated, true);
+
+      builder2.build();
+      expect(opacityLayer1.isReleased, true);
+      expect(opacityLayer2.isActive, true);
+      expect(opacityLayer2.rootElement, isNot(equals(element)));
+    });
+
+    // This test creates a situation when an intermediate layer disappears,
+    // causing its child to become a direct child of the common ancestor. This
+    // often happens with opacity layers. When opacity reaches 1.0, the
+    // framework removes that layer (as it is no longer necessary). This test
+    // makes sure we reuse the child layer's DOM nodes. Here's the illustration
+    // of what's happening:
+    //
+    // Frame 1   Frame 2
+    //
+    //   A         A
+    //   |         |
+    //   B     ┌──>C
+    //   |     │
+    //   C ────┘
+    test('reparents DOM element when updated', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedTransform a1 =
+          builder1.pushTransform(Matrix4.identity().storage);
+      final PersistedOpacity b1 = builder1.pushOpacity(100);
+      final PersistedTransform c1 =
+          builder1.pushTransform(Matrix4.identity().storage);
+      builder1.pop();
+      builder1.pop();
+      builder1.pop();
+      builder1.build();
+
+      final html.Element elementA = a1.rootElement;
+      final html.Element elementB = b1.rootElement;
+      final html.Element elementC = c1.rootElement;
+
+      expect(elementC.parent, elementB);
+      expect(elementB.parent, elementA);
+
+      final SceneBuilder builder2 = SceneBuilder();
+      final PersistedTransform a2 =
+          builder2.pushTransform(Matrix4.identity().storage, oldLayer: a1);
+      final PersistedTransform c2 =
+          builder2.pushTransform(Matrix4.identity().storage, oldLayer: c1);
+      builder2.pop();
+      builder2.pop();
+      builder2.build();
+
+      expect(a2.rootElement, elementA);
+      expect(b1.rootElement, isNull);
+      expect(c2.rootElement, elementC);
+
+      expect(elementC.parent, elementA);
+      expect(elementB.parent, null);
+    });
+
+    test('is retained', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer = builder1.pushOpacity(100);
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer.isActive, true);
+      final html.Element element = opacityLayer.rootElement;
+
+      final SceneBuilder builder2 = SceneBuilder();
+      builder2.addRetained(opacityLayer);
+      expect(opacityLayer.isPendingRetention, true);
+
+      builder2.build();
+      expect(opacityLayer.isActive, true);
+      expect(opacityLayer.rootElement, element);
+    });
+
+    test('revives released surface when retained', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer = builder1.pushOpacity(100);
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer.isActive, true);
+      final html.Element element = opacityLayer.rootElement;
+
+      SceneBuilder().build();
+      expect(opacityLayer.isReleased, true);
+      expect(opacityLayer.rootElement, isNull);
+
+      final SceneBuilder builder2 = SceneBuilder();
+      builder2.addRetained(opacityLayer);
+      expect(opacityLayer.isCreated, true); // revived
+
+      builder2.build();
+      expect(opacityLayer.isActive, true);
+      expect(opacityLayer.rootElement, isNot(equals(element)));
+    });
+
+    test('reviving is recursive', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer = builder1.pushOpacity(100);
+      final PersistedTransform transformLayer =
+          builder1.pushTransform(Matrix4.identity().storage);
+      builder1.pop();
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer.isActive, true);
+      expect(transformLayer.isActive, true);
+      final html.Element opacityElement = opacityLayer.rootElement;
+      final html.Element transformElement = transformLayer.rootElement;
+
+      SceneBuilder().build();
+
+      final SceneBuilder builder2 = SceneBuilder();
+      builder2.addRetained(opacityLayer);
+      expect(opacityLayer.isCreated, true); // revived
+      expect(transformLayer.isCreated, true); // revived
+
+      builder2.build();
+      expect(opacityLayer.isActive, true);
+      expect(transformLayer.isActive, true);
+      expect(opacityLayer.rootElement, isNot(equals(opacityElement)));
+      expect(transformLayer.rootElement, isNot(equals(transformElement)));
+    });
+
+    // This test creates a situation when a retained layer is moved to another
+    // parent. We want to make sure that we move the retained layer's elements
+    // without rebuilding from scratch. No new elements are created in this
+    // situation.
+    //
+    // Here's an illustrated example where layer C is reparented onto B along
+    // with D:
+    //
+    // Frame 1   Frame 2
+    //
+    //    A         A
+    //   ╱ ╲        |
+    //  B   C ──┐   B
+    //      |   │   |
+    //      D   └──>C
+    //              |
+    //              D
+    test('reparents DOM elements when retained', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity a1 = builder1.pushOpacity(10);
+      final PersistedOpacity b1 = builder1.pushOpacity(20);
+      builder1.pop();
+      final PersistedOpacity c1 = builder1.pushOpacity(30);
+      final PersistedOpacity d1 = builder1.pushOpacity(40);
+      builder1.pop();
+      builder1.pop();
+      builder1.pop();
+      builder1.build();
+
+      final html.Element elementA = a1.rootElement;
+      final html.Element elementB = b1.rootElement;
+      final html.Element elementC = c1.rootElement;
+      final html.Element elementD = d1.rootElement;
+
+      expect(elementB.parent, elementA);
+      expect(elementC.parent, elementA);
+      expect(elementD.parent, elementC);
+
+      final SceneBuilder builder2 = SceneBuilder();
+      final PersistedOpacity a2 = builder2.pushOpacity(10, oldLayer: a1);
+      final PersistedOpacity b2 = builder2.pushOpacity(20, oldLayer: b1);
+      builder2.addRetained(c1);
+      builder2.pop();
+      builder2.pop();
+      builder2.build();
+
+      expect(a2.rootElement, elementA);
+      expect(b2.rootElement, elementB);
+      expect(c1.rootElement, elementC);
+      expect(d1.rootElement, elementD);
+
+      expect(
+        <html.Element>[
+          elementD.parent,
+          elementC.parent,
+          elementB.parent,
+        ],
+        <html.Element>[elementC, elementB, elementA],
+      );
+    });
+
+    test('is updated by matching', () {
+      final SceneBuilder builder1 = SceneBuilder();
+      final PersistedOpacity opacityLayer1 = builder1.pushOpacity(100);
+      builder1.pop();
+      builder1.build();
+      expect(opacityLayer1.isActive, true);
+      final html.Element element = opacityLayer1.rootElement;
+
+      final SceneBuilder builder2 = SceneBuilder();
+      final PersistedOpacity opacityLayer2 = builder2.pushOpacity(200);
+      expect(opacityLayer1.isActive, true);
+      expect(opacityLayer2.isCreated, true);
+      builder2.pop();
+
+      builder2.build();
+      expect(opacityLayer1.isReleased, true);
+      expect(opacityLayer1.rootElement, isNull);
+      expect(opacityLayer2.isActive, true);
+      expect(
+          opacityLayer2.rootElement, element); // adopts old surface's element
+    });
+  });
+}

lib/web_ui/test/geometry_test.dart

@@ -10,137 +10,61 @@ import 'package:ui/ui.dart';
 import 'package:test/test.dart';
 
 void main() {
-  group('Offset', () {
-    test('Offset.direction', () {
-      expect(const Offset(0.0, 0.0).direction, 0.0);
-      expect(const Offset(0.0, 1.0).direction, pi / 2.0);
-      expect(const Offset(0.0, -1.0).direction, -pi / 2.0);
-      expect(const Offset(1.0, 0.0).direction, 0.0);
-      expect(const Offset(1.0, 1.0).direction, pi / 4.0);
-      expect(const Offset(1.0, -1.0).direction, -pi / 4.0);
-      expect(const Offset(-1.0, 0.0).direction, pi);
-      expect(const Offset(-1.0, 1.0).direction, pi * 3.0 / 4.0);
-      expect(const Offset(-1.0, -1.0).direction, -pi * 3.0 / 4.0);
-    });
-
-    test('Offset.fromDirection', () {
-      expect(Offset.fromDirection(0.0, 0.0), const Offset(0.0, 0.0));
-      expect(Offset.fromDirection(pi / 2.0).dx, closeTo(0.0, 1e-12)); // aah, floating point math. i love you so.
-      expect(Offset.fromDirection(pi / 2.0).dy, 1.0);
-      expect(Offset.fromDirection(-pi / 2.0).dx, closeTo(0.0, 1e-12));
-      expect(Offset.fromDirection(-pi / 2.0).dy, -1.0);
-      expect(Offset.fromDirection(0.0), const Offset(1.0, 0.0));
-      expect(Offset.fromDirection(pi / 4.0).dx, closeTo(1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(pi / 4.0).dy, closeTo(1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(-pi / 4.0).dx, closeTo(1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(-pi / 4.0).dy, closeTo(-1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(pi).dx, -1.0);
-      expect(Offset.fromDirection(pi).dy, closeTo(0.0, 1e-12));
-      expect(Offset.fromDirection(pi * 3.0 / 4.0).dx, closeTo(-1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(pi * 3.0 / 4.0).dy, closeTo(1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(-pi * 3.0 / 4.0).dx, closeTo(-1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(-pi * 3.0 / 4.0).dy, closeTo(-1.0 / math.sqrt(2.0), 1e-12));
-      expect(Offset.fromDirection(0.0, 2.0), const Offset(2.0, 0.0));
-      expect(Offset.fromDirection(pi / 6, 2.0).dx, closeTo(math.sqrt(3.0), 1e-12));
-      expect(Offset.fromDirection(pi / 6, 2.0).dy, closeTo(1.0, 1e-12));
-    });
+  test('Offset.direction', () {
+    expect(const Offset(0.0, 0.0).direction, 0.0);
+    expect(const Offset(0.0, 1.0).direction, pi / 2.0);
+    expect(const Offset(0.0, -1.0).direction, -pi / 2.0);
+    expect(const Offset(1.0, 0.0).direction, 0.0);
+    expect(const Offset(1.0, 1.0).direction, pi / 4.0);
+    expect(const Offset(1.0, -1.0).direction, -pi / 4.0);
+    expect(const Offset(-1.0, 0.0).direction, pi);
+    expect(const Offset(-1.0, 1.0).direction, pi * 3.0 / 4.0);
+    expect(const Offset(-1.0, -1.0).direction, -pi * 3.0 / 4.0);
   });
-
-  group('Size', () {
-    test('Size created from doubles', () {
-      const Size size = Size(5.0, 7.0);
-      expect(size.width, equals(5.0));
-      expect(size.height, equals(7.0));
-      expect(size.shortestSide, equals(5.0));
-      expect(size.longestSide, equals(7.0));
-    });
-
-    test('Size.aspectRatio', () {
-      expect(const Size(0.0, 0.0).aspectRatio, 0.0);
-      expect(const Size(-0.0, 0.0).aspectRatio, 0.0);
-      expect(const Size(0.0, -0.0).aspectRatio, 0.0);
-      expect(const Size(-0.0, -0.0).aspectRatio, 0.0);
-      expect(const Size(0.0, 1.0).aspectRatio, 0.0);
-      expect(const Size(0.0, -1.0).aspectRatio, -0.0);
-      expect(const Size(1.0, 0.0).aspectRatio, double.infinity);
-      expect(const Size(1.0, 1.0).aspectRatio, 1.0);
-      expect(const Size(1.0, -1.0).aspectRatio, -1.0);
-      expect(const Size(-1.0, 0.0).aspectRatio, -double.infinity);
-      expect(const Size(-1.0, 1.0).aspectRatio, -1.0);
-      expect(const Size(-1.0, -1.0).aspectRatio, 1.0);
-      expect(const Size(3.0, 4.0).aspectRatio, 3.0 / 4.0);
-    });
+  test('Offset.fromDirection', () {
+    expect(Offset.fromDirection(0.0, 0.0), const Offset(0.0, 0.0));
+    expect(Offset.fromDirection(pi / 2.0).dx,
+        closeTo(0.0, 1e-12)); // aah, floating point math. i love you so.
+    expect(Offset.fromDirection(pi / 2.0).dy, 1.0);
+    expect(Offset.fromDirection(-pi / 2.0).dx, closeTo(0.0, 1e-12));
+    expect(Offset.fromDirection(-pi / 2.0).dy, -1.0);
+    expect(Offset.fromDirection(0.0), const Offset(1.0, 0.0));
+    expect(Offset.fromDirection(pi / 4.0).dx,
+        closeTo(1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(pi / 4.0).dy,
+        closeTo(1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(-pi / 4.0).dx,
+        closeTo(1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(-pi / 4.0).dy,
+        closeTo(-1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(pi).dx, -1.0);
+    expect(Offset.fromDirection(pi).dy, closeTo(0.0, 1e-12));
+    expect(Offset.fromDirection(pi * 3.0 / 4.0).dx,
+        closeTo(-1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(pi * 3.0 / 4.0).dy,
+        closeTo(1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(-pi * 3.0 / 4.0).dx,
+        closeTo(-1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(-pi * 3.0 / 4.0).dy,
+        closeTo(-1.0 / math.sqrt(2.0), 1e-12));
+    expect(Offset.fromDirection(0.0, 2.0), const Offset(2.0, 0.0));
+    expect(
+        Offset.fromDirection(pi / 6, 2.0).dx, closeTo(math.sqrt(3.0), 1e-12));
+    expect(Offset.fromDirection(pi / 6, 2.0).dy, closeTo(1.0, 1e-12));
   });
-
-  group('Rect', () {
-    test('Rect accessors', () {
-      final Rect r = Rect.fromLTRB(1.0, 3.0, 5.0, 7.0);
-      expect(r.left, equals(1.0));
-      expect(r.top, equals(3.0));
-      expect(r.right, equals(5.0));
-      expect(r.bottom, equals(7.0));
-    });
-
-    test('Rect created by width and height', () {
-      final Rect r = Rect.fromLTWH(1.0, 3.0, 5.0, 7.0);
-      expect(r.left, equals(1.0));
-      expect(r.top, equals(3.0));
-      expect(r.right, equals(6.0));
-      expect(r.bottom, equals(10.0));
-      expect(r.shortestSide, equals(5.0));
-      expect(r.longestSide, equals(7.0));
-    });
-
-    test('Rect intersection', () {
-      final Rect r1 = Rect.fromLTRB(0.0, 0.0, 100.0, 100.0);
-      final Rect r2 = Rect.fromLTRB(50.0, 50.0, 200.0, 200.0);
-      final Rect r3 = r1.intersect(r2);
-      expect(r3.left, equals(50.0));
-      expect(r3.top, equals(50.0));
-      expect(r3.right, equals(100.0));
-      expect(r3.bottom, equals(100.0));
-
-      final Rect r4 = r2.intersect(r1);
-      expect(r4, equals(r3));
-    });
-
-    test('Rect expandToInclude overlapping rects', () {
-      final Rect r1 = Rect.fromLTRB(0.0, 0.0, 100.0, 100.0);
-      final Rect r2 = Rect.fromLTRB(50.0, 50.0, 200.0, 200.0);
-      final Rect r3 = r1.expandToInclude(r2);
-      expect(r3.left, equals(0.0));
-      expect(r3.top, equals(0.0));
-      expect(r3.right, equals(200.0));
-      expect(r3.bottom, equals(200.0));
-
-      final Rect r4 = r2.expandToInclude(r1);
-      expect(r4, equals(r3));
-    });
-
-    test('Rect expandToInclude crossing rects', () {
-      final Rect r1 = Rect.fromLTRB(50.0, 0.0, 50.0, 200.0);
-      final Rect r2 = Rect.fromLTRB(0.0, 50.0, 200.0, 50.0);
-      final Rect r3 = r1.expandToInclude(r2);
-      expect(r3.left, equals(0.0));
-      expect(r3.top, equals(0.0));
-      expect(r3.right, equals(200.0));
-      expect(r3.bottom, equals(200.0));
-
-      final Rect r4 = r2.expandToInclude(r1);
-      expect(r4, equals(r3));
-    });
-  });
-
-  group('RRect', () {
-    test('RRect.fromRectXY', () {
-      final Rect baseRect = Rect.fromLTWH(1.0, 3.0, 5.0, 7.0);
-      final RRect r = RRect.fromRectXY(baseRect, 1.0, 1.0);
-      expect(r.left, equals(1.0));
-      expect(r.top, equals(3.0));
-      expect(r.right, equals(6.0));
-      expect(r.bottom, equals(10.0));
-      expect(r.shortestSide, equals(5.0));
-      expect(r.longestSide, equals(7.0));
-    });
+  test('Size.aspectRatio', () {
+    expect(const Size(0.0, 0.0).aspectRatio, 0.0);
+    expect(const Size(-0.0, 0.0).aspectRatio, 0.0);
+    expect(const Size(0.0, -0.0).aspectRatio, 0.0);
+    expect(const Size(-0.0, -0.0).aspectRatio, 0.0);
+    expect(const Size(0.0, 1.0).aspectRatio, 0.0);
+    expect(const Size(0.0, -1.0).aspectRatio, -0.0);
+    expect(const Size(1.0, 0.0).aspectRatio, double.infinity);
+    expect(const Size(1.0, 1.0).aspectRatio, 1.0);
+    expect(const Size(1.0, -1.0).aspectRatio, -1.0);
+    expect(const Size(-1.0, 0.0).aspectRatio, -double.infinity);
+    expect(const Size(-1.0, 1.0).aspectRatio, -1.0);
+    expect(const Size(-1.0, -1.0).aspectRatio, 1.0);
+    expect(const Size(3.0, 4.0).aspectRatio, 3.0 / 4.0);
   });
 }

lib/web_ui/test/gradient_test.dart

@@ -9,7 +9,7 @@ import 'package:test/test.dart';
 void main() {
   test('Gradient.radial with no focal point', () {
     expect(
-      new Gradient.radial(
+      Gradient.radial(
           Offset.zero,
           null,
           <Color>[const Color(0xFFFFFFFF), const Color(0xFFFFFFFF)],
@@ -23,7 +23,7 @@ void main() {
   test('radial center and focal == Offset.zero and focalRadius == 0.0 is ok',
       () {
     expect(
-        () => new Gradient.radial(
+        () => Gradient.radial(
               Offset.zero,
               0.0,
               <Color>[const Color(0xFFFFFFFF), const Color(0xFFFFFFFF)],
@@ -38,7 +38,7 @@ void main() {
 
   test('radial center != focal and focalRadius == 0.0 is ok', () {
     expect(
-        () => new Gradient.radial(
+        () => Gradient.radial(
               Offset.zero,
               0.0,
               <Color>[const Color(0xFFFFFFFF), const Color(0xFFFFFFFF)],
@@ -55,7 +55,7 @@ void main() {
   test('radial center and focal == Offset.zero and focalRadius != 0.0 assert',
       () {
     expect(
-      () => new Gradient.radial(
+      () => Gradient.radial(
             Offset.zero,
             0.0,
             <Color>[const Color(0xFFFFFFFF), const Color(0xFFFFFFFF)],

lib/web_ui/test/keyboard_test.dart

@@ -20,11 +20,11 @@ void main() {
 
     test('dispatches keyup to flutter/keyevent channel', () {
       String channelReceived;
-      Map dataReceived;
+      Map<String, dynamic> dataReceived;
       ui.window.onPlatformMessage = (String channel, ByteData data,
           ui.PlatformMessageResponseCallback callback) {
         channelReceived = channel;
-        dataReceived = JSONMessageCodec().decodeMessage(data);
+        dataReceived = const JSONMessageCodec().decodeMessage(data);
       };
 
       html.window.dispatchEvent(html.KeyboardEvent('keyup'));
@@ -42,11 +42,11 @@ void main() {
 
     test('dispatches keydown to flutter/keyevent channel', () {
       String channelReceived;
-      Map dataReceived;
+      Map<String, dynamic> dataReceived;
       ui.window.onPlatformMessage = (String channel, ByteData data,
           ui.PlatformMessageResponseCallback callback) {
         channelReceived = channel;
-        dataReceived = JSONMessageCodec().decodeMessage(data);
+        dataReceived = const JSONMessageCodec().decodeMessage(data);
       };
 
       html.window.dispatchEvent(html.KeyboardEvent('keydown'));