WebKit export: Improve web platform test webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html (#53817)

danae404 · web-flow · commit 6621a1e235bb · 2025-07-17T19:40:41.000-07:00
https://bugs.webkit.org/show_bug.cgi?id=295996
diff --git a/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html b/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition-ref.html
@@ -1,14 +1,8 @@
 <!DOCTYPE html>
+<html class="reftest-wait">
 <title>Reference for WebVTT rendering, cue reposition after enabling controls</title>
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
-.video {
-    display: inline-block;
-    outline: solid;
-    width: 320px;
-    height: 240px;
-    position: relative
-}
 video {
     position: absolute;
     width:320px;
@@ -27,9 +21,32 @@
     color: green;
     font-size: 50px;
 }
+
+.media-container {
+    display: inline-block;
+    position: relative;
+    border: solid black 1px;
+    border-box: content-box;
+    width: 320px;
+    height: 240px;
+}
 </style>
-<video controls>
-    <source src="/media/white.webm" type="video/webm">
-    <source src="/media/white.mp4" type="video/mp4">
-</video>
-<div class="video"><span class="cue"><span>Foo</span></span></div>
+<div class="media-container">
+    <span class="cue"><span>Foo</span></span>
+    <video controls autoplay onplaying="runTest()">
+        <source src="/media/sound_5.mp3" type="audio/mp3">
+        <source src="/media/sound_5.oga" type="audio/ogg">
+    </video>
+</div>
+<script src="/common/reftest-wait.js"></script>
+<script>
+    async function runTest() {
+        let media = document.getElementsByTagName("video")[0];
+        media.pause();
+        media.currentTime = 0;
+        media.addEventListener("seeked", (event) => {
+            takeScreenshot();
+        });
+    }
+</script>
+</html>
diff --git a/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html b/webvtt/rendering/cues-with-video/processing-model/enable_controls_reposition.html
@@ -5,7 +5,6 @@
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
 video {
-  outline: solid;
   width: 320px;
   height: 240px;
 }
@@ -14,19 +13,31 @@
   font-size: 50px;
   color: green;
 }
+.media-container {
+    display: inline-block;
+    position: relative;
+    border: solid black 1px;
+    border-box: content-box;
+    width: 320px;
+    height: 240px;
+}
 </style>
-<script src="/common/reftest-wait.js"></script>
-<video autoplay onplaying="this.onplaying = null;
-                           this.pause();
-                           this.currentTime = 0;
-                           setTimeout(function(video){
-                             video.controls = true;
-                           }, 100, this);
-                           takeScreenshotDelayed(1000);">
-    <source src="/media/white.webm" type="video/webm">
-    <source src="/media/white.mp4" type="video/mp4">
-    <track src=support/foo.vtt>
-    <script>
-    document.getElementsByTagName('track')[0].track.mode = 'showing';
-    </script>
+<div class="media-container">
+<video controls autoplay onplaying="runTest()">
+    <source src="/media/sound_5.mp3" type="audio/mp3">
+    <source src="/media/sound_5.oga" type="audio/ogg">
+    <track src="support/foo.vtt">
 </video>
+</div>
+<script src="/common/reftest-wait.js"></script>
+<script>
+async function runTest() {
+    document.getElementsByTagName("track")[0].track.mode = "showing";
+    let media = document.getElementsByTagName("video")[0];
+    media.pause();
+    media.currentTime = 0;
+    media.addEventListener("seeked", (event) => {
+        takeScreenshot();
+    });
+}
+</script>
