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.backgroundColor = "salmon";
12 if (window.testRunner)
13 testRunner.displayAsyncThen(callback);
17 function updateSubframeAndDisplay(callback)
19 requestAnimationFrame(function() {
20 frames[0].document.body.children[0].style.backgroundColor = "green";
21 if (window.testRunner)
22 testRunner.displayAsyncThen(callback);
28 var currentPanel = WebInspector.inspectorView.currentPanel();
29 InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current panel should be the timeline.");
30 Runtime.experiments.enableForTest("timelineInvalidationTracking");
32 InspectorTest.runTestSuite([
33 function testLocalFrame(next)
35 InspectorTest.invokeAsyncWithTimeline("display", function() {
36 var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.Paint);
37 var invalidations = record._event.invalidationTrackingEvents;
38 InspectorTest.assertEquals(invalidations.length, 2);
39 InspectorTest.assertEquals(invalidations[0].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
40 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
41 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetChange");
42 InspectorTest.assertEquals(invalidations[1].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
43 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='testElement'");
44 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetChange");
50 function testSubframe(next)
52 InspectorTest.invokeAsyncWithTimeline("updateSubframeAndDisplay", function() {
53 // The first paint corresponds to the local frame and should have no invalidations.
54 var firstPaintRecord = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.Paint);
55 var firstInvalidations = firstPaintRecord._event.invalidationTrackingEvents;
56 InspectorTest.assertEquals(firstInvalidations, undefined);
58 // The second paint corresponds to the subframe and should have our style invalidations.
59 var secondPaintRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.Paint, 1);
60 var secondInvalidations = secondPaintRecord._event.invalidationTrackingEvents;
61 InspectorTest.assertEquals(secondInvalidations.length, 1);
62 InspectorTest.assertEquals(secondInvalidations[0].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
63 InspectorTest.assertEquals(secondInvalidations[0].nodeName, "DIV");
64 InspectorTest.assertEquals(secondInvalidations[0].reason, "StyleSheetChange");
73 <body onload="runTest()">
74 <p>Tests the Timeline API instrumentation of paint events with style recalc invalidations.</p>
75 <div id="testElement">PASS</div>
76 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>