From c652e45cd186c364ee641d041a33e520a452ed63 Mon Sep 17 00:00:00 2001 From: Harry Terkelsen <1961493+harryterkelsen@users.noreply.github.com> Date: Fri, 16 Jan 2026 16:52:09 -0800 Subject: [PATCH] Fix style_manager_test for Firefox (#181084) Fixes style_manager_test.dart for Firefox by 1. changing the CSS to explicitly set `outline: rgb(0, 0, 0) none 0px` 2. actually focusing the element before checking it's computed style Fixes https://github.com/flutter/flutter/issues/180940 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --- .../engine/view_embedder/style_manager.dart | 2 +- .../view_embedder/style_manager_test.dart | 41 +++++++++---------- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/view_embedder/style_manager.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/view_embedder/style_manager.dart index ba1f0382fcb..b80b922451b 100644 --- a/engine/src/flutter/lib/web_ui/lib/src/engine/view_embedder/style_manager.dart +++ b/engine/src/flutter/lib/web_ui/lib/src/engine/view_embedder/style_manager.dart @@ -107,7 +107,7 @@ void applyGlobalCssRulesToSheet( '}' // Hide outline when the flutter-view root element is focused. '$cssSelectorPrefix:focus {' - ' outline: none;' + ' outline: rgb(0, 0, 0) none 0px;' '}', ); diff --git a/engine/src/flutter/lib/web_ui/test/engine/view_embedder/style_manager_test.dart b/engine/src/flutter/lib/web_ui/test/engine/view_embedder/style_manager_test.dart index 363cd98cbca..931f8a77b4b 100644 --- a/engine/src/flutter/lib/web_ui/test/engine/view_embedder/style_manager_test.dart +++ b/engine/src/flutter/lib/web_ui/test/engine/view_embedder/style_manager_test.dart @@ -5,7 +5,6 @@ import 'package:test/bootstrap/browser.dart'; import 'package:test/test.dart'; import 'package:ui/src/engine.dart'; -import 'package:ui/ui_web/src/ui_web.dart' as ui_web; import '../../common/matchers.dart'; @@ -15,29 +14,27 @@ void main() { void doTests() { group('StyleManager', () { - test( - 'attachGlobalStyles hides the outline when focused', - () { - final DomElement flutterViewElement = createDomElement(DomManager.flutterViewTagName); + test('attachGlobalStyles hides the outline when focused', () { + final DomElement flutterViewElement = createDomElement(DomManager.flutterViewTagName); - domDocument.body!.append(flutterViewElement); - StyleManager.attachGlobalStyles( - node: flutterViewElement, - styleId: 'testing', - styleNonce: 'testing', - cssSelectorPrefix: DomManager.flutterViewTagName, - ); - final expected = ui_web.browser.browserEngine == ui_web.BrowserEngine.firefox - ? 'rgb(0, 0, 0) 0px' - : 'rgb(0, 0, 0) none 0px'; - final String got = domWindow.getComputedStyle(flutterViewElement, 'focus').outline; + // Set a tab index so that the element is focusable. + flutterViewElement.tabIndex = 0; - expect(got, expected); - }, - skip: isFirefox - ? 'Skip until we fix the flake on Firefox. See: https://github.com/flutter/flutter/issues/180940' - : null, - ); + domDocument.body!.append(flutterViewElement); + StyleManager.attachGlobalStyles( + node: flutterViewElement, + styleId: 'testing', + styleNonce: 'testing', + cssSelectorPrefix: DomManager.flutterViewTagName, + ); + final expected = isFirefox ? 'rgb(0, 0, 0) 0px' : 'rgb(0, 0, 0) none 0px'; + + // Focus the element. + flutterViewElement.focusWithoutScroll(); + final String got = domWindow.getComputedStyle(flutterViewElement).outline; + + expect(got, expected); + }); test('styleSceneHost', () { expect(() => StyleManager.styleSceneHost(createDomHTMLDivElement()), throwsAssertionError);