Skip to content

Commit

Permalink
stress-test: disable CSS transitions on injected styles (#25559)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
spmonahan authored Nov 8, 2022
1 parent d8dec99 commit 44b7c06
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion apps/stress-test/src/shared/css/injectStyles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 44b7c06

Please sign in to comment.