Fix flaky WebAudio layout tests

third_party/WebKit/LayoutTests/webaudio/stereopannernode-no-glitch.html

Index: third_party/WebKit/LayoutTests/webaudio/stereopannernode-no-glitch.html
diff --git a/third_party/WebKit/LayoutTests/webaudio/stereopannernode-no-glitch.html b/third_party/WebKit/LayoutTests/webaudio/stereopannernode-no-glitch.html
index eccf740ea5737f47e70b820943dd3bdebdfa7b02..3631e2a8b39763195ecb9dd9c0b7b7f63922139e 100644
--- a/third_party/WebKit/LayoutTests/webaudio/stereopannernode-no-glitch.html
+++ b/third_party/WebKit/LayoutTests/webaudio/stereopannernode-no-glitch.html
@@ -12,14 +12,8 @@
     description('Test if StereoPannerNode producing glitches by crossing zero.');
     window.jsTestIsAsync = true;
 
-    var audit = Audit.createTaskRunner();
-
     var sampleRate = 44100;
-
-    // Note that this layout test requires rather large render duration because
-    // we need enough time to do something useful in the |onstatechange| event
-    // before rendering finishes.
-    var renderDuration = 20;
+    var renderLength = 2 * sampleRate;
 
     // The threshold for glitch detection. This was experimentally determined.
     var GLITCH_THRESHOLD = 0.0005;
@@ -34,6 +28,7 @@
       numberOfArrayLog: 2
     };
 
+    var audit = Audit.createTaskRunner();
 
     // Extract a transitional region from the AudioBuffer. If no transition
     // found, fail this test.
@@ -63,7 +58,7 @@
       }
       end = index;
 
-      testPassed('Transition found. (length = ' + (end - start) + ')');
+      testPassed('Transition found between sample #' + start + ' and #' + end + '.');
 
       return {
         left: chanL.subarray(start, end),
@@ -121,12 +116,13 @@
       };
     }
 
-
+    // Build audio graph and render. Change the pan parameter in the middle of
+    // rendering.
     function panAndVerify(options, done) {
-      var context = new OfflineAudioContext(2, 44100 * renderDuration, 44100);
+      var context = new OfflineAudioContext(2, renderLength, sampleRate);
       var source = context.createBufferSource();
       var panner = context.createStereoPanner();
-      var stereoBuffer = createConstantBuffer(context, 128, [1.0, 1.0]);
+      var stereoBuffer = createConstantBuffer(context, 1, [1.0, 1.0]);
 
       source.buffer = stereoBuffer;
       source.loop = true;
@@ -137,10 +133,11 @@
       panner.connect(context.destination);
       source.start();
 
-      context.onstatechange = function () {
-        if (context.state === 'running')
-          panner.pan.value = options.endPanValue;
-      };
+      // Schedule the parameter transition by the setter at 1 second.
+      context.suspend(1.0).then(function () {
+        panner.pan.value = options.endPanValue;
+        context.resume();
+      });
 
       context.startRendering().then(function (buffer) {
         var actual = extractPanningTransition(buffer);