[@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}
web-platform-tests · Nov 11, 2021 · 20d6038 · 20d6038
1 parent ecde07f
commit 20d6038
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority_layer.html b/webvtt/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