| <!doctype html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("LayerTreeManager"); |
| |
| suite.addTestCase({ |
| name: "LayerTreeManager.layersForNode.root", |
| description: "Calling the LayerTreeManager#layersForNode method with the root node should return the full layer list.", |
| test(resolve, reject) { |
| WI.domManager.requestDocument((node) => { |
| WI.layerTreeManager.layersForNode(node, (layers) => { |
| InspectorTest.expectEqual(layers.length, 5, "Returned array should include all layers."); |
| InspectorTest.expectThat(layers.every((layer) => layer instanceof WI.Layer), "Array elements should be Layer instances."); |
| resolve(); |
| }); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "LayerTreeManager.layerTreeMutations.overlappingNodeIds", |
| description: "The LayerTreeManager#layerTreeMutations method should provide a diff purely based on layerIds, not based on nodeIds.", |
| test(resolve, reject) { |
| let previousLayers = [ |
| {layerId: "1", nodeId: 1}, |
| {layerId: "2", nodeId: 1, isGeneratedContent: true, pseudoElementId: "10"}, |
| {layerId: "3", nodeId: 1, isReflection: true}, |
| {layerId: "4", nodeId: 2} |
| ]; |
| |
| let newLayers = [ |
| {layerId: "4", nodeId: 2}, |
| {layerId: "5", nodeId: 1}, |
| {layerId: "6", nodeId: 3} |
| ]; |
| |
| let {preserved, additions, removals} = WI.layerTreeManager.layerTreeMutations(previousLayers, newLayers); |
| InspectorTest.expectShallowEqual(preserved, previousLayers.slice(3), "Preserved layers should be correct."); |
| InspectorTest.expectShallowEqual(additions, newLayers.slice(1), "Added layers should be correct."); |
| InspectorTest.expectShallowEqual(removals, previousLayers.slice(0, 3), "Removed layers should be correct."); |
| resolve(); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| <style> |
| div { |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| |
| .regular { |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| } |
| |
| .composited { |
| top: 25px; |
| left: 25px; |
| width: 50px; |
| height: 50px; |
| background-color: blue; |
| -webkit-transform: translateZ(0); |
| } |
| |
| .offset { |
| left: 200px; |
| -webkit-transform: translateZ(0); |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for LayerTreeManager.</p> |
| <div class="regular"></div> |
| <div class="composited"> |
| <div class="composited"></div> |
| </div> |
| <div class="regular offset"> |
| <div class="composited"></div> |
| </div> |
| </body> |
| </html> |
