| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script src="resources/recording-utilities.js"></script> |
| <script> |
| let context = null; |
| |
| let canvas = document.createElement("canvas"); |
| canvas.width = 2; |
| canvas.height = 2; |
| |
| // 2x2 red square |
| let image = document.createElement("img"); |
| image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII="; |
| |
| let linearGradient = null; |
| |
| let radialGradient = null; |
| |
| let conicGradient = null; |
| |
| let pattern = null; |
| |
| let path2D = new Path2D("M 1 2"); |
| |
| let imageData = new ImageData(1, 2); |
| |
| let imageBitmap = null; |
| |
| async function load() { |
| context = canvas.getContext("2d"); |
| |
| linearGradient = context.createLinearGradient(1, 2, 3, 4); |
| linearGradient.addColorStop(1, "red"); |
| |
| radialGradient = context.createRadialGradient(1, 2, 3, 4, 5, 6); |
| linearGradient.addColorStop(1, "blue"); |
| |
| conicGradient = context.createConicGradient(1, 2, 3); |
| conicGradient.addColorStop(1, "green"); |
| |
| pattern = context.createPattern(image, "no-repeat"); |
| |
| imageBitmap = await createImageBitmap(image); |
| |
| cancelActions(); |
| |
| context.strokeStyle = "red"; |
| context.save(); |
| context.strokeStyle = "blue"; |
| context.save(); |
| context.strokeStyle = "green"; |
| |
| runTest(); |
| } |
| |
| function ignoreException(func){ |
| try { |
| func(); |
| } catch (e) { } |
| } |
| |
| let requestAnimationFrameId = NaN; |
| |
| function cancelActions() { |
| cancelAnimationFrame(requestAnimationFrameId); |
| requestAnimationFrameId = NaN; |
| |
| context.resetTransform(); |
| context.beginPath(); |
| context.clearRect(0, 0, context.canvas.width, context.canvas.height); |
| } |
| |
| function performActions() { |
| let frames = [ |
| () => { |
| context.fillStyle; |
| context.fillStyle = "test"; |
| context.fillStyle = linearGradient; |
| context.fillStyle = radialGradient; |
| context.fillStyle = conicGradient; |
| context.fillStyle = pattern; |
| }, |
| () => { |
| context.beginPath(); |
| }, |
| () => { |
| ignoreException(() => context.moveTo(1, 2)); |
| }, |
| () => { |
| ignoreException(() => context.drawImage(image, 11, 12)); |
| }, |
| () => { |
| ignoreException(() => context.createImageData(imageData)); |
| }, |
| () => { |
| ignoreException(() => context.drawImage(imageBitmap, 11, 12)); |
| }, |
| () => { |
| ignoreException(() => context.setTransform(new DOMMatrix([1, 2, 3, 4, 5, 6]))); |
| }, |
| () => { |
| context.drawFocusIfNeeded(path2D, document.body); |
| }, |
| () => { |
| TestPage.dispatchEventToFrontend("LastFrame"); |
| }, |
| ]; |
| let index = 0; |
| function executeFrameFunction() { |
| frames[index++](); |
| if (index < frames.length) |
| requestAnimationFrameId = requestAnimationFrame(executeFrameFunction); |
| }; |
| executeFrameFunction(); |
| } |
| |
| function test() { |
| let suite = InspectorTest.createAsyncSuite("Recording.prototype.toHTML"); |
| |
| suite.addTestCase({ |
| name: "Recording.prototype.toHTML.2D", |
| test(resolve, reject) { |
| startRecording(WI.Canvas.ContextType.Canvas2D, resolve, reject, { |
| callback(recording) { |
| let promise = new WI.WrappedPromise; |
| |
| let listener = recording.addEventListener(WI.Recording.Event.ProcessedAction, (event) => { |
| if (!recording.ready) |
| return; |
| |
| let html = recording.toHTML(); |
| html = html.replace(/"data:image\/png;base64,[^"]+"/g, "<filtered>"); |
| |
| InspectorTest.log("++++++++++ HTML ++++++++++"); |
| InspectorTest.log(html); |
| InspectorTest.log("++++++++++ HTML ++++++++++"); |
| |
| recording.removeEventListener(WI.Recording.Event.ProcessedAction, listener); |
| promise.resolve(); |
| }); |
| |
| recording.startProcessing(); |
| |
| return promise.promise; |
| }, |
| }); |
| }, |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="load()"> |
| <p>Tests for Recording.prototype.toHTML.</p> |
| </body> |
| </html> |
