stress-test: disable CSS transitions on injected styles

[spmonahan]

Current Behavior

When controls under test in stress-test have CSS transition styles the style recalculation measurement becomes unreliable in Firefox. Sometimes the measurement includes the transition time (i.e., we add something like 100ms to the style recalc time) and sometimes it does not. Chromium browsers remain stable on this measurement and never measure the transition time.

New Behavior

Transition styles are disabled on any DOM node that matches a style injected by stress-test. This stabilizes Firefox's measurement and aligns it with Chromium so we're measuring the same thing in both engines.

More Details

With transition

Chromium Before

This is taken from Chrome but Edge gives the same results.

Firefox Before

This aligns with Chromium 👍

This does not ☹️

Without transition

Chromium After

Firefox After

Analysis

Measuring style recalc and layout in browsers is somewhat challenging as there isn't an API to query for this information in the browser itself. It seems what is happening in Firefox is that engine has some logic that sometimes splits the transition styles into two frame and sometimes merges (leaves them as?) a single frame. Chromium appears to always have two frames in this situation.

Ideally I think we'd measure the transition styles as it seems more correct to take into account all styles that appear on a given control. However, I've not been able to work out a reliable way to achieve this in a cross-browser way that also takes into account that some controls do not have transition styles. Basically, trying to support transition styles makes style recalc measurements less stable across the board.

Since an important quality of performance measurement tools is consistency and stability of measurements and since we want to make "apples-to-apples" comparisons across browsers as best we can, removing transition styles feels like the correct choice at this time. This change stabilizes Firefox's measurements and ensures we're measuring the same thing in Firefox and Chromium browsers.

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 169e9b94b0cf741102596f106ed726d9402145cc}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit afa66dc:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 169e9b94b0cf741102596f106ed726d9402145cc (build)