Web Inspector: InspectorTimelineAgent doesn't need to recompile functions because...
[WebKit-https.git] / LayoutTests / inspector / layers / layers-compositing-reasons.html
1 <html>
2 <head>
3 <script type="text/javascript" src="../../http/tests/inspector/resources/protocol-test.js"></script>
4 <script type="text/javascript">
5
6 function test()
7 {
8
9     var nodes = [];
10  
11     InspectorProtocol.eventHandler["DOM.setChildNodes"] = setChildNodes;
12
13     enableLayerTreeAgent();
14     
15     function enableLayerTreeAgent(result)
16     {
17         step({
18             name: "Enable the LayerTree agent",
19             command: "LayerTree.enable",
20             parameters: {},
21             callback: getDocument
22         });
23     };
24
25     function getDocument()
26     {
27         // We must first get the document so that later on we may get sensible nodeIds.
28         step({
29             name: "Get the Document",
30             command: "DOM.getDocument",
31             parameters: {},
32             callback: getLayerTree
33         });
34     };
35
36     function getLayerTree(result)
37     {
38         step({
39             name: "Get the layer tree",
40             command: "LayerTree.layersForNode",
41             parameters: {"nodeId": result.root.nodeId},
42             callback: gotLayerTree
43         });
44     };
45
46     function gotLayerTree(result)
47     {
48         logTestName("Check layers' reasons for compositing")
49         
50         var layers = result.layers;
51
52         var nodesById = {};
53         nodes.forEach(function(node) {
54             nodesById[node.nodeId] = node;
55         });
56
57         var count = 0;
58         
59         function hasId(node, id) {
60             return node && node.attributes && node.attributes[0] === "id" && node.attributes[1] === id;
61         }
62         
63         function dumpReasons(layer, compositingReasons) {
64             var node = nodesById[layer.nodeId];
65
66             if (hasId(node, "opacity-container")) {
67                 assert(
68                     "<div id=\"opacity-container\"> is composited due to having an opacity style and a composited child",
69                     compositingReasons.opacityWithCompositedDescendants,
70                     true);
71             } else if (hasId(node, "child")) {
72                 assert(
73                     "<div id=\"child\"> is composited due to having \"backface-visibility: hidden\" and a 3D transform",
74                     compositingReasons.transform3D && compositingReasons.backfaceVisibilityHidden,
75                     true);
76             }
77
78             if (++count === layers.length)
79                 ProtocolTest.completeTest();
80         };
81
82         layers.forEach(function (layer) {
83             runCommand({
84                 command: "LayerTree.reasonsForCompositingLayer",
85                 parameters: {"layerId": layer.layerId},
86                 callback: function(result) {
87                     dumpReasons(layer, result.compositingReasons);
88                 }
89             });
90         });
91     };
92
93     function setChildNodes (messageObject) {
94         messageObject.params.nodes.forEach(function (node) {
95             nodes.push(node);
96         })
97     };
98
99     function step(test)
100     {
101         if (test.callback)
102             logTestName(test.name);
103         runCommand(test);
104     };
105
106     function logTestName(name)
107     {
108         ProtocolTest.log("\n=== " + name + " ===\n");
109     };
110
111     function runCommand(command)
112     {
113         InspectorProtocol.sendCommand(command.command, command.parameters, function(messageObject) {
114             if (messageObject.hasOwnProperty("error")) {
115                 ProtocolTest.log("FAIL: " + messageObject.error.message + " (" + messageObject.error.code + ")");
116                 ProtocolTest.completeTest();
117                 return;
118             }
119
120             if (command.name)
121                 ProtocolTest.log("PASS");
122
123             if (command.callback)
124                 command.callback(messageObject.result);
125         });
126     };
127
128     function assert(name, actual, expected)
129     {
130         if (expected === actual)
131             ProtocolTest.log("PASS: " + name + ".");
132         else
133             ProtocolTest.log("FAIL: " + name + ". Expected " + expected + " but got " + actual);
134     };
135
136 };
137
138 window.addEventListener("DOMContentLoaded", function()
139 {
140     runTest();
141 }, false);
142
143 </script>
144 <style type="text/css">
145       
146     #opacity-container {
147         opacity: 0.5;
148     }
149
150     #child {
151         -webkit-backface-visibility: hidden;
152         -webkit-transform: translateZ(0);
153     }
154
155 </style>
156 </head>
157 <body>
158
159     <div id="fixed"></div>
160
161     <div id="opacity-container">
162         <div id="child"></div>
163     </div>
164
165 </body>
166 </html>