<!doctype html>
<title>TextTrackCue display cue</title>

<div></div>
<script src=../../../resources/testharness.js></script>
<script src=../../../resources/testharnessreport.js></script>
<script src=../../media-controls.js></script>
<script src=../../media-file.js></script>
<script>
if (window.internals)
    internals.settings.setGenericCueAPIEnabled(true);

function createValidCueFragment(text)
{
    let cueNode = document.createElement('span');
    cueNode.setAttribute('cue', '');
    cueNode.innerText = text;

    let backgroundNode = document.createElement('div');
    backgroundNode.setAttribute('cuebackground', '');
    backgroundNode.appendChild(cueNode);

    fragment = document.createDocumentFragment();
    fragment.appendChild(backgroundNode);

    return fragment;
}

async_test(test => {

    video = document.createElement('video');
    video.controls = true;

    track = video.addTextTrack('subtitles');
    track.default = true;
    track.mode = 'showing';

    document.body.appendChild(video);

    let cue1Text = 'First cue';
    let cue1 = new TextTrackCue(0, 1.1, createValidCueFragment(cue1Text));
    cue1.id = "one";
    track.addCue(cue1);
    assert_equals(track.cues.length, 1, 'only one cue');

    let cue2Text = 'Second cue';
    let cue2 = new TextTrackCue(1, 2, createValidCueFragment(cue2Text));
    cue2.id = "two";
    track.addCue(cue2);
    assert_equals(track.cues.length, 2, "track.cues.length includes second cue");

    assert_equals(track.cues[0].id, 'one', 'cue 1 should be first');
    assert_equals(track.cues[1].id, 'two', 'cue 2 should be second');    

    video.addEventListener('canplay', event => {

        let seekCount = 0;
        let step = _ => {
            let cueContainer = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-text-track-container");
            switch (++seekCount) {
            case 1:
                assert_equals(track.activeCues.length, 1, "only one active cue");
                assert_equals(cueContainer.innerText, cue1Text, "cue one is visible");
                video.currentTime = track.cues[1].startTime;
                break;

            case 2:
                assert_equals(track.activeCues.length, 2, "two active cues");
                assert_equals(cueContainer.innerText, `${cue1Text}\n${cue2Text}`, "cues one and two are visible");
                video.currentTime = track.cues[1].endTime - .5;
                break;

            case 3:
                assert_equals(track.activeCues.length, 1, "only one active cue");
                assert_equals(cueContainer.innerText, cue2Text, "cue two is visible");
                video.currentTime = track.cues[1].endTime + 1;
                break;

            case 4:
                assert_equals(track.activeCues.length, 0, "no active cues");
                assert_equals(cueContainer.innerText, '', "no cues are visible");
                test.done();
                break;
            }
        }
        video.addEventListener('seeked', test.step_func(step));
        video.currentTime = track.cues[0].startTime;
    });

    video.src = findMediaFile('video', '../../content/test');

}, 'Cues are displayed');

</script>