fast/mediastream/video-srcObject-set-twice.html is flaky

https://bugs.webkit.org/show_bug.cgi?id=258851
rdar://111738593

Reviewed by Philippe Normand.

When taking a snapshot, we sometimes do not see the video element.
This might be related to rendering taking some time.
We replace the 500 ms timer by calling testRunner.takeViewPortSnapshot and checking the result before calling notifyDone.
If the result is not as expected, we wait for the next frame to retry.
We add console logs in case we need to do some additional debugging from bot results.

* LayoutTests/fast/mediastream/video-srcObject-set-twice.html:

Canonical link: https://commits.webkit.org/265767@main

LayoutTests/fast/mediastream/video-srcObject-set-twice.html

@@ -1,12 +1,88 @@
+<!-- webkit-test-runner [ dumpJSConsoleLogInStdErr=true ] -->
 <div>
 <canvas id="canvas1" width=100 height=100></canvas>
 <canvas id="canvas2" width=100 height=100></canvas>
 <br>
 <video id="video" width=100 height=100 autoplay playsinline></video>
+<br>
+<image id='image'></image>
 <script>
 if (window.testRunner)
     testRunner.waitUntilDone();
 
+function getPixel(x, y, canvas, data)
+{
+    const position = 4 * (x * canvas.width + y);
+    return {r: data[position], g: data[position+1], b: data[position+2]};
+}
+
+function isPixelGreen(x, y, canvas, data)
+{
+   const pixel = getPixel(x, y, canvas, data);
+   return pixel.r === 0 && pixel.g === 128 && pixel.b === 0;
+}
+
+function isPixelWhite(x, y, canvas, data)
+{
+   const pixel = getPixel(x, y, canvas, data);
+   return pixel.r === 255 && pixel.g === 255 && pixel.b === 255;
+}
+
+async function validateSnapshot()
+{
+console.log("validateSnapshot-1 ");
+    if (!window.testRunner)
+        return true;
+    const dataURL = await new Promise(resolve => testRunner.takeViewPortSnapshot(resolve));
+
+    const loadPromise = new Promise((resolve, reject) => {
+        image.onload = resolve;
+        image.onerror = reject;
+        setTimeout(() => reject("image load timed out"), 2000);
+    });
+    image.src = dataURL;
+    await loadPromise;
+console.log("validateSnapshot0 ");
+
+    const canvas = document.createElement("canvas");
+    canvas.width = image.width;
+    canvas.height = image.height;
+    canvas.getContext('2d').drawImage(image, 0, 0);
+    const data = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;
+
+console.log("validateSnapshot1 ");
+
+    // We inspect the vertial line at pixel 50. We should get white, then green, then white, then green, then white.
+    let i = 0;
+
+console.log("validateSnapshot2 " + i);
+    if (!isPixelWhite(i, 50, canvas, data))
+        return false;
+    while (isPixelWhite(++i, 50, canvas, data)) { };
+
+console.log("validateSnapshot3 " + i);
+    if (!isPixelGreen(i, 50, canvas, data))
+        return false;
+    while (isPixelGreen(++i, 50, canvas, data)) { };
+
+console.log("validateSnapshot4 " + i);
+    if (!isPixelWhite(i, 50, canvas, data))
+        return false;
+    while (isPixelWhite(++i, 50, canvas, data)) { };
+
+console.log("validateSnapshot5 " + i);
+    if (!isPixelGreen(i, 50, canvas, data))
+        return false;
+    while (isPixelGreen(++i, 50, canvas, data)) { };
+
+console.log("validateSnapshot6 " + i);
+    if (!isPixelWhite(i, 50, canvas, data))
+        return false;
+
+console.log("validateSnapshot7 " + i);
+    return true;
+}
+
 async function test()
 {
      const context1 = canvas1.getContext('2d');
@@ -28,8 +104,17 @@
     }, 100);
     video.srcObject = canvas2.captureStream();
     await video.play();
-    await new Promise(resolve => setTimeout(resolve, 500));
 
+    let counter = 0;
+    let result =  false;
+    while (counter++ < 150 && !result) {
+        await new Promise(resolve => video.requestVideoFrameCallback(resolve));
+        try {
+            result = await validateSnapshot();
+        } catch (e) {
+        }
+    }
+    image.parentNode.removeChild(image);
     if (window.testRunner)
         testRunner.notifyDone();
 }