[web] Hide autofill overlay (#39294)

* Make autofill styling transparent

* Formatting

* Add tests

* Modify tests

* Add correct prefix for safari and firefox tests

Author: htoor3

lib/web_ui/lib/src/engine/host_node.dart

@@ -317,16 +317,16 @@ void applyGlobalCssRulesToSheet(
     }
   ''', sheet.cssRules.length);
 
-  // This css prevents an autofill overlay brought by the browser during
-  // text field autofill by delaying the transition effect.
-  // See: https://github.com/flutter/flutter/issues/61132.
+  // This CSS makes the autofill overlay transparent in order to prevent it
+  // from overlaying on top of Flutter-rendered text inputs.
+  // See: https://github.com/flutter/flutter/issues/118337.
   if (browserHasAutofillOverlay()) {
     sheet.insertRule('''
       $cssSelectorPrefix .transparentTextEditing:-webkit-autofill,
       $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:hover,
       $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:focus,
       $cssSelectorPrefix .transparentTextEditing:-webkit-autofill:active {
-        -webkit-transition-delay: 99999s;
+        opacity: 0 !important;
       }
     ''', sheet.cssRules.length);
   }

lib/web_ui/test/engine/host_node_test.dart

@@ -112,6 +112,31 @@ void testMain() {
       expect(hidesRevealIcons, isFalse);
     }, skip: isEdge);
 
+    test(
+        'Attaches styles to hide the autofill overlay for browsers that support it',
+        () {
+      final DomElement? style =
+          hostNode.querySelector('#flt-internals-stylesheet');
+      final String vendorPrefix = (isSafari || isFirefox) ? '' : '-webkit-';
+      final bool autofillOverlay = hasCssRule(style,
+          selector: '.transparentTextEditing:${vendorPrefix}autofill',
+          declaration: 'opacity: 0 !important');
+      final bool autofillOverlayHovered = hasCssRule(style,
+          selector: '.transparentTextEditing:${vendorPrefix}autofill:hover',
+          declaration: 'opacity: 0 !important');
+      final bool autofillOverlayFocused = hasCssRule(style,
+          selector: '.transparentTextEditing:${vendorPrefix}autofill:focus',
+          declaration: 'opacity: 0 !important');
+      final bool autofillOverlayActive = hasCssRule(style,
+          selector: '.transparentTextEditing:${vendorPrefix}autofill:active',
+          declaration: 'opacity: 0 !important');
+
+      expect(autofillOverlay, isTrue);
+      expect(autofillOverlayHovered, isTrue);
+      expect(autofillOverlayFocused, isTrue);
+      expect(autofillOverlayActive, isTrue);
+    }, skip: !browserHasAutofillOverlay());
+
     _runDomTests(hostNode);
   });