Bug 1305732 - part5 : set CSS properties directly on '::cue'. r=heycam,emilio

According to the spec [1], we have to set those CSS properties on the root node, and then this root node would have a child node, background box [2], which would contain all other child nodes.

In our case, the background box is `cueDiv` [3].

In theory, all those properties set on the root node should be inherited by the background box. However, when the background box is a pseudo element `::cue`, they won't be directly inherit from the the background box's parent, inherited styles would acutally come from video instead.

Therefore, we have to directly set these properties on the pseudo element and mark them as `!important` to avoid being overrided by user style script.

[1] https://www.w3.org/TR/webvtt1/#ref-for-list-of-webvtt-node-objects-9
[2] https://www.w3.org/TR/webvtt1/#webvtt-cue-background-box
[3] https://searchfox.org/mozilla-central/rev/11712bd3ce7454923e5931fa92eaf9c01ef35a0a/dom/media/webvtt/vtt.jsm#533-534

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

--HG--
extra : moz-landing-system : lando

dom/media/webvtt/vtt.jsm

@@ -542,9 +542,9 @@ XPCOMUtils.defineLazyPreferenceGetter(this, "DEBUG_LOG",
       // As pseudo element won't inherit the parent div's style, so we have to
       // set the font size explicitly.
       if (supportPseudo) {
-        this.cueDiv.style.setProperty("--cue-font-size", this.fontSize);
+        this._applyDefaultStylesOnPseudoBackgroundNode();
       } else {
-        this._applyNonPseudoCueStyles();
+        this._applyDefaultStylesOnNonPseudoBackgroundNode();
       }
       this._applyDefaultStylesOnRootNode();
     }
@@ -601,7 +601,14 @@ XPCOMUtils.defineLazyPreferenceGetter(this, "DEBUG_LOG",
       return containerBox.height * 0.05 + "px";
     }
 
-    _applyNonPseudoCueStyles() {
+    _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.
+      this.cueDiv.style.setProperty("--cue-font-size", this.fontSize, "important");
+      this.cueDiv.style.setProperty("--cue-writing-mode", this._getCueWritingMode(), "important");
+    }
+
+    _applyDefaultStylesOnNonPseudoBackgroundNode() {
       // If cue div is not a pseudo element, we should set the default css style
       // for it, the reason we need to set these attributes to cueDiv is because
       // if we set background on the root node directly, if would cause filling

layout/style/res/html.css

@@ -773,12 +773,21 @@ video > .caption-box {
   position: relative;
 }
 
-/* ::cue default settings */
+/**
+ * The pseudo element won't inheirt CSS styles from its direct parent, `::cue`
+ * would acutally inherit styles from video because it's video's pseudo element.
+ * Therefore, we have to explicitly set some styles which are aleady defined in
+ * its parent element in vtt.jsm.
+ */
 ::cue {
   color: rgba(255, 255, 255, 1);
   white-space: pre-line;
   background-color: rgba(0, 0, 0, 0.8);
   font: var(--cue-font-size) sans-serif;
+  writing-mode: var(--cue-writing-mode, inherit) !important;
+  overflow-wrap: break-word !important;
+  /* TODO : enable unicode-bidi, right now enable it would cause incorrect
+            display direction, maybe related with bug 1558431. */
 }
 
 /* details & summary */

servo/components/style/properties/longhands/inherited_box.mako.rs

@@ -29,6 +29,7 @@ ${helpers.single_keyword(
     servo_pref="layout.writing-mode.enabled",
     animation_value_type="none",
     spec="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode",
+    flags="APPLIES_TO_CUE",
     servo_restyle_damage="rebuild_and_reflow",
 )}
 

servo/components/style/properties/longhands/inherited_text.mako.rs

@@ -78,6 +78,7 @@ ${helpers.predefined_type(
     "computed::OverflowWrap::Normal",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text/#propdef-overflow-wrap",
+    flags="APPLIES_TO_CUE",
     alias="word-wrap",
     needs_context=False,
     servo_restyle_damage="rebuild_and_reflow",