third_party/WebKit/LayoutTests/inspector/tracing/layer-tree.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/timeline-test.js"></script>
   5 <script src="../../http/tests/inspector/layers-test.js"></script>
   6 <script src="../tracing-test.js"></script>
   7
   8 <script>
   9 function doActions(callback)
  10 {
  11     var div = document.createElement("div");
  12     div.id = "b4";
  13     document.getElementById("a").appendChild(div);
  14
  15     // Make sure to force commit, otherwise some owner nodes will be missing.
  16     var style = document.createElement("style");
  17     style.textContent = ".layer { transform: translateZ(10px); opacity: 0.8; }";
  18     document.head.appendChild(style);
  19     generateFrames(3, callback);
  20 }
  21
  22 function test()
  23 {
  24     WebInspector.panels.timeline._captureLayersAndPicturesSetting.set(true);
  25
  26     InspectorTest.invokeAsyncWithTimeline("doActions", step1);
  27     function step1()
  28     {
  29         var frames = InspectorTest.timelineFrameModel().frames();
  30         var lastFrame = InspectorTest.timelineFrameModel().frames().peekLast();
  31         var deferredLayerTree = lastFrame.layerTree;
  32         deferredLayerTree.resolve(InspectorTest.safeWrap(layerTreeResolved));
  33     }
  34
  35     function layerTreeResolved(layerTree)
  36     {
  37         InspectorTest.layerTreeModel.setLayerTree(layerTree);
  38         InspectorTest.dumpLayerTree();
  39         InspectorTest.completeTest();
  40     }
  41 }
  42 </script>
  43
  44 <body onload="runTestAfterDisplay()">
  45 Tests that LayerTreeModel successfully imports layers from a trace.
  46 </p>
  47 <div id="a" style="width: 200px; height: 200px" class="layer">
  48     <div class="layer" id="b1" style="width: 150px; height: 100px"></div>
  49     <div id="b2" class="layer" style="width: 140px; height: 110px">
  50         <div id="c" class="layer" style="width: 100px; height: 90px"></div>
  51     </div>
  52     <div id="b3" class="layer" style="width: 140px; height: 110px"></div>
  53 </div>
  54 </body>
  55 </html>