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     -webkit-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.layerTreeModel.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, onLayerTreeChanged);
  46         InspectorTest.printTimelineRecords(null, loadSnapshot);
  47     }
  48
  49     var pendingEventCount = 0;
  50     function loadSnapshot(record)
  51     {
  52         if (record.type !== WebInspector.TimelineModel.RecordType.UpdateLayerTree)
  53             return;
  54         // Some updates may not produce new layer tree snapshot
  55         if (!record.data["layerTree"])
  56             return;
  57         ++pendingEventCount;
  58         InspectorTest.layerTreeModel.setSnapshot(new WebInspector.LayerTreeSnapshot(record.data["layerTree"]));
  59     }
  60
  61     function onLayerTreeChanged()
  62     {
  63         InspectorTest.addResult("Layer tree dump:");
  64         InspectorTest.dumpLayerTree();
  65         if (--pendingEventCount)
  66             return;
  67         InspectorTest.layerTreeModel.removeEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, onLayerTreeChanged);
  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>