third_party/WebKit/LayoutTests/inspector/tracing/timeline-grouped-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 display(callback)
   8 {
   9     requestAnimationFrame(function() {
  10         var testElements = document.body.getElementsByClassName("testElement");
  11         for (var i = 0; i < testElements.length; i++) {
  12             testElements[i].style.color = "red";
  13             testElements[i].style.backgroundColor = "blue";
  14         }
  15         if (window.testRunner)
  16             testRunner.layoutAndPaintAsyncThen(callback);
  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
  26     InspectorTest.invokeAsyncWithTimeline("display", function() {
  27         var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.Paint);
  28         InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "paint invalidations");
  29
  30         var linkifier = new WebInspector.Linkifier();
  31         var target = InspectorTest.timelineModel().target();
  32         var contentHelper = new WebInspector.TimelineDetailsContentHelper(target, linkifier, null, true);
  33         WebInspector.TimelineUIUtils._generateCauses(record.traceEvent(), target, contentHelper);
  34         var invalidationsTree = contentHelper.element.getElementsByClassName("invalidations-tree")[0];
  35         var invalidations = invalidationsTree.shadowRoot.textContent;
  36         checkStringContains(invalidations, "Inline CSS style declaration was mutated for [ DIV class='testElement' ], [ DIV class='testElement' ], and 2 others. (anonymous function) @ timeline-grouped-invalidations.html:12");
  37         checkStringContains(invalidations, "Inline CSS style declaration was mutated for [ DIV class='testElement' ], [ DIV class='testElement' ], and 2 others. (anonymous function) @ timeline-grouped-invalidations.html:13");
  38         InspectorTest.completeTest();
  39     });
  40
  41     function checkStringContains(string, contains)
  42     {
  43         var doesContain = string.indexOf(contains) >= 0;
  44         InspectorTest.check(doesContain, contains + " should be present in " + string);
  45         InspectorTest.addResult("PASS - record contained " + contains);
  46     }
  47 }
  48 </script>
  49 </head>
  50 <body onload="runTest()">
  51 <p>Tests grouped invalidations on the timeline.</p>
  52 <div class="testElement">P</div><div class="testElement">A</div>
  53 <div class="testElement">S</div><div class="testElement">S</div>
  54 </body>
  55 </html>