Chromium Code Reviews Chromium Code Reviews
Issue 731293006:
Implement style invalidation tracking (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| Index: LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html |
| diff --git a/LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html b/LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..a2312e40828bda58fc84ac487cc4e31364799cee |
| --- /dev/null |
| +++ b/LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html |
| @@ -0,0 +1,59 @@ |
| +<!DOCTYPE HTML> |
| +<html> |
| +<head> |
| +<script src="../../http/tests/inspector/inspector-test.js"></script> |
| +<script src="../../http/tests/inspector/timeline-test.js"></script> |
| +<script> |
| +function multipleStyleRecalcsAndDisplay(callback) |
| +{ |
| + requestAnimationFrame(function() { |
| + document.getElementById("testElementOne").className = "red"; |
| + var forceStyleRecalc1 = document.body.offsetTop; |
| + document.getElementById("testElementOne").className = "snow"; |
| + var forceStyleRecalc2 = document.body.offsetTop; |
| + if (window.testRunner) |
| + testRunner.displayAsyncThen(callback); |
| + }); |
| +} |
| + |
| +function test() |
| +{ |
| + var currentPanel = WebInspector.inspectorView.currentPanel(); |
| + InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current panel should be the timeline."); |
| + Runtime.experiments.enableForTest("timelineInvalidationTracking"); |
| + |
| + InspectorTest.runTestSuite([ |
|
caseq
2014/12/02 14:59:42
do you need a suite here?
pdr.
2014/12/03 04:33:53
Nope, fixed!
|
| + function testMultipleStyleRecalcsChange(next) |
| + { |
| + InspectorTest.invokeAsyncWithTimeline("multipleStyleRecalcsAndDisplay", function() { |
|
caseq
2014/12/02 14:59:42
please extract into a named function below, this w
pdr.
2014/12/03 04:33:53
Done.
|
| + var firstRecalc = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles, 0); |
| + InspectorTest.addArray(firstRecalc._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first style recalc"); |
| + var secondRecalc = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles, 1); |
| + InspectorTest.addArray(secondRecalc._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "second style recalc"); |
| + var firstPaint = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.Paint, 0); |
| + InspectorTest.addArray(firstPaint._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first paint"); |
| + |
| + var thirdRecalc = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles, 2); |
| + InspectorTest.assertTrue(thirdRecalc === undefined, "There should be no additional style recalc records."); |
| + var secondPaint = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.Paint, 1); |
| + InspectorTest.assertTrue(secondPaint === undefined, "There should be no additional paint records."); |
| + next(); |
| + }); |
| + } |
| + ]); |
| +} |
| +</script> |
| +<style> |
| + .testHolder > .red { background-color: red; } |
| + .testHolder > .green { background-color: green; } |
| + .testHolder > .blue { background-color: blue; } |
| + .testHolder > .snow { background-color: snow; } |
| +</style> |
| +</head> |
| +<body onload="runTest()"> |
| +<p>Tests the Timeline API instrumentation of multiple style recalc invalidations and ensures they are all collected on the paint event.</p> |
| +<div class="testHolder"> |
| +<div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="testElementThree">PASS</div> |
| +</div> |
| +</body> |
| +</html> |
