<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Testing basic video exchange from offerer to receiver</title>
        <script src="../resources/testharness.js"></script>
        <script src="../resources/testharnessreport.js"></script>
        <script src="/media-resources/media-file.js"></script>
        <script src="/media-resources/video-test.js"></script>
    </head>
    <body>
        <div>Click on play button: video1 should start to play, then video2 should also start to play</div>
        <button id="video1Button" onclick="doTest()">Play video 1</button>
        <video id="video1"></video>
        <video id="video2" autoplay></video>
        <video id="video3"></video>
        <script>
if (window.internals) {
    internals.setMediaElementRestrictions(video1, "RequireUserGestureForVideoRateChange");
    internals.setMediaElementRestrictions(video2, "RequireUserGestureForVideoRateChange");
    internals.setMediaElementRestrictions(video3, "RequireUserGestureForVideoRateChange");
    internals.setTransientActivationDuration(1);
}

let resolve;
const firstTestCompleted = new Promise(r => resolve = r);

promise_test((test) => {
    video3.src = findMediaFile("video", "resources/test-25fps");
    return video3.play().then(assert_unreached, resolve);
}, "Ensuring video is not playing if no user gesture");

var resolveTest, rejectTest;
promise_test((test) => {
    return new Promise((resolve, reject) => {
        resolveTest = resolve;
        rejectTest = reject;
    });
}, "Video 2 should be allowed to play after video 1 started with a user gesture");

function doTest()
{
    video1.src = findMediaFile("video", "resources/test-25fps");
    return video1.play().then(() => {
        video2.src = findMediaFile("video", "resources/test-25fps");
        video2.play().then(() => resolveTest("video2 started"), resolveTest);
    });
}

(async function() {

    await firstTestCompleted;

    var x = video1Button.offsetLeft + 5;
    var y = video1Button.offsetTop + 5;

    if (window.eventSender) {
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.mouseUp();
    }
}());

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