Web Inspector: InspectorTimelineAgent doesn't need to recompile functions because...
[WebKit-https.git] / LayoutTests / inspector / layers / layers-blending-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, "blending")) {
67                 assert(
68                     "<div id=\"blending\"> is composited due having CSS blending applied and composited descendants",
69                     compositingReasons.blendingWithCompositedDescendants,
70                     true);
71             } else if (hasId(node, "isolating")) {
72                 assert(
73                     "<div id=\"isolating\"> is composition due to isolating compositing descendants having CSS blending applied",
74                     compositingReasons.isolatesCompositedBlendingDescendants,
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             InspectorProtocol.checkForError(messageObject);
115
116             if (command.name)
117                 ProtocolTest.log("PASS");
118
119             if (command.callback)
120                 command.callback(messageObject.result);
121         });
122     };
123
124     function assert(name, actual, expected)
125     {
126         if (expected === actual)
127             ProtocolTest.log("PASS: " + name + ".");
128         else
129             ProtocolTest.log("FAIL: " + name + ". Expected " + expected + " but got " + actual);
130     };
131
132 };
133
134 window.addEventListener("DOMContentLoaded", function()
135 {
136     runTest();
137 }, false);
138
139 </script>
140 <style type="text/css">
141       
142     #isolating {
143         isolation: isolate;
144     }
145
146     #blending {
147         mix-blend-mode: difference;
148     }
149
150     #composited {
151         -webkit-transform: translateZ(0);
152     }
153
154 </style>
155 </head>
156 <body>
157     <div id="isolating">
158         <div id="blending">
159             <div id="composited"></div>
160         </div>
161     </div>
162 </body>
163 </html>