From 8614d8882bfeb273a18fa8f8123b1ab3cc82a7c3 Mon Sep 17 00:00:00 2001 From: Hassan Toor Date: Tue, 31 Jan 2023 12:23:28 -0600 Subject: [PATCH 1/5] Make autofill styling transparent --- lib/web_ui/lib/src/engine/host_node.dart | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/web_ui/lib/src/engine/host_node.dart b/lib/web_ui/lib/src/engine/host_node.dart index f2a6c74cb39f5..131af7c1a91e2 100644 --- a/lib/web_ui/lib/src/engine/host_node.dart +++ b/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); } From a7a0de5fd56ade97e07341e1b93453e11f1affdd Mon Sep 17 00:00:00 2001 From: Hassan Toor Date: Tue, 31 Jan 2023 12:25:58 -0600 Subject: [PATCH 2/5] Formatting --- lib/web_ui/lib/src/engine/host_node.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web_ui/lib/src/engine/host_node.dart b/lib/web_ui/lib/src/engine/host_node.dart index 131af7c1a91e2..4b0ca8e13d990 100644 --- a/lib/web_ui/lib/src/engine/host_node.dart +++ b/lib/web_ui/lib/src/engine/host_node.dart @@ -317,7 +317,7 @@ void applyGlobalCssRulesToSheet( } ''', sheet.cssRules.length); - // This CSS makes the autofill overlay transparent in order to prevent it + // 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()) { From b7a45f0f80f3b71810f7f16cbda3469c3a36cd63 Mon Sep 17 00:00:00 2001 From: Hassan Toor Date: Tue, 31 Jan 2023 12:42:17 -0600 Subject: [PATCH 3/5] Add tests --- lib/web_ui/test/engine/host_node_test.dart | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/lib/web_ui/test/engine/host_node_test.dart b/lib/web_ui/test/engine/host_node_test.dart index e882d49042ccc..b439f770d6aa5 100644 --- a/lib/web_ui/test/engine/host_node_test.dart +++ b/lib/web_ui/test/engine/host_node_test.dart @@ -112,6 +112,30 @@ 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 bool autofillOverlay = hasCssRule(style, + selector: '.transparentTextEditing:-webkit-autofill', + declaration: 'opacity: 0'); + final bool autofillOverlayHovered = hasCssRule(style, + selector: '.transparentTextEditing:-webkit-autofill:hover', + declaration: 'opacity: 0'); + final bool autofillOverlayFocused = hasCssRule(style, + selector: '.transparentTextEditing:-webkit-autofill:focus', + declaration: 'opacity: 0'); + final bool autofillOverlayActive = hasCssRule(style, + selector: '.transparentTextEditing:-webkit-autofill:active', + declaration: 'opacity: 0'); + + expect(autofillOverlay, isTrue); + expect(autofillOverlayHovered, isTrue); + expect(autofillOverlayFocused, isTrue); + expect(autofillOverlayActive, isTrue); + }, skip: !browserHasAutofillOverlay()); + _runDomTests(hostNode); }); From 91bc9a5516f4ed1ac3d9a77fd29b253b60ea1de4 Mon Sep 17 00:00:00 2001 From: Hassan Toor Date: Tue, 31 Jan 2023 18:08:33 -0600 Subject: [PATCH 4/5] Modify tests --- lib/web_ui/test/engine/host_node_test.dart | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/web_ui/test/engine/host_node_test.dart b/lib/web_ui/test/engine/host_node_test.dart index b439f770d6aa5..8e2dc263b1e09 100644 --- a/lib/web_ui/test/engine/host_node_test.dart +++ b/lib/web_ui/test/engine/host_node_test.dart @@ -119,16 +119,16 @@ void testMain() { hostNode.querySelector('#flt-internals-stylesheet'); final bool autofillOverlay = hasCssRule(style, selector: '.transparentTextEditing:-webkit-autofill', - declaration: 'opacity: 0'); + declaration: 'opacity: 0 !important'); final bool autofillOverlayHovered = hasCssRule(style, selector: '.transparentTextEditing:-webkit-autofill:hover', - declaration: 'opacity: 0'); + declaration: 'opacity: 0 !important'); final bool autofillOverlayFocused = hasCssRule(style, selector: '.transparentTextEditing:-webkit-autofill:focus', - declaration: 'opacity: 0'); + declaration: 'opacity: 0 !important'); final bool autofillOverlayActive = hasCssRule(style, selector: '.transparentTextEditing:-webkit-autofill:active', - declaration: 'opacity: 0'); + declaration: 'opacity: 0 !important'); expect(autofillOverlay, isTrue); expect(autofillOverlayHovered, isTrue); From 7ff9f6e919938a08e15d67ee0e0773cfa28539b9 Mon Sep 17 00:00:00 2001 From: Hassan Toor Date: Wed, 1 Feb 2023 10:36:34 -0600 Subject: [PATCH 5/5] Add correct prefix for safari and firefox tests --- lib/web_ui/test/engine/host_node_test.dart | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/web_ui/test/engine/host_node_test.dart b/lib/web_ui/test/engine/host_node_test.dart index 8e2dc263b1e09..205bdafa9f4a1 100644 --- a/lib/web_ui/test/engine/host_node_test.dart +++ b/lib/web_ui/test/engine/host_node_test.dart @@ -117,17 +117,18 @@ void testMain() { () { final DomElement? style = hostNode.querySelector('#flt-internals-stylesheet'); + final String vendorPrefix = (isSafari || isFirefox) ? '' : '-webkit-'; final bool autofillOverlay = hasCssRule(style, - selector: '.transparentTextEditing:-webkit-autofill', + selector: '.transparentTextEditing:${vendorPrefix}autofill', declaration: 'opacity: 0 !important'); final bool autofillOverlayHovered = hasCssRule(style, - selector: '.transparentTextEditing:-webkit-autofill:hover', + selector: '.transparentTextEditing:${vendorPrefix}autofill:hover', declaration: 'opacity: 0 !important'); final bool autofillOverlayFocused = hasCssRule(style, - selector: '.transparentTextEditing:-webkit-autofill:focus', + selector: '.transparentTextEditing:${vendorPrefix}autofill:focus', declaration: 'opacity: 0 !important'); final bool autofillOverlayActive = hasCssRule(style, - selector: '.transparentTextEditing:-webkit-autofill:active', + selector: '.transparentTextEditing:${vendorPrefix}autofill:active', declaration: 'opacity: 0 !important'); expect(autofillOverlay, isTrue);