| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script src="resources/recording-utilities.js"></script> |
| <script src="resources/recording-2d.js"></script> |
| <script> |
| function test() { |
| let suite = InspectorTest.createAsyncSuite("Canvas.recording2D"); |
| |
| 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) { |
| function check(index, state, name, expected) { |
| InspectorTest.expectEqual("" + state.get(name), "" + expected, `State ${index} ${name} value should be ${expected}.`) |
| } |
| async function compare(index, transform, globalAlpha, globalCompositeOperation, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, lineDash, lineDashOffset, font, textAlign, textBaseline, direction, strokeStyle, fillStyle, imageSmoothingEnabled, imageSmoothingQuality, path) { |
| let state = await WI.RecordingState.swizzleInitialState(recording, recording.initialState.states[index]); |
| check(index, state, "setTransform", transform) |
| check(index, state, "globalAlpha", globalAlpha) |
| check(index, state, "globalCompositeOperation", globalCompositeOperation) |
| check(index, state, "lineWidth", lineWidth) |
| check(index, state, "lineCap", lineCap) |
| check(index, state, "lineJoin", lineJoin) |
| check(index, state, "miterLimit", miterLimit) |
| check(index, state, "shadowOffsetX", shadowOffsetX) |
| check(index, state, "shadowOffsetY", shadowOffsetY) |
| check(index, state, "shadowBlur", shadowBlur) |
| check(index, state, "shadowColor", shadowColor) |
| check(index, state, "setLineDash", lineDash) |
| check(index, state, "lineDashOffset", lineDashOffset) |
| check(index, state, "font", font) |
| check(index, state, "textAlign", textAlign) |
| check(index, state, "textBaseline", textBaseline) |
| check(index, state, "direction", direction) |
| check(index, state, "strokeStyle", strokeStyle) // FIXME: Might want to do a better job at stringifying gradients and patterns for a better test. |
| check(index, state, "fillStyle", fillStyle) // FIXME: Might want to do a better job at stringifying gradients and patterns for a better test. |
| check(index, state, "imageSmoothingEnabled", imageSmoothingEnabled) |
| check(index, state, "imageSmoothingQuality", imageSmoothingQuality) |
| check(index, state, "setPath", path) // FIXME: Need to do a better job at stringifying a path for a useful test. |
| } |
| |
| await compare(0, "matrix(1, 0, 0, 1, 0, 0)", 1, "source-over", 1, "butt", "miter", 10, 0, 0, 0, "rgba(0, 0, 0, 0)", "", 0, "10px sans-serif", "start", "alphabetic", "inherit", "#000000", "#000000", true, "low", "[object Path2D]") |
| await compare(1, "matrix(1, 0, 0, 1, 1, 0)", 0.5, "source-in", 0.5, "round", "bevel", 20, 2, 3, 4, "#100000", "1,2", 10, "20px sans-serif", "left", "top", "ltr", "[object CanvasPattern]", "[object CanvasGradient]", false, "medium", "[object Path2D]") |
| await compare(2, "matrix(1, 0, 0, 1, 1, 1)", 0, "difference", 2, "square", "round", 30, 4, 5, 6, "#001000", "3,4", 11, "30px cursive", "right", "hanging", "inherit", "[object CanvasGradient]", "[object CanvasPattern]", true, "high", "[object Path2D]") |
| await compare(3, "matrix(1, 0, 0, 1, 0, -1)", 0.75, "source-over", 3, "round", "bevel", 40, 6, 7, 8, "#000010", "5,6", 12, "40px fantasy", "center", "ideographic", "rtl", "#200000", "#300000", false, "medium", "[object Path2D]") |
| } |
| |
| 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.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="load()"> |
| <p>Test that CanvasManager is able to record actions made to 2D canvas contexts.</p> |
| </body> |
| </html> |
