| <!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> |
| <body> |
| <script> |
| window.internals.settings.setAutoplayPolicy('user-gesture-required'); |
| window.internals.runtimeFlags.autoplayMutedVideosEnabled = true; |
| |
| async_test(function(t) { |
| // Create a video off screen. |
| { |
| var video = document.createElement('video'); |
| video.id = 'offscreen'; |
| video.src = 'content/test.ogv'; |
| 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 = 'content/test.ogv'; |
| 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 = 'content/test.oga'; |
| 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 = 'content/test.ogv'; |
| 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> |
