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..fcb246db793f1f2699d1a1575defa2316b9cd08d 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 renderDuration = 0.5;
 
     // 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 + '.');

[Raymond Toy, 2015/12/02 19:33:41]

I know this isn't part of this CL, but is there any way to know what the actual
start and end values should be?

[hongchan, 2015/12/03 19:28:31]

1. This extractPanningTransition() method is actually not necessary because we
have suspend/resume. We know when the transition starts/ends so there no need to
find the transition manually.

2. However, if you really want to find out the start/end value, we can just
cache two values from two while statement.

[Raymond Toy, 2015/12/03 19:50:54]

Well, the test always passes so it seems not really useful except as an
informational message. (It would be nice if js-test had a testInfo method.)

Ideally, if we could a priori determine what start and end are supposed to be
and then verify that the actual data had these values, we would make the test
more useful.  As it is now, the test just tells you what was found, but we don't
actually know if that's correct.  So this test will only tell us if the start
and end values ever change.  Which might be good enough?

 
       return {
         left: chanL.subarray(start, end),
@@ -121,15 +116,15 @@
       };
     }
 
-
+    // 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, renderDuration * sampleRate, sampleRate);
       var source = context.createBufferSource();
       var panner = context.createStereoPanner();
-      var stereoBuffer = createConstantBuffer(context, 128, [1.0, 1.0]);
+      var stereoBuffer = createConstantBuffer(context, renderDuration * sampleRate, [1.0, 1.0]);
 
       source.buffer = stereoBuffer;
-      source.loop = true;
 
       panner.pan.value = options.startPanValue;
 
@@ -137,10 +132,12 @@
       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/10 of the render
+      // duration.
+      context.suspend(0.1 * renderDuration).then(function () {
+        panner.pan.value = options.endPanValue;
+        context.resume();
+      });
 
       context.startRendering().then(function (buffer) {
         var actual = extractPanningTransition(buffer);