track-webvtt-class-markup.html (2131B)
1 <!DOCTYPE html> 2 <title>Tests cues with class markup <c>.</title> 3 <meta name="timeout" content="long"> 4 <script src="track-helpers.js"></script> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script> 8 check_cues_from_track("resources/class.vtt", function(track) { 9 assert_equals(track.cues.length, 3); 10 11 var children = [ 12 { type: "span", style: { className: "black" }, 13 value: [ { type: "text", value: "Bear is Coming!!!!!" } ] } 14 ]; 15 assert_cue_fragment(track.cues[0], children); 16 17 children = [ 18 { type: "span", style: { className: "green" }, 19 value: [ { type: "text", value: "I said Bear is coming!!!!" } ] } 20 ]; 21 assert_cue_fragment(track.cues[1], children); 22 23 children = [ 24 { type: "text", value: "I said " }, 25 { type: "span", style: { className: "red uppercase" }, 26 value: [ { type: "text", value: "Bear is coming now" } ] }, 27 { type: "text", value: "!!!!" } 28 ]; 29 assert_cue_fragment(track.cues[2], children); 30 }); 31 32 check_cues_from_track("resources/class-bad.vtt", function(track) { 33 assert_equals(track.cues.length, 3); 34 35 var children = [ 36 { type: "span", value: [ { type: "text", value: "Bear is Coming!!!!!" } ] }, 37 { type: "text", value: "\nThe space signified an annotation start." } 38 ]; 39 assert_cue_fragment(track.cues[0], children); 40 41 children = [ 42 { type: "span", style: { className: "red&large" }, 43 value: [ { type: "text", value: "I said Bear is coming!!!!" } ] }, 44 { type: "text", value: "\nProbably should only allow characters that CSS allows in class names." } 45 ]; 46 assert_cue_fragment(track.cues[1], children); 47 48 children = [ 49 { type: "text", value: "I said " }, 50 { type: "span", style: { className: "9red upper+case" }, 51 value: [ { type: "text", value: "Bear is coming now" } ] }, 52 { type: "text", value: "!!!!\nProbably should only allow characters that CSS allows in class names." } 53 ]; 54 assert_cue_fragment(track.cues[2], children); 55 }); 56 </script>