Bug 1521964 - Add cloneElementVisually regression tests. r=jya

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

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

dom/media/test/cloneElementVisually_helpers.js

@@ -0,0 +1,223 @@
+const TEST_VIDEO_1 = "http://mochi.test:8888/tests/dom/media/test/bipbop_225w_175kbps.mp4";
+const TEST_VIDEO_2 = "http://mochi.test:8888/tests/dom/media/test/pixel_aspect_ratio.mp4";
+const LONG_VIDEO = "http://mochi.test:8888/tests/dom/media/test/gizmo.mp4";
+
+/**
+ * Ensure that the original <video> is prepped and ready to play
+ * before starting any other tests.
+ */
+async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      [ "media.test.video-suspend", true ],
+      [ "media.suspend-bkgnd-video.enabled", true ],
+      [ "media.suspend-bkgnd-video.delay-ms", 500 ],
+      [ "media.dormant-on-pause-timeout-ms", 0 ],
+    ],
+  });
+
+  let originalVideo = document.getElementById("original");
+  await setVideoSrc(originalVideo, TEST_VIDEO_1);
+}
+
+/**
+ * Given a canvas, as well as a width and height of something to be
+ * blitted onto that canvas, makes any necessary adjustments to the
+ * canvas to work with the current display resolution.
+ *
+ * @param canvas (<canvas> element)
+ *        The canvas to be adjusted.
+ * @param width (int)
+ *        The width of the image to be blitted.
+ * @param height (int)
+ *        The height of the image to be blitted.
+ * @return CanvasRenderingContext2D (SpecialPowers wrapper)
+ */
+function getWrappedScaledCanvasContext(canvas, width, height) {
+  let devRatio = window.devicePixelRatio || 1;
+  let ctx = SpecialPowers.wrap(canvas.getContext("2d"));
+  let backingRatio = ctx.webkitBackingStorePixelRatio || 1;
+
+  let ratio = 1;
+  ratio = devRatio / backingRatio;
+  canvas.width = ratio * width;
+  canvas.height = ratio * height;
+  canvas.style.width = width + "px";
+  canvas.style.height = height + "px";
+  ctx.scale(ratio, ratio);
+
+  return ctx;
+}
+
+/**
+ * Given a <video> element in the DOM, figures out its location, and captures
+ * a snapshot of what it's currently presenting.
+ *
+ * @param video (<video> element)
+ * @return ImageData (SpecialPowers wrapper)
+ */
+function captureFrameImageData(video) {
+  // Flush layout first, just in case the decoder has recently
+  // updated the dimensions of the video.
+  let rect = video.getBoundingClientRect();
+
+  let width = video.videoWidth;
+  let height = video.videoHeight;
+
+  let canvas = document.createElement("canvas");
+  let ctx = getWrappedScaledCanvasContext(canvas, width, height);
+  ctx.drawWindow(window, rect.left, rect.top, width, height, "rgb(0,0,0)");
+
+  return ctx.getImageData(0, 0, width, height);
+}
+
+/**
+ * Given two <video> elements, captures snapshots of what they're currently
+ * displaying, and asserts that they're identical.
+ *
+ * @param video1 (<video> element)
+ *        A video element to compare against.
+ * @param video2 (<video> element)
+ *        A video to compare with video1.
+ * @return Promise
+ * @resolves
+ *        Resolves as true if the two videos match.
+ */
+async function assertVideosMatch(video1, video2) {
+  let video1Frame = captureFrameImageData(video1);
+  let video2Frame = captureFrameImageData(video2);
+
+  let left = document.getElementById("left");
+  let leftCtx = getWrappedScaledCanvasContext(left, video1Frame.width, video1Frame.height);
+  leftCtx.putImageData(video1Frame, 0, 0);
+
+  let right = document.getElementById("right");
+  let rightCtx = getWrappedScaledCanvasContext(right, video2Frame.width, video2Frame.height);
+  rightCtx.putImageData(video2Frame, 0, 0);
+
+  if (video1Frame.data.length != video2Frame.data.length) {
+    return false;
+  }
+
+  let leftDataURL = left.toDataURL();
+  let rightDataURL = right.toDataURL();
+
+  if (leftDataURL != rightDataURL) {
+    dump("Left frame: " + leftDataURL + "\n\n");
+    dump("Right frame: " + rightDataURL + "\n\n");
+
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Testing helper function that constructs a node clone of a video,
+ * injects it into the DOM, and then runs an async testing function.
+ * This also does the work of removing the clone before resolving.
+ *
+ * @param video (<video> element)
+ *        The video to clone the node from.
+ * @param asyncFn (async function)
+ *        A test function that will be passed the new clone as its
+ *        only argument.
+ * @return Promise
+ * @resolves
+ *        When the asyncFn resolves and the clone has been removed
+ *        from the DOM.
+ */
+async function withNewClone(video, asyncFn) {
+  let clone = video.cloneNode();
+  clone.id = "clone";
+  clone.src = "";
+  let content = document.getElementById("content");
+  content.appendChild(clone);
+
+  try {
+    await asyncFn(clone);
+  } finally {
+    clone.remove();
+  }
+}
+
+/**
+ * Sets the src on a video and waits until its ready.
+ *
+ * @param video (<video> element)
+ *        The video to set the src on.
+ * @param src (string)
+ *        The URL to set as the source on a video.
+ * @return Promise
+ * @resolves
+ *        When the video fires the "canplay" event.
+ */
+async function setVideoSrc(video, src) {
+  let promiseReady = waitForEventOnce(video, "canplay");
+  video.src = src;
+  await promiseReady;
+}
+
+/**
+ * Returns a Promise once target emits a particular event
+ * once.
+ *
+ * @param target (DOM node)
+ *        The target to monitor for the event.
+ * @param event (string)
+ *        The name of the event to wait for.
+ * @return Promise
+ * @resolves
+ *        When the event fires, and resolves to the event.
+ */
+function waitForEventOnce(target, event) {
+  return new Promise(resolve => {
+    target.addEventListener(event, resolve, { once: true });
+  });
+}
+
+/**
+ * Polls the video debug data as a hacky way of knowing when
+ * when the decoders have shut down.
+ *
+ * @param video (<video> element)
+ * @return Promise
+ * @resolves
+ *        When the decoder has shut down.
+ */
+async function waitForShutdownDecoder(video) {
+  await SimpleTest.promiseWaitForCondition(async () => {
+    let readerData = SpecialPowers.wrap(video).mozDebugReaderData;
+    return readerData.includes(": shutdown");
+  }, "Video decoder should eventually shut down.");
+}
+
+/**
+ * Ensures that both hiding and pausing the video causes the
+ * video to suspend and make dormant its decoders, respectively.
+ *
+ * @param video (<video element)
+ */
+async function ensureVideoSuspendable(video) {
+  video = SpecialPowers.wrap(video);
+
+  ok(!video.hasSuspendTaint(), "Should be suspendable");
+
+  // First, we'll simulate putting the video in the background by
+  // making it invisible.
+  let suspendPromise = waitForEventOnce(video, "mozentervideosuspend");
+  video.setVisible(false);
+  await suspendPromise;
+  ok(true, "Suspended after the video was made invisible.");
+  video.setVisible(true)
+
+  ok(!video.hasSuspendTaint(), "Should still be suspendable.");
+
+  // Next, we'll pause the video.
+  await video.pause();
+  await waitForShutdownDecoder(video);
+  ok(true, "Shutdown decoder after the video was paused.");
+  await video.play();
+}
+
+

dom/media/test/mochitest.ini

@@ -424,6 +424,7 @@ support-files =
   chained-video.ogv
   chained-video.ogv^headers^
   chromeHelper.js
+  cloneElementVisually_helpers.js
   contentType.sjs
   detodos.opus
   detodos.opus^headers^
@@ -1328,3 +1329,17 @@ skip-if = toolkit != 'android' || android_version < '18'
 tags = hls
 
 [test_bug1431810_opus_downmix_to_mono.html]
+
+[test_cloneElementVisually_paused.html]
+skip-if = toolkit == 'android' # Visually cloning is only supported on Desktop for now.
+tags = cloneelementvisually
+[test_cloneElementVisually_mediastream.html]
+skip-if = toolkit == 'android' # Visually cloning is only supported on Desktop for now.
+tags = cloneelementvisually
+[test_cloneElementVisually_resource_change.html]
+skip-if = toolkit == 'android' # Visually cloning is only supported on Desktop for now.
+tags = cloneelementvisually
+[test_cloneElementVisually_no_suspend.html]
+skip-if = toolkit == 'android' # Visually cloning is only supported on Desktop for now.
+tags = cloneelementvisually
+

dom/media/test/test_cloneElementVisually_mediastream.html

@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test cloneElementVisually</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="https://example.com:443/tests/dom/media/test/cloneElementVisually_helpers.js"></script>
+  <script src="/tests/SimpleTest/AddTask.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<div id="content">
+  <h1>Original</h1>
+  <video id="original"></video>
+  <h1>MediaStream</h1>
+  <video id="streamTarget"></video>
+  <h1>Clone</h1>
+</div>
+<div id="results">
+  <h1>Results</h1>
+  <canvas id="left"></canvas>
+  <canvas id="right"></canvas>
+</div>
+
+<script type="application/javascript">
+
+/**
+ * Test that we can clone a video that is playing a MediaStream.
+ */
+add_task(async () => {
+  await setup();
+
+  let originalVideo = document.getElementById("original");
+  let stream = originalVideo.mozCaptureStream();
+  let streamTarget = document.getElementById("streamTarget");
+  originalVideo.setAttribute("loop", true);
+  let playingPromise = waitForEventOnce(originalVideo, "playing");
+  await originalVideo.play();
+  await playingPromise;
+
+  streamTarget.srcObject = stream;
+  playingPromise = waitForEventOnce(streamTarget, "playing");
+  await streamTarget.play();
+  await playingPromise
+
+  await withNewClone(originalVideo, async clone => {
+    SpecialPowers.wrap(streamTarget).cloneElementVisually(clone);
+
+    // Waiting for the original and stream target videos to send
+    // timeupdate events seems to be sufficient to ensure that the
+    // stream target video is actually showing some frames.
+    await Promise.all([
+      waitForEventOnce(originalVideo, "timeupdate"),
+      waitForEventOnce(streamTarget, "timeupdate"),
+    ]);
+
+    originalVideo.pause();
+    await waitForEventOnce(originalVideo, "pause");
+
+    ok(await assertVideosMatch(streamTarget, clone),
+       "Should match MediaStream");
+  });
+
+  // Capturing a stream from a video "taints" it which prevents testing
+  // shutdown decoder behaviour. To avoid interfering with future tests,
+  // we replace the video.
+  let newVideo = originalVideo.cloneNode();
+  originalVideo.parentNode.replaceChild(newVideo, originalVideo);
+});
+
+</script>
+
+</body>
+</html>

dom/media/test/test_cloneElementVisually_no_suspend.html

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test cloneElementVisually</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="https://example.com:443/tests/dom/media/test/cloneElementVisually_helpers.js"></script>
+  <script src="/tests/SimpleTest/AddTask.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<div id="content">
+  <h1>Original</h1>
+  <video id="original"></video>
+  <h1>MediaStream</h1>
+  <video id="streamTarget"></video>
+  <h1>Clone</h1>
+</div>
+<div id="results">
+  <h1>Results</h1>
+  <canvas id="left"></canvas>
+  <canvas id="right"></canvas>
+</div>
+
+<script type="application/javascript">
+
+/**
+ * Tests that cloning a video prevents the decoder from being suspended
+ * if the original video stops being visible.
+ */
+add_task(async () => {
+  await setup();
+
+  let originalVideo = document.getElementById("original");
+  await setVideoSrc(originalVideo, LONG_VIDEO);
+
+  await originalVideo.play();
+
+  // Ensure that hiding and pausing this video will cause us to
+  // try suspending it.
+  await ensureVideoSuspendable(originalVideo);
+
+  await withNewClone(originalVideo, async clone => {
+    SpecialPowers.wrap(originalVideo).cloneElementVisually(clone);
+
+    // Go back to the beginning of the video to give us enough time to
+    // fail to suspend the video when it's being cloned before the
+    // video ends.
+    originalVideo.removeAttribute("loop");
+    originalVideo.currentTime = 0;
+    await waitForEventOnce(originalVideo, "seeked");
+
+    let suspendTimerFired = false;
+
+    let listener = () => {
+      suspendTimerFired = true;
+    }
+    originalVideo.addEventListener("mozstartvideosuspendtimer", listener);
+    originalVideo.setVisible(false);
+
+    await waitForEventOnce(originalVideo, "ended");
+
+    originalVideo.removeEventListener("mozstartvideosuspendtimer", listener);
+
+    ok(!suspendTimerFired,
+       "mozstartvideosuspendtimer should not have fired.");
+
+    originalVideo.setVisible(true);
+  });
+
+  await originalVideo.play();
+
+  // With the clone gone, the original video should be able to suspend now.
+  await ensureVideoSuspendable(originalVideo);
+
+  await setVideoSrc(originalVideo, TEST_VIDEO_1);
+});
+
+</script>
+
+</body>
+</html>

dom/media/test/test_cloneElementVisually_paused.html

@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test cloneElementVisually</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="https://example.com:443/tests/dom/media/test/cloneElementVisually_helpers.js"></script>
+  <script src="/tests/SimpleTest/AddTask.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<div id="content">
+  <h1>Original</h1>
+  <video id="original"></video>
+  <h1>Clone</h1>
+</div>
+<div id="results">
+  <h1>Results</h1>
+  <canvas id="left"></canvas>
+  <canvas id="right"></canvas>
+</div>
+
+<script type="application/javascript">
+
+/**
+ * Test that when we start cloning a paused video, the clone displays
+ * the first paused frame.
+ */
+add_task(async () => {
+  await setup();
+
+  let originalVideo = document.getElementById("original");
+  await withNewClone(originalVideo, async clone => {
+    SpecialPowers.wrap(originalVideo).cloneElementVisually(clone);
+
+    ok(await assertVideosMatch(originalVideo, clone),
+       "Initial paused frame should match.");
+  });
+});
+
+</script>
+
+</body>
+</html>

dom/media/test/test_cloneElementVisually_resource_change.html

@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test cloneElementVisually</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="https://example.com:443/tests/dom/media/test/cloneElementVisually_helpers.js"></script>
+  <script src="/tests/SimpleTest/AddTask.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<div id="content">
+  <h1>Original</h1>
+  <video id="original"></video>
+  <h1>MediaStream</h1>
+  <video id="streamTarget"></video>
+  <h1>Clone</h1>
+</div>
+<div id="results">
+  <h1>Results</h1>
+  <canvas id="left"></canvas>
+  <canvas id="right"></canvas>
+</div>
+
+<script type="application/javascript">
+
+/**
+ * Tests that cloning survives changes to the underlying video resource.
+ */
+add_task(async () => {
+  await setup();
+
+  let originalVideo = document.getElementById("original");
+  originalVideo.setAttribute("loop", true);
+  await originalVideo.play();
+
+  await withNewClone(originalVideo, async clone => {
+    SpecialPowers.wrap(originalVideo).cloneElementVisually(clone);
+
+    await waitForEventOnce(originalVideo, "timeupdate");
+
+    originalVideo.pause();
+    await waitForEventOnce(originalVideo, "pause");
+
+    ok(await assertVideosMatch(originalVideo, clone),
+       "Initial video should match.");
+
+    await setVideoSrc(originalVideo, TEST_VIDEO_2);
+
+    await originalVideo.play();
+    await waitForEventOnce(originalVideo, "timeupdate");
+
+    originalVideo.pause();
+    await waitForEventOnce(originalVideo, "pause");
+
+    ok(await assertVideosMatch(originalVideo, clone),
+       "New video should match.");
+  });
+
+  await setVideoSrc(originalVideo, TEST_VIDEO_1);
+});
+
+</script>
+
+</body>
+</html>