src/third_party/WebKit/LayoutTests/inspector/timeline/timeline-frame-model.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>
   6 function initialize_timelineFrameModel()
   7 {
   8
   9 InspectorTest.dumpFrame = function(frame)
  10 {
  11     var fieldsToDump = ["cpuTime", "duration", "startTime", "endTime", "id", "mainThreadFrameId", "isBackground", "timeByCategory", "other", "scripting", "painting", "rendering", "committedFrom"];
  12     function formatFields(object)
  13     {
  14         var result = {};
  15         for (var key in object) {
  16             if (fieldsToDump.indexOf(key) < 0)
  17                 continue;
  18             var value = object[key];
  19             if (typeof value === "number")
  20                 value = Number(value.toFixed(7));
  21             else if (typeof value === "object" && value)
  22                 value = formatFields(value);
  23             result[key] = value;
  24         }
  25         return result;
  26     }
  27     InspectorTest.addObject(formatFields(frame));
  28 }
  29
  30 }
  31
  32 function test()
  33 {
  34     var testData = {
  35         "main thread only": [
  36             {"startTime": 1000.000, "data":{},"endTime":1003.999, "type":"Program", "children":[
  37                 {"startTime":1000.001, "type":"BeginFrame", "data":{"id":"1"}},
  38                 {"startTime":1000.002, "endTime":1003.999, "type":"FunctionCall" }
  39             ]},
  40             {"startTime": 1016.000, "data":{},"endTime":1026.999, "type":"Program", "children":[
  41                 {"startTime":1016.001, "type":"BeginFrame", "data":{"id":"2"}},
  42                 {"startTime":1016.002, "endTime":1018.999, "type":"FunctionCall", "data":{}},
  43                 {"startTime":1019.000, "endTime":1020.999, "type":"StyleRecalculate", "data":{}},
  44                 {"startTime":1021.000, "endTime":1026.999, "type":"Layout", "data":{}},
  45             ]},
  46             {"startTime": 1032.000, "data":{},"endTime":1033.999, "type":"Program", "children":[
  47                 {"startTime":1032.001, "type":"BeginFrame", "data":{"id":"3"}},
  48             ]},
  49             {"startTime": 1048.000, "data":{},"endTime":1049.999, "type":"Program", "children":[
  50                 {"startTime":1048.001, "type":"BeginFrame", "data":{"id":"4"}},
  51             ]}
  52         ],
  53         "impl-side only": [
  54             {"startTime":1000.000, "type":"BeginFrame", "thread": "implSide"},
  55             {"startTime":1016.000, "type":"BeginFrame", "thread": "implSide"},
  56             {"startTime":1030.000, "type":"DrawFrame", "thread": "implSide"},
  57             {"startTime":1032.000, "type":"BeginFrame", "thread": "implSide"},
  58             {"startTime":1046.000, "type":"DrawFrame", "thread": "implSide"},
  59             {"startTime":1048.000, "type":"BeginFrame", "thread": "implSide"},
  60             {"startTime":1064.000, "type":"BeginFrame", "thread": "implSide"},
  61             {"startTime":1065.001, "endTime":1066, "type":"Paint", "thread": "paintWorker", "data":{}},
  62             {"startTime":1066.001, "endTime":1067, "type":"Paint", "thread": "paintWorker", "data":{}},
  63             {"startTime":1067.001, "endTime":1068, "type":"Paint", "thread": "paintWorker", "data":{}},
  64             {"startTime":1078.000, "type":"DrawFrame", "thread": "implSide"},
  65             {"startTime":1080.000, "type":"BeginFrame", "thread": "implSide"},
  66             {"startTime":1081.000, "type":"DrawFrame", "thread": "implSide"},
  67             {"startTime": 1082.000, "data":{},"endTime":1082.1, "type":"Program", "children":[]}
  68         ],
  69         "impl-side with commits": [
  70             {"startTime":1000.000, "type":"BeginFrame", "thread": "implSide"},
  71             {"startTime":1000.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
  72             {"startTime":1014.000, "type":"DrawFrame", "thread": "implSide"},
  73             {"startTime":1016.000, "type":"BeginFrame", "thread": "implSide"},
  74             {"startTime":1030.000, "type":"DrawFrame", "thread": "implSide"},
  75             {"startTime":1032.000, "type":"BeginFrame", "thread": "implSide"},
  76             {"startTime": 1001.000, "data":{},"endTime":1033.999, "type":"Program", "children":[
  77                 {"startTime":1001.001, "type":"BeginFrame", "data":{"id":"1"}},
  78                 {"startTime":1001.002, "endTime":1018.999, "type":"FunctionCall", "data":{}},
  79                 {"startTime":1019.000, "endTime":1020.999, "type":"StyleRecalculate", "data":{}},
  80                 {"startTime":1021.000, "endTime":1032.999, "type":"Layout", "data":{}},
  81                 {"startTime":1032.000, "endTime":1033.999, "type":"CompositeLayers", "data":{}},
  82             ]},
  83             {"startTime": 1034.000, "data":{},"endTime":1039.999, "type":"Program", "children":[
  84                 {"startTime":1034.002, "endTime":1039.999, "type":"FunctionCall", "data":{}},
  85             ]},
  86             {"startTime":1045.001, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"1"}},
  87             {"startTime":1046.000, "type":"DrawFrame", "thread": "implSide"},
  88             {"startTime":1048.000, "type":"BeginFrame", "thread": "implSide"},
  89             {"startTime":1048.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
  90             {"startTime":1060.001, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"2"}},
  91             {"startTime":1062.000, "type":"DrawFrame", "thread": "implSide"},
  92             {"startTime": 1049.000, "data":{},"endTime":1060.999, "type":"Program", "children":[
  93                 {"startTime":1050.001, "type":"BeginFrame", "data":{"id":"2"}},
  94                 {"startTime":1050.002, "endTime":1060.999, "type":"CompositeLayers", "data":{}},
  95             ]},
  96             {"startTime":1064.000, "type":"BeginFrame", "thread": "implSide"},
  97             {"startTime":1064.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
  98             {"startTime": 1065.000, "data":{},"endTime":1078.999, "type":"Program", "children":[
  99                 {"startTime":1065.001, "type":"BeginFrame"}
 100             ]}
 101         ],
 102         "impl-side with interleaving commits": [
 103             {"startTime":1000.000, "type":"BeginFrame", "thread": "implSide"},
 104             {"startTime":1000.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
 105             {"startTime":1014.000, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"1"}},
 106             {"startTime":1014.001, "type":"DrawFrame", "thread": "implSide"},
 107             {"startTime": 1001.000, "data":{},"endTime":1013.999, "type":"Program", "children":[
 108                 {"startTime":1001.001, "type":"BeginFrame", "data":{"id":"1"}},
 109                 {"startTime":1001.002, "endTime":1013.999, "type":"CompositeLayers", "data":{}},
 110             ]},
 111             {"startTime":1016.000, "type":"BeginFrame", "thread": "implSide"},
 112             {"startTime":1016.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
 113             {"startTime":1030.000, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"2"}},
 114             {"startTime":1030.001, "type":"DrawFrame", "thread": "implSide"},
 115             {"startTime": 1017.000, "data":{},"endTime":1029.999, "type":"Program", "children":[
 116                 {"startTime":1017.001, "type":"BeginFrame", "data":{"id":"2"}},
 117                 {"startTime":1017.002, "endTime":1025.999, "type":"FunctionCall", "data":{}},
 118                 {"startTime":1026.000, "endTime":1029.999, "type":"CompositeLayers", "data":{}},
 119             ]},
 120             {"startTime":1032.000, "type":"BeginFrame", "thread": "implSide"},
 121             {"startTime":1032.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
 122             {"startTime":1046.000, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"3"}},
 123             {"startTime":1046.001, "type":"DrawFrame", "thread": "implSide"},
 124             {"startTime": 1033.000, "data":{},"endTime":1045.999, "type":"Program", "children":[
 125                 {"startTime":1033.001, "type":"BeginFrame", "data":{"id":"3"}},
 126                 {"startTime":1033.002, "endTime":1040.999, "type":"CompositeLayers", "data":{}},
 127                 {"startTime":1041.002, "endTime":1045.999, "type":"FunctionCall", "data":{}},
 128             ]},
 129             {"startTime":1048.000, "type":"BeginFrame", "thread": "implSide"},
 130             {"startTime": 1049.000, "data":{},"endTime":1049.999, "type":"Program", "children":[
 131             ]}
 132         ],
 133         "pre-frame time accounting": [
 134             {"startTime": 1000.000, "data":{},"endTime":1029.999, "type":"Program", "children":[
 135                 {"startTime":1000.002, "endTime":1028.999, "type":"FunctionCall", "data":{}},
 136                 {"startTime":1029.000, "endTime":1029.999, "type":"ScheduleStyleRecalculation", "data":{}},
 137             ]},
 138             {"startTime":1032.000, "type":"BeginFrame", "thread": "implSide"},
 139             {"startTime":1032.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
 140             {"startTime":1034.001, "type":"ActivateLayerTree", "thread": "implSide", "data":{"id": "1"}},
 141             {"startTime":1035.001, "type":"DrawFrame", "thread": "implSide"},
 142             {"startTime": 1033.000, "data":{},"endTime":1033.999, "type":"Program", "children":[
 143                 {"startTime":1033.001, "type":"BeginFrame", "data":{"id":"1"}},
 144                 {"startTime":1033.002, "endTime":1033.400, "type":"RecalculateStyles", "data":{}},
 145                 {"startTime":1033.401, "endTime":1033.999, "type":"CompositeLayers", "data":{}},
 146             ]},
 147             {"startTime":1048.000, "type":"BeginFrame", "thread": "implSide"},
 148             {"startTime": 1050.000, "data":{},"endTime":1064.999, "type":"Program", "children":[
 149                 {"startTime":1050.002, "endTime":1058.999, "type":"FunctionCall", "data":{}},
 150                 {"startTime":1059.000, "type":"InvalidateLayout", "data":{}},
 151             ]},
 152             {"startTime":1063.001, "type":"DrawFrame", "thread": "implSide"},
 153             {"startTime":1064.000, "type":"BeginFrame", "thread": "implSide"},
 154             {"startTime":1064.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
 155             {"startTime":1071.001, "type":"ActivateLayerTree", "thread": "implSide", "data":{"id": "2"}},
 156             {"startTime":1071.002, "type":"DrawFrame", "thread": "implSide"},
 157             {"startTime": 1065.000, "data":{},"endTime":1070.999, "type":"Program", "children":[
 158                 {"startTime":1065.001, "type":"BeginFrame", "data":{"id":"2"}},
 159                 {"startTime":1065.002, "endTime":1068.000, "type":"Layout", "data":{}},
 160                 {"startTime":1068.001, "endTime":1070.999, "type":"CompositeLayers", "data":{}},
 161             ]},
 162             {"startTime":1080.000, "type":"BeginFrame", "thread": "implSide"},
 163             {"startTime":1080.001, "type":"RequestMainThreadFrame", "thread": "implSide"},
 164             {"startTime":1081.001, "type":"ActivateLayerTree", "thread": "implSide", "data":{"id": "3"}},
 165             {"startTime":1081.002, "type":"DrawFrame", "thread": "implSide"},
 166             {"startTime": 1073.000, "data":{},"endTime":1080.999, "type":"Program", "children":[
 167                 {"startTime":1073.002, "endTime":1079.999, "type":"ScrollLayer", "data":{}},
 168             ]},
 169             {"startTime":1096.000, "type":"BeginFrame", "thread": "implSide"},
 170             {"startTime":1096.001, "type":"ActivateLayerTree", "thread": "implSide", "data":{"id": "3"}},
 171             {"startTime":1096.002, "type":"DrawFrame", "thread": "implSide"},
 172             {"startTime": 1081.000, "data":{},"endTime":1081.999, "type":"Program", "children":[
 173                 {"startTime":1081.001, "type":"BeginFrame", "data":{"id":"3"}},
 174                 {"startTime":1081.001, "endTime":1081.999, "type":"CompositeLayers", "data":{}},
 175             ]}
 176         ],
 177         "record processing order": [
 178             {"startTime":1000.000, "type":"DrawFrame", "thread": "implSide"},
 179             {"startTime":1000.001, "type":"BeginFrame", "thread": "implSide"},
 180             {"startTime":1000.002, "type":"RequestMainThreadFrame", "thread": "implSide"},
 181             {"startTime":1013.003, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"1"}},
 182             {"startTime":1013.005, "type":"DrawFrame", "thread": "implSide"},
 183             {"startTime":1016.000, "type":"BeginFrame", "thread": "implSide"},
 184             {"startTime": 1001.000, "data":{},"endTime":1016.999, "type":"Program", "children":[
 185                 {"startTime":1001.001, "type":"BeginFrame", "data":{"id":"1"}},
 186                 {"startTime":1001.002, "endTime":1012.999, "type":"FunctionCall", "data":{}},
 187                 {"startTime":1013.002, "endTime":1016.999, "type":"CompositeLayers", "data":{}},
 188             ]},
 189             {"startTime":1030.000, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"1"}},
 190             {"startTime":1030.001, "type":"DrawFrame", "thread": "implSide"},
 191             {"startTime":1031.000, "type":"BeginFrame", "thread": "implSide"},
 192             {"startTime":1031.002, "type":"RequestMainThreadFrame", "thread": "implSide"},
 193             {"startTime":1061.000, "type":"ActivateLayerTree", "thread": "implSide","data":{"id":"1"}},
 194             {"startTime":1062.001, "type":"DrawFrame", "thread": "implSide"},
 195             {"startTime": 1032.000, "data":{},"endTime":1063.999, "type":"Program", "children":[
 196                 {"startTime":1032.001, "type":"BeginFrame", "data":{"id":"1"}},
 197                 {"startTime":1032.002, "endTime":1042.999, "type":"FunctionCall", "data":{}},
 198                 {"startTime":1043.002, "endTime":1062.999, "type":"CompositeLayers", "data":{}},
 199             ]},
 200             {"startTime":1080.001, "type":"DrawFrame", "thread": "implSide"}
 201         ]
 202     };
 203
 204     var timelinePanel = WebInspector.inspectorView.showPanel("timeline");
 205     timelinePanel._overviewModeSetting.set("Frames");
 206     timelinePanel._onModeChanged();
 207     var overview = timelinePanel._overviewPane;
 208     var frameModel = overview._overviewControls[0]._frameModel;
 209
 210     for (var testName in testData) {
 211         var data = testData[testName];
 212         InspectorTest.loadTimelineRecords(data);
 213         InspectorTest.addResult("Test: " + testName);
 214         frameModel.frames().forEach(InspectorTest.dumpFrame, InspectorTest);
 215     }
 216     InspectorTest.completeTest();
 217 }
 218
 219 </script>
 220 </head>
 221
 222 <body onload="runTest()">
 223 <p>
 224 Test timeline records coalescing
 225 </p>
 226
 227 </body>
 228 </html>