1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/media-elements/track/track-element/track-webvtt-class-markup.html b/testing/web-platform/tests/html/semantics/embedded-content/media-elements/track/track-element/track-webvtt-class-markup.html
new file mode 100644
index 0000000000..ecc5a57497
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/media-elements/track/track-element/track-webvtt-class-markup.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>Tests cues with class markup &lt;c&gt;.</title>
+<meta name="timeout" content="long">
+<script src="track-helpers.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+check_cues_from_track("resources/class.vtt", function(track) {
+    assert_equals(track.cues.length, 3);
+
+    var children = [
+        { type: "span", style: { className: "black" },
+            value: [ { type: "text", value: "Bear is Coming!!!!!" } ] }
+    ];
+    assert_cue_fragment(track.cues[0], children);
+
+    children = [
+        { type: "span", style: { className: "green" },
+            value: [ { type: "text", value: "I said Bear is coming!!!!" } ] }
+    ];
+    assert_cue_fragment(track.cues[1], children);
+
+    children = [
+        { type: "text", value: "I said " },
+        { type: "span", style: { className: "red uppercase" },
+            value: [ { type: "text", value: "Bear is coming now" } ] },
+        { type: "text", value: "!!!!" }
+    ];
+    assert_cue_fragment(track.cues[2], children);
+});
+
+check_cues_from_track("resources/class-bad.vtt", function(track) {
+    assert_equals(track.cues.length, 3);
+
+    var children = [
+        { type: "span", value: [ { type: "text", value: "Bear is Coming!!!!!" } ] },
+        { type: "text", value: "\nThe space signified an annotation start." }
+    ];
+    assert_cue_fragment(track.cues[0], children);
+
+    children = [
+        { type: "span", style: { className: "red&large" },
+            value: [ { type: "text", value: "I said Bear is coming!!!!" } ] },
+        { type: "text", value: "\nProbably should only allow characters that CSS allows in class names." }
+    ];
+    assert_cue_fragment(track.cues[1], children);
+
+    children = [
+        { type: "text", value: "I said " },
+        { type: "span", style: { className: "9red upper+case" },
+            value: [ { type: "text", value: "Bear is coming now" } ] },
+        { type: "text", value: "!!!!\nProbably should only allow characters that CSS allows in class names." }
+    ];
+    assert_cue_fragment(track.cues[2], children);
+});
+</script>
+\ No newline at end of file