Affected versions

• 71.0b6
• 72.0a1 (2019-11-01)

Affected platforms

• Windows 10
• [ARM] Windows 10
• Windows 7

Steps to reproduce
* Precondition:

• Enable windows high contrast mode.

1. Launch Firefox and navigate to cnn.com/videos.
2. Play video.
3. Observe video controls.

Expected result

• The video controls are displayed properly without any visual glitches.

Actual result

• Video controls are shown with visual glitches.

Regression range
Will look for a regression ASAP.

Additional notes

• Please see the attachment

Thanks for the report.

This also happens in Microsoft Edge when the Windows high-contrast theme is enabled there, so I think this is, in fact, "High-Contrast Backplates" feature (proposed by & referenced from Edge) working-as-expected. The dark backgrounds behind the controls here are "backplates", and if we didn't draw them, it'd be very hard to see the controls in high-contrast mode, because there's a white-gradient background behind the white video-controls-icons.

(The white-gradient background is actually specified by CNN as a gradient from transparent to currentColor, and CNN intends for currentColor to be black, but that keyword in fact resolves to the forced-color-value of white in high-contrast mode. So if we weren't drawing the backplates, we'd end up with white-controls-on-whiteish-background here, which would mean high-contrast mode would be producing something unusable. This is the issue that backplates are meant to address.)

Having said that: the backplates are a bit "tighter" in Edge, so they look more reasonable & less like artifacts there. There may be some room for improvement/experimentation on that -- let's morph this bug to be about that.

Note for future assignee (who is probably me ;) ):
form controls seemed to have some extra horizontal and vertical visual overflow added to them by virtue of being widgets; I wonder if there's extra visual overflow added elsewhere that we should ignore when backplating?