<!doctype html>
<html>
<script src="../../../../resources/js-test-pre.js"></script>
<body onload="start()">
    <iframe id="none"" src="http://localhost:8000/media/media-stream/resources/device-change-iframe.html?none"></iframe>
    <iframe id="camera" allow="camera" src="http://localhost:8000/media/media-stream/resources/device-change-iframe.html?camera"></iframe>
    <iframe id="microphone" allow="camera" src="http://localhost:8000/media/media-stream/resources/device-change-iframe.html?microphone"></iframe>
    <iframe id="same-origin" src="http://127.0.0.1:8000/media/media-stream/resources/device-change-iframe.html?same-origin"></iframe>

    <script>

        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        let count = new Set();
        let success = true;
        let results = [];
        function countEvent(id)
        {
            if (count.has(id))
                return;

            count.add(id);
            const status = id === "none" ? "FAIL": "PASS";
            results.push(`${status}: &LT;iframe id=${id}> got a 'devicechange' event`);

            if (results.length == 4) {
                setTimeout(() => {
                    result.innerHTML = results.sort().join('<br>');
                    if (window.testRunner) {
                        testRunner.notifyDone();
                        testRunner.resetMockMediaDevices();
                    }
                }, 500);
            }
        }
        
        async function start()
        {
            await window.navigator.mediaDevices.getUserMedia({audio:true});

            navigator.mediaDevices.ondevicechange = () => { countEvent('main'); };
            window.onmessage = (event) => { countEvent(event.data); };

            if (window.testRunner)
                testRunner.addMockMicrophoneDevice("id4", "microphone 3");
        }
    </script>

    <div id="result"></div>
</body>
</html>