Changeset 294742 in webkit

Timestamp:

May 24, 2022, 6:08:49 AM (4 years ago)

Author:

Jean-Yves Avenard

Message:

canvas-createPattern-video-modify.html is an intermittent failure
​https://bugs.webkit.org/show_bug.cgi?id=240780
rdar://93731906

Reviewed by Youenn Fablet.

The tests relied on the event "loadeddata" to be fired to check if the first video frame got painted.
However, at present there's no guarantee that a frame would have been painted at the time this event is fired.
This issue is separately tracked in bug 240779

So instead we use the new requestVideoCallbackFrame API which is designed specifically for this case.
We also simplify the existing page, using more modern JS features.

• LayoutTests/fast/canvas/canvas-createPattern-video-loading.html:
• LayoutTests/fast/canvas/canvas-createPattern-video-modify.html:
• LayoutTests/media/utilities.js:

(once):
(fetchWithXHR):
(waitForVideoFrame):
(waitForVideoFrameUntil):

Canonical link: ​https://commits.webkit.org/250910@main

Location:

trunk/LayoutTests

Files:

• fast/canvas/canvas-createPattern-video-loading.html (modified) (4 diffs)
• fast/canvas/canvas-createPattern-video-modify.html (modified) (3 diffs)
• media/utilities.js (modified) (4 diffs)

trunk/LayoutTests/fast/canvas/canvas-createPattern-video-loading.html

@@ -4 +4 @@
     <script src="../../resources/js-test-pre.js"></script>
     <script src="../../media/media-file.js"></script>
+    <script src="../../media/utilities.js"></script>
     <script src="../../resources/platform-helper.js"></script>
 </head>
@@ -33 +34 @@
 
     var video = document.createElement("video");
-    video.addEventListener("loadeddata", loadeddata);
-    video.addEventListener("playing", playing);
 
     shouldBeNull("document.createElement('canvas').getContext('2d').createPattern(video, 'repeat')");
 
+    waitForVideoFrame(video, firstframe);
     video.src = findMediaFile("video", "../../media/content/test");
+
 
     function checkPixels(context, x, y, r, g, b, tolerance)
@@ -64 +65 @@
     }
 
-    function loadeddata()
+    async function firstframe()
     {
         drawImageToCanvasAndCheckPixels();
@@ -70 +71 @@
         video.currentTime = 1;
         video.play();
-    }
-
-    function playing()
-    {
+        await waitForVideoFrameUntil(video, 1);
         video.pause();
 

trunk/LayoutTests/fast/canvas/canvas-createPattern-video-modify.html

@@ -4 +4 @@
     <script src="../../resources/js-test-pre.js"></script>
     <script src="../../media/media-file.js"></script>
+    <script src="../../media/utilities.js"></script>
     <script src="../../resources/platform-helper.js"></script>
 </head>
@@ -12 +13 @@
     var buffer;
     var canvas, context;
-    var modified = false;
     var expectedResults = [
         // Each entry is formatted as [x, y, r, g, b].
@@ -22 +22 @@
 
     var video = document.createElement("video");
-    video.addEventListener("loadeddata", loadeddata);
+
+    waitForVideoFrame(video, firstframe);
     video.src = findMediaFile("video", "../../media/content/test");
 
-    function loadeddata()
+    async function firstframe()
     {
-        if (!modified) {
-            canvas = document.createElement("canvas");
-            canvas.width = 2.5 * video.videoWidth;
-            canvas.height = 2.5 * video.videoHeight;
-            document.body.appendChild(canvas);
+        canvas = document.createElement("canvas");
+        canvas.width = 2.5 * video.videoWidth;
+        canvas.height = 2.5 * video.videoHeight;
+        document.body.appendChild(canvas);
 
-            context = canvas.getContext("2d");
-            context.fillStyle = context.createPattern(video, "repeat");
+        context = canvas.getContext("2d");
+        context.fillStyle = context.createPattern(video, "repeat");
 
-            video.src = findMediaFile("video", "../../media/content/counting");
-            modified = !modified;
-        } else {
-            context.fillRect(0, 0, canvas.width, canvas.height);
+        video.src = findMediaFile("video", "../../media/content/counting");
 
-            expectedResults.forEach(function(element) {
-                checkPixels(context, element[0], element[1], element[2], element[3], element[4], videoCanvasPixelComparisonTolerance());
-            });
+        await waitForVideoFrame(video);
 
-            finishJSTest();
-        }
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        expectedResults.forEach(function(element) {
+            checkPixels(context, element[0], element[1], element[2], element[3], element[4], videoCanvasPixelComparisonTolerance());
+        });
+
+        finishJSTest();
     }
 

trunk/LayoutTests/media/utilities.js

@@ -5 +5 @@
         }, { once: true });
     });
-    if (cb) {
+    if (cb)
         p.then(cb);
-    }
     return p;
 }
@@ -22 +21 @@
     });
 
-    if (onLoadFunction) {
+    if (onLoadFunction)
         p.then(onLoadFunction);
-    }
 
     return p;
@@ -43 +41 @@
     let buffers = {};
     let fetches = [];
-    for (var chunk of chunks) {
+    for (var chunk of chunks)
         fetches.push(fetchWithXHR(prefix + chunk + suffix).then(((c, x) => buffers[c] = x).bind(null, chunk)));
-    }
 
     // Load them in series, as required per spec.
     return Promise.all(fetches).then(() => {
         let rv = Promise.resolve();
-        for (let chunk of chunks) {
+        for (let chunk of chunks)
             rv = rv.then(loadSegment.bind(null, sb, buffers[chunk]));
-        }
         return rv;
     });
@@ -58 +54 @@
 
 const delay = ms => new Promise(res => setTimeout(res, ms));
+
+function waitForVideoFrame(video, cb) {
+    const p = new Promise((resolve) => {
+        video.requestVideoFrameCallback((now, metadata) => resolve(now, metadata));
+    });
+    if (cb)
+        p.then(cb);
+    return p;
+}
+
+function waitForVideoFrameUntil(video, time, cb) {
+    const p = new Promise(resolve => {
+        const callback = ((now, metadata) => {
+            if (metadata.mediaTime >= time) {
+                resolve(now, metadata);
+                return;
+            }
+            video.requestVideoFrameCallback(callback);
+        });
+        video.requestVideoFrameCallback(callback);
+    });
+    if (cb)
+        p.then(cb);
+    return p;
+}