third_party/WebKit/LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <script src="../../http/tests/inspector/inspector-test.js"></script>
   5 <script src="../../http/tests/inspector/timeline-test.js"></script>
   6 <script>
   7 function multipleStyleRecalcsAndDisplay(callback)
   8 {
   9     requestAnimationFrame(function() {
  10         document.getElementById("testElementOne").className = "red";
  11         var forceStyleRecalc1 = document.body.offsetTop;
  12         document.getElementById("testElementOne").className = "snow";
  13         var forceStyleRecalc2 = document.body.offsetTop;
  14         if (window.testRunner)
  15             testRunner.layoutAndPaintAsyncThen(callback);
  16     });
  17 }
  18
  19
  20 function test()
  21 {
  22     var currentPanel = WebInspector.inspectorView.currentPanel();
  23     InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current panel should be the timeline.");
  24     Runtime.experiments.enableForTest("timelineInvalidationTracking");
  25     InspectorTest.invokeAsyncWithTimeline("multipleStyleRecalcsAndDisplay", testMultipleStyleRecalcs);
  26
  27     function testMultipleStyleRecalcs()
  28     {
  29         var firstRecalc = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 0);
  30         InspectorTest.addArray(firstRecalc._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first style recalc");
  31         var secondRecalc = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 1);
  32         InspectorTest.addArray(secondRecalc._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "second style recalc");
  33         var firstPaint = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.Paint, 0);
  34         InspectorTest.addArray(firstPaint._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first paint");
  35
  36         var thirdRecalc = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 2);
  37         InspectorTest.assertTrue(thirdRecalc === undefined, "There should be no additional style recalc records.");
  38         var secondPaint = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.Paint, 1);
  39         InspectorTest.assertTrue(secondPaint === undefined, "There should be no additional paint records.");
  40         InspectorTest.completeTest();
  41     }
  42 }
  43 </script>
  44 <style>
  45     .testHolder > .red { background-color: red; }
  46     .testHolder > .green { background-color: green; }
  47     .testHolder > .blue { background-color: blue; }
  48     .testHolder > .snow { background-color: snow; }
  49     .testHolder > .red .dummy { }
  50     .testHolder > .green .dummy { }
  51     .testHolder > .blue .dummy { }
  52     .testHolder > .snow .dummy { }
  53 </style>
  54 </head>
  55 <body onload="runTest()">
  56 <p>Tests the Timeline API instrumentation of multiple style recalc invalidations and ensures they are all collected on the paint event.</p>
  57 <div class="testHolder">
  58 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="testElementThree">PASS</div>
  59 </div>
  60 </body>
  61 </html>