<!DOCTYPE html>
<title>Test behaviour of autoplay muted videos with regards to visibility</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-file.js"></script>
<body>
<script>
  window.internals.settings.setMediaPlaybackRequiresUserGesture(true);
  window.internals.runtimeFlags.autoplayMutedVideosEnabled = true;

  async_test(function(t) {
    // Create a video off screen.
    {
      var video = document.createElement('video');
      video.id = 'offscreen';
      video.src = findMediaFile('video', 'content/test');
      video.muted = true;
      video.autoplay = true;
      video.loop = true;
      video.style.position = 'absolute';
      video.style.top = '-10000px';
      document.body.appendChild(video);
    }

    // Create a video in screen.
    {
      var video = document.createElement('video');
      video.id = 'inscreen';
      video.src = findMediaFile('video', 'content/test');
      video.muted = true;
      video.autoplay = true;
      video.loop = true;
      document.body.appendChild(video);
    }

    // Create an audio in screen.
    {
      var audio = document.createElement('audio');
      audio.src = findMediaFile('audio', 'content/test');
      audio.muted = true;
      audio.autoplay = true;
      audio.loop = true;
      audio.controls = true;
      document.body.appendChild(audio);
    }

    // Create offscreen video without autoplay.
    {
      var video = document.createElement('video');
      video.id = 'offscreen-no-autoplay';
      video.src = findMediaFile('video', 'content/test');
      video.muted = true;
      video.loop = true;
      video.style.position = 'absolute';
      video.style.top = '-10000px';
      document.body.appendChild(video);
    }

    var inscreen = document.querySelector('#inscreen');
    var offscreen = document.querySelector('#offscreen');
    var offscreenNoAutoplay = document.querySelector('#offscreen-no-autoplay');
    var audio = document.querySelector('audio');

    inscreen.addEventListener('playing', t.step_func(function() {
      // The offscreen videos shouldn't play.
      assert_true(offscreen.paused);
      assert_true(offscreenNoAutoplay.paused);
      assert_false(inscreen.paused);
      assert_true(audio.paused, 'audio should not play');

      // Both autoplay videos should have loaded.
      assert_greater_than_equal(inscreen.readyState, HTMLMediaElement.HAVE_ENOUGH_DATA);
      assert_greater_than_equal(offscreen.readyState, HTMLMediaElement.HAVE_ENOUGH_DATA);

      // Move video in screen.
      offscreen.style.top = '0px';

      offscreen.addEventListener('playing', t.step_func(function() {
        // Both autoplay videos should now play.
        assert_false(inscreen.paused);
        assert_false(offscreen.paused);
        assert_true(offscreenNoAutoplay.paused);
        assert_true(audio.paused, 'audio should not play');

        // Call to play() should succeed regardless of visibility.
        offscreenNoAutoplay.play();
        offscreenNoAutoplay.addEventListener('playing', t.step_func_done(function() {
          assert_false(inscreen.paused);
          assert_false(offscreen.paused);
          assert_false(offscreenNoAutoplay.paused);
          assert_true(audio.paused, 'audio should not play');
        }));
      }));
    }));
  });
</script>
</body>