[Flatpak SDK] Add perl-term-readkey
[WebKit-https.git] / LayoutTests / inspector / layers / layers-compositing-reasons.html
1 <html>
2 <head>
3 <script src="../../http/tests/inspector/resources/protocol-test.js"></script>
4 <script>
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             } else if (hasId(node, "canvas")) {
77                 assert(
78                     "<canvas id=\"canvas\"> is composited due to having a 3D transform",
79                     compositingReasons.transform3D,
80                     true);
81             }
82
83             if (++count === layers.length)
84                 ProtocolTest.completeTest();
85         };
86
87         layers.forEach(function (layer) {
88             runCommand({
89                 command: "LayerTree.reasonsForCompositingLayer",
90                 parameters: {"layerId": layer.layerId},
91                 callback: function(result) {
92                     dumpReasons(layer, result.compositingReasons);
93                 }
94             });
95         });
96     };
97
98     function setChildNodes (messageObject) {
99         messageObject.params.nodes.forEach(function (node) {
100             nodes.push(node);
101         })
102     };
103
104     function step(test)
105     {
106         if (test.callback)
107             logTestName(test.name);
108         runCommand(test);
109     };
110
111     function logTestName(name)
112     {
113         ProtocolTest.log("\n=== " + name + " ===\n");
114     };
115
116     function runCommand(command)
117     {
118         InspectorProtocol.sendCommand(command.command, command.parameters, function(messageObject) {
119             if (messageObject.hasOwnProperty("error")) {
120                 ProtocolTest.log("FAIL: " + messageObject.error.message + " (" + messageObject.error.code + ")");
121                 ProtocolTest.completeTest();
122                 return;
123             }
124
125             if (command.name)
126                 ProtocolTest.log("PASS");
127
128             if (command.callback)
129                 command.callback(messageObject.result);
130         });
131     };
132
133     function assert(name, actual, expected)
134     {
135         if (expected === actual)
136             ProtocolTest.log("PASS: " + name + ".");
137         else
138             ProtocolTest.log("FAIL: " + name + ". Expected " + expected + " but got " + actual);
139     };
140
141 };
142
143 window.addEventListener("DOMContentLoaded", function()
144 {
145     runTest();
146 }, false);
147
148 </script>
149 <style type="text/css">
150       
151     #opacity-container {
152         opacity: 0.5;
153     }
154
155     #child {
156         -webkit-backface-visibility: hidden;
157         -webkit-transform: translateZ(0);
158     }
159
160     #canvas {
161         transform: translate3D(0,0,0);
162     }
163
164 </style>
165 </head>
166 <body>
167
168     <div id="fixed"></div>
169
170     <div id="opacity-container">
171         <div id="child"></div>
172     </div>
173
174     <canvas id="canvas" width="65537" height="65537"></canvas>
175
176 </body>
177 </html>