Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(450)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations.html

Issue 653283005: Implement style recalc invalidation tracking in devtools (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fix minor typeo: _addInvalidationTrackingEvent Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « LayoutTests/inspector/tracing/timeline-style-recalc-invalidations-expected.txt ('k') | LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 display(callback) 7 function display(callback)
8 { 8 {
9 requestAnimationFrame(function() { 9 requestAnimationFrame(function() {
10 document.body.style.backgroundColor = "blue"; 10 document.body.style.backgroundColor = "peachpuff";
11 document.getElementById("testElement").style.backgroundColor = "salmon"; 11 document.getElementById("testElement").style.width = "100px";
12 var forceLayout = document.body.offsetTop;
12 if (window.testRunner) 13 if (window.testRunner)
13 testRunner.displayAsyncThen(callback); 14 testRunner.displayAsyncThen(callback);
14 }); 15 });
15 } 16 }
16 17
17 function updateSubframeAndDisplay(callback) 18 function updateSubframeAndDisplay(callback)
18 { 19 {
19 requestAnimationFrame(function() { 20 requestAnimationFrame(function() {
20 frames[0].document.body.children[0].style.backgroundColor = "green"; 21 frames[0].document.body.style.backgroundColor = "papayawhip";
22 frames[0].document.body.children[0].style.width = "200px";
23 var forceLayout = frames[0].document.body.offsetTop;
21 if (window.testRunner) 24 if (window.testRunner)
22 testRunner.displayAsyncThen(callback); 25 testRunner.displayAsyncThen(callback);
23 }); 26 });
24 } 27 }
25 28
26 function test() 29 function test()
27 { 30 {
28 var currentPanel = WebInspector.inspectorView.currentPanel(); 31 var currentPanel = WebInspector.inspectorView.currentPanel();
29 InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current pan el should be the timeline."); 32 InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current pan el should be the timeline.");
30 Runtime.experiments.enableForTest("timelineInvalidationTracking"); 33 Runtime.experiments.enableForTest("timelineInvalidationTracking");
31 34
32 InspectorTest.runTestSuite([ 35 InspectorTest.runTestSuite([
33 function testLocalFrame(next) 36 function testLocalFrame(next)
34 { 37 {
35 InspectorTest.invokeAsyncWithTimeline("display", function() { 38 InspectorTest.invokeAsyncWithTimeline("display", function() {
36 var record = InspectorTest.findFirstTimelineRecord(WebInspector. TimelineModel.RecordType.Paint); 39 var record = InspectorTest.findFirstTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles);
37 var invalidations = record._event.invalidationTrackingEvents; 40 var invalidations = record._event.invalidationTrackingEvents;
38 InspectorTest.assertEquals(invalidations.length, 2); 41 InspectorTest.assertEquals(invalidations.length, 2);
39 InspectorTest.assertEquals(invalidations[0].type, WebInspector.T racingTimelineModel.RecordType.StyleRecalcInvalidationTracking); 42 InspectorTest.assertEquals(invalidations[0].type, WebInspector.T racingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
40 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY"); 43 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
41 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetC hange"); 44 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetC hange");
45 InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.l ength, 1);
42 InspectorTest.assertEquals(invalidations[1].type, WebInspector.T racingTimelineModel.RecordType.StyleRecalcInvalidationTracking); 46 InspectorTest.assertEquals(invalidations[1].type, WebInspector.T racingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
43 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='t estElement'"); 47 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='t estElement'");
44 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetC hange"); 48 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetC hange");
49 InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.l ength, 1);
45 InspectorTest.invokeAsyncWithTimeline("updateSubframeAndDisplay" , next); 50 InspectorTest.invokeAsyncWithTimeline("updateSubframeAndDisplay" , next);
46 }); 51 });
47 }, 52 },
48 53
49 function testSubframe(next) 54 function testSubframe(next)
50 { 55 {
51 var firstPaintRecord = InspectorTest.findFirstTimelineRecord(WebInsp ector.TimelineModel.RecordType.Paint); 56 var record = InspectorTest.findFirstTimelineRecord(WebInspector.Time lineModel.RecordType.RecalculateStyles);
52 var secondPaintRecord = undefined;
53 57
54 function findSecondPaint(record) 58 var invalidations = record._event.invalidationTrackingEvents;
55 { 59 InspectorTest.assertEquals(invalidations.length, 2);
56 if (record.type() !== WebInspector.TimelineModel.RecordType.Pain t) 60 InspectorTest.assertEquals(invalidations[0].type, WebInspector.Traci ngTimelineModel.RecordType.StyleRecalcInvalidationTracking);
57 return false; 61 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
58 if (record === firstPaintRecord) 62 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetChang e");
59 return false; 63 InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.lengt h, 1);
60 secondPaintRecord = record; 64 InspectorTest.assertEquals(invalidations[1].type, WebInspector.Traci ngTimelineModel.RecordType.StyleRecalcInvalidationTracking);
61 return true; 65 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV");
62 } 66 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetChang e");
63 67 InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.lengt h, 1);
64 InspectorTest.timelineModel().forAllRecords(findSecondPaint);
65
66 // The first paint corresponds to the local frame and should have no invalidations.
67 var firstInvalidations = firstPaintRecord._event.invalidationTrackin gEvents;
68 InspectorTest.assertEquals(firstInvalidations, undefined);
69
70 // The second paint corresponds to the subframe and should have our style invalidations.
71 var secondInvalidations = secondPaintRecord._event.invalidationTrack ingEvents;
72 InspectorTest.assertEquals(secondInvalidations.length, 1);
73 InspectorTest.assertEquals(secondInvalidations[0].type, WebInspector .TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking);
74 InspectorTest.assertEquals(secondInvalidations[0].nodeName, "DIV");
75 InspectorTest.assertEquals(secondInvalidations[0].reason, "StyleShee tChange");
76 next(); 68 next();
77 } 69 }
78 ]); 70 ]);
79 } 71 }
80 </script> 72 </script>
81 </head> 73 </head>
82 <body onload="runTest()"> 74 <body onload="runTest()">
83 <p>Tests the Timeline API instrumentation of style recalc invalidations.</p> 75 <p>Tests the Timeline API instrumentation of style recalc events with invalidati ons.</p>
84 <div id="testElement">PASS</div> 76 <div id="testElement">PASS</div>
85 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; le ft: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe> 77 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; le ft: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>
86 </body> 78 </body>
87 </html> 79 </html>
OLDNEW
« no previous file with comments | « LayoutTests/inspector/tracing/timeline-style-recalc-invalidations-expected.txt ('k') | LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidations-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698