dom/canvas/test/test_capture.html

   1 <!DOCTYPE HTML>
   2 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   3
   4 <title>Canvas2D test: CaptureStream()</title>
   5
   6 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7 <script src="captureStream_common.js"></script>
   8 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   9 <body>
  10 <script>
  11 SimpleTest.waitForExplicitFinish();
  12 SimpleTest.requestFlakyTimeout("Ensuring nothing happens until timing out with good margin");
  13
  14 // CaptureStreamTestHelper holding utility test functions.
  15 const h = new CaptureStreamTestHelper2D();
  16 // Canvas element captured by streams.
  17 const c = h.createAndAppendElement('canvas', 'c');
  18 // Video element with captureStream stream in automatic mode.
  19 const vauto = h.createAndAppendElement('video', 'vauto');
  20 // Video element with captureStream stream in manual (fps 0) mode.
  21 const vmanual = h.createAndAppendElement('video', 'vmanual');
  22 // Video element with captureStream stream with fixed frame rate.
  23 const vrate = h.createAndAppendElement('video', 'vrate');
  24
  25 async function checkDrawColorInitialRed() {
  26   info("Checking that all video elements become red when initiated just after the first drawColor(red).");
  27
  28   h.drawColor(c, h.red);
  29
  30   vauto.srcObject = c.captureStream();
  31   vmanual.srcObject = c.captureStream(0);
  32   vrate.srcObject = c.captureStream(10);
  33
  34   ok(h.isPixel(h.getPixel(vauto), h.blackTransparent, 0),
  35      "vauto should not be drawn to before stable state");
  36   ok(h.isPixel(h.getPixel(vrate), h.blackTransparent, 0),
  37      "vrate should not be drawn to before stable state");
  38   ok(h.isPixel(h.getPixel(vmanual), h.blackTransparent, 0),
  39      "vmanual should not be drawn to before stable state");
  40
  41   await h.pixelMustBecome(vauto, h.red, {
  42     infoString: "should become red automatically",
  43   });
  44   await h.pixelMustBecome(vrate, h.red, {
  45     infoString: "should become red automatically",
  46   });
  47   await h.pixelMustBecome(vmanual, h.red, {
  48     infoString: "should become red when we get to stable state (first frame)",
  49   });
  50 }
  51
  52 async function checkDrawColorGreen() {
  53   info("Checking that drawing green propagates properly to video elements.");
  54
  55   const drawing = h.startDrawing(() => h.drawColor(c, h.green));
  56
  57   try {
  58     await h.pixelMustBecome(vauto, h.green, {
  59       infoString: "should become green automatically",
  60     });
  61     await h.pixelMustBecome(vrate, h.green, {
  62       infoString: "should become green automatically",
  63     });
  64     await h.pixelMustBecome(vmanual, h.red, {
  65       infoString: "should still be red",
  66     });
  67     h.requestFrame(vmanual);
  68     await h.pixelMustBecome(vmanual, h.green, {
  69       infoString: "should become green after requstFrame()",
  70     });
  71   }
  72   catch(err) {
  73     ok(false, "checkDrawColorGreen failed: ", err);
  74   }
  75   drawing.stop();
  76 }
  77
  78 async function checkRequestFrameOrderGuarantee() {
  79   info("Checking that requestFrame() immediately after a drawColor() " +
  80        "call results in the expected frame seen in the stream.");
  81
  82   await h.pixelMustBecome(vmanual, h.green, {
  83     infoString: "should still be green",
  84   });
  85   h.drawColor(c, h.red);   // 1. Draw canvas red
  86   h.requestFrame(vmanual); // 2. Immediately request a frame
  87   await h.pixelMustBecome(vmanual, h.red, {
  88     infoString: "should become red after call order test",
  89   });
  90 }
  91
  92 async function checkDrawImageNotCleanRed() {
  93   info("Checking that drawImage with not origin-clean image renders streams useless.");
  94   const ctx = c.getContext('2d');
  95   const notCleanRed = new Image();
  96
  97   await new Promise((resolve, reject) => {
  98     notCleanRed.onload = resolve;
  99     notCleanRed.onerror = () => reject(new Error("Failed to load tainted image."));
 100     notCleanRed.src = "http://example.com/tests/dom/canvas/test/image_red_crossorigin_credentials.png";
 101     document.body.appendChild(notCleanRed);
 102   });
 103   const drawing = h.startDrawing(
 104     () => ctx.drawImage(notCleanRed, 0, 0, c.width, c.height));
 105   h.testNotClean(c);
 106   try {
 107     await h.pixelMustNotBecome(vauto, h.red, {
 108       timeout: 1000,
 109       infoString: "should not become red",
 110     });
 111     ok(h.isPixelNot(h.getPixel(vrate), h.red, 250),
 112        "should not have become red");
 113     await h.pixelMustBecome(vmanual, h.green, {
 114       infoString: "should still be green",
 115     });
 116     h.requestFrame(vmanual);
 117     await h.pixelMustNotBecome(vmanual, h.red, {
 118       timeout: 1000,
 119       infoString: "should not become red",
 120     });
 121   } catch(err) {
 122     ok(false, "checkDrawImageNotCleanRed failed: ", err);
 123   }
 124   drawing.stop();
 125 }
 126
 127 async function checkEndedOnStop() {
 128   const promises = [vauto, vmanual, vrate].map(elem => {
 129     elem.srcObject.getTracks()[0].stop();
 130     return new Promise(resolve =>
 131       elem.addEventListener("ended", function endedListener(event) {
 132         ok(true, "Element " + elem.id + " ended.");
 133         resolve();
 134         elem.removeEventListener("ended", endedListener);
 135       }));
 136   });
 137   await Promise.all(promises);
 138 }
 139
 140 function finish() {
 141   ok(true, 'Test complete.');
 142   SimpleTest.finish();
 143 }
 144
 145 (async () => {
 146   await checkDrawColorInitialRed();
 147   await checkDrawColorGreen();
 148   await checkRequestFrameOrderGuarantee();
 149   await checkDrawColorGreen(); // Restore video elements to green.
 150   await checkDrawImageNotCleanRed();
 151   await checkEndedOnStop();
 152   finish();
 153 })();
 154 </script>
 155