use percent for golden diff rates; tighten the values (#16430)

lib/web_ui/test/golden_tests/engine/canvas_blend_golden_test.dart

@@ -28,7 +28,7 @@ void main() async {
     try {
       sceneElement.append(engineCanvas.rootElement);
       html.document.body.append(sceneElement);
-      await matchGoldenFile('$fileName.png', region: region, maxDiffRate: 0.03);
+      await matchGoldenFile('$fileName.png', region: region, maxDiffRatePercent: 0.0);
     } finally {
       // The page is reused across tests, so remove the element after taking the
       // Scuba screenshot.

lib/web_ui/test/golden_tests/engine/canvas_clip_path_test.dart

@@ -28,7 +28,7 @@ void main() async {
     try {
       sceneElement.append(engineCanvas.rootElement);
       html.document.body.append(sceneElement);
-      await matchGoldenFile('$fileName.png', region: region, maxDiffRate: 0.2);
+      await matchGoldenFile('$fileName.png', region: region, maxDiffRatePercent: 0.0);
     } finally {
       // The page is reused across tests, so remove the element after taking the
       // Scuba screenshot.

lib/web_ui/test/golden_tests/engine/canvas_draw_image_golden_test.dart

@@ -31,7 +31,7 @@ void main() async {
     try {
       sceneElement.append(engineCanvas.rootElement);
       html.document.body.append(sceneElement);
-      await matchGoldenFile('$fileName.png', region: region, maxDiffRate: 0.2);
+      await matchGoldenFile('$fileName.png', region: region, maxDiffRatePercent: 0.0);
     } finally {
       // The page is reused across tests, so remove the element after taking the
       // Scuba screenshot.

lib/web_ui/test/golden_tests/engine/canvas_golden_test.dart

@@ -166,7 +166,7 @@ void main() async {
     await matchGoldenFile(
       'bitmap_canvas_draws_high_quality_text.png',
       region: canvasSize,
-      maxDiffRate: 0.0,
+      maxDiffRatePercent: 0.0,
       pixelComparison: PixelComparison.precise,
     );
   }, timeout: const Timeout(Duration(seconds: 10)), testOn: 'chrome');

lib/web_ui/test/golden_tests/engine/compositing_golden_test.dart

@@ -592,7 +592,7 @@ void _testCullRectComputation() {
       await matchGoldenFile(
         'compositing_draw_high_quality_text.png',
         region: canvasSize,
-        maxDiffRate: 0.0,
+        maxDiffRatePercent: 0.0,
         pixelComparison: PixelComparison.precise,
       );
     },

lib/web_ui/test/golden_tests/engine/draw_vertices_golden_test.dart

@@ -28,9 +28,12 @@ void main() async {
     try {
       sceneElement.append(engineCanvas.rootElement);
       html.document.body.append(sceneElement);
-      // Set rate to 0.66% for webGL difference across platforms.
-      await matchGoldenFile('$fileName.png', region: region, write: write,
-          maxDiffRate: 1.5 / 100.0);
+      await matchGoldenFile(
+        '$fileName.png',
+        region: region,
+        write: write,
+        maxDiffRatePercent: 0.0,
+      );
     } finally {
       // The page is reused across tests, so remove the element after taking the
       // golden screenshot.

lib/web_ui/test/golden_tests/engine/scuba.dart

@@ -45,12 +45,12 @@ class EngineScubaTester {
   Future<void> diffScreenshot(
     String fileName, {
     ui.Rect region,
-    double maxDiffRate,
+    double maxDiffRatePercent,
   }) async {
     await matchGoldenFile(
       '$fileName.png',
       region: region ?? viewportRegion,
-      maxDiffRate: maxDiffRate,
+      maxDiffRatePercent: maxDiffRatePercent,
     );
   }
 
@@ -62,7 +62,7 @@ class EngineScubaTester {
     EngineCanvas canvas,
     String fileName, {
     ui.Rect region,
-    double maxDiffRate,
+    double maxDiffRatePercent,
   }) async {
     // Wrap in <flt-scene> so that our CSS selectors kick in.
     final html.Element sceneElement = html.Element.tag('flt-scene');
@@ -76,7 +76,7 @@ class EngineScubaTester {
       await diffScreenshot(
         screenshotName,
         region: region,
-        maxDiffRate: maxDiffRate,
+        maxDiffRatePercent: maxDiffRatePercent,
       );
     } finally {
       // The page is reused across tests, so remove the element after taking the

lib/web_ui/test/golden_tests/engine/text_style_golden_test.dart

@@ -219,7 +219,7 @@ void main() async {
 
   testEachCanvas('draws text with a shadow', (EngineCanvas canvas) {
     drawTextWithShadow(canvas);
-    return scuba.diffCanvasScreenshot(canvas, 'text_shadow', maxDiffRate: 0.2);
+    return scuba.diffCanvasScreenshot(canvas, 'text_shadow', maxDiffRatePercent: 0.2);
   }, bSkipHoudini: true);
 
   testEachCanvas('Handles disabled strut style', (EngineCanvas canvas) {
@@ -238,7 +238,7 @@ void main() async {
       canvas,
       'text_strut_style_disabled',
       region: Rect.fromLTRB(0, 0, 100, 100),
-      maxDiffRate: 0.9 / 100, // 0.9%
+      maxDiffRatePercent: 0.0,
     );
   });
 }

web_sdk/web_engine_tester/lib/golden_tester.dart

@@ -6,6 +6,7 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:html' as html;
 
+import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart';
 
 import 'package:test/test.dart';
@@ -49,13 +50,13 @@ enum PixelComparison {
 /// [pixelComparison] determines the algorithm used to compare pixels. Uses
 /// fuzzy comparison by default.
 Future<void> matchGoldenFile(String filename,
-    {bool write = false, Rect region = null, double maxDiffRate = null, PixelComparison pixelComparison = PixelComparison.fuzzy}) async {
+    {bool write = false, Rect region = null, double maxDiffRatePercent = null, PixelComparison pixelComparison = PixelComparison.fuzzy}) async {
   Map<String, dynamic> serverParams = <String, dynamic>{
     'filename': filename,
     'write': write,
     'region': region == null
         ? null
-        : {
+        : <String, dynamic>{
             'x': region.left,
             'y': region.top,
             'width': region.width,
@@ -63,10 +64,18 @@ Future<void> matchGoldenFile(String filename,
           },
     'pixelComparison': pixelComparison.toString(),
   };
-  if (maxDiffRate != null) {
-    serverParams['maxdiffrate'] = maxDiffRate;
+
+  // Chrome on macOS renders slighly differently from Linux, so allow it an
+  // extra 1% to deviate from the golden files.
+  if (maxDiffRatePercent != null) {
+    if (operatingSystem == OperatingSystem.macOs) {
+      maxDiffRatePercent += 1.0;
+    }
+    serverParams['maxdiffrate'] = maxDiffRatePercent / 100;
+  } else if (operatingSystem == OperatingSystem.macOs) {
+    serverParams['maxdiffrate'] = 0.01;
   }
-  final String response = await _callScreenshotServer(serverParams);
+  final String response = await _callScreenshotServer(serverParams) as String;
   if (response == 'OK') {
     // Pass
     return;

web_sdk/web_engine_tester/pubspec.yaml

@@ -8,3 +8,5 @@ dependencies:
   stream_channel: 2.0.0
   test: 1.6.5
   webkit_inspection_protocol: 0.5.0
+  ui:
+    path: ../../lib/web_ui