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']});
 
-    /* Generate a slow task */
-    const begin = window.performance.now();
-    while (window.performance.now() < begin + 51);
-
+    window.onload = () => {
+        /* Generate a slow task */
+        const begin = window.performance.now();
+        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,13 +45,15 @@
         })
     );
     observer.observe({entryTypes: ['longtask']});
-    const iframe = document.createElement('iframe');
-    iframe.id = 'child-iframe-id';
-    iframe.name = 'child-iframe-name';
-    // Simulate cross-origin by using sandbox.
-    iframe.sandbox = "allow-scripts";
-    document.body.appendChild(iframe);
-    iframe.src = 'resources/subframe-with-longtask.html';
+    window.onload = () => {
+        const iframe = document.createElement('iframe');
+        iframe.id = 'child-iframe-id';
+        iframe.name = 'child-iframe-name';
+        // Simulate cross-origin by using sandbox.
+        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']});
-    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';
+    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,14 +27,16 @@
     document.body.appendChild(observingFrame);
     observingFrame.src = 'resources/subframe-observing-longtask.html'
 
-    /* Create a cross-origin iframe that generates a long task. */
-    const longtaskFrame = document.createElement('iframe');
-    longtaskFrame.id = 'longtask-iframe-id';
-    longtaskFrame.name = 'longtask-iframe-name';
-    // Simulate cross-origin by using sandbox.
-    longtaskFrame.sandbox = "allow-scripts";
-    document.body.appendChild(longtaskFrame);
-    longtaskFrame.src = 'resources/subframe-with-longtask.html'
+    observingFrame.onload = () => {
+      /* Create a cross-origin iframe that generates a long task. */
+      const longtaskFrame = document.createElement('iframe');
+      longtaskFrame.id = 'longtask-iframe-id';
+      longtaskFrame.name = 'longtask-iframe-name';
+      // Simulate cross-origin by using sandbox.
+      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'
 
-    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'
+    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']});
 
-    // Trigger a long task.
-    const begin = window.performance.now();
-    while (window.performance.now() < begin + 51);
+    window.onload = () => {
+        // Trigger a long task.
+        const begin = window.performance.now();
+        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']});
 
-  // 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');
-  }));
+  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>