<!doctype html>
<html>
  <head>
    <title>Test suspend()resume()</title>
    <style type="text/css">
      header {
        margin: 20px 0;
      }
      #results {
        white-space: pre;
        font-family: monospace;
      }
    </style>
  </head>

  <body>
    <h1>Test suspend()/resume()</h1>

    <p>
      The functionality of suspend()/resume() can't currently be tested with an OfflineAudioContext,
      so they need to be tested manually here.
    </p>
    <p>
      You may want to open up a console window to see the messages, in addition to viewing the
      messages in the Results area below.
    </p>

    <h2>Test 1</h2>
    <p>
      Test for <a href="crbug.com/483002">issue 483002</a>
    </p>
    <p>
      Perform the following steps
      <ol>
        <li>
          Start Test: you should hear a tone.
        </li>
        <li>
          Run Test: This runs the test.  You may press this multiple times.  Each press should cause
          "suspended" and "running" to be printed out in the Results section below and in the
          console.
          </li>
        <li>
          End Test: Press this to end the test and stop the audio.
        </li>
      </ol>
    </p>
    <button onclick="test1Start()">Test 1: Start Test</button>
    <button onclick="test1Run()">Test 1: Run Test</button>
    <button onclick="test1End()">Test 1: End Test</button>
    <br></br>

    <h2>Test 2</h2>
    <p>
      Test for <a href="crbug.com/483269">issue 483269</a>
    </p>
    <p>
      Perform the following steps
      <ol>
        <li>
          Start Test: you should hear a tone.  Wait a little bit before proceeding.
        </li>
        <li>
          Run Test: You may press this multiple times. This calls suspend()/resume() multiple times.
          The tone should stop momentarily, but restart very quickly. You should still hear the
          tone.
        </li>
        <li>
          End Test: Stops the tone.
        </li>
      </ol>
    </p>
    <p>
      If you do not hear a tone after running the test (but before ending), the test has failed.
    </p>
    <button onclick="test2Start()">Test 2: Start Test</button>
    <button onclick="test2Run()">Test 2: Run Test </button>
    <button onclick="test2End()">Test 2: End Test </button>

    <header>Results</header>
    <div id="results"></div>

    <script>
      var context = new AudioContext();
      var testCount = 0;
      var oscillator;

      function test1Start() {
        oscillator = context.createOscillator();
        oscillator.connect(context.destination);
        oscillator.start();
        log("Test 1 Start");
      }

      function test1Run() {
        testCount += 1;
        context.suspend().then(function () {
          log(context.state, testCount);
          return context.resume().then(function () {
            log(context.state, testCount);
          }, function (e) {
            log("Failed to resume context: " + e, testCount);
          });
        }, function (e) {
          log("Failed to suspend context: " + e, testCount);
        }).then(function () {;
          log("Test 1 Run: should should be audible");
        });
      }

      function test1End() {
        oscillator.stop();
        log("Test 1 End");
      }

      function test2Start() {
        if (context.state === "suspended") {
          context.resume().then(function () {},
            function (e) { log("Failed to resume context: " + e); })
        }

        oscillator = context.createOscillator();
        oscillator.connect(context.destination);
        oscillator.start();
        log("Test 2 Start");
      }

      function test2Run() {
        context.suspend();
        context.resume();
        context.suspend();
        context.suspend();
        context.resume().then(function () {
          if (context.state === "running") {
            log("Test 2 Run: sound should be audible");
          } else {
            log("Test 2 Run: FAIL: context not running!");
          }
        });
      }

      function test2End() {
        oscillator.stop();
        log("Test 2 End");
      }

      function log(message, count) {
        var prefix = count + ": ";

        if (count === undefined)
          prefix = "";
        else
          prefix = count + ": ";
        console.log(prefix + message);
        var results = document.querySelector("#results");
        results.textContent += prefix + message + "\n";
      }
    </script>

  </body>
</html>