| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function load() { |
| window.context2d = document.getCSSCanvasContext("2d", "css-canvas", 10, 10); |
| |
| runTest(); |
| } |
| |
| let cssCanvasClients = []; |
| |
| function createCSSCanvasClient() { |
| cssCanvasClients.push(document.body.appendChild(document.createElement("div"))); |
| } |
| |
| function destroyCSSCanvasClients() { |
| for (let cssCanvasClient of cssCanvasClients) |
| cssCanvasClient.remove(); |
| |
| cssCanvasClients = []; |
| |
| setTimeout(() => { GCController.collect(); }, 0); |
| } |
| |
| function test() { |
| let suite = InspectorTest.createAsyncSuite("Canvas.CSSCanvasClients"); |
| |
| function logClientNodes(clientNodes) { |
| for (let clientNode of clientNodes) { |
| if (clientNode) |
| InspectorTest.pass(`Client node "${clientNode.appropriateSelectorFor()}" is valid.`); |
| else |
| InspectorTest.fail("Invalid client node."); |
| } |
| } |
| |
| suite.addTestCase({ |
| name: "Canvas.CSSCanvasClients.InitialLoad", |
| description: "Check that the CanvasManager has one CSS canvas initially.", |
| test(resolve, reject) { |
| let canvases = WI.canvasManager.canvases; |
| InspectorTest.expectEqual(canvases.length, 1, "CanvasManager should have one canvas."); |
| if (!canvases.length) { |
| reject("Missing canvas."); |
| return; |
| } |
| |
| InspectorTest.expectEqual(canvases[0].cssCanvasName, "css-canvas", `Canvas should have CSS name "css-canvas".`); |
| canvases[0].requestCSSCanvasClientNodes((clientNodes) => { |
| InspectorTest.expectEqual(clientNodes.length, 0, "There should be no client nodes."); |
| logClientNodes(clientNodes); |
| resolve(); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.CSSCanvasClients.Create", |
| description: "Check that creating a CSS canvas client node is tracked correctly.", |
| test(resolve, reject) { |
| WI.Canvas.awaitEvent(WI.Canvas.Event.CSSCanvasClientNodesChanged) |
| .then((event) => { |
| InspectorTest.expectEqual(event.target.cssCanvasName, "css-canvas", `Canvas with created client should have CSS name "css-canvas".`); |
| event.target.requestCSSCanvasClientNodes((clientNodes) => { |
| InspectorTest.expectEqual(clientNodes.length, 1, "There should be one client node."); |
| logClientNodes(clientNodes); |
| resolve(); |
| }); |
| }); |
| |
| InspectorTest.evaluateInPage(`createCSSCanvasClient()`); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "Canvas.CSSCanvasClients.Destroy", |
| description: "Check that destroying a CSS canvas client node is tracked correctly.", |
| test(resolve, reject) { |
| WI.Canvas.awaitEvent(WI.Canvas.Event.CSSCanvasClientNodesChanged) |
| .then((event) => { |
| InspectorTest.expectEqual(event.target.cssCanvasName, "css-canvas", `Canvas with destroyed client should have CSS name "css-canvas".`); |
| event.target.requestCSSCanvasClientNodes((clientNodes) => { |
| InspectorTest.expectEqual(clientNodes.length, 0, "There should be no client nodes."); |
| logClientNodes(clientNodes); |
| resolve(); |
| }); |
| }); |
| |
| InspectorTest.evaluateInPage(`destroyCSSCanvasClients()`); |
| } |
| }); |
| |
| // ------ |
| |
| suite.addTestCase({ |
| name: "Canvas.CSSCanvasClients.InvalidCanvasId", |
| description: "Invalid canvas identifiers should cause an error.", |
| test(resolve, reject) { |
| const canvasId = "DOES_NOT_EXIST"; |
| CanvasAgent.requestCSSCanvasClientNodes(canvasId, (error, clientNodeIds) => { |
| InspectorTest.expectThat(error, "Should produce an error."); |
| InspectorTest.log("Error: " + error); |
| resolve(); |
| }); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| <style> |
| div { |
| width: 10px; |
| height: 10px; |
| background-image: -webkit-canvas(css-canvas); |
| } |
| </style> |
| </head> |
| <body onload="load()"> |
| <p>Test that CanvasAgent tracks changes in the client nodes of a CSS canvas.</p> |
| </body> |
| </html> |
