| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script src="resources/recording-utilities.js"></script> |
| <script> |
| let ctx = null; |
| |
| // 2x2 red square |
| let image = document.createElement("img"); |
| image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABNJREFUCB1j/M/AAEQMDEwgAgQAHxcCAmtAm/sAAAAASUVORK5CYII="; |
| |
| // Invalid video |
| let video = document.createElement("video"); |
| |
| // Blank canvas |
| let canvas = document.createElement("canvas"); |
| canvas.width = 2; |
| canvas.height = 2; |
| |
| let linearGradient = null; |
| |
| let radialGradient = null; |
| |
| let pattern = null; |
| |
| let path12 = new Path2D("M 1 2"); |
| let path34 = new Path2D("M 3 4"); |
| |
| let imageData14 = new ImageData(1, 4); |
| let imageData23 = new ImageData(2, 3); |
| |
| let bitmap = null; |
| |
| async function load() { |
| ctx = canvas.getContext("2d"); |
| linearGradient = ctx.createLinearGradient(1, 2, 3, 4); |
| radialGradient = ctx.createRadialGradient(1, 2, 3, 4, 5, 6); |
| pattern = ctx.createPattern(image, "no-repeat"); |
| bitmap = await createImageBitmap(image); |
| |
| ctx.save(); |
| cancelActions(); |
| |
| runTest(); |
| } |
| |
| function ignoreException(func){ |
| try { |
| func(); |
| } catch (e) { } |
| } |
| |
| let requestAnimationFrameId = NaN; |
| let saveCount = 1; |
| |
| function cancelActions() { |
| for (let i = 0; i < saveCount; ++i) |
| ctx.restore(); |
| ctx.restore(); // Ensures the state is reset between test cases. |
| |
| cancelAnimationFrame(requestAnimationFrameId); |
| requestAnimationFrameId = NaN; |
| |
| ctx.save(); // Ensures the state is reset between test cases. |
| ctx.save(); // This matches the `restore` call in `performActions`. |
| saveCount = 1; |
| |
| ctx.resetTransform(); |
| ctx.beginPath(); |
| ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
| } |
| |
| function performActions() { |
| let frames = [ |
| () => { |
| ignoreException(() => ctx.arc(1, 2, 3, 4, 5)); |
| ignoreException(() => ctx.arc(6, 7, 8, 9, 10, true)); |
| }, |
| () => { |
| ignoreException(() => ctx.arcTo(1, 2, 3, 4, 5)); |
| }, |
| () => { |
| ctx.beginPath(); |
| }, |
| () => { |
| ctx.bezierCurveTo(1, 2, 3, 4, 5, 6); |
| }, |
| () => { |
| ctx.clearRect(1, 2, 3, 4); |
| }, |
| () => { |
| ctx.clearShadow(); |
| }, |
| () => { |
| ctx.clip(); |
| ctx.clip("evenodd"); |
| ctx.clip(path12); |
| ctx.clip(path34, "evenodd"); |
| }, |
| () => { |
| ctx.closePath(); |
| }, |
| () => { |
| ignoreException(() => ctx.createImageData(imageData14)); |
| ignoreException(() => ctx.createImageData(2, 3)); |
| }, |
| () => { |
| ignoreException(() => ctx.createLinearGradient(1, 2, 3, 4)); |
| }, |
| () => { |
| ignoreException(() => ctx.createPattern(image, "testA")); |
| ignoreException(() => ctx.createPattern(video, "testB")); |
| ignoreException(() => ctx.createPattern(canvas, "testC")); |
| ignoreException(() => ctx.createPattern(bitmap, "testD")); |
| }, |
| () => { |
| ignoreException(() => ctx.createRadialGradient(1, 2, 3, 4, 5, 6)); |
| }, |
| () => { |
| ctx.direction; |
| ctx.direction = "test"; |
| }, |
| () => { |
| ctx.drawFocusIfNeeded(document.body); |
| ctx.drawFocusIfNeeded(path12, document.body); |
| }, |
| () => { |
| ignoreException(() => ctx.drawImage(image, 11, 12)); |
| ignoreException(() => ctx.drawImage(image, 13, 14, 15, 16)); |
| ignoreException(() => ctx.drawImage(image, 17, 18, 19, 110, 111, 112, 113, 114)); |
| |
| ignoreException(() => ctx.drawImage(video, 21, 22)); |
| ignoreException(() => ctx.drawImage(video, 23, 24, 25, 26)); |
| ignoreException(() => ctx.drawImage(video, 27, 28, 29, 210, 211, 212, 213, 214)); |
| |
| ignoreException(() => ctx.drawImage(canvas, 31, 32)); |
| ignoreException(() => ctx.drawImage(canvas, 33, 34, 35, 36)); |
| ignoreException(() => ctx.drawImage(canvas, 37, 38, 39, 310, 311, 312, 313, 314)); |
| |
| ignoreException(() => ctx.drawImage(bitmap, 41, 42)); |
| ignoreException(() => ctx.drawImage(bitmap, 43, 44, 45, 46)); |
| ignoreException(() => ctx.drawImage(bitmap, 47, 48, 49, 410, 411, 412, 413, 414)); |
| }, |
| () => { |
| ctx.drawImageFromRect(image, 1, 2, 3, 4, 5, 6, 7, 8) |
| ctx.drawImageFromRect(image, 9, 10, 11, 12, 13, 14, 15, 16, "test"); |
| }, |
| () => { |
| ignoreException(() => ctx.ellipse(1, 2, 3, 4, 5, 6, 7)); |
| ignoreException(() => ctx.ellipse(8, 9, 10, 11, 12, 13, 14, true)); |
| }, |
| () => { |
| ctx.fill(); |
| ctx.fill("evenodd"); |
| ctx.fill(path12); |
| ctx.fill(path34, "evenodd"); |
| }, |
| () => { |
| ctx.fillRect(1, 2, 3, 4); |
| }, |
| () => { |
| ctx.fillStyle; |
| ctx.fillStyle = "test"; |
| ctx.fillStyle = linearGradient; |
| ctx.fillStyle = radialGradient; |
| ctx.fillStyle = pattern; |
| }, |
| () => { |
| ctx.fillText("testA", 1, 2); |
| ctx.fillText("testB", 3, 4, 5); |
| }, |
| () => { |
| ctx.font; |
| ctx.font = "test"; |
| }, |
| () => { |
| ignoreException(() => ctx.getImageData(1, 2, 3, 4)); |
| }, |
| () => { |
| ctx.getLineDash(); |
| }, |
| () => { |
| ctx.getTransform(); |
| }, |
| () => { |
| ctx.globalAlpha; |
| ctx.globalAlpha = 0; |
| }, |
| () => { |
| ctx.globalCompositeOperation; |
| ctx.globalCompositeOperation = "test"; |
| }, |
| () => { |
| ctx.imageSmoothingEnabled; |
| ctx.imageSmoothingEnabled = true; |
| }, |
| () => { |
| ctx.imageSmoothingQuality; |
| ctx.imageSmoothingQuality = "low"; |
| }, |
| () => { |
| ctx.isPointInPath(path12, 5, 6); |
| ctx.isPointInPath(path34, 7, 8, "evenodd"); |
| ctx.isPointInPath(9, 10); |
| ctx.isPointInPath(11, 12, "evenodd"); |
| }, |
| () => { |
| ctx.isPointInStroke(path12, 3, 4); |
| ctx.isPointInStroke(5, 6); |
| }, |
| () => { |
| ctx.lineCap; |
| ctx.lineCap = "test"; |
| }, |
| () => { |
| ctx.lineDashOffset; |
| ctx.lineDashOffset = 1; |
| }, |
| () => { |
| ctx.lineJoin; |
| ctx.lineJoin = "test"; |
| }, |
| () => { |
| ctx.lineTo(1, 2); |
| }, |
| () => { |
| ctx.lineWidth; |
| ctx.lineWidth = 1; |
| }, |
| () => { |
| ctx.measureText("test"); |
| }, |
| () => { |
| ctx.miterLimit; |
| ctx.miterLimit = 1; |
| }, |
| () => { |
| ctx.moveTo(1, 2); |
| }, |
| () => { |
| ctx.putImageData(imageData14, 5, 6); |
| ctx.putImageData(imageData23, 7, 8, 9, 10, 11, 12); |
| }, |
| () => { |
| ctx.quadraticCurveTo(1, 2, 3, 4); |
| }, |
| () => { |
| ctx.rect(1, 2, 3, 4); |
| }, |
| () => { |
| ctx.resetTransform(); |
| }, |
| () => { |
| ctx.restore(); |
| --saveCount; |
| }, |
| () => { |
| ctx.rotate(1); |
| }, |
| () => { |
| ctx.save(); |
| ++saveCount; |
| }, |
| () => { |
| ctx.scale(1, 2); |
| }, |
| () => { |
| ctx.setAlpha(); |
| ctx.setAlpha(1); |
| }, |
| () => { |
| ctx.setCompositeOperation(); |
| ctx.setCompositeOperation("test"); |
| }, |
| () => { |
| ctx.setFillColor("testA"); |
| ctx.setFillColor("testB", 1); |
| ctx.setFillColor(2); |
| ctx.setFillColor(3, 4); |
| ctx.setFillColor(5, 6, 7, 8); |
| ctx.setFillColor(9, 10, 11, 12, 13); |
| }, |
| () => { |
| ctx.setLineCap(); |
| ctx.setLineCap("test"); |
| }, |
| () => { |
| ctx.setLineDash([1, 2]); |
| }, |
| () => { |
| ctx.setLineJoin(); |
| ctx.setLineJoin("test"); |
| }, |
| () => { |
| ctx.setLineWidth(); |
| ctx.setLineWidth(1); |
| }, |
| () => { |
| ctx.setMiterLimit(); |
| ctx.setMiterLimit(1); |
| }, |
| () => { |
| ctx.setShadow(1, 2, 3); |
| ctx.setShadow(4, 5, 6, "test", 7); |
| ctx.setShadow(8, 9, 10, 11); |
| ctx.setShadow(12, 13, 14, 15, 16); |
| ctx.setShadow(17, 18, 19, 20, 21, 22, 23); |
| ctx.setShadow(24, 25, 26, 27, 28, 29, 30, 31); |
| }, |
| () => { |
| ctx.setStrokeColor("testA"); |
| ctx.setStrokeColor("testB", 1); |
| ctx.setStrokeColor(2); |
| ctx.setStrokeColor(3, 4); |
| ctx.setStrokeColor(5, 6, 7, 8); |
| ctx.setStrokeColor(9, 10, 11, 12, 13); |
| }, |
| () => { |
| ctx.setTransform(1, 2, 3, 4, 5, 6); |
| ignoreException(() => ctx.setTransform()); |
| ignoreException(() => ctx.setTransform(new DOMMatrix([7, 8, 9, 10, 11, 12]))); |
| }, |
| () => { |
| ctx.shadowBlur; |
| ctx.shadowBlur = 1; |
| }, |
| () => { |
| ctx.shadowColor; |
| ctx.shadowColor = "test"; |
| }, |
| () => { |
| ctx.shadowOffsetX; |
| ctx.shadowOffsetX = 1; |
| }, |
| () => { |
| ctx.shadowOffsetY; |
| ctx.shadowOffsetY = 1; |
| }, |
| () => { |
| ctx.stroke(); |
| ctx.stroke(path12); |
| }, |
| () => { |
| ctx.strokeRect(1, 2, 3, 4); |
| }, |
| () => { |
| ctx.strokeStyle; |
| ctx.strokeStyle = "test"; |
| ctx.strokeStyle = linearGradient; |
| ctx.strokeStyle = radialGradient; |
| ctx.strokeStyle = pattern; |
| }, |
| () => { |
| ctx.strokeText("testA", 1, 2); |
| ctx.strokeText("testB", 3, 4, 5); |
| }, |
| () => { |
| ctx.textAlign; |
| ctx.textAlign = "test"; |
| }, |
| () => { |
| ctx.textBaseline; |
| ctx.textBaseline = "test"; |
| }, |
| () => { |
| ctx.transform(1, 2, 3, 4, 5, 6); |
| }, |
| () => { |
| ctx.translate(1, 2); |
| }, |
| () => { |
| ctx.webkitImageSmoothingEnabled; |
| ctx.webkitImageSmoothingEnabled = true; |
| }, |
| () => { |
| ctx.webkitLineDash; |
| ctx.webkitLineDash = [1, 2]; |
| }, |
| () => { |
| ctx.webkitLineDashOffset; |
| ctx.webkitLineDashOffset = 1; |
| }, |
| () => { |
| ctx.canvas.width; |
| ctx.canvas.width = 2; |
| }, |
| () => { |
| ctx.canvas.height; |
| ctx.canvas.height = 2; |
| }, |
| () => { |
| TestPage.dispatchEventToFrontend("LastFrame"); |
| }, |
| ]; |
| let index = 0; |
| function executeFrameFunction() { |
| frames[index++](); |
| if (index < frames.length) |
| requestAnimationFrameId = requestAnimationFrame(executeFrameFunction); |
| }; |
| executeFrameFunction(); |
| } |
| |
| function performConsoleActions() { |
| console.record(ctx, {name: "TEST"}); |
| |
| ctx.fill(); |
| |
| console.recordEnd(ctx); |
| |
| ctx.stroke(); |
| } |
| |
| function performSavePreActions() { |
| cancelActions(); |
| ctx.restore(); |
| ctx.restore(); |
| |
| function saveFillStyle(value) { |
| ctx.save(); |
| ctx.fillStyle = value; |
| } |
| |
| saveFillStyle("#ff0000"); |
| saveFillStyle("#00ff00"); |
| saveFillStyle("#0000ff"); |
| } |
| |
| function performSavePostActions() { |
| ctx.fill(); |
| } |
| |
| function performNaNActions() { |
| ctx.globalAlpha = NaN; |
| } |
| |
| function test() { |
| let suite = InspectorTest.createAsyncSuite("Canvas.recording2D"); |
| |
| suite.addTestCase({ |
| name: "Canvas.recording2D.singleFrame", |
| description: "Check that the recording is stopped after a single frame.", |
| test(resolve, reject) { |
| startRecording(WI.Canvas.ContextType.Canvas2D, resolve, reject, {frameCount: 1}); |
| }, |
| timeout: -1, |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.recording2D.multipleFrames", |
| description: "Check that recording data is serialized correctly for multiple frames.", |
| test(resolve, reject) { |
| startRecording(WI.Canvas.ContextType.Canvas2D, resolve, reject); |
| }, |
| timeout: -1, |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.recording2D.memoryLimit", |
| description: "Check that the recording is stopped when it reaches the memory limit.", |
| test(resolve, reject) { |
| startRecording(WI.Canvas.ContextType.Canvas2D, resolve, reject, {memoryLimit: 10}); |
| }, |
| timeout: -1, |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.recording2D.Console", |
| description: "Check that a recording can be triggered by console.record().", |
| test(resolve, reject) { |
| consoleRecord(WI.Canvas.ContextType.Canvas2D, resolve, reject); |
| }, |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.recording2D.ActionParameterNaN", |
| description: "Check that NaN is converted into the proper value for serialization.", |
| test(resolve, reject) { |
| let canvas = getCanvas(WI.Canvas.ContextType.Canvas2D); |
| if (!canvas) { |
| reject("Missing 2D canvas."); |
| return; |
| } |
| |
| canvas.awaitEvent(WI.Canvas.Event.RecordingStopped) |
| .then((event) => { |
| let recording = event.data.recording.toJSON(); |
| |
| let frames = recording.frames; |
| InspectorTest.expectEqual(frames.length, 1, "The recording should have 1 frame."); |
| |
| let actions = frames[0].actions; |
| InspectorTest.expectEqual(actions.length, 1, "The first frame should have 1 action."); |
| InspectorTest.expectEqual(actions[0][1].length, 1, "The action should have 1 parameter."); |
| InspectorTest.expectEqual(actions[0][1][0], null, "The parameter should be null."); |
| }) |
| .then(resolve, reject); |
| |
| canvas.awaitEvent(WI.Canvas.Event.RecordingStarted) |
| .then((event) => { |
| InspectorTest.evaluateInPage(`performNaNActions()`); |
| }); |
| |
| const frameCount = 1; |
| CanvasAgent.startRecording(canvas.identifier, frameCount) |
| .catch(reject); |
| }, |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.recording2D.ExistingSaves", |
| description: "Check that existing save calls are sent to the frontend.", |
| test(resolve, reject) { |
| let canvas = getCanvas(WI.Canvas.ContextType.Canvas2D); |
| if (!canvas) { |
| reject("Missing 2D canvas."); |
| return; |
| } |
| |
| async function logStates(recording) { |
| async function compare(index, expected) { |
| let state = await WI.RecordingState.swizzleInitialState(recording, recording.initialState.states[index]); |
| InspectorTest.expectEqual(state.get("fillStyle"), expected, `State ${index} should match expected fillStyle value.`) |
| } |
| |
| await compare(0, "#000000"); |
| await compare(1, "#ff0000"); |
| await compare(2, "#00ff00"); |
| await compare(3, "#0000ff"); |
| } |
| |
| canvas.awaitEvent(WI.Canvas.Event.RecordingStopped) |
| .then((event) => { |
| let {recording} = event.data; |
| |
| InspectorTest.expectEqual(recording.initialState.states.length, 4, "There should be 4 existing states."); |
| |
| logStates(recording) |
| .then(resolve, reject); |
| }); |
| |
| canvas.awaitEvent(WI.Canvas.Event.RecordingStarted) |
| .then((event) => { |
| InspectorTest.evaluateInPage(`performSavePostActions()`).catch(reject); |
| }); |
| |
| InspectorTest.evaluateInPage(`performSavePreActions()`) |
| .then(() => { |
| const frameCount = 1; |
| CanvasAgent.startRecording(canvas.identifier, frameCount).catch(reject); |
| }, reject); |
| }, |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.recording2D.NoActions", |
| description: "Check that a canvas is still able to be recorded after stopping a recording with no actions.", |
| test(resolve, reject) { |
| let canvas = getCanvas(WI.Canvas.ContextType.Canvas2D); |
| if (!canvas) { |
| reject("Missing 2D canvas."); |
| return; |
| } |
| |
| let eventCount = 0; |
| function handleRecordingStopped(event) { |
| InspectorTest.assert(!event.data.recording, "The recording payload should be null."); |
| |
| ++eventCount; |
| if (eventCount == 1) { |
| InspectorTest.pass("A recording should have been started and stopped once."); |
| |
| canvas.startRecording(); |
| canvas.stopRecording(); |
| } else if (eventCount >= 2) { |
| InspectorTest.pass("A recording should have been started and stopped twice."); |
| |
| canvas.removeEventListener(WI.Canvas.Event.RecordingStopped, handleRecordingStopped); |
| resolve(); |
| } |
| } |
| canvas.addEventListener(WI.Canvas.Event.RecordingStopped, handleRecordingStopped); |
| |
| canvas.startRecording(); |
| canvas.stopRecording(); |
| }, |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="load()"> |
| <p>Test that CanvasManager is able to record actions made to 2D canvas contexts.</p> |
| </body> |
| </html> |
