[web] enable ios safari screenshot tests (#21226)

* enable ios safari screenshot tests

* this is the value used for screenshots in the repo.

* change revision

* fix the error made in the gaps

* do not try to fetch on LUCI

* lunix luci migth break existing prs. only skip fetching for mac

* add a placeholder tests for shadow golden test

* try to use iPhone 11 Pro on LUCI

* change the scale and the smoke test image

* add unmerged goldens PR to tests all the screenshots. will be removed later

* change the goldens lock back to flutter/goldens

* change wrong comment on screenshot tests block

* address reviewer comments

* change the commit number for goldens file

* skip canvas blend mode tests

* debugging LUCI error

* debugging LUCI error printing directory contents

* skip one test, remove the debug logs

* change the revision number to include the correct chrome files

Author: nturgut

lib/web_ui/dev/browser_lock.yaml

@@ -34,7 +34,7 @@ ios-safari:
   # `heightOfHeader` is the number of pixels taken by the phone's header menu
   # and the browsers address bar.
   # TODO: https://github.com/flutter/flutter/issues/65672
-  heightOfHeader: 282
+  heightOfHeader: 189
   # `heightOfFooter` is the number of pixels taken by the phone's navigation
   # menu.
   heightOfFooter: 250
@@ -45,7 +45,8 @@ ios-safari:
   # phone screeen we enlarge or shrink the area by applying a linear
   # transformation by a scale_factor (a.k.a. we perform isotropic scaling).
   # This value will be differ depending on the phone.
-  scaleFactor: 1.15
+  # For iOS 13.0 iPhone 11 Pro, this number is 1.15.
+  scaleFactor: 1.00
 
 ## geckodriver is used for testing Firefox Browser. It works with multiple
 ## Firefox Browser versions.

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: b6efc75885c23f0b5c485d8bd659ed339feec9ec
+revision: 1a4722227af42c3f51450266016b1a07ae459e73

lib/web_ui/dev/test_platform.dart

@@ -197,7 +197,17 @@ class BrowserPlatform extends PlatformPlugin {
         'golden_files',
       );
     } else {
-      await fetchGoldens();
+      // On LUCI MacOS bots the goldens are fetched by the recipe code.
+      // Fetch the goldens if:
+      // - Tests are running on a local machine.
+      // - Tests are running on an OS other than macOS.
+      if (!isLuci || !Platform.isMacOS) {
+        await fetchGoldens();
+      } else {
+        if (!env.environment.webUiGoldensRepositoryDirectory.existsSync()) {
+          throw Exception('The goldens directory must have been copied');
+        }
+      }
       goldensDirectory = p.join(
         env.environment.webUiGoldensRepositoryDirectory.path,
         'engine',
@@ -212,7 +222,7 @@ class BrowserPlatform extends PlatformPlugin {
     ));
     if (!file.existsSync() && !write) {
       return '''
-Golden file $filename does not exist.
+Golden file $filename does not exist on path ${file.absolute.path}
 
 To automatically create this file call matchGoldenFile('$filename', write: true).
 ''';

lib/web_ui/dev/test_runner.dart

@@ -397,12 +397,13 @@ class TestCommand extends Command<bool> with ArgUtils {
       'test',
     ));
 
-    // Screenshot tests and smoke tests only run on: "Chrome/iOS Safari locally"
-    // or "Chrome on a Linux bot". We can remove the Linux bot restriction
-    // after solving the git issue faced on macOS and Windows bots:
+    // Screenshot tests and smoke tests only run on: "Chrome/iOS Safari"
+    // locally and on LUCI. They are not available on Windows bots:
     // TODO: https://github.com/flutter/flutter/issues/63710
     if ((isChrome && isLuci && io.Platform.isLinux) ||
-        ((isChrome || isSafariIOS) && !isLuci)) {
+        ((isChrome || isSafariIOS) && !isLuci) ||
+        (isSafariIOS && isLuci)) {
+      print('INFO: Also running the screenshot tests.');
       // Separate screenshot tests from unit-tests. Screenshot tests must run
       // one at a time. Otherwise, they will end up screenshotting each other.
       // This is not an issue for unit-tests.

lib/web_ui/test/golden_files/smoke_test.iOS_Safari.png

@@ -108,7 +108,9 @@ void testMain() async {
       rc.restore();
       await _checkScreenshot(rc, 'canvas_image_blend_group$blendGroup',
           maxDiffRatePercent: 8.0);
-    });
+    },
+        skip: browserEngine == BrowserEngine.webkit &&
+            operatingSystem == OperatingSystem.iOs);
   }
 
   // Regression test for https://github.com/flutter/flutter/issues/56971

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

@@ -75,7 +75,8 @@ void testMain() async {
     builder.pop(); // offset
   }
 
-  void _paintBitmapCanvasShadow(double elevation, Offset offset, bool transparentOccluder) {
+  void _paintBitmapCanvasShadow(
+      double elevation, Offset offset, bool transparentOccluder) {
     final SurfacePath path = SurfacePath()
       ..addRect(const Rect.fromLTRB(0, 0, 20, 20));
     builder.pushOffset(offset.dx, offset.dy);
@@ -168,4 +169,15 @@ void testMain() async {
     },
     testOn: 'chrome',
   );
+
+  /// For dart testing having `no tests ran` in a file is considered an error
+  /// and result in exit code 1.
+  /// See: https://github.com/dart-lang/test/pull/1173
+  ///
+  /// Since screenshot tests run one by one and exit code is checked immediately
+  /// after that a test file that only runs in chrome will break the other
+  /// browsers. This method is added as a bandaid solution.
+  test('dummy tests to pass on other browsers', () async {
+    expect(2 + 2, 4);
+  });
 }

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

@@ -15,11 +15,17 @@ void main() {
   internalBootstrapBrowserTest(() => testMain);
 }
 
+/// Whether we are running on iOS Safari.
+// TODO: https://github.com/flutter/flutter/issues/66656
+bool get isIosSafari => browserEngine == BrowserEngine.webkit &&
+          operatingSystem == OperatingSystem.iOs;
+
 void testMain() async {
   final EngineScubaTester scuba = await EngineScubaTester.initialize(
     viewportSize: const Size(600, 600),
   );
 
+
   setUpStableTestFonts();
 
   testEachCanvas('draws paragraphs with placeholders', (EngineCanvas canvas) {
@@ -40,7 +46,9 @@ void testMain() async {
     }
     recordingCanvas.endRecording();
     recordingCanvas.apply(canvas, screenRect);
-    return scuba.diffCanvasScreenshot(canvas, 'text_with_placeholders');
+    if (!isIosSafari) {
+      return scuba.diffCanvasScreenshot(canvas, 'text_with_placeholders');
+    }
   });
 
   testEachCanvas('text alignment and placeholders', (EngineCanvas canvas) {