OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 .layer { | |
5 -webkit-transform: translateZ(10px); | |
6 opacity: 0.8; | |
7 } | |
8 </style> | |
9 <script src="../http/tests/inspector/inspector-test.js"></script> | |
10 <script src="../http/tests/inspector/layers-test.js"></script> | |
11 <script> | |
12 window.quietUntilDone = true; | |
13 | |
14 function updateTree() | |
15 { | |
16 document.getElementById("c").appendChild(document.getElementById("b1")); | |
17 var b3 = document.getElementById("b3"); | |
18 b3.parentElement.removeChild(b3); | |
19 var b4 = document.createElement("div"); | |
20 b4.id = "b4"; | |
21 b4.className = "layer"; | |
22 document.getElementById("a").appendChild(b4); | |
23 } | |
24 | |
25 function updateGeometry() | |
26 { | |
27 document.getElementById("c").style.width = "80px"; | |
28 } | |
29 | |
30 function test() | |
31 { | |
32 function addDepthMarker(layer) | |
33 { | |
34 layer.__extraData = layer.parent() ? layer.parent().__extraData + 1 : 0; | |
35 } | |
36 | |
37 InspectorTest.requestLayers(step1); | |
38 | |
39 function step1() | |
40 { | |
41 // Assure layer objects are not re-created during updates. | |
42 InspectorTest._layerTreeModel.forEachLayer(addDepthMarker); | |
43 InspectorTest.addResult("Initial layer tree"); | |
44 InspectorTest.dumpLayerTree(); | |
45 InspectorTest.evaluateAndRunWhenTreeChanges("requestAnimationFrame(updat
eTree)", step2); | |
46 } | |
47 | |
48 function step2() | |
49 { | |
50 InspectorTest.addResult("Updated layer tree"); | |
51 InspectorTest.dumpLayerTree(); | |
52 InspectorTest.evaluateAndRunWhenTreeChanges("requestAnimationFrame(updat
eGeometry)", step3); | |
53 } | |
54 | |
55 function step3() | |
56 { | |
57 InspectorTest.addResult("Updated layer geometry"); | |
58 InspectorTest.dumpLayerTree(); | |
59 InspectorTest.completeTest(); | |
60 } | |
61 } | |
62 | |
63 </script> | |
64 </head> | |
65 <body onload="runTest()"> | |
66 <div id="a" style="width: 200px; height: 200px" class="layer"> | |
67 <div class="layer" id="b1" style="width: 150px; height: 100px"></div> | |
68 <div id="b2" class="layer" style="width: 140px; height: 110px"> | |
69 <div id="c" class="layer" style="width: 100px; height: 90px"></div> | |
70 </div> | |
71 <div id="b3" class="layer" style="width: 140px; height: 110px"></div> | |
72 </div> | |
73 <iframe id="frame" src="resources/composited-iframe.html" width="200" height="20
0"></div> | |
74 </body> | |
75 </html> | |
OLD | NEW |