1<html>
2<head>
3<script type="text/javascript" src="../../http/tests/inspector-protocol/resources/protocol-test.js"></script>
4<script type="text/javascript">
5
6function addCompositedLayer()
7{
8 var element = document.createElement("div");
9 element.className = "composited";
10 element.id = "last-element";
11 document.body.appendChild(element);
12};
13
14function test()
15{
16 var documentNode;
17 var initialLayers;
18 var eventsCount = 0;
19
20 InspectorTest.eventHandler["LayerTree.layerTreeDidChange"] = function (messageObject) {
21 eventsCount++;
22 };
23
24 enableLayerTreeAgent();
25
26 function enableLayerTreeAgent(result)
27 {
28 step({
29 name: "Enable the LayerTree agent",
30 command: "LayerTree.enable",
31 parameters: {},
32 callback: getDocument
33 });
34 };
35
36 function getDocument(result)
37 {
38 step({
39 name: "Get the Document",
40 command: "DOM.getDocument",
41 parameters: {},
42 callback: getInitialLayerTree
43 });
44 };
45
46 function getInitialLayerTree(result)
47 {
48 documentNode = result.root;
49 step({
50 name: "Get the initial layer tree",
51 command: "LayerTree.layersForNode",
52 parameters: {"nodeId": documentNode.nodeId},
53 callback: gotInitialLayerTree
54 });
55 };
56
57 function gotInitialLayerTree(result)
58 {
59 initialLayers = result.layers;
60
61 dumpLayers(initialLayers);
62
63 step({
64 name: "Message the page to add a new composited layer",
65 command: "Runtime.evaluate",
66 parameters: {"expression": "addCompositedLayer()"},
67 callback: getModifiedLayerTree
68 });
69 };
70
71 function getModifiedLayerTree(result)
72 {
73 step({
74 name: "Get the modified layer tree",
75 command: "LayerTree.layersForNode",
76 parameters: {"nodeId": documentNode.nodeId},
77 callback: gotModifiedLayerTree
78 });
79 };
80
81 var layerCount = 0;
82
83 function gotModifiedLayerTree(result)
84 {
85 dumpLayers(result.layers);
86
87 var mutations = layerMutations(initialLayers, result.layers);
88 var newLayer = mutations.additions[0];
89
90 step({
91 name: "Get attributes for the newly inserted node",
92 command: "DOM.getAttributes",
93 parameters: {"nodeId": newLayer.nodeId},
94 callback: gotNodeAttributes
95 });
96 };
97
98 function gotNodeAttributes(result)
99 {
100 var attributes = attributesDictionaryFromArray(result.attributes);
101 if (attributes.id !== "last-element")
102 InspectorTest.log("FAIL: Did not obtain the expected element for the last inserted layer.");
103
104 finishTest();
105 };
106
107 function finishTest()
108 {
109 if (!eventsCount)
110 InspectorTest.log("FAIL: Did not receive layerTreeDidChange events.");
111 else
112 InspectorTest.log("\n=== Test complete, all expected conditions met ===");
113
114 InspectorTest.completeTest();
115 };
116
117 function layerMutations(oldLayers, newLayers)
118 {
119 function layerIdMap(layer) {
120 return layer.layerId;
121 }
122
123 var oldLayerIds = oldLayers.map(layerIdMap);
124 var newLayerIds = newLayers.map(layerIdMap);
125
126 return {
127 additions: newLayers.filter(function (layer) {
128 return (oldLayerIds.indexOf(layer.layerId) === -1);
129 }),
130 removals: oldLayers.filter(function (layer) {
131 return (newLayerIds.indexOf(layer.layerId) === -1);
132 })
133 };
134 };
135
136 function attributesDictionaryFromArray(attributes)
137 {
138 var dictionary = {}
139 for (var i = 0, count = attributes.length; i < count; i += 2) {
140 dictionary[attributes[i]] = attributes[i + 1];
141 }
142 return dictionary;
143 };
144
145 function dumpLayers(layers)
146 {
147 function replacer(key, value)
148 {
149 if (key === "layerId" || key === "nodeId" || key === "memory" || key === "paintCount")
150 return typeof(value);
151
152 // some values differ based on port, but the ones we most
153 // care about will always be less or equal 100.
154 if ((key === "width" || key === "height") && value > 100)
155 return typeof(value);
156
157 return value;
158 };
159
160 InspectorTest.log("\n" + JSON.stringify(layers, replacer, " "));
161 };
162
163 function step(test)
164 {
165 InspectorTest.log("\n=== " + test.name + " ===\n")
166 InspectorTest.sendCommand(test.command, test.parameters, function(messageObject) {
167 if (messageObject.hasOwnProperty("error")) {
168 InspectorTest.log("FAIL: " + messageObject.error.message + " (" + messageObject.error.code + ")");
169 InspectorTest.completeTest();
170 return;
171 }
172
173 InspectorTest.log("PASS");
174 test.callback(messageObject.result);
175 });
176 };
177
178 function assert(name, actual, expected)
179 {
180 if (expected === actual)
181 InspectorTest.log("PASS: " + name + ".");
182 else
183 InspectorTest.log("FAIL: " + name + ". Expected " + expected + " but got " + actual);
184 };
185
186};
187
188window.addEventListener("DOMContentLoaded", function () {
189 runTest();
190}, false);
191
192</script>
193<style type="text/css">
194
195 div {
196 position: absolute;
197 top: 0;
198 left: 0;
199 }
200
201 .regular {
202 width: 100px;
203 height: 100px;
204 background-color: black;
205 }
206
207 .composited {
208 top: 25px;
209 left: 25px;
210 width: 50px;
211 height: 50px;
212 background-color: blue;
213 -webkit-transform: translateZ(0);
214 }
215
216 .offset {
217 left: 200px;
218 -webkit-transform: translateZ(0);
219 }
220
221</style>
222</head>
223<body>
224
225 <div class="regular"></div>
226
227 <div class="composited">
228 <div class="composited"></div>
229 </div>
230
231 <div class="regular offset">
232 <div class="composited"></div>
233 </div>
234
235</body>
236</html>