third_party/WebKit/LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidator-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").className = "red";
  11         document.getElementById("testElementTwo").className = "red";
  12         var forceStyleRecalc = 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         elementOne.className = "green";
  25         var forceStyleRecalc1 = document.body.offsetTop;
  26         elementOne.className = "blue";
  27         elementTwo.className = "blue";
  28         var forceStyleRecalc2 = document.body.offsetTop;
  29         elementOne.className = "snow";
  30         elementTwo.className = "snow";
  31         elementThree.className = "snow";
  32         var forceStyleRecalc3 = document.body.offsetTop;
  33         if (window.testRunner)
  34             testRunner.layoutAndPaintAsyncThen(callback);
  35     });
  36 }
  37
  38 function changeMultipleSubframeStylesAndDisplay(callback)
  39 {
  40     requestAnimationFrame(function() {
  41         var innerDocument = frames[0].document;
  42         var elementOne = innerDocument.getElementById("testElementOne");
  43         var elementTwo = innerDocument.getElementById("testElementTwo");
  44         var elementThree = innerDocument.getElementById("testElementThree");
  45         elementOne.className = "green";
  46         var forceStyleRecalc1 = innerDocument.body.offsetTop;
  47         elementOne.className = "blue";
  48         elementTwo.className = "blue";
  49         var forceStyleRecalc2 = innerDocument.body.offsetTop;
  50         elementOne.className = "snow";
  51         elementTwo.className = "snow";
  52         elementThree.className = "snow";
  53         var forceStyleRecalc3 = innerDocument.body.offsetTop;
  54         if (window.testRunner)
  55             testRunner.layoutAndPaintAsyncThen(callback);
  56     });
  57 }
  58
  59 function test()
  60 {
  61     var currentPanel = WebInspector.inspectorView.currentPanel();
  62     InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current panel should be the timeline.");
  63     Runtime.experiments.enableForTest("timelineInvalidationTracking");
  64
  65     InspectorTest.runTestSuite([
  66         function testLocalFrame(next)
  67         {
  68             InspectorTest.invokeAsyncWithTimeline("changeStylesAndDisplay", function() {
  69                 var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree);
  70                 InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first recalculate styles");
  71                 next();
  72             });
  73         },
  74
  75         function multipleStyleRecalcs(next)
  76         {
  77             InspectorTest.invokeAsyncWithTimeline("changeMultipleStylesAndDisplay", function() {
  78                 var firstRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 0);
  79                 InspectorTest.addArray(firstRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first recalculate styles");
  80
  81                 var secondRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 1);
  82                 InspectorTest.addArray(secondRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "second recalculate styles");
  83
  84                 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 2);
  85                 InspectorTest.addArray(thirdRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "third recalculate styles");
  86                 next();
  87             });
  88         },
  89
  90         function testSubframe(next)
  91         {
  92             InspectorTest.invokeAsyncWithTimeline("changeMultipleSubframeStylesAndDisplay", function() {
  93                 var firstRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 0);
  94                 InspectorTest.addArray(firstRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first recalculate styles");
  95
  96                 var secondRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 1);
  97                 InspectorTest.addArray(secondRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "second recalculate styles");
  98
  99                 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector.TimelineModel.RecordType.UpdateLayoutTree, 2);
 100                 InspectorTest.addArray(thirdRecord._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "third recalculate styles");
 101                 next();
 102             });
 103         }
 104     ]);
 105 }
 106 </script>
 107 <style>
 108     .testHolder > .red { background-color: red; }
 109     .testHolder > .green { background-color: green; }
 110     .testHolder > .blue { background-color: blue; }
 111     .testHolder > .snow { background-color: snow; }
 112     .testHolder > .red .dummy { }
 113     .testHolder > .green .dummy { }
 114     .testHolder > .blue .dummy { }
 115     .testHolder > .snow .dummy { }
 116 </style>
 117 </head>
 118 <body onload="runTest()">
 119 <p>Tests the Timeline API instrumentation of style recalc events with invalidations.</p>
 120 <div class="testHolder">
 121 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="testElementThree">PASS</div>
 122 </div>
 123 <iframe src="resources/timeline-iframe-with-style.html" style="position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>
 124 </body>
 125 </html>