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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 731293006: Implement style invalidation tracking (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Address reviewer comments, cleanup Created 6 years 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-all-invalidator-types-expected.txt ('k') | LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidator-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 changeStylesAndDisplay(callback) 7 function changeStylesAndDisplay(callback)
8 { 8 {
9 requestAnimationFrame(function() { 9 requestAnimationFrame(function() {
10 document.getElementById("testElementOne").className = "red"; 10 document.getElementById("testElementOne").className = "red";
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
60 { 60 {
61 var currentPanel = WebInspector.inspectorView.currentPanel(); 61 var currentPanel = WebInspector.inspectorView.currentPanel();
62 InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current pan el should be the timeline."); 62 InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current pan el should be the timeline.");
63 Runtime.experiments.enableForTest("timelineInvalidationTracking"); 63 Runtime.experiments.enableForTest("timelineInvalidationTracking");
64 64
65 InspectorTest.runTestSuite([ 65 InspectorTest.runTestSuite([
66 function testLocalFrame(next) 66 function testLocalFrame(next)
67 { 67 {
68 InspectorTest.invokeAsyncWithTimeline("changeStylesAndDisplay", func tion() { 68 InspectorTest.invokeAsyncWithTimeline("changeStylesAndDisplay", func tion() {
69 var record = InspectorTest.findFirstTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles); 69 var record = InspectorTest.findFirstTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles);
70 var invalidations = record._event.invalidationTrackingEvents; 70 InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters, "", "first recalculate styles");
71 InspectorTest.assertEquals(invalidations.length, 2);
72 InspectorTest.assertEquals(invalidations[0].type, WebInspector.T imelineModel.RecordType.StyleRecalcInvalidationTracking);
73 InspectorTest.assertEquals(invalidations[0].nodeName, "DIV id='t estElementOne' class='red'");
74 InspectorTest.assertEquals(invalidations[0].cause.reason, "Style Invalidator");
75 InspectorTest.assertGreaterOrEqual(invalidations[0].cause.stackT race.length, 1);
76 InspectorTest.assertEquals(invalidations[1].type, WebInspector.T imelineModel.RecordType.StyleRecalcInvalidationTracking);
77 InspectorTest.assertEquals(invalidations[1].nodeName, "DIV id='t estElementTwo' class='red'");
78 InspectorTest.assertEquals(invalidations[1].cause.reason, "Style Invalidator");
79 InspectorTest.assertGreaterOrEqual(invalidations[1].cause.stackT race.length, 1);
80 next(); 71 next();
81 }); 72 });
82 }, 73 },
83 74
84 function multipleStyleRecalcs(next) 75 function multipleStyleRecalcs(next)
85 { 76 {
86 InspectorTest.invokeAsyncWithTimeline("changeMultipleStylesAndDispla y", function() { 77 InspectorTest.invokeAsyncWithTimeline("changeMultipleStylesAndDispla y", function() {
87 var firstRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 0); 78 var firstRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 0);
88 var firstInvalidations = firstRecord._event.invalidationTracking Events; 79 InspectorTest.addArray(firstRecord._event.invalidationTrackingEv ents, InspectorTest.InvalidationFormatters, "", "first recalculate styles");
89 InspectorTest.assertEquals(firstInvalidations.length, 1);
90 InspectorTest.assertEquals(firstInvalidations[0].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
91 InspectorTest.assertEquals(firstInvalidations[0].nodeName, "DIV id='testElementOne' class='green'");
92 InspectorTest.assertEquals(firstInvalidations[0].cause.reason, " StyleInvalidator");
93 InspectorTest.assertGreaterOrEqual(firstInvalidations[0].cause.s tackTrace.length, 1);
94 80
95 var secondRecord = InspectorTest.findTimelineRecord(WebInspector .TimelineModel.RecordType.RecalculateStyles, 1); 81 var secondRecord = InspectorTest.findTimelineRecord(WebInspector .TimelineModel.RecordType.RecalculateStyles, 1);
96 var secondInvalidations = secondRecord._event.invalidationTracki ngEvents; 82 InspectorTest.addArray(secondRecord._event.invalidationTrackingE vents, InspectorTest.InvalidationFormatters, "", "second recalculate styles");
97 InspectorTest.assertEquals(secondInvalidations.length, 2);
98 InspectorTest.assertEquals(secondInvalidations[0].type, WebInspe ctor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
99 InspectorTest.assertEquals(secondInvalidations[0].nodeName, "DIV id='testElementOne' class='blue'");
100 InspectorTest.assertEquals(secondInvalidations[0].cause.reason, "StyleInvalidator");
101 InspectorTest.assertGreaterOrEqual(secondInvalidations[0].cause. stackTrace.length, 1);
102 InspectorTest.assertEquals(secondInvalidations[1].type, WebInspe ctor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
103 InspectorTest.assertEquals(secondInvalidations[1].nodeName, "DIV id='testElementTwo' class='blue'");
104 InspectorTest.assertEquals(secondInvalidations[1].cause.reason, "StyleInvalidator");
105 InspectorTest.assertGreaterOrEqual(secondInvalidations[1].cause. stackTrace.length, 1);
106 83
107 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 2); 84 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 2);
108 var thirdInvalidations = thirdRecord._event.invalidationTracking Events; 85 InspectorTest.addArray(thirdRecord._event.invalidationTrackingEv ents, InspectorTest.InvalidationFormatters, "", "third recalculate styles");
109 InspectorTest.assertEquals(thirdInvalidations.length, 3);
110 InspectorTest.assertEquals(thirdInvalidations[0].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
111 InspectorTest.assertEquals(thirdInvalidations[0].nodeName, "DIV id='testElementOne' class='snow'");
112 InspectorTest.assertEquals(thirdInvalidations[0].cause.reason, " StyleInvalidator");
113 InspectorTest.assertGreaterOrEqual(thirdInvalidations[0].cause.s tackTrace.length, 1);
114 InspectorTest.assertEquals(thirdInvalidations[1].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
115 InspectorTest.assertEquals(thirdInvalidations[1].nodeName, "DIV id='testElementTwo' class='snow'");
116 InspectorTest.assertEquals(thirdInvalidations[1].cause.reason, " StyleInvalidator");
117 InspectorTest.assertGreaterOrEqual(thirdInvalidations[1].cause.s tackTrace.length, 1);
118 InspectorTest.assertEquals(thirdInvalidations[2].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
119 InspectorTest.assertEquals(thirdInvalidations[2].nodeName, "DIV id='testElementThree' class='snow'");
120 InspectorTest.assertEquals(thirdInvalidations[2].cause.reason, " StyleInvalidator");
121 InspectorTest.assertGreaterOrEqual(thirdInvalidations[2].cause.s tackTrace.length, 1);
122 next(); 86 next();
123 }); 87 });
124 }, 88 },
125 89
126 function testSubframe(next) 90 function testSubframe(next)
127 { 91 {
128 InspectorTest.invokeAsyncWithTimeline("changeMultipleSubframeStylesA ndDisplay", function() { 92 InspectorTest.invokeAsyncWithTimeline("changeMultipleSubframeStylesA ndDisplay", function() {
129 var firstRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 0); 93 var firstRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 0);
130 var firstInvalidations = firstRecord._event.invalidationTracking Events; 94 InspectorTest.addArray(firstRecord._event.invalidationTrackingEv ents, InspectorTest.InvalidationFormatters, "", "first recalculate styles");
131 InspectorTest.assertEquals(firstInvalidations.length, 1);
132 InspectorTest.assertEquals(firstInvalidations[0].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
133 InspectorTest.assertEquals(firstInvalidations[0].nodeName, "DIV id='testElementOne' class='green'");
134 InspectorTest.assertEquals(firstInvalidations[0].cause.reason, " StyleInvalidator");
135 InspectorTest.assertGreaterOrEqual(firstInvalidations[0].cause.s tackTrace.length, 1);
136 95
137 var secondRecord = InspectorTest.findTimelineRecord(WebInspector .TimelineModel.RecordType.RecalculateStyles, 1); 96 var secondRecord = InspectorTest.findTimelineRecord(WebInspector .TimelineModel.RecordType.RecalculateStyles, 1);
138 var secondInvalidations = secondRecord._event.invalidationTracki ngEvents; 97 InspectorTest.addArray(secondRecord._event.invalidationTrackingE vents, InspectorTest.InvalidationFormatters, "", "second recalculate styles");
139 InspectorTest.assertEquals(secondInvalidations.length, 2);
140 InspectorTest.assertEquals(secondInvalidations[0].type, WebInspe ctor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
141 InspectorTest.assertEquals(secondInvalidations[0].nodeName, "DIV id='testElementOne' class='blue'");
142 InspectorTest.assertEquals(secondInvalidations[0].cause.reason, "StyleInvalidator");
143 InspectorTest.assertGreaterOrEqual(secondInvalidations[0].cause. stackTrace.length, 1);
144 InspectorTest.assertEquals(secondInvalidations[1].type, WebInspe ctor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
145 InspectorTest.assertEquals(secondInvalidations[1].nodeName, "DIV id='testElementTwo' class='blue'");
146 InspectorTest.assertEquals(secondInvalidations[1].cause.reason, "StyleInvalidator");
147 InspectorTest.assertGreaterOrEqual(secondInvalidations[1].cause. stackTrace.length, 1);
148 98
149 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 2); 99 var thirdRecord = InspectorTest.findTimelineRecord(WebInspector. TimelineModel.RecordType.RecalculateStyles, 2);
150 var thirdInvalidations = thirdRecord._event.invalidationTracking Events; 100 InspectorTest.addArray(thirdRecord._event.invalidationTrackingEv ents, InspectorTest.InvalidationFormatters, "", "third recalculate styles");
151 InspectorTest.assertEquals(thirdInvalidations.length, 3);
152 InspectorTest.assertEquals(thirdInvalidations[0].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
153 InspectorTest.assertEquals(thirdInvalidations[0].nodeName, "DIV id='testElementOne' class='snow'");
154 InspectorTest.assertEquals(thirdInvalidations[0].cause.reason, " StyleInvalidator");
155 InspectorTest.assertGreaterOrEqual(thirdInvalidations[0].cause.s tackTrace.length, 1);
156 InspectorTest.assertEquals(thirdInvalidations[1].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
157 InspectorTest.assertEquals(thirdInvalidations[1].nodeName, "DIV id='testElementTwo' class='snow'");
158 InspectorTest.assertEquals(thirdInvalidations[1].cause.reason, " StyleInvalidator");
159 InspectorTest.assertGreaterOrEqual(thirdInvalidations[1].cause.s tackTrace.length, 1);
160 InspectorTest.assertEquals(thirdInvalidations[2].type, WebInspec tor.TimelineModel.RecordType.StyleRecalcInvalidationTracking);
161 InspectorTest.assertEquals(thirdInvalidations[2].nodeName, "DIV id='testElementThree' class='snow'");
162 InspectorTest.assertEquals(thirdInvalidations[2].cause.reason, " StyleInvalidator");
163 InspectorTest.assertGreaterOrEqual(thirdInvalidations[2].cause.s tackTrace.length, 1);
164 next(); 101 next();
165 }); 102 });
166 } 103 }
167 ]); 104 ]);
168 } 105 }
169 </script> 106 </script>
170 <style> 107 <style>
171 .testHolder > .red { background-color: red; } 108 .testHolder > .red { background-color: red; }
172 .testHolder > .green { background-color: green; } 109 .testHolder > .green { background-color: green; }
173 .testHolder > .blue { background-color: blue; } 110 .testHolder > .blue { background-color: blue; }
174 .testHolder > .snow { background-color: snow; } 111 .testHolder > .snow { background-color: snow; }
175 </style> 112 </style>
176 </style>
177 </head> 113 </head>
178 <body onload="runTest()"> 114 <body onload="runTest()">
179 <p>Tests the Timeline API instrumentation of style recalc events with invalidati ons.</p> 115 <p>Tests the Timeline API instrumentation of style recalc events with invalidati ons.</p>
180 <div class="testHolder"> 116 <div class="testHolder">
181 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="t estElementThree">PASS</div> 117 <div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="t estElementThree">PASS</div>
182 </div> 118 </div>
183 <iframe src="resources/timeline-iframe-with-style.html" style="position: absolut e; left: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe> 119 <iframe src="resources/timeline-iframe-with-style.html" style="position: absolut e; left: 40px; top: 40px; width: 100px; height: 100px; border: none"></iframe>
184 </body> 120 </body>
185 </html> 121 </html>
OLDNEW
« no previous file with comments | « LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types-expected.txt ('k') | LayoutTests/inspector/tracing/timeline-style-recalc-with-invalidator-invalidations-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698