Revert "[web] roll CanvasKit to 0.36.1 (flutter#35747)" (flutter#35837)

This reverts commit d782c33.

DEPS

@@ -22,7 +22,7 @@ vars = {
 
   # WARNING: DO NOT EDIT canvaskit_cipd_instance MANUALLY
   # See `lib/web_ui/README.md` for how to roll CanvasKit to a new version.
-  'canvaskit_cipd_instance': '8wh6J7ZXGCgo1vvCQIqkmskYQZfjhcXQG1YCKFNrzRUC',
+  'canvaskit_cipd_instance': 'yrsfF-vTvu4jzBBm1o6tDl70dky-l4G29Dnj75UvRDgC',
 
   # Do not download the Emscripten SDK by default.
   # This prevents us from downloading the Emscripten toolchain for builds

lib/web_ui/dev/canvaskit_lock.yaml

@@ -1,4 +1,4 @@
 # Specifies the version of CanvasKit to use for Flutter Web apps.
 #
 # See `lib/web_ui/README.md` for how to update this file.
-canvaskit_version: "0.36.1"
+canvaskit_version: "0.35.0"

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

@@ -6,15 +6,9 @@ import 'dart:convert';
 import 'dart:typed_data';
 
 import 'dom.dart';
+import 'text/font_collection.dart';
 import 'util.dart';
 
-const String ahemFontFamily = 'Ahem';
-const String ahemFontUrl = '/assets/fonts/ahem.ttf';
-const String robotoFontFamily = 'Roboto';
-const String robotoTestFontUrl = '/assets/fonts/Roboto-Regular.ttf';
-const String robotoVariableFontFamily = 'RobotoVariable';
-const String robotoVariableTestFontUrl = '/assets/fonts/RobotoSlab-VariableFont_wght.ttf';
-
 /// This class downloads assets over the network.
 ///
 /// The assets are resolved relative to [assetsDir] inside the directory

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

@@ -1853,6 +1853,11 @@ extension SkPictureExtension on SkPicture {
 class SkParagraphBuilderNamespace {}
 
 extension SkParagraphBuilderNamespaceExtension on SkParagraphBuilderNamespace {
+  external SkParagraphBuilder Make(
+    SkParagraphStyle paragraphStyle,
+    SkFontMgr? fontManager,
+  );
+
   external SkParagraphBuilder MakeFromFontProvider(
     SkParagraphStyle paragraphStyle,
     TypefaceFontProvider? fontManager,

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

@@ -20,6 +20,9 @@ import 'font_fallbacks.dart';
 const String _robotoUrl =
     'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf';
 
+// URL for the Ahem font, only used in tests.
+const String _ahemUrl = '/assets/fonts/ahem.ttf';
+
 /// Manages the fonts used in the Skia-based backend.
 class SkiaFontCollection implements FontCollection {
   final Set<String> _registeredFontFamilies = <String>{};
@@ -167,19 +170,13 @@ class SkiaFontCollection implements FontCollection {
   /// different URLs.
   @override
   void debugRegisterTestFonts() {
-    if (!_isFontFamilyRegistered(ahemFontFamily)) {
-      _registerFont(ahemFontUrl, ahemFontFamily);
-    }
-    if (!_isFontFamilyRegistered(robotoFontFamily)) {
-      _registerFont(robotoTestFontUrl, robotoFontFamily);
-    }
-    if (!_isFontFamilyRegistered(robotoVariableFontFamily)) {
-      _registerFont(robotoVariableTestFontUrl, robotoVariableFontFamily);
+    if (!_isFontFamilyRegistered('Ahem')) {
+      _registerFont(_ahemUrl, 'Ahem');
     }
 
     // Ahem must be added to font fallbacks list regardless of where it was
     // downloaded from.
-    FontFallbackData.instance.globalFontFallbacks.add(ahemFontFamily);
+    FontFallbackData.instance.globalFontFallbacks.add('Ahem');
   }
 
   void _registerFont(String url, String family) {
@@ -224,6 +221,7 @@ class SkiaFontCollection implements FontCollection {
         .then<ByteBuffer>((dynamic x) => x as ByteBuffer);
   }
 
+  SkFontMgr? skFontMgr;
   TypefaceFontProvider? fontProvider;
 
   @override

lib/web_ui/lib/src/engine/configuration.dart

@@ -32,7 +32,7 @@ import 'package:js/js.dart';
 /// The version of CanvasKit used by the web engine by default.
 // DO NOT EDIT THE NEXT LINE OF CODE MANUALLY
 // See `lib/web_ui/README.md` for how to roll CanvasKit to a new version.
-const String _canvaskitVersion = '0.36.1';
+const String _canvaskitVersion = '0.35.0';
 
 /// The Web Engine configuration for the current application.
 FlutterConfiguration get configuration => _configuration ??= FlutterConfiguration(_jsConfiguration);

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

@@ -14,6 +14,13 @@ import '../safe_browser_api.dart';
 import '../util.dart';
 import 'layout_service.dart';
 
+const String ahemFontFamily = 'Ahem';
+const String ahemFontUrl = '/assets/fonts/ahem.ttf';
+const String robotoFontFamily = 'Roboto';
+const String robotoTestFontUrl = '/assets/fonts/Roboto-Regular.ttf';
+const String robotoVariableFontFamily = 'RobotoVariable';
+const String robotoVariableTestFontUrl = '/assets/fonts/RobotoSlab-VariableFont_wght.ttf';
+
 /// This class is responsible for registering and loading fonts.
 ///
 /// Once an asset manager has been set in the framework, call

lib/web_ui/test/canvaskit/canvaskit_api_test.dart

@@ -10,7 +10,6 @@ import 'package:test/test.dart';
 
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
-import 'package:web_engine_tester/golden_tester.dart';
 
 import '../matchers.dart';
 import 'common.dart';
@@ -50,9 +49,7 @@ void testMain() {
     _matrix4x4CompositionTests();
     _toSkRectTests();
     _skVerticesTests();
-    group('SkParagraph', () {
-      _paragraphTests();
-    });
+    _paragraphTests();
     group('SkPath', () {
       _pathTests();
     });
@@ -1450,36 +1447,31 @@ void _textStyleTests() {
 }
 
 void _paragraphTests() {
-  setUpAll(() async {
-    CanvasKitRenderer.instance.fontCollection.debugRegisterTestFonts();
-    await CanvasKitRenderer.instance.fontCollection.ensureFontsLoaded();
-  });
-
   // This test is just a kitchen sink that blasts CanvasKit with all paragraph
   // properties all at once, making sure CanvasKit doesn't choke on anything.
   // In particular, this tests that our JS bindings are correct, such as that
   // arguments are of acceptable types and passed in the correct order.
-  test('kitchensink', () async {
+  test('SkParagraph API kitchensink', () {
     final SkParagraphStyleProperties props = SkParagraphStyleProperties();
-    props.textAlign = canvasKit.TextAlign.Left;
+    props.textAlign = canvasKit.TextAlign.Center;
     props.textDirection = canvasKit.TextDirection.RTL;
     props.heightMultiplier = 3;
     props.textHeightBehavior = canvasKit.TextHeightBehavior.All;
     props.maxLines = 4;
     props.ellipsis = '___';
     props.textStyle = SkTextStyleProperties()
-      ..backgroundColor = Float32List.fromList(<double>[0.2, 0, 0, 0.5])
-      ..color = Float32List.fromList(<double>[0, 1, 0, 1])
-      ..foregroundColor = Float32List.fromList(<double>[1, 0, 1, 1])
+      ..backgroundColor = Float32List.fromList(<double>[1, 2, 3, 4])
+      ..color = Float32List.fromList(<double>[5, 6, 7, 8])
+      ..foregroundColor = Float32List.fromList(<double>[9, 10, 11, 12])
       ..decoration = 0x2
       ..decorationThickness = 2.0
       ..decorationColor = Float32List.fromList(<double>[13, 14, 15, 16])
       ..decorationStyle = canvasKit.DecorationStyle.Dotted
       ..textBaseline = canvasKit.TextBaseline.Ideographic
-      ..fontSize = 48
+      ..fontSize = 24
       ..letterSpacing = 5
       ..wordSpacing = 10
-      ..heightMultiplier = 1.3
+      ..heightMultiplier = 2.5
       ..halfLeading = true
       ..locale = 'en_CA'
       ..fontFamilies = <String>['Roboto', 'serif']
@@ -1494,24 +1486,23 @@ void _paragraphTests() {
         SkFontFeature()
           ..name = 'tnum'
           ..value = 1,
-      ]
-    ;
+      ];
     props.strutStyle = SkStrutStyleProperties()
       ..fontFamilies = <String>['Roboto', 'Noto']
       ..fontStyle = (SkFontStyle()
         ..slant = canvasKit.FontSlant.Italic
         ..weight = canvasKit.FontWeight.Bold)
-      ..fontSize = 72
-      ..heightMultiplier = 1.5
+      ..fontSize = 23
+      ..heightMultiplier = 5
       ..halfLeading = true
-      ..leading = 0
+      ..leading = 6
       ..strutEnabled = true
       ..forceStrutHeight = false;
 
     final SkParagraphStyle paragraphStyle = canvasKit.ParagraphStyle(props);
-    final SkParagraphBuilder builder = canvasKit.ParagraphBuilder.MakeFromFontProvider(
+    final SkParagraphBuilder builder = canvasKit.ParagraphBuilder.Make(
       paragraphStyle,
-      CanvasKitRenderer.instance.fontCollection.fontProvider,
+      CanvasKitRenderer.instance.fontCollection.skFontMgr,
     );
 
     builder.addText('Hello');
@@ -1522,93 +1513,51 @@ void _paragraphTests() {
       canvasKit.TextBaseline.Ideographic,
       4.0,
     );
-    builder.pushStyle(canvasKit.TextStyle(SkTextStyleProperties()
-      ..color = Float32List.fromList(<double>[1, 0, 0, 1])
-      ..fontSize = 24
-      ..fontFamilies = <String>['Roboto', 'serif']
-    ));
+    builder
+        .pushStyle(canvasKit.TextStyle(SkTextStyleProperties()..fontSize = 12));
     builder.addText('World');
     builder.pop();
     builder.pushPaintStyle(
-      canvasKit.TextStyle(SkTextStyleProperties()
-        ..color = Float32List.fromList(<double>[1, 0, 0, 1])
-        ..fontSize = 60
-        ..fontFamilies = <String>['Roboto', 'serif']
-      ),
-      SkPaint()..setColorInt(0xFF0000FF),
-      SkPaint()..setColorInt(0xFFFF0000),
-    );
+        canvasKit.TextStyle(SkTextStyleProperties()..fontSize = 12),
+        SkPaint(),
+        SkPaint());
     builder.addText('!');
     builder.pop();
     builder.pushStyle(
         canvasKit.TextStyle(SkTextStyleProperties()..halfLeading = true));
     builder.pop();
     final SkParagraph paragraph = builder.build();
-    paragraph.layout(500);
-
-    final DomCanvasElement canvas = createDomCanvasElement(
-      width: 400,
-      height: 160,
-    );
-    domDocument.body!.append(canvas);
-
-    // TODO(yjbanov): WebGL screenshot tests do not work on Firefox - https://github.com/flutter/flutter/issues/109265
-    if (!isFirefox) {
-      final SkSurface surface = canvasKit.MakeWebGLCanvasSurface(canvas);
-      final SkCanvas skCanvas = surface.getCanvas();
-      skCanvas.drawColorInt(0xFFCCCCCC, toSkBlendMode(ui.BlendMode.srcOver));
-      skCanvas.drawParagraph(paragraph, 20, 20);
-      skCanvas.drawRect(
-        Float32List.fromList(<double>[20, 20, 20 + paragraph.getMaxIntrinsicWidth(), 20 + paragraph.getHeight()]),
-        SkPaint()
-          ..setStyle(toSkPaintStyle(ui.PaintingStyle.stroke))
-          ..setStrokeWidth(1)
-          ..setColorInt(0xFF00FF00),
-      );
-      surface.flush();
-
-      await matchGoldenFile(
-        'paragraph_kitchen_sink.png',
-        region: const ui.Rect.fromLTRB(0, 0, 400, 160),
-        maxDiffRatePercent: 0.0,
-        write: true,
-      );
-    }
-
-    void expectAlmost(double actual, double expected) {
-      expect(actual, within<double>(distance: actual / 100, from: expected));
-    }
-
-    expectAlmost(paragraph.getAlphabeticBaseline(), 85.5);
+    paragraph.layout(55);
+    expect(paragraph.getAlphabeticBaseline(),
+        within<double>(distance: 0.5, from: 20.7));
     expect(paragraph.didExceedMaxLines(), isFalse);
-    expectAlmost(paragraph.getHeight(), 108);
-    expectAlmost(paragraph.getIdeographicBaseline(), 108);
-    expectAlmost(paragraph.getLongestLine(), 263);
-    expectAlmost(paragraph.getMaxIntrinsicWidth(), 263);
-    expectAlmost(paragraph.getMinIntrinsicWidth(), 135);
-    expectAlmost(paragraph.getMaxWidth(), 500);
+    expect(paragraph.getHeight(), 25);
+    expect(paragraph.getIdeographicBaseline(),
+        within<double>(distance: 0.5, from: 25));
+    expect(paragraph.getLongestLine(), 50);
+    expect(paragraph.getMaxIntrinsicWidth(), 50);
+    expect(paragraph.getMinIntrinsicWidth(), 50);
+    expect(paragraph.getMaxWidth(), 55);
     expect(
-      paragraph.getRectsForRange(1, 3, canvasKit.RectHeightStyle.Tight, canvasKit.RectWidthStyle.Max).single,
-      hasLength(4),
-    );
+        paragraph.getRectsForRange(1, 3, canvasKit.RectHeightStyle.Tight,
+            canvasKit.RectWidthStyle.Max),
+        <double>[]);
     expect(paragraph.getRectsForPlaceholders(), hasLength(1));
     expect(paragraph.getLineMetrics(), hasLength(1));
 
     final SkLineMetrics lineMetrics =
         paragraph.getLineMetrics().cast<SkLineMetrics>().single;
-    expectAlmost(lineMetrics.ascent, 55.6);
-    expectAlmost(lineMetrics.descent, 14.8);
+    expect(lineMetrics.ascent, within<double>(distance: 0.5, from: 20.7));
+    expect(lineMetrics.descent, within<double>(distance: 0.2, from: 4.3));
     expect(lineMetrics.isHardBreak, isTrue);
-    expectAlmost(lineMetrics.baseline, 85.5);
-    expectAlmost(lineMetrics.height, 108);
-    expectAlmost(lineMetrics.left, 2.5);
-    expectAlmost(lineMetrics.width, 263);
+    expect(lineMetrics.baseline, within<double>(distance: 0.5, from: 20.7));
+    expect(lineMetrics.height, 25);
+    expect(lineMetrics.left, 2.5);
+    expect(lineMetrics.width, 50);
     expect(lineMetrics.lineNumber, 0);
 
-    expect(
-      paragraph.getGlyphPositionAtCoordinate(5, 5).affinity,
-      canvasKit.Affinity.Upstream,
-    );
+    expect(paragraph.getGlyphPositionAtCoordinate(5, 5).affinity,
+        canvasKit.Affinity.Downstream);
 
     // "Hello"
     for (int i = 0; i < 5; i++) {