| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <script type="text/javascript" src="../../http/tests/inspector-protocol/resource
s/inspector-protocol-test.js"></script> | |
| 4 <script type="text/javascript" src="../resources/layer-protocol-test.js"></scrip
t> | |
| 5 <script type="text/javascript"> | |
| 6 | |
| 7 function addCompositedLayer() | |
| 8 { | |
| 9 var element = document.createElement("div"); | |
| 10 element.className = "composited"; | |
| 11 element.id = "last-element"; | |
| 12 document.body.appendChild(element); | |
| 13 }; | |
| 14 | |
| 15 function test() | |
| 16 { | |
| 17 var documentNode; | |
| 18 var initialLayers; | |
| 19 var modifiedLayers; | |
| 20 | |
| 21 InspectorTest.enableLayerTreeAgent(gotInitialLayerTree); | |
| 22 | |
| 23 function gotInitialLayerTree(layers) | |
| 24 { | |
| 25 initialLayers = layers; | |
| 26 InspectorTest.setLayerTreeChangeCallback(gotModifiedLayerTree); | |
| 27 | |
| 28 InspectorTest.sendCommand("Runtime.evaluate", {"expression": "addComposi
tedLayer()"}); | |
| 29 }; | |
| 30 | |
| 31 function gotModifiedLayerTree(layers) | |
| 32 { | |
| 33 modifiedLayers = layers; | |
| 34 | |
| 35 var mutations = layerMutations(initialLayers, modifiedLayers); | |
| 36 var newLayer = mutations.additions[0]; | |
| 37 | |
| 38 InspectorTest.sendCommand("DOM.pushNodesByBackendIdsToFrontend", {"backe
ndNodeIds": [newLayer.backendNodeId]}, InspectorTest.wrapCallback(gotNodeId)); | |
| 39 }; | |
| 40 | |
| 41 function gotNodeId(result) | |
| 42 { | |
| 43 InspectorTest.sendCommand("DOM.getAttributes", {"nodeId": result.nodeIds
[0]}, InspectorTest.wrapCallback(gotNodeAttributes)); | |
| 44 } | |
| 45 | |
| 46 function gotNodeAttributes(result) | |
| 47 { | |
| 48 var attributes = attributesDictionaryFromArray(result.attributes); | |
| 49 if (attributes.id !== "last-element") | |
| 50 InspectorTest.log("FAIL: Did not obtain the expected element for the
last inserted layer."); | |
| 51 | |
| 52 dumpLayers(initialLayers); | |
| 53 dumpLayers(modifiedLayers); | |
| 54 InspectorTest.log("DONE!"); | |
| 55 InspectorTest.completeTest(); | |
| 56 }; | |
| 57 | |
| 58 function layerMutations(oldLayers, newLayers) | |
| 59 { | |
| 60 function layerIdMap(layer) { | |
| 61 return layer.layerId; | |
| 62 } | |
| 63 | |
| 64 var oldLayerIds = oldLayers.map(layerIdMap); | |
| 65 var newLayerIds = newLayers.map(layerIdMap); | |
| 66 | |
| 67 return { | |
| 68 additions: newLayers.filter(function (layer) { | |
| 69 return (oldLayerIds.indexOf(layer.layerId) === -1); | |
| 70 }), | |
| 71 removals: oldLayers.filter(function (layer) { | |
| 72 return (newLayerIds.indexOf(layer.layerId) === -1); | |
| 73 }) | |
| 74 }; | |
| 75 }; | |
| 76 | |
| 77 function attributesDictionaryFromArray(attributes) | |
| 78 { | |
| 79 var dictionary = {} | |
| 80 for (var i = 0, count = attributes.length; i < count; i += 2) { | |
| 81 dictionary[attributes[i]] = attributes[i + 1]; | |
| 82 } | |
| 83 return dictionary; | |
| 84 }; | |
| 85 | |
| 86 function dumpLayers(layers) | |
| 87 { | |
| 88 // Keep "internal" layers out for better stability. | |
| 89 layers = layers.filter(function(layer) { return !!layer.backendNodeId; }
); | |
| 90 function replacer(key, value) | |
| 91 { | |
| 92 | |
| 93 if (["layerId", "parentLayerId", "backendNodeId", "paintCount"].inde
xOf(key) >= 0) | |
| 94 return typeof(value); | |
| 95 | |
| 96 // some values differ based on port, but the ones we most | |
| 97 // care about will always be less or equal 100. | |
| 98 if ((key === "width" || key === "height") && value > 100) | |
| 99 return typeof(value); | |
| 100 | |
| 101 return value; | |
| 102 }; | |
| 103 | |
| 104 InspectorTest.log("\n" + JSON.stringify(layers, replacer, " ")); | |
| 105 }; | |
| 106 }; | |
| 107 | |
| 108 window.addEventListener("DOMContentLoaded", function () { | |
| 109 runTest(); | |
| 110 }, false); | |
| 111 | |
| 112 </script> | |
| 113 <style type="text/css"> | |
| 114 | |
| 115 div { | |
| 116 position: absolute; | |
| 117 top: 0; | |
| 118 left: 0; | |
| 119 } | |
| 120 | |
| 121 .regular { | |
| 122 width: 100px; | |
| 123 height: 100px; | |
| 124 background-color: black; | |
| 125 } | |
| 126 | |
| 127 .composited { | |
| 128 top: 25px; | |
| 129 left: 25px; | |
| 130 width: 50px; | |
| 131 height: 50px; | |
| 132 background-color: blue; | |
| 133 transform: translateZ(0); | |
| 134 } | |
| 135 | |
| 136 .offset { | |
| 137 left: 200px; | |
| 138 transform: translateZ(0); | |
| 139 } | |
| 140 | |
| 141 </style> | |
| 142 </head> | |
| 143 <body> | |
| 144 | |
| 145 <div class="regular"></div> | |
| 146 | |
| 147 <div class="composited"> | |
| 148 <div class="composited"></div> | |
| 149 </div> | |
| 150 | |
| 151 <div class="regular offset"> | |
| 152 <div class="composited"></div> | |
| 153 </div> | |
| 154 | |
| 155 </body> | |
| 156 </html> | |
| OLD | NEW |