| OLD | NEW | 
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> | 
| 2 <html> | 2 <html> | 
| 3 <head> | 3 <head> | 
| 4 <script src="../../http/tests/inspector/inspector-test.js"></script> | 4 <script src="../../http/tests/inspector/inspector-test.js"></script> | 
| 5 <script src="../../http/tests/inspector/timeline-test.js"></script> | 5 <script src="../../http/tests/inspector/timeline-test.js"></script> | 
| 6 <script> | 6 <script> | 
| 7 function changeStylesAndDisplay(callback) | 7 function changeStylesAndDisplay(callback) | 
| 8 { | 8 { | 
| 9     requestAnimationFrame(function() { | 9     requestAnimationFrame(function() { | 
| 10         document.getElementById("testElementOne").style.color = "red"; | 10         document.getElementById("testElementOne").style.color = "red"; | 
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 52 { | 52 { | 
| 53     var currentPanel = WebInspector.inspectorView.currentPanel(); | 53     var currentPanel = WebInspector.inspectorView.currentPanel(); | 
| 54     InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current pan
     el should be the timeline."); | 54     InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current pan
     el should be the timeline."); | 
| 55     Runtime.experiments.enableForTest("timelineInvalidationTracking"); | 55     Runtime.experiments.enableForTest("timelineInvalidationTracking"); | 
| 56 | 56 | 
| 57     InspectorTest.runTestSuite([ | 57     InspectorTest.runTestSuite([ | 
| 58         function testLocalFrame(next) | 58         function testLocalFrame(next) | 
| 59         { | 59         { | 
| 60             InspectorTest.invokeAsyncWithTimeline("changeStylesAndDisplay", func
     tion() { | 60             InspectorTest.invokeAsyncWithTimeline("changeStylesAndDisplay", func
     tion() { | 
| 61                 var record = InspectorTest.findFirstTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles); | 61                 var record = InspectorTest.findFirstTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles); | 
| 62                 var invalidations = record._event.invalidationTrackingEvents; | 62                 InspectorTest.addArray(record._event.invalidationTrackingEvents,
      InspectorTest.InvalidationFormatters, "", "first recalc style invalidations"); | 
| 63                 InspectorTest.assertEquals(invalidations.length, 2); | 63 | 
| 64                 InspectorTest.assertEquals(invalidations[0].type, WebInspector.T
     imelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 65                 InspectorTest.assertEquals(invalidations[0].nodeName, "DIV id='t
     estElementOne'"); |  | 
| 66                 InspectorTest.assertEquals(invalidations[0].cause.reason, "Inlin
     e CSS style declaration was mutated"); |  | 
| 67                 InspectorTest.assertGreaterOrEqual(invalidations[0].cause.stackT
     race.length, 1); |  | 
| 68                 InspectorTest.assertEquals(invalidations[1].type, WebInspector.T
     imelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 69                 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='t
     estElementTwo'"); |  | 
| 70                 InspectorTest.assertEquals(invalidations[1].cause.reason, "Inlin
     e CSS style declaration was mutated"); |  | 
| 71                 InspectorTest.assertGreaterOrEqual(invalidations[1].cause.stackT
     race.length, 1); |  | 
| 72                 next(); | 64                 next(); | 
| 73             }); | 65             }); | 
| 74         }, | 66         }, | 
| 75 | 67 | 
| 76         function multipleStyleRecalcs(next) | 68         function multipleStyleRecalcs(next) | 
| 77         { | 69         { | 
| 78             InspectorTest.invokeAsyncWithTimeline("changeMultipleStylesAndDispla
     y", function() { | 70             InspectorTest.invokeAsyncWithTimeline("changeMultipleStylesAndDispla
     y", function() { | 
| 79                 var firstRecord = InspectorTest.findTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles, 0); | 71                 var firstRecord = InspectorTest.findTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles, 0); | 
| 80                 var firstInvalidations = firstRecord._event.invalidationTracking
     Events; | 72                 InspectorTest.addArray(firstRecord._event.invalidationTrackingEv
     ents, InspectorTest.InvalidationFormatters, "", "first recalc style invalidation
     s"); | 
| 81                 InspectorTest.assertEquals(firstInvalidations.length, 1); |  | 
| 82                 InspectorTest.assertEquals(firstInvalidations[0].type, WebInspec
     tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 83                 InspectorTest.assertEquals(firstInvalidations[0].nodeName, "DIV 
     id='testElementOne'"); |  | 
| 84                 InspectorTest.assertEquals(firstInvalidations[0].cause.reason, "
     Inline CSS style declaration was mutated"); |  | 
| 85                 InspectorTest.assertGreaterOrEqual(firstInvalidations[0].cause.s
     tackTrace.length, 1); |  | 
| 86 | 73 | 
| 87                 var secondRecord = InspectorTest.findTimelineRecord(WebInspector
     .TimelineModel.RecordType.RecalculateStyles, 1); | 74                 var secondRecord = InspectorTest.findTimelineRecord(WebInspector
     .TimelineModel.RecordType.RecalculateStyles, 1); | 
| 88                 var secondInvalidations = secondRecord._event.invalidationTracki
     ngEvents; | 75                 InspectorTest.addArray(secondRecord._event.invalidationTrackingE
     vents, InspectorTest.InvalidationFormatters, "", "second recalc style invalidati
     ons"); | 
| 89                 InspectorTest.assertEquals(secondInvalidations.length, 2); |  | 
| 90                 InspectorTest.assertEquals(secondInvalidations[0].type, WebInspe
     ctor.TimelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 91                 InspectorTest.assertEquals(secondInvalidations[0].nodeName, "DIV
      id='testElementOne'"); |  | 
| 92                 InspectorTest.assertEquals(secondInvalidations[0].cause.reason, 
     "Inline CSS style declaration was mutated"); |  | 
| 93                 InspectorTest.assertGreaterOrEqual(secondInvalidations[0].cause.
     stackTrace.length, 1); |  | 
| 94                 InspectorTest.assertEquals(secondInvalidations[1].type, WebInspe
     ctor.TimelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 95                 InspectorTest.assertEquals(secondInvalidations[1].nodeName, "DIV
      id='testElementTwo'"); |  | 
| 96                 InspectorTest.assertEquals(secondInvalidations[1].cause.reason, 
     "Inline CSS style declaration was mutated"); |  | 
| 97                 InspectorTest.assertGreaterOrEqual(secondInvalidations[1].cause.
     stackTrace.length, 1); |  | 
| 98 | 76 | 
| 99                 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles, 2); | 77                 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles, 2); | 
| 100                 var thirdInvalidations = thirdRecord._event.invalidationTracking
     Events; | 78                 InspectorTest.addArray(thirdRecord._event.invalidationTrackingEv
     ents, InspectorTest.InvalidationFormatters, "", "third recalc style invalidation
     s"); | 
| 101                 InspectorTest.assertEquals(thirdInvalidations.length, 3); | 79 | 
| 102                 InspectorTest.assertEquals(thirdInvalidations[0].type, WebInspec
     tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 103                 InspectorTest.assertEquals(thirdInvalidations[0].nodeName, "DIV 
     id='testElementOne'"); |  | 
| 104                 InspectorTest.assertEquals(thirdInvalidations[0].cause.reason, "
     Inline CSS style declaration was mutated"); |  | 
| 105                 InspectorTest.assertGreaterOrEqual(thirdInvalidations[0].cause.s
     tackTrace.length, 1); |  | 
| 106                 InspectorTest.assertEquals(thirdInvalidations[1].type, WebInspec
     tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 107                 InspectorTest.assertEquals(thirdInvalidations[1].nodeName, "DIV 
     id='testElementTwo'"); |  | 
| 108                 InspectorTest.assertEquals(thirdInvalidations[1].cause.reason, "
     Inline CSS style declaration was mutated"); |  | 
| 109                 InspectorTest.assertGreaterOrEqual(thirdInvalidations[1].cause.s
     tackTrace.length, 1); |  | 
| 110                 InspectorTest.assertEquals(thirdInvalidations[2].type, WebInspec
     tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 111                 InspectorTest.assertEquals(thirdInvalidations[2].nodeName, "DIV 
     id='testElementThree'"); |  | 
| 112                 InspectorTest.assertEquals(thirdInvalidations[2].cause.reason, "
     Inline CSS style declaration was mutated"); |  | 
| 113                 InspectorTest.assertGreaterOrEqual(thirdInvalidations[2].cause.s
     tackTrace.length, 1); |  | 
| 114                 next(); | 80                 next(); | 
| 115             }); | 81             }); | 
| 116         }, | 82         }, | 
| 117 | 83 | 
| 118         function testSubframe(next) | 84         function testSubframe(next) | 
| 119         { | 85         { | 
| 120             InspectorTest.invokeAsyncWithTimeline("changeSubframeStylesAndDispla
     y", function() { | 86             InspectorTest.invokeAsyncWithTimeline("changeSubframeStylesAndDispla
     y", function() { | 
| 121                 var record = InspectorTest.findFirstTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles); | 87                 var record = InspectorTest.findFirstTimelineRecord(WebInspector.
     TimelineModel.RecordType.RecalculateStyles); | 
|  | 88                 InspectorTest.addArray(record._event.invalidationTrackingEvents,
      InspectorTest.InvalidationFormatters, "", "first recalc style invalidations"); | 
| 122 | 89 | 
| 123                 var invalidations = record._event.invalidationTrackingEvents; |  | 
| 124                 InspectorTest.assertEquals(invalidations.length, 2); |  | 
| 125                 InspectorTest.assertEquals(invalidations[0].type, WebInspector.T
     imelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 126                 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY"); |  | 
| 127                 InspectorTest.assertEquals(invalidations[0].cause.reason, "Inlin
     e CSS style declaration was mutated"); |  | 
| 128                 InspectorTest.assertGreaterOrEqual(invalidations[0].cause.stackT
     race.length, 1); |  | 
| 129                 InspectorTest.assertEquals(invalidations[1].type, WebInspector.T
     imelineModel.RecordType.StyleRecalcInvalidationTracking); |  | 
| 130                 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV"); |  | 
| 131                 InspectorTest.assertEquals(invalidations[1].cause.reason, "Inlin
     e CSS style declaration was mutated"); |  | 
| 132                 InspectorTest.assertGreaterOrEqual(invalidations[1].cause.stackT
     race.length, 1); |  | 
| 133                 next(); | 90                 next(); | 
| 134             }); | 91             }); | 
| 135         } | 92         } | 
| 136     ]); | 93     ]); | 
| 137 } | 94 } | 
| 138 </script> | 95 </script> | 
| 139 </head> | 96 </head> | 
| 140 <body onload="runTest()"> | 97 <body onload="runTest()"> | 
| 141 <p>Tests the Timeline API instrumentation of style recalc events with invalidati
     ons.</p> | 98 <p>Tests the Timeline API instrumentation of style recalc events with invalidati
     ons.</p> | 
| 142 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="t
     estElementThree">PASS</div> | 99 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="t
     estElementThree">PASS</div> | 
| 143 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; le
     ft: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe> | 100 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; le
     ft: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe> | 
| 144 </body> | 101 </body> | 
| 145 </html> | 102 </html> | 
| OLD | NEW | 
|---|