src/third_party/WebKit/LayoutTests/inspector/timeline/timeline-layer-tree-snapshot.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 <style>
   7 .layer {
   8     width: 100px;
   9     height: 100px;
  10     transform: translateZ(10px);
  11 }
  12 </style>
  13 <script>
  14
  15 function addLayer()
  16 {
  17     var element = document.createElement("div");
  18     element.className = "layer";
  19     document.body.appendChild(element);
  20 }
  21
  22 function pageStep0(doneCallback)
  23 {
  24     requestAnimationFrame(pageStep1.bind(this, doneCallback));
  25 }
  26
  27 function pageStep1(doneCallback)
  28 {
  29     addLayer();
  30     requestAnimationFrame(pageStep2.bind(this, doneCallback));
  31 }
  32
  33 function pageStep2(doneCallback)
  34 {
  35     addLayer();
  36     requestAnimationFrame(doneCallback);
  37 }
  38
  39 function test()
  40 {
  41     InspectorTest.invokeAsyncWithTimeline("pageStep0", onTimelineStopped);
  42
  43     function onTimelineStopped()
  44     {
  45         InspectorTest.printTimelineRecords(null, loadSnapshot);
  46     }
  47
  48     var pendingEventCount = 0;
  49     function loadSnapshot(record)
  50     {
  51         if (record.type() !== WebInspector.TimelineModel.RecordType.UpdateLayerTree)
  52             return;
  53         // Some updates may not produce new layer tree snapshot
  54         if (!record.data()["layerTree"])
  55             return;
  56         ++pendingEventCount;
  57         var layerTree = new WebInspector.AgentLayerTree(WebInspector.targetManager.mainTarget());
  58         layerTree.setLayers(record.data()["layerTree"], onLayersSet.bind(null, layerTree));
  59     }
  60
  61     function onLayersSet(layerTree)
  62     {
  63         InspectorTest.layerTreeModel.setLayerTree(layerTree);
  64         InspectorTest.addResult("Layer tree dump:");
  65         InspectorTest.dumpLayerTree();
  66         if (--pendingEventCount)
  67             return;
  68         InspectorTest.completeTest();
  69     }
  70 }
  71
  72 </script>
  73 </head>
  74
  75 <body onload="runTest()">
  76 <p>
  77 Tests the Timeline API instrumentation of a Layout event
  78 </p>
  79 </body>
  80 </html>