[@layer] Cascade VTT-embedded style as element-attached style

As per w3c/csswg-drafts#6735: WebVTT-embedded style has the same cascade precedence as the style attribute. Therefore, important WebVTT-embedded style should take precedence over important author layered style. This patch ensures that. Bug: 1095765 Change-Id: I352ff87294235433bcf006e233a2ca7514d4f990 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3273710 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#940808}
ZSX-JOJO · Nov 11, 2021 · 73d41c9 · 73d41c9
1 parent c708b4b
commit 73d41c9
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 3 deletions.
diff --git a/third_party/blink/renderer/core/css/element_rule_collector.cc b/third_party/blink/renderer/core/css/element_rule_collector.cc
@@ -121,6 +121,9 @@ class CascadeLayerSeeker {
 
  private:
   static const CascadeLayerMap* FindLayerMap(const MatchRequest& request) {
+    // VTT embedded style is not in any layer.
+    if (request.vtt_originating_element)
+      return nullptr;
     if (request.scope) {
       return request.scope->ContainingTreeScope()
           .GetScopedStyleResolver()
@@ -477,7 +480,8 @@ void ElementRuleCollector::AppendCSSOMWrapperForRule(
   EnsureRuleList()->emplace_back(css_rule, rule_data->SelectorIndex());
 }
 
-void ElementRuleCollector::SortAndTransferMatchedRules() {
+void ElementRuleCollector::SortAndTransferMatchedRules(
+    bool is_vtt_embedded_style) {
   if (matched_rules_.IsEmpty())
     return;
 
@@ -510,6 +514,7 @@ void ElementRuleCollector::SortAndTransferMatchedRules() {
             .SetValidPropertyFilter(
                 rule_data->GetValidPropertyFilter(matching_ua_rules_))
             .SetLayerOrder(matched_rule.LayerOrder())
+            .SetIsInlineStyle(is_vtt_embedded_style)
             .Build());
   }
 }

diff --git a/third_party/blink/renderer/core/css/element_rule_collector.h b/third_party/blink/renderer/core/css/element_rule_collector.h
@@ -128,7 +128,7 @@ class CORE_EXPORT ElementRuleCollector {
   void CollectMatchingPartPseudoRules(const MatchRequest&,
                                       PartNames&,
                                       bool for_shadow_pseudo);
-  void SortAndTransferMatchedRules();
+  void SortAndTransferMatchedRules(bool is_vtt_embedded_style = false);
   void ClearMatchedRules();
   void AddElementStyleProperties(const CSSPropertyValueSet*,
                                  bool is_cacheable = true,

diff --git a/third_party/blink/renderer/core/css/resolver/style_resolver.cc b/third_party/blink/renderer/core/css/resolver/style_resolver.cc
@@ -526,7 +526,7 @@ static void MatchVTTRules(const Element& element,
         style_sheet_index++;
       }
     }
-    collector.SortAndTransferMatchedRules();
+    collector.SortAndTransferMatchedRules(true /* is_vtt_embedded_style */);
   }
 }
 

diff --git a/...vtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html b/...vtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Embedded Style: Cascade Priority</title>
+<link rel="match" href="embedded_style_cascade_priority-ref.html">
+<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#cascade-sort">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/common/reftest-wait.js"></script>
+<style>
+/* Embedded important style should take precedence over author important style
+   regardless of layers, so the cue color should be green. */
+@layer {
+  ::cue {
+    color: red !important;
+  }
+}
+</style>
+<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+    <source src="/media/white.webm" type="video/webm">
+    <source src="/media/white.mp4" type="video/mp4">
+    <track src="support/embedded_style_cascade_priority_layer.vtt" default>
+</video>
+</html>
diff --git a/...dering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt b/...dering/cues-with-video/processing-model/support/embedded_style_cascade_priority_layer.vtt
@@ -0,0 +1,25 @@
+WEBVTT
+
+NOTE
+opacity: 0.5; should apply.
+color: green; should apply.
+background: green; should apply because multiple STYLE blocks are supported.
+
+STYLE
+::cue {
+    opacity: 0.5;
+}
+::cue {
+    color: green !important;
+}
+
+STYLE
+::cue {
+    background: green;
+}
+
+00:00:00.000 --> 00:00:05.000
+<v Voice1>This <i>is</i> a <b>test</b> subtitle
+
+00:00:00.000 --> 00:00:05.000
+<v Voice2>Here <i>is</i> a <b>second</b> subtitle
-Original file line number
+Diff line change
@@ Expand Up / @@ -526,7 +526,7 @@ static void MatchVTTRules(const Element& element, @@
             style_sheet_index++;
           }
         }
-        collector.SortAndTransferMatchedRules();
+        collector.SortAndTransferMatchedRules(true /* is_vtt_embedded_style */);
       }
     }
@@ Expand Down @@