third_party/WebKit/LayoutTests/inspector/tracing/timeline-style-recalc-with-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 changeStylesAndDisplay(callback)
   8 {
   9     requestAnimationFrame(function() {
  10         document.getElementById("testElementOne").style.color = "red";
  11         document.getElementById("testElementTwo").style.color = "blue";
  12         var forceLayout = document.body.offsetTop;
  13         if (window.testRunner)
  14             testRunner.layoutAndPaintAsyncThen(callback);
  15     });
  16 }
  17
  18 function changeMultipleStylesAndDisplay(callback)
  19 {
  20     requestAnimationFrame(function() {
  21         var elementOne = document.getElementById("testElementOne");
  22         var elementTwo = document.getElementById("testElementTwo");
  23         var elementThree = document.getElementById("testElementThree");
  24
  25         elementOne.style.backgroundColor = "orangered";
  26         var forceStyleRecalc1 = document.body.offsetTop;
  27         elementOne.style.color = "mediumvioletred";
  28         elementTwo.style.color = "deepskyblue";
  29         var forceStyleRecalc2 = document.body.offsetTop;
  30         elementOne.style.color = "tomato";
  31         elementTwo.style.color = "mediumslateblue";
  32         elementThree.style.color = "mediumspringgreen";
  33         var forceStyleRecalc3 = document.body.offsetTop;
  34
  35         if (window.testRunner)
  36             testRunner.layoutAndPaintAsyncThen(callback);
  37     });
  38 }
  39
  40 function changeSubframeStylesAndDisplay(callback)
  41 {
  42     requestAnimationFrame(function() {
  43         frames[0].document.body.style.backgroundColor = "papayawhip";
  44         frames[0].document.body.children[0].style.width = "200px";
  45         var forceLayout = frames[0].document.body.offsetTop;
  46         if (window.testRunner)
  47             testRunner.layoutAndPaintAsyncThen(callback);
  48     });
  49 }
  50
  51 function test()
  52 {
  53     var currentPanel = WebInspector.inspectorView.currentPanel();
  54     InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current panel should be the timeline.");
  55     Runtime.experiments.enableForTest("timelineInvalidationTracking");
  56
  57     InspectorTest.runTestSuite([
  58         function testLocalFrame(next)
  59         {
  60             InspectorTest.invokeAsyncWithTimeline("changeStylesAndDisplay", function() {
  61                 var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree);
  62                 InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first recalc style invalidations");
  63
  64                 next();
  65             });
  66         },
  67
  68         function multipleStyleRecalcs(next)
  69         {
  70             InspectorTest.invokeAsyncWithTimeline("changeMultipleStylesAndDisplay", function() {
  71                 var firstRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 0);
  72                 InspectorTest.addArray(firstRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first recalc style invalidations");
  73
  74                 var secondRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 1);
  75                 InspectorTest.addArray(secondRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "second recalc style invalidations");
  76
  77                 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 2);
  78                 InspectorTest.addArray(thirdRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "third recalc style invalidations");
  79
  80                 next();
  81             });
  82         },
  83
  84         function testSubframe(next)
  85         {
  86             InspectorTest.invokeAsyncWithTimeline("changeSubframeStylesAndDisplay", function() {
  87                 var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree);
  88                 InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first recalc style invalidations");
  89
  90                 next();
  91             });
  92         }
  93     ]);
  94 }
  95 </script>
  96 </head>
  97 <body onload="runTest()">
  98 <p>Tests the Timeline API instrumentation of style recalc events with invalidations.</p>
  99 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="testElementThree">PASS</div>
 100 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>
 101 </body>
 102 </html>