test_inspector_getImageData.html (5294B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=932937 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 932937</title> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 12 <script type="application/javascript" src="inspector-helpers.js"></script> 13 <script type="application/javascript"> 14 "use strict"; 15 16 window.onload = function() { 17 SimpleTest.waitForExplicitFinish(); 18 runNextTest(); 19 }; 20 21 let gWalker = null; 22 23 addTest(async function setup() { 24 const url = document.getElementById("inspectorContent").href; 25 const { target } = await attachURL(url); 26 const inspector = await target.getFront("inspector"); 27 gWalker = inspector.walker; 28 runNextTest(); 29 }); 30 31 addTest(async function testLargeImage() { 32 // Select the image node from the test page 33 const img = await gWalker.querySelector(gWalker.rootNode, ".big-horizontal"); 34 ok(img, "Image node found in the test page"); 35 ok(img.getImageData, "Image node has the getImageData function"); 36 const imageData = await img.getImageData(100); 37 ok(imageData.data, "Image data actor was sent back"); 38 ok(imageData.size, "Image size info was sent back too"); 39 is(imageData.size.naturalWidth, 5333, "Natural width of the image correct"); 40 is(imageData.size.naturalHeight, 3000, "Natural width of the image correct"); 41 ok(imageData.size.resized, "Image was resized"); 42 const str = await imageData.data.string(); 43 ok(str, "We have an image data string!"); 44 testResizing(imageData, str); 45 }); 46 47 addTest(async function testLargeCanvas() { 48 // Select the canvas node from the test page 49 const canvas = await gWalker.querySelector(gWalker.rootNode, ".big-vertical"); 50 ok(canvas, "Image node found in the test page"); 51 ok(canvas.getImageData, "Image node has the getImageData function"); 52 const imageData = await canvas.getImageData(350); 53 ok(imageData.data, "Image data actor was sent back"); 54 ok(imageData.size, "Image size info was sent back too"); 55 is(imageData.size.naturalWidth, 1000, "Natural width of the image correct"); 56 is(imageData.size.naturalHeight, 2000, "Natural width of the image correct"); 57 ok(imageData.size.resized, "Image was resized"); 58 const str = await imageData.data.string(); 59 ok(str, "We have an image data string!"); 60 testResizing(imageData, str); 61 }); 62 63 addTest(async function testSmallImage() { 64 // Select the small image node from the test page 65 const img = await gWalker.querySelector(gWalker.rootNode, ".small"); 66 ok(img, "Image node found in the test page"); 67 ok(img.getImageData, "Image node has the getImageData function"); 68 const imageData = await img.getImageData(); 69 ok(imageData.data, "Image data actor was sent back"); 70 ok(imageData.size, "Image size info was sent back too"); 71 is(imageData.size.naturalWidth, 245, "Natural width of the image correct"); 72 is(imageData.size.naturalHeight, 240, "Natural width of the image correct"); 73 ok(!imageData.size.resized, "Image was NOT resized"); 74 const str = await imageData.data.string(); 75 ok(str, "We have an image data string!"); 76 testResizing(imageData, str); 77 }); 78 79 addTest(async function testDataImage() { 80 // Select the data image node from the test page 81 const img = await gWalker.querySelector(gWalker.rootNode, ".data"); 82 ok(img, "Image node found in the test page"); 83 ok(img.getImageData, "Image node has the getImageData function"); 84 const imageData = await img.getImageData(14); 85 ok(imageData.data, "Image data actor was sent back"); 86 ok(imageData.size, "Image size info was sent back too"); 87 is(imageData.size.naturalWidth, 28, "Natural width of the image correct"); 88 is(imageData.size.naturalHeight, 28, "Natural width of the image correct"); 89 ok(imageData.size.resized, "Image was resized"); 90 const str = await imageData.data.string(); 91 ok(str, "We have an image data string!"); 92 testResizing(imageData, str); 93 }); 94 95 addTest(async function testNonImgOrCanvasElements() { 96 const body = await gWalker.querySelector(gWalker.rootNode, "body"); 97 await ensureRejects(body.getImageData(), "Invalid element"); 98 runNextTest(); 99 }); 100 101 addTest(function cleanup() { 102 gWalker = null; 103 runNextTest(); 104 }); 105 106 /** 107 * Checks if the server told the truth about resizing the image 108 */ 109 function testResizing(imageData, str) { 110 const img = document.createElement("img"); 111 img.addEventListener("load", () => { 112 const resized = !(img.naturalWidth == imageData.size.naturalWidth && 113 img.naturalHeight == imageData.size.naturalHeight); 114 is(imageData.size.resized, resized, "Server told the truth about resizing"); 115 runNextTest(); 116 }); 117 img.src = str; 118 } 119 120 /** 121 * Asserts that the given promise rejects. 122 */ 123 function ensureRejects(promise, desc) { 124 return promise.then(() => { 125 ok(false, desc + ": promise resolved unexpectedly."); 126 }, () => { 127 ok(true, desc + ": promise rejected as expected."); 128 }); 129 } 130 </script> 131 </head> 132 <body> 133 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=932937">Mozilla Bug 932937</a> 134 <a id="inspectorContent" target="_blank" href="inspector_getImageData.html">Test Document</a> 135 <p id="display"></p> 136 <div id="content" style="display: none"> 137 138 </div> 139 <pre id="test"> 140 </pre> 141 </body> 142 </html>