Make longtask WPT layouttests less flaky

This CL improves tests in external/wpt/longtask-timing by:
* Increasing the length of a longtask from ~51 to ~60 to prevent a
coarse performance.now() granularity from affecting the tests.
* Wrapping the long tasks or iframes containing longtasks inside onload
handlers to ensure that the PerformanceObserver is registered by the
time the longtask is executed.

Test: third_party/blink/tools/run_web_tests external/wpt/longtask-timing
--iterations=1000 did not produce flakes.

Bug: 796668
Change-Id: Ic2ce59f7d221566f5443da9e9c7d36c7bd7bbe6f
Reviewed-on: https://chromium-review.googlesource.com/1138725
Commit-Queue: Nicolás Peña Moreno <npm@chromium.org>
Reviewed-by: Timothy Dresser <tdresser@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575396}

third_party/WebKit/LayoutTests/TestExpectations

@@ -3455,9 +3455,6 @@ crbug.com/792437 external/wpt/css/css-multicol/multicol-rule-outset-000.xht [ Fa
 crbug.com/636055 external/wpt/css/css-multicol/multicol-span-all-margin-nested-002.xht [ Failure ]
 crbug.com/792446 external/wpt/css/css-multicol/multicol-span-float-001.xht [ Failure ]
 
-crbug.com/796668 external/wpt/longtask-timing/longtask-in-sibling-iframe.html [ Pass Timeout ]
-crbug.com/796668 external/wpt/longtask-timing/longtask-in-sibling-iframe-crossorigin.html [ Pass Timeout ]
-
 # This test times out on debug builds, see https://crbug.com/755810
 crbug.com/626703 [ Debug ] external/wpt/html/semantics/tabular-data/processing-model-1/span-limits.html [ Skip ]
 

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-attributes.html

@@ -44,10 +44,11 @@
     );
     observer.observe({entryTypes: ['longtask']});
 
+    window.onload = () => {
         /* Generate a slow task */
         const begin = window.performance.now();
-    while (window.performance.now() < begin + 51);
-
+        while (window.performance.now() < begin + 60);
+    };
 }, 'Performance longtask entries are observable.');
 </script>
 

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-in-childiframe-crossorigin.html

@@ -45,6 +45,7 @@
         })
     );
     observer.observe({entryTypes: ['longtask']});
+    window.onload = () => {
         const iframe = document.createElement('iframe');
         iframe.id = 'child-iframe-id';
         iframe.name = 'child-iframe-name';
@@ -52,6 +53,7 @@
         iframe.sandbox = "allow-scripts";
         document.body.appendChild(iframe);
         iframe.src = 'resources/subframe-with-longtask.html';
+    };
 }, 'Performance longtask entries in cross-origin child iframe are observable in parent.');
 </script>
 

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-in-childiframe.html

@@ -49,11 +49,13 @@
         })
     );
     observer.observe({entryTypes: ['longtask']});
+    window.onload = () => {
         const iframe = document.createElement('iframe');
         iframe.id = 'child-iframe-id';
         iframe.name = 'child-iframe-name';
         document.body.appendChild(iframe);
         iframe.src = 'resources/subframe-with-longtask.html';
+    };
 }, 'Performance longtask entries in child iframe are observable in parent.');
 </script>
 

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-in-externalscript.html

@@ -5,7 +5,6 @@
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="resources/makelongtask.js"></script>
 
 <h1>Long Task: External Script</h1>
 <div id="log"></div>
@@ -41,7 +40,11 @@
         })
     );
     observer.observe({entryTypes: ['longtask']});
+    window.onload = () => {
+        const script = document.createElement('script');
+        script.src = 'resources/makelongtask.js';
+        document.body.appendChild(script);
+    }
 }, 'Performance longtask entries are observable.');
 </script>
-
 </body>
\ No newline at end of file

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-in-parentiframe.html

@@ -24,16 +24,16 @@
   }, 'Performance longtask entries in parent are observable in child iframe.');
 
   const iframe = document.createElement('iframe');
-  iframe.onload = function() {
-    t.step_timeout(function(){
-      const begin = window.performance.now();
-      while (window.performance.now() < begin + 51);
-    }, 50);
-  }
   iframe.id = 'child-iframe-id';
   iframe.name = 'child-iframe-name';
   document.body.appendChild(iframe);
   iframe.src = 'resources/subframe-observing-longtask.html';
+  iframe.onload = () => {
+    t.step_timeout( () => {
+      const begin = window.performance.now();
+      while (window.performance.now() < begin + 60);
+    }, 50);
+  };
 </script>
 
 </body>

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-in-raf.html

@@ -5,7 +5,6 @@
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="resources/raflongtask.js"></script>
 
 <h1>Long Task: requestAnimationFrame</h1>
 <div id="log"></div>
@@ -41,7 +40,11 @@
         })
     );
     observer.observe({entryTypes: ['longtask']});
+    window.onload = () => {
+        const script = document.createElement('script');
+        script.src = 'resources/raflongtask.js';
+        document.body.appendChild(script);
+    };
 }, 'Performance longtask entries are observable.');
 </script>
-
 </body>

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-in-sibling-iframe-crossorigin.html

@@ -27,6 +27,7 @@
     document.body.appendChild(observingFrame);
     observingFrame.src = 'resources/subframe-observing-longtask.html'
 
+    observingFrame.onload = () => {
       /* Create a cross-origin iframe that generates a long task. */
       const longtaskFrame = document.createElement('iframe');
       longtaskFrame.id = 'longtask-iframe-id';
@@ -35,6 +36,7 @@
       longtaskFrame.sandbox = "allow-scripts";
       document.body.appendChild(longtaskFrame);
       longtaskFrame.src = 'resources/subframe-with-longtask.html'
+    };
 }, 'Performance longtask entries from cross-origin iframe are observable in its sibling.');
 </script>
 </body>

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-in-sibling-iframe.html

@@ -27,11 +27,13 @@
     document.body.appendChild(observingFrame);
     observingFrame.src = 'resources/subframe-observing-longtask.html'
 
+    observingFrame.onload = () => {
       const longtaskFrame = document.createElement('iframe');
       longtaskFrame.id = 'longtask-iframe-id';
       longtaskFrame.name = 'longtask-iframe-name';
       document.body.appendChild(longtaskFrame);
       longtaskFrame.src = 'resources/subframe-with-longtask.html'
+    };
 }, 'Performance longtask entries are observable in sibling iframe.');
 </script>
 </body>

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/longtask-tojson.html

@@ -66,9 +66,11 @@
     );
     observer.observe({entryTypes: ['longtask']});
 
+    window.onload = () => {
         // Trigger a long task.
         const begin = window.performance.now();
-    while (window.performance.now() < begin + 51);
+        while (window.performance.now() < begin + 60);
+    };
   }, 'Test toJSON() in PerformanceLongTaskTiming and TaskAttributionTiming');
 </script>
 </body>

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/resources/makelongtask.js

 /* Generate a slow task. */
 const begin = window.performance.now();
-while (window.performance.now() < begin + 51);
+while (window.performance.now() < begin + 60);

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/resources/raflongtask.js

 window.requestAnimationFrame(function() {
   /* Generate a slow task. */
   const begin = window.performance.now();
-  while (window.performance.now() < begin + 51);
+  while (window.performance.now() < begin + 60);
 });

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/resources/subframe-with-longtask.html

@@ -7,5 +7,5 @@
 
 <script>
     const begin = window.performance.now();
-    while (window.performance.now() < begin + 51);
+    while (window.performance.now() < begin + 60);
 </script>

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/shared-renderer/longtask-in-new-window.html

@@ -38,12 +38,14 @@ async_test(t => {
   );
   observer.observe({entryTypes: ['mark', 'longtask']});
 
+  window.onload = () => {
     // Open a window with a longtask.
     const other_window = window.open('resources/frame-with-longtask.html');
     window.addEventListener('message', t.step_func(e => {
       // Do a mark (after the other window's longtask) to fire the callback.
       self.performance.mark('mark1');
     }));
+  };
 }, 'A longtask in a frame from window.open is not reported in original frame');
 </script>
 </body>

third_party/WebKit/LayoutTests/external/wpt/longtask-timing/shared-renderer/resources/frame-with-longtask.html

@@ -8,7 +8,7 @@
 
 <script>
   const begin = window.performance.now();
-  while (window.performance.now() < begin + 51);
+  while (window.performance.now() < begin + 60);
   window.opener.postMessage('Finished.', '*');
 </script>
 </body>