measure_navigation_timing.html (10692B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>window.performance User Timing clearMeasures() method is working properly with navigation timing 6 attributes</title> 7 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 8 <link rel="help" href="https://w3c.github.io/user-timing/#dom-performance-measure"/> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/common/performance-timeline-utils.js"></script> 12 <script src="resources/webperftestharness.js"></script> 13 14 <script> 15 // test data 16 var startMarkName = "mark_start"; 17 var startMarkValue; 18 var endMarkName = "mark_end"; 19 var endMarkValue; 20 var measures; 21 var testThreshold = 20; 22 23 // test measures 24 measureTestDelay = 200; 25 var TEST_MEASURES = 26 [ 27 { 28 name: "measure_nav_start_no_end", 29 startMark: "navigationStart", 30 endMark: undefined, 31 exceptionTestMessage: "window.performance.measure(\"measure_nav_start_no_end\", " + 32 "\"navigationStart\") ran without throwing any exceptions.", 33 expectedStartTime: undefined, 34 expectedDuration: undefined, 35 entryMatch: undefined 36 }, 37 { 38 name: "measure_nav_start_mark_end", 39 startMark: "navigationStart", 40 endMark: "mark_end", 41 exceptionTestMessage: "window.performance.measure(\"measure_nav_start_end\", \"navigationStart\", " + 42 "\"mark_end\") ran without throwing any exceptions.", 43 expectedStartTime: undefined, 44 expectedDuration: undefined, 45 entryMatch: undefined 46 }, 47 { 48 name: "measure_mark_start_nav_end", 49 startMark: "mark_start", 50 endMark: "responseEnd", 51 exceptionTestMessage: "window.performance.measure(\"measure_start_nav_end\", \"mark_start\", " + 52 "\"responseEnd\") ran without throwing any exceptions.", 53 expectedStartTime: undefined, 54 expectedDuration: undefined, 55 entryMatch: undefined 56 }, 57 { 58 name: "measure_nav_start_nav_end", 59 startMark: "navigationStart", 60 endMark: "responseEnd", 61 exceptionTestMessage: "window.performance.measure(\"measure_nav_start_nav_end\", " + 62 "\"navigationStart\", \"responseEnd\") ran without throwing any exceptions.", 63 expectedStartTime: undefined, 64 expectedDuration: undefined, 65 entryMatch: undefined 66 } 67 ]; 68 69 setup({explicit_done: true}); 70 71 test_namespace(); 72 73 function onload_test() 74 { 75 // test for existence of User Timing and Performance Timeline interface 76 if (!has_required_interfaces()) 77 { 78 test_true(false, 79 "The User Timing and Performance Timeline interfaces, which are required for this test, " + 80 "are defined."); 81 82 done(); 83 } 84 else 85 { 86 // create the start mark for the test measures 87 window.performance.mark(startMarkName); 88 89 // get the start mark's value 90 startMarkValue = window.performance.getEntriesByName(startMarkName)[0].startTime; 91 92 // create the test end mark using the test delay; this will allow for a significant difference between 93 // the mark values that should be represented in the duration of measures using these marks 94 step_timeout(measure_test_cb, measureTestDelay); 95 } 96 } 97 98 function measure_test_cb() 99 { 100 // create the end mark for the test measures 101 window.performance.mark(endMarkName); 102 103 // get the end mark's value 104 endMarkValue = window.performance.getEntriesByName(endMarkName)[0].startTime; 105 106 // loop through measure scenarios 107 for (var i in TEST_MEASURES) 108 { 109 var scenario = TEST_MEASURES[i]; 110 111 if (scenario.startMark != undefined && scenario.endMark == undefined) 112 { 113 // only startMark is defined, provide startMark and don't provide endMark 114 window.performance.measure(scenario.name, scenario.startMark); 115 116 // when startMark is provided to the measure() call, the value of the mark or navigation 117 // timing attribute whose name is provided is used for the startMark 118 scenario.expectedStartTime = (timingAttributes.indexOf(scenario.startMark) != -1 ? 119 window.performance.timing[scenario.startMark] - 120 window.performance.timing.navigationStart : 121 startMarkValue); 122 123 // when endMark isn't provided to the measure() call, a DOMHighResTimeStamp corresponding to 124 // the current time with a timebase of the navigationStart attribute is used 125 scenario.expectedDuration = ((new Date()) - window.performance.timing.navigationStart) - 126 scenario.expectedStartTime; 127 } 128 else if (scenario.startMark != undefined && scenario.endMark != undefined) 129 { 130 // both startMark and endMark are defined, provide both parameters 131 window.performance.measure(scenario.name, scenario.startMark, scenario.endMark); 132 133 // when startMark is provided to the measure() call, the value of the mark or navigation 134 // timing attribute whose name is provided is used for the startMark 135 scenario.expectedStartTime = (timingAttributes.indexOf(scenario.startMark) != -1 ? 136 window.performance.timing[scenario.startMark] - 137 window.performance.timing.navigationStart : 138 startMarkValue); 139 140 // when endMark is provided to the measure() call, the value of the mark whose name is 141 // provided is used for the startMark 142 scenario.expectedDuration = (timingAttributes.indexOf(scenario.endMark) != -1 ? 143 window.performance.timing[scenario.endMark] - 144 window.performance.timing.navigationStart : 145 endMarkValue) - scenario.expectedStartTime; 146 } 147 } 148 149 // test the test measures are returned by getEntriesByName 150 for (var i in TEST_MEASURES) 151 { 152 entries = window.performance.getEntriesByName(TEST_MEASURES[i].name); 153 test_measure(entries[0], 154 "window.performance.getEntriesByName(\"" + TEST_MEASURES[i].name + "\")[0]", 155 TEST_MEASURES[i].name, 156 TEST_MEASURES[i].expectedStartTime, 157 TEST_MEASURES[i].expectedDuration); 158 TEST_MEASURES[i].entryMatch = entries[0]; 159 } 160 161 done(); 162 } 163 164 function test_measure(measureEntry, measureEntryCommand, expectedName, expectedStartTime, expectedDuration) 165 { 166 // test name 167 test_true(measureEntry.name == expectedName, measureEntryCommand + ".name == \"" + expectedName + "\""); 168 169 // test startTime; since for a mark, the startTime is always equal to a mark's value or the value of a 170 // navigation timing attribute, the actual startTime should match the expected value exactly 171 test_true(Math.abs(measureEntry.startTime - expectedStartTime) == 0, 172 measureEntryCommand + ".startTime is correct"); 173 174 // test entryType 175 test_true(measureEntry.entryType == "measure", measureEntryCommand + ".entryType == \"measure\""); 176 177 // test duration, allow for an acceptable threshold in the difference between the actual duration and the 178 // expected value for the duration 179 test_true(Math.abs(measureEntry.duration - expectedDuration) <= testThreshold, measureEntryCommand + 180 ".duration is approximately correct (up to " + testThreshold + "ms difference allowed)"); 181 } 182 </script> 183 </head> 184 <body onload="onload_test();"> 185 <h1>Description</h1> 186 <p>This test validates that the performance.measure() method is working properly when navigation timing 187 attributes are used in place of mark names. This test creates the following measures to test this method: 188 <ul> 189 <li>"measure_nav_start_no_end": created using a measure() call with a navigation timing attribute 190 provided as the startMark and nothing provided as the endMark</li> 191 <li>"measure_nav_start_mark_end": created using a measure() call with a navigation timing attribute 192 provided as the startMark and a mark name provided as the endMark</li> 193 <li>"measure_mark_start_nav_end": created using a measure() call with a mark name provided as the 194 startMark and a navigation timing attribute provided as the endMark</li> 195 <li>"measure_nav_start_nav_end":created using a measure() call with a navigation timing attribute 196 provided as both the startMark and endMark</li> 197 </ul> 198 After creating each measure, the existence of these measures is validated by calling 199 performance.getEntriesByName() with each measure name 200 </p> 201 202 <div id="log"></div> 203 </body> 204 </html>