From afa66dc05c733a8f155983ab8f0037119974fff1 Mon Sep 17 00:00:00 2001 From: Sean Monahan Date: Mon, 7 Nov 2022 09:24:42 -0800 Subject: [PATCH] stress-test: disable CSS transitions on injected styles This addresses an issue where Firefox's style recalculation measurement becomes unstable when controls under test have CSS transitions. Specifically, our test injects styles that update the background color of selected controls and many Fluent controls transition the background color for different states like "hover" and "focus". With transitions running Firefox will sometimes include the transition time in the style recalc measurement and sometimes not. Additionally, Chromium browsers never include the transition time in the measurement. Disabling transitions ensures measurement behavior is consistent in Firefox and in alignment with the behavior of Chromium browsers. --- apps/stress-test/src/shared/css/injectStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/stress-test/src/shared/css/injectStyles.ts b/apps/stress-test/src/shared/css/injectStyles.ts index 211e4aa61b80c..c99ca51c0026c 100644 --- a/apps/stress-test/src/shared/css/injectStyles.ts +++ b/apps/stress-test/src/shared/css/injectStyles.ts @@ -158,7 +158,7 @@ export const randomCssFromSelectors = (selectors: string[]): string => { let css = ''; selectors.forEach(selector => { - css += `${selector} { background-color: ${choice(colors)}; }\n`; + css += `${selector} { background-color: ${choice(colors)}; transition-duration: 0ms; }\n`; }); return css;