Implement style recalc invalidation tracking in devtools

LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations.html

Index: LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations.html
diff --git a/LayoutTests/inspector/tracing/timeline-style-recalc-invalidations.html b/LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations.html
similarity index 55%
rename from LayoutTests/inspector/tracing/timeline-style-recalc-invalidations.html
rename to LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations.html
index ae630df62479a50811817a66fe57734bbf07f2c7..c1f90a769c9e6aa4e3696b4f17c4c912bd2980a6 100644
--- a/LayoutTests/inspector/tracing/timeline-style-recalc-invalidations.html
+++ b/LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations.html
@@ -7,8 +7,9 @@
 function display(callback)
 {
     requestAnimationFrame(function() {
-        document.body.style.backgroundColor = "blue";
-        document.getElementById("testElement").style.backgroundColor = "salmon";
+        document.body.style.backgroundColor = "peachpuff";
+        document.getElementById("testElement").style.width = "100px";
+        var forceLayout = document.body.offsetTop;
         if (window.testRunner)
             testRunner.displayAsyncThen(callback);
     });
@@ -17,7 +18,9 @@ function display(callback)
 function updateSubframeAndDisplay(callback)
 {
     requestAnimationFrame(function() {
-        frames[0].document.body.children[0].style.backgroundColor = "green";
+        frames[0].document.body.style.backgroundColor = "papayawhip";
+        frames[0].document.body.children[0].style.width = "200px";
+        var forceLayout = frames[0].document.body.offsetTop;
         if (window.testRunner)
             testRunner.displayAsyncThen(callback);
     });
@@ -33,46 +36,35 @@ function test()
         function testLocalFrame(next)
         {
             InspectorTest.invokeAsyncWithTimeline("display", function() {
-                var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.Paint);
+                var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
                 var invalidations = record._event.invalidationTrackingEvents;
                 InspectorTest.assertEquals(invalidations.length, 2);
                 InspectorTest.assertEquals(invalidations[0].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
                 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
                 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetChange");
+                InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.length, 1);
                 InspectorTest.assertEquals(invalidations[1].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
                 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='testElement'");
                 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetChange");
+                InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.length, 1);
                 InspectorTest.invokeAsyncWithTimeline("updateSubframeAndDisplay", next);
             });
         },
 
         function testSubframe(next)
         {
-            var firstPaintRecord = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.Paint);
-            var secondPaintRecord = undefined;
+            var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
 
-            function findSecondPaint(record)
-            {
-                if (record.type() !== WebInspector.TimelineModel.RecordType.Paint)
-                    return false;
-                if (record === firstPaintRecord)
-                    return false;
-                secondPaintRecord = record;
-                return true;
-            }
-
-            InspectorTest.timelineModel().forAllRecords(findSecondPaint);
-
-            // The first paint corresponds to the local frame and should have no invalidations.
-            var firstInvalidations = firstPaintRecord._event.invalidationTrackingEvents;
-            InspectorTest.assertEquals(firstInvalidations, undefined);
-
-            // The second paint corresponds to the subframe and should have our style invalidations.
-            var secondInvalidations = secondPaintRecord._event.invalidationTrackingEvents;
-            InspectorTest.assertEquals(secondInvalidations.length, 1);
-            InspectorTest.assertEquals(secondInvalidations[0].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
-            InspectorTest.assertEquals(secondInvalidations[0].nodeName, "DIV");
-            InspectorTest.assertEquals(secondInvalidations[0].reason, "StyleSheetChange");
+            var invalidations = record._event.invalidationTrackingEvents;
+            InspectorTest.assertEquals(invalidations.length, 2);
+            InspectorTest.assertEquals(invalidations[0].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
+            InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
+            InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetChange");
+            InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.length, 1);
+            InspectorTest.assertEquals(invalidations[1].type, WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
+            InspectorTest.assertEquals(invalidations[1].nodeName, "DIV");
+            InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetChange");
+            InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.length, 1);
             next();
         }
     ]);
@@ -80,7 +72,7 @@ function test()
 </script>
 </head>
 <body onload="runTest()">
-<p>Tests the Timeline API instrumentation of style recalc invalidations.</p>
+<p>Tests the Timeline API instrumentation of style recalc events with invalidations.</p>
 <div id="testElement">PASS</div>
 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>
 </body>