Bump to Chrome 141

[compulim]

Related to #5239.

Changelog Entry

Changed

• Bumped Chrome in Docker to 141 from 110, in PR #5619, by @compulim

Description

This pull request bump the Chrome used in Web Chat for testing, from version 110 to 141.

There are 1,234 out of 1,473 screenshots failed.

Differences are listed in the following sections. Some differences may need investigation and potentially corrections. And some are good and we should adopt the new screenshots.

Differences (need to investigate)

(Everything done.)

Differences (adopted)

Sub-pixel font rendering

Darker button border

Modernized scroll bar

Scroll position changed for 1 pixel

From __tests__/html2/autoScroll/autoScroll.snap.page.html.

Could be related to decimal place handling.

Bubble border (@2x)

From __tests__/html2/bubble/nub/offset/flipped.html.

Padding in Math error box

From __tests__/html2/markdown/math/layout.3.html.

The red error box is added for testing purpose only. It looks better in Chrome 141.

Math thinner scroll bar

From __tests__/html2/markdown/math/layout.scroll.html.

Chrome 121 supports CSS scrollbar-width: thin.

File attachment preview text-only button size (white-label only)

From __tests__/html2/sendBox/previewBeforeSend/styleOptions.maxHeight.html.

This is actually correct. Chrome 121 supports CSS scrollbar-width: thin and thus, the container is 2 pixels wider.

Squiggle in feedback form

From __tests__/html2/feedbackForm/feedback.form.scroll.html.

Lorem ipsum texts has squiggles. We did not set spellcheck attribute in white-label or Fluent, so it is expected to see squiggles.

Focusable date/time picker

From __tests__/html2/accessibility/adaptiveCard/disabled.inputs.html.

The picker button was not a focusable in Chrome 110. Now it is focusable.

Send box enlarged while completion is shown in (Fluent only)

From __tests__/html2/fluentTheme/completion.html.

Seems related to how Chrome handle line-height in the doppelganger for completion appended as <span>. The completion would cause the send box to be taller by 1 pixel. Fixed in CSS of the test file.

Code block pushed down 1 pixel

From __tests__/html2/part-grouping/copilot.dark.html.

It seems it is related to monospace font spacing and line height changes. Original is padding-block: 12px. To tweak Chrome 141 to looks like Chrome 110, we need padding-block: 11px 13px, which seems overkill.

We are adopting the new monospace padding style.

If using 11px/13px, will looks like below, but we are not adopting an asymmetric padding.

Code block line height (white-label only)

From __tests__/html2/part-grouping/index.html.

With a 14px monospace font, line-height: normal in Chrome 110 was 1.21em or 16.94px. However, in Chrome 141, line-height: normal is 1em or 14px. Adopting the new line height change for white-label.

From __tests__/html2/conversationStartProperties/sendEnUs.html.

<dialog> has darker backdrop

From __tests__/html2/side-by-side/codeblock-dark.navigation.html.

We should set dialog::backdrop to be rgba(0, 0, 0, 0.4) (light theme) and rgba(0, 0, 0, 0.5) (dark theme) to match Fluent UI, however, we are setting it to undefined (--colorTransparentBackground). That means, we are using the shading from user agent stylesheet.

Chrome 110 does not have shading for ::backdrop, but Chrome 141 does have.

<summary> length

From __tests__/html2/part-grouping/copilot.dark.html.

Auto-fit <summary> width matches Fluent UI design so we are adopting it.

Flair animation in Fluent looks taller and better

From __tests__/html2/side-by-side/streaming.dark.html.

anchor-name and position-anchor is supported in Chrome 125.

Icon in pre-chat is gone (Fluent only)

From __tests__/html2/fluentTheme/preChatMessageActivity/default.blue.print.state.html.

Due to bad data in the base64.

Inconsistent RGB/BGR sub-pixel rendering

Chrome sometimes render with RGB/BGR, another times with grayscale. We are disabling RGB/BGR through --disable-lcd-text for consistencies.

Stats before

Stats before modifying the tests:

Note: after re-run, all tests complete successfully.

There are 1,732 tests and 1,473 screenshots (counting PNG files under /__tests__/html2 and /__tests__/__image_snapshots__.)

22 skipped tests are related to speech, where a speech key (not token) is required. They are usually skipped.

For purely font related changes, we can process 1 snapshot every 6 seconds with 2 passes (verify twice). That means, compare 1 snapshot every 3 seconds, including deleting snapshots and rerun test.

Design

Specific Changes

• Bumped to Chrome 141
  • Tried Chromium 141, but different fonts means a lot of time need to compare screenshots
  • Chrome 141 use same font, only differences are sub-pixel in font rendering
  • Need to remove --single-process, otherwise Chrome will fail on execute, possibly argument is removed
    • 124 is okay, >= 133 is not, something changed in-between
• --headless is not quite working
  • We cannot grab #webchat and take screenshot, because we have <dialog> and it will depends on viewport size
  • Instead, we artificially added 139px to window height
  • As we locked down on Chrome version, this number should be good
• toMatchImageSnapshot() will not fail in-place, but fail at done()
  • So we can generate all diff snapshots before the test is actually failed, more-or-less "bail out at infinite vs. bail out at 1"
• All <input type="radio"> must have either id or name
  • Otherwise, they will no longer be grouped despite they are under the same <form>, would fail some tests under /html2/feedbackForm/
• Chrome 135 supports native ES Observable, however offline MockBot is conflicting with it
  • Set window.Observable = undefined in legacy tests to disable native ES Observable
• Disabled RGB/BGR sub-pixel rendering --disable-lcd-text for consistencies
  • Chrome sometimes render with RGB/BGR, another times with grayscale
• Set pixel threshold to 0.05
  • Chrome render SVG slightly different on each run, may also affect border radius

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)