| 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..20405ef343b7576f79926175673e1d4f4a0aa5c3
|
| --- /dev/null
|
| +++ b/LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html
|
| @@ -0,0 +1,57 @@
|
| +<!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.invokeAsyncWithTimeline("multipleStyleRecalcsAndDisplay", testMultipleStyleRecalcs);
|
| +
|
| + function testMultipleStyleRecalcs()
|
| + {
|
| + 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.");
|
| + InspectorTest.completeTest();
|
| + }
|
| +}
|
| +</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>
|
|
|
Chromium Code Reviews
Issue 731293006:
Implement style invalidation tracking (Closed)
Base URL: svn://svn.chromium.org/blink/trunk