Bug 1871540 - Move WebVTT default font-size/writing-mode workaround to videocontrols.css. r=dshin,desktop-theme-reviewers,dao

This allows moving the custom properties outside of the UA stylesheets.

Ideally these variables wouldn't be needed and the cue pseudo would
behave more like ::part(), but for now this does the trick and allows
the following patch to work.

I'll look into simplifying this a bit more.

Differential Revision: https://phabricator.services.mozilla.com/D197146

dom/media/webvtt/vtt.sys.mjs

@@ -596,7 +596,9 @@ class CueStyleBox extends StyleBoxBase {
 
   _applyDefaultStylesOnPseudoBackgroundNode() {
     // most of the properties have been defined in `::cue` in `html.css`, but
-    // there are some css variables we have to set them dynamically.
+    // there are some css properties we have to set them dynamically.
+    // FIXME(emilio): These are observable by content. Ideally the style
+    // attribute will work like for ::part() and we wouldn't need this.
     this.cueDiv.style.setProperty("--cue-font-size", this.fontSize, "important");
     this.cueDiv.style.setProperty("--cue-writing-mode", this._getCueWritingMode(), "important");
   }

layout/style/res/html.css

@@ -769,8 +769,6 @@ video > .caption-box {
   white-space: pre-line;
   background-color: rgba(0, 0, 0, 0.8);
   font: 10px sans-serif;
-  font-size: var(--cue-font-size);
-  writing-mode: var(--cue-writing-mode, inherit);
   overflow-wrap: break-word;
   /* TODO : enable unicode-bidi, right now enable it would cause incorrect
             display direction, maybe related with bug 1558431. */

testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_lr.html.ini

@@ -1,3 +1,3 @@
 [vertical_lr.html]
   expected: FAIL
-  max-asserts: 7
+  max-asserts: 8

testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/bidi/vertical_rl.html.ini

@@ -1,3 +1,3 @@
 [vertical_rl.html]
   expected: FAIL
-  max-asserts: 7
+  max-asserts: 8

testing/web-platform/meta/webvtt/rendering/cues-with-video/processing-model/selectors/cue/vertical_ruby-position.html.ini

@@ -1,3 +1,3 @@
 [vertical_ruby-position.html]
   expected: FAIL
-  max-asserts: 5
+  max-asserts: 8

toolkit/themes/shared/media/videocontrols.css

@@ -584,3 +584,8 @@
   width: 100px;
   height: 100px;
 }
+
+:host::cue {
+  font-size: var(--cue-font-size);
+  writing-mode: var(--cue-writing-mode, inherit);
+}