<!DOCTYPE html>
<html>
<head>
    <title>track-in-band-metadata-display-order</title>
    <script src="../video-test.js"></script>
    <script src="../media-file.js"></script>
    <script src="../media-controls.js"></script>
    <script>
        window.addEventListener('load', async event => {
            window.video = document.querySelector('video');
            run('video.src = findMediaFile("video", "../content/test")');

            await waitFor(video, 'canplaythrough');

            run('captionTrack = video.addTextTrack("captions")');
            run('captionTrack.mode = "showing"');
            run('metadataTrack = video.addTextTrack("metadata")');
            run('metadataTrack.mode = "hidden"');
            run('cue = internals.createGenericCue(2, 4, "I am earlier")')
            run('cue.line = 40');
            run('captionTrack.addCue(cue)');
            run('cue = internals.createGenericCue(2.5, 4.5, "I am later")');
            run('cue.line = 80');
            run('captionTrack.addCue(cue)');
            run('metadataTrack.addCue(new DataCue(2.25, video.duration, "first data cue"))')
            run('metadataTrack.addCue(new DataCue(2.25, video.duration, "second data cue"))')

            run('video.currentTime = 3');
            await waitFor(video, 'seeked');

            testExpected('textTrackDisplayElement(video, "display", 0).textContent', 'I am later');
            testExpected('textTrackDisplayElement(video, "display", 1).textContent', 'I am earlier');

            endTest();
        });
    </script>
</head>
<body>
    <video controls></video>
</body>
</html>