WebVTT rendering tests fail widely because of UA-specific cue backgrounds

[foolip]

https://wpt.fyi/results/webvtt/rendering/cues-with-video/processing-model has widespread failures and only a few tests passing in all browsers.

A lot of Chrome, Edge and Safari failures appear to be because of UA-specific cue backgrounds. For Chromium, https://issues.chromium.org/issues/40652084 tracks the problem and I think this is the code:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/modules/media_controls/resources/mediaControls.css;l=1282-1287;drc=f235aed1f0b36e760cd1968e8077927d69cf3bd4

To show the problem visually, here's Chrome and Safari's current rendering of basic.html:

Clearly these backgrounds were added deliberately for readability. Is there some other way we can make this test suite work than requiring browsers to remove margins by default?

cc @zcorpan

[zcorpan]

The rendering that the tests expect is required by the WebVTT spec, so we should fix the spec if we want to allow such padding.

Possibly the tests could make the background transparent and thus not test the details of the background box?

[foolip]

I assume that the padding can also affect the positioning of the cues, but yeah, if the spec allowed for certain variations in default style, tests could do a reset to avoid the problem. I tried removing the padding in basic.html but that doesn't work because padding isn't one of the properties listed in https://w3c.github.io/webvtt/#the-cue-pseudo-element. (There's probably some special code to still make it work from the UA style sheet.)

We could perhaps consider allowing padding for ::cue as part of the solution.

Meanwhile, I'm checking what would happen if we remove the padding in https://chromium-review.googlesource.com/c/chromium/src/+/5563687.