<html>
  <head>
    <title>Test media source config changes.</title>
  </head>
  <body onload="runTest();">
    <video controls></video>
    <script src="media_utils.js" type="text/javascript"></script>
    <script src="media_source_utils.js" type="text/javascript"></script>
    <script src="encrypted_media_utils.js" type="text/javascript"></script>
    <script type="text/javascript">
      var runEncrypted = QueryString.runencrypted == 1;
      var video = document.querySelector('video');
      var mediaType = 'video/webm; codecs="vorbis, vp8"';

      var MEDIA_1 = 'bear-320x240.webm';
      var MEDIA_2 = 'bear-640x360.webm';
      if (runEncrypted) {
        MEDIA_1 = 'bear-320x240-av-enc_av.webm';
        MEDIA_2 = 'bear-640x360-av-enc_av.webm';
      }

      var MEDIA_1_WIDTH = 320;
      var MEDIA_1_HEIGHT = 240;

      var MEDIA_2_WIDTH = 640;
      var MEDIA_2_HEIGHT = 360;
      var MEDIA_2_LENGTH = 2.75;

      // The time in secs to append the second media source.
      var APPEND_TIME = 1;
      // DELTA is the time after APPEND_TIME where the second video dimensions
      // are guaranteed to take effect.
      var DELTA = 0.1;
      // Append MEDIA_2 source at APPEND_TIME, so expected total duration is:
      var TOTAL_DURATION = APPEND_TIME + MEDIA_2_LENGTH;

      function appendNextSource(mediaSource) {
        console.log('Appending next media source at ' + APPEND_TIME + 'sec.');
        var xhr = new XMLHttpRequest();
        xhr.open("GET", MEDIA_2);
        xhr.responseType = 'arraybuffer';
        xhr.addEventListener('load', function(e) {
          var onUpdateEnd = function(e) {
            console.log('Second buffer append ended.');
            srcBuffer.removeEventListener('updateend', onUpdateEnd);
            mediaSource.endOfStream();
            if (!mediaSource.duration ||
                Math.abs(mediaSource.duration - TOTAL_DURATION) > DELTA) {
              failTest('Unexpected mediaSource.duration = ' +
                       mediaSource.duration + ', expected duration = ' +
                       TOTAL_DURATION);
              return;
            }
            video.play();
          };
          console.log('Appending next media source at ' + APPEND_TIME + 'sec.');
          var srcBuffer = mediaSource.sourceBuffers[0];
          srcBuffer.addEventListener('updateend', onUpdateEnd);
          srcBuffer.timestampOffset = APPEND_TIME;
          srcBuffer.appendBuffer(new Uint8Array(e.target.response));
        });
        xhr.send();
      }

      function onTimeUpdate() {
        // crbug.com/246308
        //checkVideoProperties();

        // Seek to APPEND_TIME because after a seek a timeUpdate event is fired
        // before video width and height properties get updated.
        if (video.currentTime < APPEND_TIME - DELTA) {
          // Seek to save test execution time (about 1 secs) and to test seek
          // on the first buffer.
          video.currentTime = APPEND_TIME - DELTA;
        } else if (video.currentTime > APPEND_TIME + DELTA) {
          // Check video duration here to guarantee that second segment has been
          // appended and video total duration is updated.
          // Video duration is a float value so we check it within a range.
          if (!video.duration ||
              Math.abs(video.duration - TOTAL_DURATION) > DELTA) {
            failTest('Unexpected video.duration = ' + video.duration +
                     ', expected duration = ' + TOTAL_DURATION);
            return;
          }

          video.removeEventListener('timeupdate', onTimeUpdate);
          video.removeEventListener('ended', failTest);
          installTitleEventHandler(video, 'ended');
          // Seek to save test execution time and to test seek on second buffer.
          video.currentTime = APPEND_TIME + MEDIA_2_LENGTH * 0.9;
        }
      }

      function checkVideoProperties() {
        if (video.currentTime <= APPEND_TIME) {
          if (video.videoWidth != MEDIA_1_WIDTH ||
              video.videoHeight != MEDIA_1_HEIGHT) {
            logVideoDimensions();
            failTest('Unexpected dimensions for first video segment.');
            return;
          }
        } else if (video.currentTime >= APPEND_TIME + DELTA) {
          if (video.videoWidth != MEDIA_2_WIDTH ||
              video.videoHeight != MEDIA_2_HEIGHT) {
            logVideoDimensions();
            failTest('Unexpected dimensions for second video segment.');
            return;
          }
        }
      }

      function logVideoDimensions() {
        console.log('video.currentTime = ' + video.currentTime +
                    ', video dimensions = ' + video.videoWidth + 'x' +
                    video.videoHeight + '.');
      }

      function runTest() {
        video.addEventListener('timeupdate', onTimeUpdate);
        video.addEventListener('ended', failTest);
        if (runEncrypted) {
          loadEncryptedMedia(video, MEDIA_1, keySystem, KEY, true,
                             appendNextSource);
        } else {
          var mediaSource = loadMediaSource(MEDIA_1, mediaType,
                                            appendNextSource);
          video.src = window.URL.createObjectURL(mediaSource);
        }
      }
      </script>
  </body>
</html>