track-cue-rendering-negative-line-numbers.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<style>
::cue { font-size: 24px; }
</style>
<video src="../content/test.ogv" width="640"></video>
<script>

function animationFrame() {
  return new Promise(resolve => { requestAnimationFrame(resolve); });
}

promise_test(async () => {
  let v = document.querySelector('video');
  let track = v.addTextTrack('subtitles', 'label', 'en');
  track.mode = 'showing';
  let cue0 = new VTTCue(1, 60, 'First subtitle');
  cue0.line = -3;
  track.addCue(cue0);
  let cue1 = new VTTCue(1, 60, 'Second subtitle');
  cue1.line = -2;
  track.addCue(cue1);
  let cue2 = new VTTCue(1, 60, 'Third subtitle');
  cue2.line = -1;
  track.addCue(cue2);

  v.currentTime = 3;
  await new Promise(resolve => { v.addEventListener('seeked', resolve, {once:true}); });
  v.controls = false;
  await animationFrame();
  await animationFrame();
  // Now cues are shown.
  let top0 = textTrackCueElementByIndex(v, 0).offsetTop;
  let top1 = textTrackCueElementByIndex(v, 1).offsetTop;
  let top2 = textTrackCueElementByIndex(v, 2).offsetTop;
  assert_true(top0<top1, 'subtitle 1 is above subtitle 2 (media controls hidden)');
  assert_true(top1<top2, 'subtitle 2 is above subtitle 3 (media controls hidden)');

  v.controls = true;
  await animationFrame();
  await animationFrame();
  let top0c = textTrackCueElementByIndex(v, 0).offsetTop;
  let top1c = textTrackCueElementByIndex(v, 1).offsetTop;
  let top2c = textTrackCueElementByIndex(v, 2).offsetTop;
  assert_true(top0c<top1c, 'subtitle 1 is above subtitle 2 (media controls shown)');
  assert_true(top1c<top2c, 'subtitle 2 is above subtitle 3 (media controls shown)');
}, 'Cues with negative line numbers should be displayed in order');
</script>
chromium/third_party/blink/web_tests/media/track/track-cue-rendering-negative-line-numbers.html
