| <html> |
| <head> |
| <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script> |
| <script type="text/javascript" src="layer-protocol-test.js"></script> |
| <script type="text/javascript"> |
| |
| function addCompositedLayer() |
| { |
| var element = document.createElement("div"); |
| element.className = "composited"; |
| element.id = "last-element"; |
| document.body.appendChild(element); |
| }; |
| |
| function test() |
| { |
| var documentNode; |
| var initialLayers; |
| var modifiedLayers; |
| |
| InspectorTest.enableLayerTreeAgent(gotInitialLayerTree); |
| |
| function gotInitialLayerTree(layers) |
| { |
| initialLayers = layers; |
| InspectorTest.setLayerTreeChangeCallback(gotModifiedLayerTree); |
| |
| InspectorTest.sendCommand("Runtime.evaluate", {"expression": "addCompositedLayer()"}); |
| }; |
| |
| function gotModifiedLayerTree(layers) |
| { |
| modifiedLayers = layers; |
| |
| var mutations = layerMutations(initialLayers, modifiedLayers); |
| var newLayer = mutations.additions[0]; |
| |
| InspectorTest.sendCommand("DOM.pushNodesByBackendIdsToFrontend", {"backendNodeIds": [newLayer.backendNodeId]}, InspectorTest.wrapCallback(gotNodeId)); |
| }; |
| |
| function gotNodeId(result) |
| { |
| InspectorTest.sendCommand("DOM.getAttributes", {"nodeId": result.nodeIds[0]}, InspectorTest.wrapCallback(gotNodeAttributes)); |
| } |
| |
| function gotNodeAttributes(result) |
| { |
| var attributes = attributesDictionaryFromArray(result.attributes); |
| if (attributes.id !== "last-element") |
| InspectorTest.log("FAIL: Did not obtain the expected element for the last inserted layer."); |
| |
| dumpLayers(initialLayers); |
| dumpLayers(modifiedLayers); |
| InspectorTest.log("DONE!"); |
| InspectorTest.completeTest(); |
| }; |
| |
| function layerMutations(oldLayers, newLayers) |
| { |
| function layerIdMap(layer) { |
| return layer.layerId; |
| } |
| |
| var oldLayerIds = oldLayers.map(layerIdMap); |
| var newLayerIds = newLayers.map(layerIdMap); |
| |
| return { |
| additions: newLayers.filter(function (layer) { |
| return (oldLayerIds.indexOf(layer.layerId) === -1); |
| }), |
| removals: oldLayers.filter(function (layer) { |
| return (newLayerIds.indexOf(layer.layerId) === -1); |
| }) |
| }; |
| }; |
| |
| function attributesDictionaryFromArray(attributes) |
| { |
| var dictionary = {} |
| for (var i = 0, count = attributes.length; i < count; i += 2) { |
| dictionary[attributes[i]] = attributes[i + 1]; |
| } |
| return dictionary; |
| }; |
| |
| function dumpLayers(layers) |
| { |
| // Keep "internal" layers out for better stability. |
| layers = layers.filter(function(layer) { return !!layer.backendNodeId; }); |
| function replacer(key, value) |
| { |
| |
| if (["layerId", "parentLayerId", "backendNodeId", "paintCount"].indexOf(key) >= 0) |
| return typeof(value); |
| |
| // some values differ based on port, but the ones we most |
| // care about will always be less or equal 100. |
| if ((key === "width" || key === "height") && value > 100) |
| return typeof(value); |
| |
| return value; |
| }; |
| |
| InspectorTest.log("\n" + JSON.stringify(layers, replacer, " ")); |
| }; |
| }; |
| |
| window.addEventListener("DOMContentLoaded", function () { |
| runTest(); |
| }, false); |
| |
| </script> |
| <style type="text/css"> |
| |
| 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; |
| transform: translateZ(0); |
| } |
| |
| .offset { |
| left: 200px; |
| transform: translateZ(0); |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="regular"></div> |
| |
| <div class="composited"> |
| <div class="composited"></div> |
| </div> |
| |
| <div class="regular offset"> |
| <div class="composited"></div> |
| </div> |
| |
| </body> |
| </html> |
