devtools/server/tests/chrome/test_inspector_getImageData-wait-for-load.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 Tests for InspectorActor.getImageData() in following cases:
   5  * Image takes too long to load (the method rejects after a timeout).
   6  * Image is loading when the method is called and the load finishes before
   7    timeout.
   8  * Image fails to load.
   9
  10 https://bugzilla.mozilla.org/show_bug.cgi?id=1192536
  11 -->
  12 <head>
  13   <meta charset="utf-8">
  14   <title>Test for Bug 1192536</title>
  15
  16   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  17   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
  18   <script type="application/javascript" src="inspector-helpers.js"></script>
  19   <script type="application/javascript">
  20 "use strict";
  21
  22 const PATH = "https://example.com/chrome/devtools/server/tests/chrome/";
  23 const BASE_IMAGE = PATH + "inspector-delay-image-response.sjs";
  24 const DELAYED_IMAGE = BASE_IMAGE + "?delay=300";
  25 const TIMEOUT_IMAGE = BASE_IMAGE + "?delay=50000";
  26 const NONEXISTENT_IMAGE = PATH + "this-does-not-exist.png";
  27
  28 window.onload = function() {
  29   SimpleTest.waitForExplicitFinish();
  30   runNextTest();
  31 };
  32
  33 function pushPref(preferenceName, value) {
  34   return new Promise(resolve => {
  35     const options = {"set": [[preferenceName, value]]};
  36     SpecialPowers.pushPrefEnv(options, resolve);
  37   });
  38 }
  39
  40 let gImg = null;
  41 let gNodeFront = null;
  42 let gWalker = null;
  43
  44 addTest(async function setup() {
  45   const url = document.getElementById("inspectorContent").href;
  46   const { target, doc } = await attachURL(url);
  47   const inspector = await target.getFront("inspector");
  48   gWalker = inspector.walker;
  49   gNodeFront = await gWalker.querySelector(gWalker.rootNode, "img.custom");
  50   gImg = doc.querySelector("img.custom");
  51   ok(gNodeFront, "Got the image NodeFront.");
  52   ok(gImg, "Got the image Node.");
  53   runNextTest();
  54 });
  55
  56 addTest(async function testTimeout() {
  57   info("Testing that the method aborts if the image takes too long to load.");
  58
  59   // imageToImageData() only times out when flags.testing is not set.
  60   await pushPref("devtools.testing", false);
  61
  62   gImg.src = TIMEOUT_IMAGE;
  63
  64   info("Calling getImageData().");
  65   ensureRejects(gNodeFront.getImageData(), "Timeout image").then(runNextTest);
  66 });
  67
  68 addTest(async function testNonExistentImage() {
  69   info("Testing that non-existent image causes a rejection.");
  70
  71   // This test shouldn't hit the timeout.
  72   await pushPref("devtools.testing", true);
  73
  74   gImg.src = NONEXISTENT_IMAGE;
  75
  76   info("Calling getImageData().");
  77   ensureRejects(gNodeFront.getImageData(), "Non-existent image").then(runNextTest);
  78 });
  79
  80 addTest(async function testDelayedImage() {
  81   info("Testing that the method waits for an image to load.");
  82
  83   // This test shouldn't hit the timeout.
  84   await pushPref("devtools.testing", true);
  85
  86   gImg.src = DELAYED_IMAGE;
  87
  88   info("Calling getImageData().");
  89   checkImageData(gNodeFront.getImageData()).then(runNextTest);
  90 });
  91
  92 addTest(function cleanup() {
  93   gImg = null;
  94   gNodeFront = null;
  95   gWalker = null;
  96   runNextTest();
  97 });
  98
  99 /**
 100  * Asserts that the given promise rejects.
 101  */
 102 function ensureRejects(promise, desc) {
 103   return promise.then(() => {
 104     ok(false, desc + ": promise resolved unexpectedly.");
 105   }, () => {
 106     ok(true, desc + ": promise rejected as expected.");
 107   });
 108 }
 109
 110 /**
 111  * Waits for the call to getImageData() the resolve and checks that the image
 112  * size is reported correctly.
 113  */
 114 function checkImageData(promise, { width, height } = { width: 1, height: 1 }) {
 115   return promise.then(({ size }) => {
 116     is(size.naturalWidth, width, "The width is correct.");
 117     is(size.naturalHeight, height, "The height is correct.");
 118   });
 119 }
 120
 121   </script>
 122 </head>
 123 <body>
 124 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1192536">Mozilla Bug 1192536</a>
 125 <a id="inspectorContent" target="_blank" href="inspector_getImageData.html">Test Document</a>
 126 <p id="display"></p>
 127 <div id="content" style="display: none">
 128
 129 </div>
 130 <pre id="test">
 131 </pre>
 132 </body>
 133 </html>