<!DOCTYPE HTML>
<html>
<head>
  <title>MSE: video resolution changes during playback should not cause video freeze (Bug 1718709)</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="mediasource.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<script class="testbody" type="text/javascript">

SimpleTest.waitForExplicitFinish();

runWithMSE(async (ms, v) => {
  await once(ms, "sourceopen");
  const sb = ms.addSourceBuffer('video/mp4');
  sb.appendBuffer(new Uint8Array(await fetchWithXHR("bug1718709_low_res.mp4")));
  ok(true, "appended low resolution video");
  sb.appendBuffer(new Uint8Array(await fetchWithXHR("bug1718709_high_res.mp4")));
  ok(true, "appended high resolution video");

  info(`start from the position which is near to the place where resolution changes`);
  v.currentTime = 13;
  ok(await v.play().then(_=>true,_=>false), "video started playing");

  // When video resolution changes, it should not cause video freeze so we check
  // its painted frame amount regularly to see if we stop updating video frames.
  let lastPaintedFramesAmount = v.mozPaintedFrames;
  const intervalHandle = setInterval(_=>{
    ok(lastPaintedFramesAmount < v.mozPaintedFrames,
       `painted frames keeps growing from ${lastPaintedFramesAmount} to ${v.mozPaintedFrames}`);
    lastPaintedFramesAmount = v.mozPaintedFrames;
  }, 1000);

  // As we didn't append full video, so we will receive `waiting` event later
  // which indicates that we can stop testing because we've finished playing
  // the high resolution part.
  await new Promise(r => {
    v.onwaiting = _ => {
      clearInterval(intervalHandle);
      r();
    }
  });
  SimpleTest.finish();
});

</script>
</body>
</html>
