| 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 multipleStyleRecalcsAndDisplay() | 7 function multipleStyleRecalcsAndDisplay() |
| 8 { | 8 { |
| 9 document.getElementById("testElementOne").className = "red"; | 9 document.getElementById("testElementOne").className = "red"; |
| 10 var forceStyleRecalc1 = document.body.offsetTop; | 10 var forceStyleRecalc1 = document.body.offsetTop; |
| 11 document.getElementById("testElementOne").className = "snow"; | 11 document.getElementById("testElementOne").className = "snow"; |
| 12 var forceStyleRecalc2 = document.body.offsetTop; | 12 var forceStyleRecalc2 = document.body.offsetTop; |
| 13 return waitForFrame(); | 13 return waitForFrame(); |
| 14 } | 14 } |
| 15 | 15 |
| 16 | 16 |
| 17 function test() | 17 function test() |
| 18 { | 18 { |
| 19 Runtime.experiments.enableForTest("timelineInvalidationTracking"); | 19 Runtime.experiments.enableForTest("timelineInvalidationTracking"); |
| 20 InspectorTest.invokeAsyncWithTimeline("multipleStyleRecalcsAndDisplay", test
MultipleStyleRecalcs); | 20 InspectorTest.invokeAsyncWithTimeline("multipleStyleRecalcsAndDisplay", test
MultipleStyleRecalcs); |
| 21 | 21 |
| 22 function testMultipleStyleRecalcs() | 22 function testMultipleStyleRecalcs() |
| 23 { | 23 { |
| 24 InspectorTest.dumpInvalidations(WebInspector.TimelineModel.RecordType.Up
dateLayoutTree, 0, "first style recalc"); | 24 InspectorTest.dumpInvalidations(TimelineModel.TimelineModel.RecordType.U
pdateLayoutTree, 0, "first style recalc"); |
| 25 InspectorTest.dumpInvalidations(WebInspector.TimelineModel.RecordType.Up
dateLayoutTree, 1, "second style recalc"); | 25 InspectorTest.dumpInvalidations(TimelineModel.TimelineModel.RecordType.U
pdateLayoutTree, 1, "second style recalc"); |
| 26 InspectorTest.dumpInvalidations(WebInspector.TimelineModel.RecordType.Pa
int, 0, "first paint"); | 26 InspectorTest.dumpInvalidations(TimelineModel.TimelineModel.RecordType.P
aint, 0, "first paint"); |
| 27 | 27 |
| 28 var thirdRecalc = InspectorTest.findTimelineRecord(WebInspector.Timeline
Model.RecordType.UpdateLayoutTree, 2); | 28 var thirdRecalc = InspectorTest.findTimelineRecord(TimelineModel.Timelin
eModel.RecordType.UpdateLayoutTree, 2); |
| 29 InspectorTest.assertTrue(thirdRecalc === undefined, "There should be no
additional style recalc records."); | 29 InspectorTest.assertTrue(thirdRecalc === undefined, "There should be no
additional style recalc records."); |
| 30 var secondPaint = InspectorTest.findTimelineRecord(WebInspector.Timeline
Model.RecordType.Paint, 1); | 30 var secondPaint = InspectorTest.findTimelineRecord(TimelineModel.Timelin
eModel.RecordType.Paint, 1); |
| 31 InspectorTest.assertTrue(secondPaint === undefined, "There should be no
additional paint records."); | 31 InspectorTest.assertTrue(secondPaint === undefined, "There should be no
additional paint records."); |
| 32 InspectorTest.completeTest(); | 32 InspectorTest.completeTest(); |
| 33 } | 33 } |
| 34 } | 34 } |
| 35 </script> | 35 </script> |
| 36 <style> | 36 <style> |
| 37 .testHolder > .red { background-color: red; } | 37 .testHolder > .red { background-color: red; } |
| 38 .testHolder > .green { background-color: green; } | 38 .testHolder > .green { background-color: green; } |
| 39 .testHolder > .blue { background-color: blue; } | 39 .testHolder > .blue { background-color: blue; } |
| 40 .testHolder > .snow { background-color: snow; } | 40 .testHolder > .snow { background-color: snow; } |
| 41 .testHolder > .red .dummy { } | 41 .testHolder > .red .dummy { } |
| 42 .testHolder > .green .dummy { } | 42 .testHolder > .green .dummy { } |
| 43 .testHolder > .blue .dummy { } | 43 .testHolder > .blue .dummy { } |
| 44 .testHolder > .snow .dummy { } | 44 .testHolder > .snow .dummy { } |
| 45 </style> | 45 </style> |
| 46 </head> | 46 </head> |
| 47 <body onload="runTest()"> | 47 <body onload="runTest()"> |
| 48 <p>Tests the Timeline API instrumentation of multiple style recalc invalidations
and ensures they are all collected on the paint event.</p> | 48 <p>Tests the Timeline API instrumentation of multiple style recalc invalidations
and ensures they are all collected on the paint event.</p> |
| 49 <div class="testHolder"> | 49 <div class="testHolder"> |
| 50 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="t
estElementThree">PASS</div> | 50 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="t
estElementThree">PASS</div> |
| 51 </div> | 51 </div> |
| 52 </body> | 52 </body> |
| 53 </html> | 53 </html> |
| OLD | NEW |