<!DOCTYPE html>
<title>Test that TextTrack's cues are rendered correctly when the snap to lines flag is not set.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<video>
<track src="captions-webvtt/captions-snap-to-lines-not-set.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
var video = document.querySelector("video");
var testTrack = document.querySelector("track");
video.src = "../content/test.ogv";
// In Chromium it is the enclosure element, which provides the controls height, otherwise the panel;
// both are the second child in the shadow DOM.
var controlsPanelElement = internals.shadowRoot(video).firstChild.firstChild;
var cueDisplayContainer;
video.oncanplaythrough = t.step_func(function() {
cueDisplayContainer = textTrackContainerElement(video);
runNextTestCase();
});
var seekTimeIndex = 0;
var testCaseSeekTime = [
0.10,
0.60,
1.10,
1.60,
2.10,
2.60,
3.10,
4.10
];
var cueRenderingPosition = [
// Number of active cues 1.
[[0, 100, "center"]],
[[0, 50, "center"]],
[[0, 0, "start"]],
[[0, 0, "end"]],
[[0, 100, "right"]],
[[0, 100, "left"]],
[[0, 50, "center"]],
[ //Number of active cues 7.
[0, 50, "center"],
[0, 0, "start"],
[0, 0, "end"],
[0, 100, "center"],
[0, 25, "end"],
[44, 33, "start"],
[23, 55, "start"]
]
];
function runNextTestCase() {
if (seekTimeIndex == testCaseSeekTime.length) {
t.done();
return;
}
video.currentTime = testCaseSeekTime[seekTimeIndex];
video.onseeked = t.step_func(seeked);
}
function seeked() {
var cuePosition = cueRenderingPosition[seekTimeIndex];
for (var i = 0; i < testTrack.track.activeCues.length; ++i) {
cueDisplayElement = textTrackCueElementByIndex(video, i);
assert_equals(cueDisplayElement.innerText, testTrack.track.activeCues[i].text);
assert_equals(testTrack.track.activeCues[i].align, cuePosition[i][2]);
assert_equals(Math.round(cueDisplayElement.offsetLeft / cueDisplayContainer.offsetWidth * 100), cuePosition[i][0]);
assert_equals(Math.round(cueDisplayElement.offsetTop / cueDisplayContainer.offsetHeight * 100), cuePosition[i][1]);
}
seekTimeIndex++;
runNextTestCase();
}
});
</script>