<!DOCTYPE html>
<html>
<head>
    <title>document-level-media-user-gesture-quirk</title>
    <script src=media-file.js></script>
    <script src=video-test.js></script>
    <script>
    function runTest() {
        var video1 = document.getElementById('video1');
        var video2 = document.getElementById('video2');
        
        run('internals.setMediaElementRestrictions(video1, "RequireUserGestureForAudioRateChange")');
        run('internals.setMediaElementRestrictions(video2, "RequireUserGestureForAudioRateChange")');
        run('internals.settings.setNeedsSiteSpecificQuirks(true)');

        consoleWrite("Trying to play the first video without a user gesture");
        run('video1.play().then(failTest).catch(playFirstVideoWithUserGesture)');
    }

    function playFirstVideoWithUserGesture() {
        consoleWrite("Playback was denied - trying to play the first video with a user gesture");
        runWithKeyDown(() => {
            run('video1.play().then(playedFirstVideo).catch(failTest)');
        });
    }
    
    function playedFirstVideo() {
        consoleWrite("The first video played with a user gesture - trying to play the second video");
        consoleWrite("The second video should play unconditionally on Mac with quirks enabled");
        run('video2.play().then(endTest).catch(failTest)');
    }
    </script>
</head>
<body onload="runTest()">
    <video id="video1" src="content/test.mp4"></video>
    <video id="video2" src="content/test.mp4"></video>
</body>
</html>