|
1 <!-- |
|
2 Any copyright is dedicated to the Public Domain. |
|
3 http://creativecommons.org/publicdomain/zero/1.0/ |
|
4 --> |
|
5 |
|
6 <!-- |
|
7 This file contains test for the Resource Timing and Performance Timeline APIs. |
|
8 The test starts by checking that all the entries were added to the performance |
|
9 object. |
|
10 The next step is to check that the "performance" object and its "getEntries()" |
|
11 methods are available. We check all the 3 methods: getEntries, |
|
12 getEntriesByName() and getEntriesByType(). |
|
13 |
|
14 As a next step, we check that the entries contain the correct information |
|
15 ("checkEntries()" method). |
|
16 The test checks that the entries contain all the required members, that the |
|
17 timings are sorted properly and that the entries were returned in |
|
18 chronological order with respect to startTime. In "checkEntries()", it is also |
|
19 checked if the order of the entries is the expected order (the expected order |
|
20 is hard-coded here). |
|
21 The last test from the "checkEntries()" method will verify the iframe case: |
|
22 the iframe must be added as an entry to this window's performance object, |
|
23 while the image from the iframe should not be added here. |
|
24 |
|
25 Next tests will check the Performance API extensions introduced by the |
|
26 resource timing: window.performance.setResourceTimingBufferSize(1) and |
|
27 window.performance.clearResourceTimings(); |
|
28 |
|
29 The last tests will verify that the xhr resources are also added as entries |
|
30 to our performance object. |
|
31 |
|
32 Meanwhile, the iframe from the page will get loaded |
|
33 (resource_timing_iframe.html). |
|
34 The iframe contains a second script that will do some tests, as well, plus |
|
35 an image - its own resource. |
|
36 The script from the iframe will check that the iframe itself was not added |
|
37 as an entry (to itself). Also, it will check that its image was added as |
|
38 entry to the iframe's performance object. |
|
39 The last check is a double check: check that no subdocuments were added as |
|
40 entries for this iframe's performance object. |
|
41 The parent's (this window) "ok_wrapper()" method will be called once the tests |
|
42 are completed. |
|
43 --> |
|
44 |
|
45 <!DOCTYPE html> |
|
46 <html> |
|
47 <head> |
|
48 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> |
|
49 <script type="application/javascript"> |
|
50 |
|
51 var mainWindowTestsDone = false; |
|
52 var iframeTestsDone = false; |
|
53 |
|
54 function ok(cond, message) { |
|
55 window.opener.ok(cond, message) |
|
56 } |
|
57 |
|
58 function is(received, expected, message) { |
|
59 window.opener.is(received, expected, message); |
|
60 } |
|
61 |
|
62 function isnot(received, notExpected, message) { |
|
63 window.opener.isnot(received, notExpected, message); |
|
64 } |
|
65 |
|
66 window.onload = function() { |
|
67 ok(!!window.performance, "Performance object should exist"); |
|
68 ok(!!window.performance.getEntries, "Performance.getEntries() should exist"); |
|
69 ok(!!window.performance.getEntriesByName, "Performance.getEntriesByName() should exist"); |
|
70 ok(!!window.performance.getEntriesByType, "Performance.getEntriesByType() should exist"); |
|
71 |
|
72 // Here, we should have 6 entries (1 css, 3 png, 1 html) since the image was loaded. |
|
73 is(window.performance.getEntries().length, 5, "Performance.getEntries() returned wrong number of entries."); |
|
74 |
|
75 ok(!!window.performance.getEntriesByType("resource").length, |
|
76 "Performance.getEntriesByType() should return some results"); |
|
77 ok(!!window.performance.getEntriesByName("http://example.com/tests/image/test/mochitest/blue.png").length, |
|
78 "Performance.getEntriesByName() should return some results"); |
|
79 |
|
80 // Checks that two calls for "getEntries()" return a different array with the same |
|
81 // entries. |
|
82 ok(window.performance.getEntries() !== window.performance.getEntries(), |
|
83 "getEntries() should return a different array object every time."); |
|
84 ok(function (array1, array2) { |
|
85 if (array1.length != array2.length) { |
|
86 return false; |
|
87 } |
|
88 for (var i = 0 ; i < array1.length ; i++) { |
|
89 if (array1[i] !== array2[i]) { |
|
90 return false; |
|
91 } |
|
92 } |
|
93 return true; |
|
94 }(window.performance.getEntries(), window.performance.getEntries()), |
|
95 "The arrays should have the same entries."); |
|
96 |
|
97 checkEntries(window.performance.getEntries()); |
|
98 |
|
99 window.performance.setResourceTimingBufferSize(1); |
|
100 is(window.performance.getEntries().length, 5, "No entries should be " + |
|
101 "removed when setResourceTimingBufferSize is called."); |
|
102 |
|
103 window.performance.setResourceTimingBufferSize(4); |
|
104 is(window.performance.getEntries().length, 5, "No entries should be " + |
|
105 "removed when setResourceTimingBufferSize is called."); |
|
106 |
|
107 window.performance.setResourceTimingBufferSize(1); |
|
108 window.performance.clearResourceTimings(); |
|
109 is(window.performance.getEntries().length, 0, "All the entries should " + |
|
110 "be removed when when clearResourceTimings is being called."); |
|
111 |
|
112 makeXhr("test-data.json", firstCheck); |
|
113 } |
|
114 |
|
115 function checkEntries(anEntryList) { |
|
116 // Check that all the entries have all the properties. |
|
117 for (var i = 0 ; i < anEntryList.length ; i++) { |
|
118 var entry = anEntryList[i]; |
|
119 |
|
120 ok(!!entry, "PerformanceEntry should not be null"); |
|
121 ok(!!entry.name, "PerformanceEntry.name should be valid."); |
|
122 ok(entry.startTime > 0, "PerformanceEntry.startTime should be grater than 0"); |
|
123 |
|
124 // The entries list should be in chronological order with respect to startTime |
|
125 if (i > 0) { |
|
126 ok(anEntryList[i - 1].startTime <= anEntryList[i].startTime, |
|
127 "Entries list should be in chronological order with respect to startTime."); |
|
128 } |
|
129 |
|
130 // Check that each entry has all the properties and that the timings were |
|
131 // returned in the expected order. |
|
132 if ("initiatorType" in entry) { |
|
133 ok("redirectStart" in entry, "PerformanceEntry.redirectStart should be part of PerformanceEntry"); |
|
134 ok("redirectEnd" in entry, "PerformanceEntry.redirectEnd should be part of PerformanceEntry"); |
|
135 ok("fetchStart" in entry, "PerformanceEntry.fetchStart should be part of PerformanceEntry"); |
|
136 ok("domainLookupStart" in entry, "PerformanceEntry.domainLookupStart should be part of PerformanceEntry"); |
|
137 ok("domainLookupEnd" in entry, "PerformanceEntry.domainLookupEnd should be part of PerformanceEntry"); |
|
138 ok("connectStart" in entry, "PerformanceEntry.connectStart should be part of PerformanceEntry"); |
|
139 ok("connectEnd" in entry, "PerformanceEntry.connectEnd should be part of PerformanceEntry"); |
|
140 ok("secureConnectionStart" in entry, "PerformanceEntry.secureConnectionStart should be part of PerformanceEntry"); |
|
141 ok("requestStart" in entry, "PerformanceEntry.requestStart should be part of PerformanceEntry"); |
|
142 ok("responseStart" in entry, "PerformanceEntry.responseStart should be part of PerformanceEntry"); |
|
143 ok("responseEnd" in entry, "PerformanceEntry.responseEnd should be part of PerformanceEntry"); |
|
144 |
|
145 // Check that timings are in proper order |
|
146 sequence = ['startTime', 'redirectStart', 'redirectEnd', 'fetchStart', |
|
147 'domainLookupStart', 'domainLookupEnd', 'connectStart', |
|
148 'connectEnd', 'requestStart', 'responseStart', 'responseEnd']; |
|
149 for (var j = 1; j < sequence.length; ++j) { |
|
150 var prop = sequence[j]; |
|
151 var prevProp = sequence[j-1]; |
|
152 ok(entry[prevProp] <= entry[prop], |
|
153 ['Expected ', prevProp, ' to happen before ', prop, |
|
154 ', got ', prevProp, ' = ', entry[prevProp], |
|
155 ', ', prop, ' = ', entry[prop]].join('')); |
|
156 } |
|
157 } |
|
158 } |
|
159 |
|
160 // Check that the entries have the expected initiator type. We can't check |
|
161 // the order (the order might depend on the platform the tests are running). |
|
162 allResources = { |
|
163 "http://mochi.test:8888/tests/SimpleTest/test.css" : "link", |
|
164 "http://example.com/tests/image/test/mochitest/blue.png" : "img", |
|
165 "http://example.com/tests/image/test/mochitest/red.png" : "object", |
|
166 "http://example.com/tests/image/test/mochitest/big.png" : "embed", |
|
167 "http://mochi.test:8888/tests/dom/tests/mochitest/general/resource_timing_iframe.html" : "subdocument"}; |
|
168 |
|
169 for (resourceName in allResources) { |
|
170 // Check that we have a resource with the specific name. |
|
171 namedEntries = window.performance.getEntriesByName(resourceName); |
|
172 ok (!!namedEntries && (namedEntries.length == 1), |
|
173 "An entry with the name '" + resourceName + "' should be available"); |
|
174 |
|
175 // Double check for the entry name. |
|
176 is (namedEntries[0].name, resourceName, "The resource name is invalid"); |
|
177 |
|
178 // Check the initiator type. |
|
179 is (namedEntries[0].initiatorType, allResources[resourceName], |
|
180 "The initiator type for " + resourceName + " is invalid"); |
|
181 } |
|
182 |
|
183 // Check that the iframe's image was NOT added as an entry to this window's performance entry. |
|
184 ok(!window.performance.getEntriesByName("http://example.com/tests/image/test/mochitest/damon.jpg").length, |
|
185 "http://example.com/tests/image/test/mochitest/damon.jpg should be a valid entry name"); |
|
186 } |
|
187 |
|
188 function firstCheck() { |
|
189 is(window.performance.getEntries().length, 1, "The first xhr entry was not added."); |
|
190 is(window.performance.getEntries()[0].initiatorType, "xmlhttprequest", |
|
191 "The initiatorType is incorect for this entry"); |
|
192 makeXhr("test-data2.json", secondCheck); |
|
193 } |
|
194 |
|
195 function secondCheck() { |
|
196 // Since the buffer max size was set to '1', 'peformance.getEntries()' should |
|
197 // return only '1' entry (first xhr results). |
|
198 is(window.performance.getEntries().length, 1, "The second xhr entry should not be " + |
|
199 "returned since the buffer size was set to 1."); |
|
200 isnot(window.performance.getEntries()[0].name, "http://mochi.test:8888/tests/dom/tests/mochitest/general/test-data2.json", |
|
201 "We returned the second xhr instead of the first one"); |
|
202 finishTest(); |
|
203 } |
|
204 |
|
205 function finishTest() { |
|
206 // Check if all the tests are completed. |
|
207 if (iframeTestsDone) { |
|
208 window.opener.finishTests(); |
|
209 } else { |
|
210 mainWindowTestsDone = true; |
|
211 } |
|
212 } |
|
213 |
|
214 function makeXhr(aUrl, aCallback) { |
|
215 var xmlhttp = new XMLHttpRequest(); |
|
216 xmlhttp.onload = aCallback; |
|
217 xmlhttp.open("get", aUrl, true); |
|
218 xmlhttp.send(); |
|
219 } |
|
220 |
|
221 function checkArraysHaveSameElementsInSameOrder(array1, array2) { |
|
222 if (array1.length != array2.length) { |
|
223 return false; |
|
224 } |
|
225 for (var i = 0 ; i < array1.length ; i++) { |
|
226 if (array1[i] !== array2[i]) { |
|
227 return false; |
|
228 } |
|
229 } |
|
230 return true; |
|
231 } |
|
232 |
|
233 function iframeTestsCompleted() { |
|
234 if (mainWindowTestsDone) { |
|
235 window.opener.finishTests(); |
|
236 } |
|
237 else { |
|
238 iframeTestsDone = true; |
|
239 } |
|
240 } |
|
241 |
|
242 </script> |
|
243 </head> |
|
244 <body> |
|
245 <a target="_blank" |
|
246 href="https://bugzilla.mozilla.org/show_bug.cgi?id=822480" |
|
247 title="Add resource timing API."> |
|
248 Bug #822480 - Add in the Resource Timing API |
|
249 </a> |
|
250 <p id="display"></p> |
|
251 <div id="content"> |
|
252 <img src="http://example.com/tests/image/test/mochitest/blue.png"> |
|
253 <object data="http://example.com/tests/image/test/mochitest/red.png" type="image/png"/> |
|
254 <embed src="http://example.com/tests/image/test/mochitest/big.png" type="image/png"/> |
|
255 <iframe sandbox="allow-same-origin allow-scripts" id="if_2" src="resource_timing_iframe.html" height="10" width="10"></iframe> |
|
256 </div> |
|
257 </body> |
|
258 </html> |