Various fixes in CanvasKit (#16433)

- Enable dynamically loaded fonts
- Fix addOval
- Fix getBoxesForRange for negative ranges

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

@@ -4,11 +4,18 @@
 
 part of engine;
 
+// This URL was found by using the Google Fonts Developer API to find the URL
+// for Roboto. The API warns that this URL is not stable. In order to update
+// this, list out all of the fonts and find the URL for the regular
+// Roboto font. The API reference is here:
+// https://developers.google.com/fonts/docs/developer_api
 const String _robotoUrl =
     'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf';
 
+/// Manages the fonts used in the Skia-based backend.
 class SkiaFontCollection {
   final List<Future<ByteBuffer>> _loadingFontBuffers = <Future<ByteBuffer>>[];
+  final List<Uint8List> _dynamicallyLoadedFonts = <Uint8List>[];
 
   final Set<String> registeredFamilies = <String>{};
 
@@ -17,9 +24,18 @@ class SkiaFontCollection {
         (await Future.wait<ByteBuffer>(_loadingFontBuffers))
             .map((ByteBuffer buffer) => buffer.asUint8List())
             .toList();
+    fontBuffers.addAll(_dynamicallyLoadedFonts);
     skFontMgr = canvasKit['SkFontMgr'].callMethod('FromData', fontBuffers);
   }
 
+  Future<void> loadFontFromList(Uint8List list, {String fontFamily}) async {
+    _dynamicallyLoadedFonts.add(list);
+    if (fontFamily != null) {
+      registeredFamilies.add(fontFamily);
+    }
+    await ensureFontsLoaded();
+  }
+
   Future<void> registerFonts(AssetManager assetManager) async {
     ByteData byteData;
 

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

@@ -9,7 +9,11 @@ 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.11.0/bin/';
+///
+/// When CanvasKit pushes a new release to NPM, update this URL to reflect the
+/// most recent version. For example, if CanvasKit releases version 0.34.0 to
+/// NPM, update this URL to `https://unpkg.com/canvaskit-wasm@0.34.0/bin/`.
+const String canvasKitBaseUrl = 'https://unpkg.com/canvaskit-wasm@0.12.0/bin/';
 
 /// Initialize the Skia backend.
 ///

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

@@ -30,6 +30,7 @@ class SkPaint extends SkiaObject implements ui.Paint {
 
   @override
   ui.PaintingStyle get style => _style;
+
   @override
   set style(ui.PaintingStyle value) {
     _style = value;

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

@@ -56,7 +56,7 @@ class SkPath implements ui.Path {
 
   @override
   void addOval(ui.Rect oval) {
-    _skPath.callMethod('addOval', <dynamic>[makeSkRect(oval), true, 0]);
+    _skPath.callMethod('addOval', <dynamic>[makeSkRect(oval), false, 1]);
   }
 
   @override

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

@@ -218,7 +218,7 @@ class SkTextStyle implements ui.TextStyle {
     }
     List<String> fontFamilies = <String>[fontFamily];
     if (fontFamilyFallback != null) {
-      fontFamilies.addAll(fontFamilies);
+      fontFamilies.addAll(fontFamilyFallback);
     }
 
     style['fontFamilies'] = fontFamilies;
@@ -343,6 +343,10 @@ class SkParagraph implements ui.Paragraph {
     ui.BoxHeightStyle boxHeightStyle: ui.BoxHeightStyle.tight,
     ui.BoxWidthStyle boxWidthStyle: ui.BoxWidthStyle.tight,
   }) {
+    if (start < 0 || end < 0) {
+      return const <ui.TextBox>[];
+    }
+
     js.JsObject heightStyle;
     switch (boxHeightStyle) {
       case ui.BoxHeightStyle.tight:
@@ -413,10 +417,21 @@ class SkParagraph implements ui.Paragraph {
   @override
   void layout(ui.ParagraphConstraints constraints) {
     assert(constraints.width != null);
+
+    // Infinite width breaks layout, just use a very large number instead.
+    // TODO(het): Remove this once https://bugs.chromium.org/p/skia/issues/detail?id=9874
+    //            is fixed.
+    double width;
+    const double largeFiniteWidth = 1000000;
+    if (constraints.width.isInfinite) {
+      width = largeFiniteWidth;
+    } else {
+      width = constraints.width;
+    }
     // TODO(het): CanvasKit throws an exception when laid out with
     // a font that wasn't registered.
     try {
-      skParagraph.callMethod('layout', <double>[constraints.width]);
+      skParagraph.callMethod('layout', <double>[width]);
     } catch (e) {
       html.window.console.warn('CanvasKit threw an exception while laying '
           'out the paragraph. The font was "$_fontFamily". Exception:\n$e');

lib/web_ui/lib/src/ui/text.dart

@@ -1587,9 +1587,15 @@ abstract class ParagraphBuilder {
 /// * `fontFamily`: The family name used to identify the font in text styles.
 ///  If this is not provided, then the family name will be extracted from the font file.
 Future<void> loadFontFromList(Uint8List list, {String fontFamily}) {
-  return _fontCollection.loadFontFromList(list, fontFamily: fontFamily).then(
-    (_) => _sendFontChangeMessage()
-  );
+  if (engine.experimentalUseSkia) {
+    return engine.skiaFontCollection.loadFontFromList(list, fontFamily: fontFamily).then(
+        (_) => _sendFontChangeMessage()
+    );
+  } else {
+    return _fontCollection.loadFontFromList(list, fontFamily: fontFamily).then(
+      (_) => _sendFontChangeMessage()
+    );
+  }
 }
 
 final ByteData _fontChangeMessage = engine.JSONMessageCodec().encodeMessage(<String, dynamic>{'type': 'fontsChange'});