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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 727253002: Add a test of invalidations with multiple RecalcStyle events (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 1 month 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 | « no previous file | 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 changeStylesAndDisplay(callback)
8 { 8 {
9 requestAnimationFrame(function() { 9 requestAnimationFrame(function() {
10 document.body.style.backgroundColor = "peachpuff"; 10 document.getElementById("testElementOne").style.color = "red";
11 document.getElementById("testElement").style.width = "100px"; 11 document.getElementById("testElementTwo").style.color = "blue";
12 var forceLayout = document.body.offsetTop; 12 var forceLayout = document.body.offsetTop;
13 if (window.testRunner) 13 if (window.testRunner)
14 testRunner.displayAsyncThen(callback); 14 testRunner.displayAsyncThen(callback);
15 }); 15 });
16 } 16 }
17 17
18 function updateSubframeAndDisplay(callback) 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.displayAsyncThen(callback);
37 });
38 }
39
40 function changeSubframeStylesAndDisplay(callback)
19 { 41 {
20 requestAnimationFrame(function() { 42 requestAnimationFrame(function() {
21 frames[0].document.body.style.backgroundColor = "papayawhip"; 43 frames[0].document.body.style.backgroundColor = "papayawhip";
22 frames[0].document.body.children[0].style.width = "200px"; 44 frames[0].document.body.children[0].style.width = "200px";
23 var forceLayout = frames[0].document.body.offsetTop; 45 var forceLayout = frames[0].document.body.offsetTop;
24 if (window.testRunner) 46 if (window.testRunner)
25 testRunner.displayAsyncThen(callback); 47 testRunner.displayAsyncThen(callback);
26 }); 48 });
27 } 49 }
28 50
29 function test() 51 function test()
30 { 52 {
31 var currentPanel = WebInspector.inspectorView.currentPanel(); 53 var currentPanel = WebInspector.inspectorView.currentPanel();
32 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.");
33 Runtime.experiments.enableForTest("timelineInvalidationTracking"); 55 Runtime.experiments.enableForTest("timelineInvalidationTracking");
34 56
35 InspectorTest.runTestSuite([ 57 InspectorTest.runTestSuite([
36 function testLocalFrame(next) 58 function testLocalFrame(next)
37 { 59 {
38 InspectorTest.invokeAsyncWithTimeline("display", function() { 60 InspectorTest.invokeAsyncWithTimeline("changeStylesAndDisplay", func tion() {
39 var record = InspectorTest.findFirstTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles); 61 var record = InspectorTest.findFirstTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles);
40 var invalidations = record._event.invalidationTrackingEvents; 62 var invalidations = record._event.invalidationTrackingEvents;
41 InspectorTest.assertEquals(invalidations.length, 2); 63 InspectorTest.assertEquals(invalidations.length, 2);
42 InspectorTest.assertEquals(invalidations[0].type, WebInspector.T imelineModel.RecordType.StyleRecalcInvalidationTracking); 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].reason, "StyleSheetC hange");
67 InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.l ength, 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].reason, "StyleSheetC hange");
71 InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.l ength, 1);
72 next();
73 });
74 },
75
76 function multipleStyleRecalcs(next)
77 {
78 InspectorTest.invokeAsyncWithTimeline("changeMultipleStylesAndDispla y", function() {
79 var firstRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 0);
80 var firstInvalidations = firstRecord._event.invalidationTracking Events;
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].reason, "StyleS heetChange");
85 InspectorTest.assertGreaterOrEqual(firstInvalidations[0].stackTr ace.length, 1);
86
87 var secondRecord = InspectorTest.findTimelineRecord(WebInspector .TimelineModel.RecordType.RecalculateStyles, 1);
88 var secondInvalidations = secondRecord._event.invalidationTracki ngEvents;
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].reason, "Style SheetChange");
93 InspectorTest.assertGreaterOrEqual(secondInvalidations[0].stackT race.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].reason, "Style SheetChange");
97 InspectorTest.assertGreaterOrEqual(secondInvalidations[1].stackT race.length, 1);
98
99 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 2);
100 var thirdInvalidations = thirdRecord._event.invalidationTracking Events;
101 InspectorTest.assertEquals(thirdInvalidations.length, 3);
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].reason, "StyleS heetChange");
105 InspectorTest.assertGreaterOrEqual(thirdInvalidations[0].stackTr ace.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].reason, "StyleS heetChange");
109 InspectorTest.assertGreaterOrEqual(thirdInvalidations[1].stackTr ace.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].reason, "StyleS heetChange");
113 InspectorTest.assertGreaterOrEqual(thirdInvalidations[2].stackTr ace.length, 1);
114 next();
115 });
116 },
117
118 function testSubframe(next)
119 {
120 InspectorTest.invokeAsyncWithTimeline("changeSubframeStylesAndDispla y", function() {
121 var record = InspectorTest.findFirstTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles);
122
123 var invalidations = record._event.invalidationTrackingEvents;
124 InspectorTest.assertEquals(invalidations.length, 2);
125 InspectorTest.assertEquals(invalidations[0].type, WebInspector.T imelineModel.RecordType.StyleRecalcInvalidationTracking);
43 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY"); 126 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
44 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetC hange"); 127 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetC hange");
45 InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.l ength, 1); 128 InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.l ength, 1);
46 InspectorTest.assertEquals(invalidations[1].type, WebInspector.T imelineModel.RecordType.StyleRecalcInvalidationTracking); 129 InspectorTest.assertEquals(invalidations[1].type, WebInspector.T imelineModel.RecordType.StyleRecalcInvalidationTracking);
47 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='t estElement'"); 130 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV");
48 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetC hange"); 131 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetC hange");
49 InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.l ength, 1); 132 InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.l ength, 1);
50 InspectorTest.invokeAsyncWithTimeline("updateSubframeAndDisplay" , next); 133 next();
51 }); 134 });
52 },
53
54 function testSubframe(next)
55 {
56 var record = InspectorTest.findFirstTimelineRecord(WebInspector.Time lineModel.RecordType.RecalculateStyles);
57
58 var invalidations = record._event.invalidationTrackingEvents;
59 InspectorTest.assertEquals(invalidations.length, 2);
60 InspectorTest.assertEquals(invalidations[0].type, WebInspector.Timel ineModel.RecordType.StyleRecalcInvalidationTracking);
61 InspectorTest.assertEquals(invalidations[0].nodeName, "BODY");
62 InspectorTest.assertEquals(invalidations[0].reason, "StyleSheetChang e");
63 InspectorTest.assertGreaterOrEqual(invalidations[0].stackTrace.lengt h, 1);
64 InspectorTest.assertEquals(invalidations[1].type, WebInspector.Timel ineModel.RecordType.StyleRecalcInvalidationTracking);
65 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV");
66 InspectorTest.assertEquals(invalidations[1].reason, "StyleSheetChang e");
67 InspectorTest.assertGreaterOrEqual(invalidations[1].stackTrace.lengt h, 1);
68 next();
69 } 135 }
70 ]); 136 ]);
71 } 137 }
72 </script> 138 </script>
73 </head> 139 </head>
74 <body onload="runTest()"> 140 <body onload="runTest()">
75 <p>Tests the Timeline API instrumentation of style recalc events with invalidati ons.</p> 141 <p>Tests the Timeline API instrumentation of style recalc events with invalidati ons.</p>
76 <div id="testElement">PASS</div> 142 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="t estElementThree">PASS</div>
77 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; le ft: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe> 143 <iframe src="resources/timeline-iframe-paint.html" style="position: absolute; le ft: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>
78 </body> 144 </body>
79 </html> 145 </html>
OLDNEW
« no previous file with comments | « no previous file | 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