Bug 1552081 - part2. Modify test 'test_webvtt_update_display_after_adding_or_removing_cue.html'. r=jya

Now adding or removing cue would trigger processing cues only when media element's `show-poster` flag is false, so we have to modify the test to reset the flag in order to test the correct behavior.

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

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

dom/media/test/test_webvtt_update_display_after_adding_or_removing_cue.html

@@ -10,12 +10,15 @@
 <script class="testbody" type="text/javascript">
 /**
  * This test is used to ensure that we will update cue display immediately after
- * adding or removing cue, even if the video hasn't started yet. In this test,
- * we start with adding a cue [0:5] to video, which should be showed in the
- * beginning, and then remove the cue later.
+ * adding or removing cue after video starts, because `show-poster` flag would be
+ * reset after video starts, which allows us to process cues instead of showing
+ * a poster. In this test, we start with adding a cue [0:5] to video, which
+ * should be showed in the beginning, and then remove the cue later. The cue
+ * should be removed immediately, not show
  */
 async function startTest() {
   const video = await createVideo();
+  await startVideo(video);
 
   info(`cue should be showed immediately after it was added.`);
   const cue = createCueAndAddCueToVideo(video);
@@ -23,10 +26,9 @@ async function startTest() {
 
   info(`cue should be hid immediately after it was removed.`);
   removeCueFromVideo(cue, video);
-  checkIfCueHides(cue);
+  checkIfCueHides(cue, video);
 
-  removeNodeAndSource(video);
-  SimpleTest.finish();
+  endTestAndClearVideo(video);
 }
 
 SimpleTest.waitForExplicitFinish();
@@ -46,6 +48,12 @@ async function createVideo() {
   return video;
 }
 
+async function startVideo(video) {
+  info(`start play video`);
+  const played = video && await video.play().then(() => true, () => false);
+  ok(played, "video has started playing");
+}
+
 function createCueAndAddCueToVideo(video) {
   let track = video.addTextTrack("subtitles");
   track.mode = "showing";
@@ -60,6 +68,7 @@ function removeCueFromVideo(cue, video) {
 }
 
 async function waitUntilCueShows(cue) {
+  info(`wait until cue shows`);
   // cue has not been showed yet.
   cue = SpecialPowers.wrap(cue);
   if (!cue.getActive) {
@@ -68,8 +77,15 @@ async function waitUntilCueShows(cue) {
   ok(cue.getActive, `cue has been showed,`);
 }
 
-function checkIfCueHides(cue) {
+function checkIfCueHides(cue, video) {
   ok(!SpecialPowers.wrap(cue).getActive, `cue has been hidden.`);
+  ok(video.currentTime < cue.endTime,
+    `cue is removed at ${video.currentTime}s before reaching its endtime.`);
+}
+
+function endTestAndClearVideo(video) {
+  removeNodeAndSource(video);
+  SimpleTest.finish();
 }
 
 </script>