<!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>Press "Start" button to start the test using a single oscillator.</p>
    <p>Then press "Suspend" or "Resume" buttons as desired.  "Suspend" should stop the audio.
    "Resume" should resume the audio immediately.</p>

    <p>Some tests to run:</p>

    <ul>
      <li>Suspend/Resume Test
        <ol>
          <li>Press "Start test"; audio should be heard.</li>
          <li>Press "Suspend" multiple times.  The first press should stop the audio.  Each
          subsequent press should do nothing, but the console should show that each press is
          resolved successfully.
          </li>
          <li>Press "Resume".  The first press should resume audio immediately.  Each subsequent
          press should do nothing, but the console should show that each press is resolved
          successfully.
          </li>
          <li>Press "Stop test" to stop the test; audio should stop.</li>
        </ol>
      </li>
      <li>Closed Test
        <ol>
          <li>Press "Start test"; audio should be heard.</li>
          <li>Press "Stop test"; audio should stop</li>
          <li>Press "Suspend" or "Resume".  Each press should result in a rejected promise
          immediately with an error that suspend or resume is invalid on a closed context.
          </li>
        </ol>
      </li>
    </ul>
    
    <p>See <a href="crbug.com/476429">issue 476429</a></p>

    <button onclick="startTest()">Start test</button>
    <button onclick="stopTest()">Stop test</button>
    <button onclick="suspend()">Suspend</button>
    <button onclick="resume()">Resume</button>

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

    <script>
      // This is loosely based on the test from isue 476429.
      var context;
      var osc;

      var nextSuspendID = 0;
      var nextResumeID = 0;

      function startTest() {
        try {
          context = new AudioContext() || webkitAudioContext();
        } catch (e) {
          log("Neither AudioContext nor webkitAudioContext found");
          return;
        }

        if (!context.suspend || !context.resume) {
          log("AudioContext lacks suspend/resume support");
          return;
        }

        osc = context.createOscillator();
        osc.connect(context.destination);
        osc.start();
      }

      function suspend() {
        var suspendID = nextSuspendID++;
        log("suspend request: " + suspendID);
        context.suspend()
          .then(function() {
            log("suspend resolved: " + suspendID);
          }, function(e) {
            log("suspend rejected: " + suspendID + "; error: " + e);
          });
      }

      function resume() {
        var resumeID = nextResumeID++;
        log("resume request: " + resumeID);
        context.resume()
          .then(function() {
            log("resume resolved: " + resumeID);
          }, function(e) {
            log("resume rejected: " + resumeID + "; error: " + e);
          });
      }

      function stopTest() {
        if (context) {
          osc.stop();
          osc = null;
          context.close()
            .then(function() {
              log("Context closed.");
            }, function(e) {
              log("Unable to close context: " + e);
            });
        }
      }

      function log(message) {
        console.log(message);
        var results = document.querySelector("#results");
        results.textContent += message + "\n";
      }
    </script>
  </body>
</html>