| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| |
| function createDetachedTest() |
| { |
| let div = document.createElement("div"); |
| div.id = "detached"; |
| return div; |
| } |
| |
| function testHTMLImageElement() { |
| // 2x2 red square |
| let image = document.createElement("img"); |
| image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII="; |
| image.addEventListener("load", async (event) => { |
| console.screenshot(image); |
| }); |
| } |
| |
| function testHTMLPictureElement() { |
| let picture = document.createElement("picture"); |
| |
| // 2x2 red square |
| let image = picture.appendChild(document.createElement("img")); |
| image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII="; |
| image.addEventListener("load", async (event) => { |
| console.screenshot(picture); |
| }); |
| } |
| |
| function testHTMLCanvasElement() { |
| let canvas = document.createElement("canvas"); |
| canvas.width = 2; |
| canvas.height = 2; |
| |
| let context = canvas.getContext("2d"); |
| context.fillStyle = "red"; |
| context.fillRect(0, 0, 2, 2); |
| |
| console.screenshot(canvas); |
| } |
| |
| function testImageBitmap() { |
| // 2x2 red square |
| let image = document.createElement("img"); |
| image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII="; |
| image.addEventListener("load", async (event) => { |
| let imageBitmap = await createImageBitmap(image); |
| console.screenshot(imageBitmap); |
| }); |
| } |
| |
| function createCanvas2DTest() { |
| let canvas = document.createElement("canvas"); |
| canvas.width = 2; |
| canvas.height = 2; |
| return canvas.getContext("2d"); |
| } |
| |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("console.screenshot"); |
| |
| function addTest({name, expression, imageMessageAddedCallback, shouldCaptureViewport, shouldError}) { |
| suite.addTestCase({ |
| name, |
| async test() { |
| let [event] = await Promise.all([ |
| WI.consoleManager.awaitEvent(WI.ConsoleManager.Event.MessageAdded), |
| InspectorTest.evaluateInPage(expression), |
| ]); |
| |
| let {message} = event.data; |
| |
| if (message.level === WI.ConsoleMessage.MessageLevel.Error) { |
| InspectorTest.expectThat(shouldError, "Error: " + message.messageText); |
| return; |
| } |
| |
| InspectorTest.expectEqual(message.type, WI.ConsoleMessage.MessageType.Image, "The added message should be an image."); |
| InspectorTest.expectNotEqual(message.messageText, "data:", "The image should not be empty."); |
| |
| try { |
| let image = new Image; |
| await new Promise((resolve, reject) => { |
| image.addEventListener("load", resolve); |
| image.addEventListener("error", reject); |
| image.src = message.messageText; |
| }); |
| |
| if (shouldCaptureViewport) { |
| InspectorTest.expectGreaterThan(image.width, 2, "The image width should be greater than 2px."); |
| InspectorTest.expectGreaterThan(image.height, 2, "The image height should be greater than 2px."); |
| } else { |
| InspectorTest.expectEqual(image.width, 2, "The image width should be 2px."); |
| InspectorTest.expectEqual(image.height, 2, "The image height should be 2px."); |
| } |
| } catch { |
| InspectorTest.expectThat(shouldError, "The image should not load."); |
| } |
| }, |
| }); |
| } |
| |
| addTest({ |
| name: "console.screenshot.Node.SingleArgument", |
| expression: `console.screenshot(document.querySelector("#testNode"))`, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.Node.MultipleArguments", |
| expression: `console.screenshot(document.querySelector("#testNode"), "test")`, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.Node.DetachedScreenshotable.Image", |
| expression: `testHTMLImageElement()`, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.Node.DetachedScreenshotable.Picture", |
| expression: `testHTMLPictureElement()`, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.Node.DetachedScreenshotable.Canvas", |
| expression: `testHTMLCanvasElement()`, |
| async imageMessageAddedCallback(message) { |
| InspectorTest.expectNotEqual(message.messageText, "data:", "The image should not be empty."); |
| |
| let img = await WI.ImageUtilities.promisifyLoad(message.messageText); |
| InspectorTest.expectEqual(img.width, 2, "The image width should be 2px."); |
| InspectorTest.expectEqual(img.height, 2, "The image height should be 2px."); |
| }, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.Node.DetachedNonScreenshotable", |
| expression: `console.screenshot(createDetachedTest())`, |
| shouldError: true, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.ImageData", |
| expression: `console.screenshot(new ImageData(2, 2))`, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.ImageBitmap", |
| expression: `testImageBitmap()`, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.CanvasRenderingContext2D", |
| expression: `console.screenshot(createCanvas2DTest())`, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.String.Valid", |
| expression: `console.screenshot("test")`, |
| shouldCaptureViewport: true, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.String.dataURL.Valid", |
| expression: `console.screenshot("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII=")`, // 2x2 red square |
| }); |
| |
| addTest({ |
| name: "console.screenshot.String.dataURL.InvalidMIME", |
| expression: `console.screenshot("data:fake/mime")`, |
| shouldError: true, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.String.dataURL.InvalidContent", |
| expression: `console.screenshot("data:image/png;base64,<INVALID>")`, |
| shouldError: true, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.String.dataURL.InvalidNoContent", |
| expression: `console.screenshot("data:image/png;a1=b2;base64,")`, |
| shouldError: true, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.String.dataURL.ValidNoContent", |
| expression: `console.screenshot("data:")`, |
| shouldCaptureViewport: true, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.NonScreenshotableTarget", |
| expression: `console.screenshot(42)`, |
| shouldCaptureViewport: true, |
| }); |
| |
| addTest({ |
| name: "console.screenshot.NoArguments", |
| expression: `console.screenshot()`, |
| shouldCaptureViewport: true, |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the console.screenshot API.</p> |
| <div id="testNode"></div> |
| <style> |
| #testNode { |
| width: 2px; |
| height: 2px; |
| background-color: red; |
| } |
| #detached { |
| width: 2px; |
| height: 2px; |
| background-color: blue; |
| } |
| </style> |
| </body> |
| </html> |
