4 <script src="../../http/tests/inspector/inspector-test.js"></script>
5 <script src="../../http/tests/inspector/timeline-test.js"></script>
7 function display(callback)
9 requestAnimationFrame(function() {
10 document.body.style.backgroundColor = "blue";
11 document.getElementById("testElement").style.width = "100px";
12 var forceLayout = document.body.offsetTop;
13 if (window.testRunner)
14 testRunner.displayAsyncThen(callback);
18 function updateSubframeAndDisplay(callback)
20 requestAnimationFrame(function() {
21 frames[0].document.body.children[0].style.width = "200px";
22 var forceLayout = frames[0].document.body.offsetTop;
23 if (window.testRunner)
24 testRunner.displayAsyncThen(callback);
30 var currentPanel = WebInspector.inspectorView.currentPanel();
31 InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current panel should be the timeline.");
32 Runtime.experiments.enableForTest("timelineInvalidationTracking");
34 InspectorTest.runTestSuite([
35 function testLocalFrame(next)
37 InspectorTest.invokeAsyncWithTimeline("display", function() {
38 var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.Paint);
39 var invalidations = record._event.invalidationTrackingEvents;
40 InspectorTest.assertEquals(invalidations.length, 3);
41 InspectorTest.assertEquals(invalidations[0].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
42 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
43 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetChange");
44 InspectorTest.assertEquals(invalidations[1].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
45 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='testElement'");
46 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetChange");
47 InspectorTest.assertEquals(invalidations[2].type, WebInspector.TracingTimelineModel.RecordType.LayoutInvalidationTracking);
48 InspectorTest.assertEquals(invalidations[2].nodeName, "DIV id='testElement'");
49 InspectorTest.assertGreaterOrEqual(invalidations[2].stackTrace.length, 1);
55 function testSubframe(next)
57 InspectorTest.invokeAsyncWithTimeline("updateSubframeAndDisplay", function() {
58 // The first paint corresponds to the local frame and should have no invalidations.
59 var firstPaintRecord = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.Paint);
60 var firstInvalidations = firstPaintRecord._event.invalidationTrackingEvents;
61 InspectorTest.assertEquals(firstInvalidations, undefined);
63 // The second paint corresponds to the subframe and should have our layout/style invalidations.
64 var secondPaintRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.Paint, 1);
65 var secondInvalidations = secondPaintRecord._event.invalidationTrackingEvents;
66 InspectorTest.assertEquals(secondInvalidations.length, 3);
67 InspectorTest.assertEquals(secondInvalidations[0].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
68 InspectorTest.assertEquals(secondInvalidations[0].nodeName, "DIV");
69 InspectorTest.assertEquals(secondInvalidations[0].reason, "StyleSheetChange");
70 InspectorTest.assertEquals(secondInvalidations[1].type, WebInspector.TracingTimelineModel.RecordType.LayoutInvalidationTracking);
71 InspectorTest.assertEquals(secondInvalidations[1].nodeName, "DIV");
72 InspectorTest.assertGreaterOrEqual(secondInvalidations[1].stackTrace.length, 1);
73 InspectorTest.assertEquals(secondInvalidations[2].type, WebInspector.TracingTimelineModel.RecordType.LayoutInvalidationTracking);
74 InspectorTest.assertEquals(secondInvalidations[2].nodeName, "#document");
75 InspectorTest.assertGreaterOrEqual(secondInvalidations[2].stackTrace.length, 1);
84 <body onload="runTest()">
85 <p>Tests the Timeline API instrumentation of paint events with layout invalidations.</p>
86 <div id="testElement">PASS</div>
87 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>