| <!doctype html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| |
| function addCompositedLayer() |
| { |
| var element = document.createElement("div"); |
| element.className = "composited"; |
| element.id = "last-element"; |
| document.body.appendChild(element); |
| |
| // Force layout to trigger a layer update. |
| document.body.offsetWidth; |
| |
| requestAnimationFrame(() => { |
| TestPage.dispatchEventToFrontend("TestPageDidAppendChild"); |
| }); |
| }; |
| |
| function test() |
| { |
| let documentNode = null; |
| |
| let suite = InspectorTest.createAsyncSuite("LayerTree.layerTreeDidChange"); |
| |
| suite.addTestCase({ |
| name: "LayerTree.layerTreeDidChange.WithRequest", |
| description: "Check that layerTreeDidChange is able to be dispatched once LayerTree.commands.layersForNode is called.", |
| test(resolve, reject) { |
| let layerTreeDidChangeCount = 0; |
| let handleLayerTreeDidChange = WI.layerTreeManager.addEventListener(WI.LayerTreeManager.Event.LayerTreeDidChange, (event) => { |
| ++layerTreeDidChangeCount; |
| |
| InspectorTest.log("Layer tree changed"); |
| |
| if (layerTreeDidChangeCount === 1) { |
| WI.layerTreeManager.layersForNode(documentNode, (layers) => { |
| InspectorTest.log("Creating layer..."); |
| InspectorTest.evaluateInPage(`addCompositedLayer()`); |
| }); |
| } |
| }); |
| |
| let testPageDidAppendChildCount = 0; |
| let handleTestPageDidAppendChild = InspectorTest.addEventListener("TestPageDidAppendChild", (event) => { |
| ++testPageDidAppendChildCount; |
| |
| if (testPageDidAppendChildCount === 2) { |
| WI.layerTreeManager.removeEventListener(WI.LayerTreeManager.Event.LayerTreeDidChange, handleLayerTreeDidChange); |
| InspectorTest.removeEventListener("TestPageDidAppendChild", handleTestPageDidAppendChild); |
| |
| InspectorTest.expectEqual(layerTreeDidChangeCount, 2, "LayerTreeDidChange should fire after layersForNode is called"); |
| |
| resolve(); |
| } |
| }); |
| |
| WI.layerTreeManager.layersForNode(documentNode, (layers) => { |
| InspectorTest.log("Creating layer..."); |
| InspectorTest.evaluateInPage(`addCompositedLayer()`); |
| }); |
| }, |
| }); |
| |
| suite.addTestCase({ |
| name: "LayerTree.layerTreeDidChange.WithoutRequest", |
| description: "Check that layerTreeDidChange doesn't dispatch more than once until LayerTree.commands.layersForNode is called.", |
| test(resolve, reject) { |
| let layerTreeDidChangeCount = 0; |
| let handleLayerTreeDidChange = WI.layerTreeManager.addEventListener(WI.LayerTreeManager.Event.LayerTreeDidChange, (event) => { |
| ++layerTreeDidChangeCount; |
| |
| InspectorTest.log("Layer tree changed"); |
| |
| if (layerTreeDidChangeCount === 1) { |
| InspectorTest.log("Creating layer..."); |
| InspectorTest.evaluateInPage(`addCompositedLayer()`); |
| } |
| }); |
| |
| let testPageDidAppendChildCount = 0; |
| let handleTestPageDidAppendChild = InspectorTest.addEventListener("TestPageDidAppendChild", (event) => { |
| ++testPageDidAppendChildCount; |
| |
| if (testPageDidAppendChildCount === 2) { |
| WI.layerTreeManager.removeEventListener(WI.LayerTreeManager.Event.LayerTreeDidChange, handleLayerTreeDidChange); |
| InspectorTest.removeEventListener("TestPageDidAppendChild", handleTestPageDidAppendChild); |
| |
| InspectorTest.expectEqual(layerTreeDidChangeCount, 1, "LayerTreeDidChange should not fire before layersForNode is called"); |
| |
| resolve(); |
| } |
| }); |
| |
| WI.layerTreeManager.layersForNode(documentNode, (layers) => { |
| InspectorTest.log("Creating layer..."); |
| InspectorTest.evaluateInPage(`addCompositedLayer()`); |
| }); |
| }, |
| }); |
| |
| WI.domManager.requestDocument((node) => { |
| documentNode = node; |
| if (!documentNode) { |
| InspectorTest.fail("Missing document node."); |
| InspectorTest.completeTest(); |
| return; |
| } |
| |
| suite.runTestCasesAndFinish(); |
| }); |
| } |
| </script> |
| <style> |
| .composited { |
| -webkit-transform: translateZ(0); |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for LayerTree.event.layerTreeDidChange.</p> |
| </body> |
| </html> |
