WebVTT: Add three rendering tests

Note that track-cue-rendering-ruby.html doesn't render <ruby> correctly. This CL has no behavior changes. Bug: 1335309 Change-Id: I3c7d219af8642005f465aa6986783b58e051f015 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3747445 Reviewed-by: Fredrik Söderquist <fs@opera.com> Auto-Submit: Kent Tamura <tkent@chromium.org> Commit-Queue: Kent Tamura <tkent@chromium.org> Cr-Commit-Position: refs/heads/main@{#1021572}
Denger-Network · Jul 7, 2022 · 7dce199 · 7dce199
1 parent 2c8c87a
commit 7dce199
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 0 deletions.
diff --git a/third_party/blink/web_tests/media/track/track-cue-rendering-dynamic-controls.html b/third_party/blink/web_tests/media/track/track-cue-rendering-dynamic-controls.html
@@ -0,0 +1,56 @@
+<!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';
+  track.addCue(new VTTCue(1, 60, 'First subtitle'));
+  let cue1 = new VTTCue(1, 60, 'Second substitle');
+  cue1.line = 9;
+  track.addCue(cue1);
+  v.currentTime = 3;
+  await new Promise(resolve => { v.addEventListener('seeked', resolve, {once:true}); });
+  await animationFrame();
+  await animationFrame();
+  // Now cues are shown.
+  let top0 = textTrackCueElementByIndex(v, 0).offsetTop;
+  let top1 = textTrackCueElementByIndex(v, 1).offsetTop;
+
+  v.controls = true;
+  await animationFrame();
+  await animationFrame();
+  let top0c = textTrackCueElementByIndex(v, 0).offsetTop;
+  let top1c = textTrackCueElementByIndex(v, 1).offsetTop;
+  assert_not_equals(top0, top0c, '[after showing controls, 0]');
+  assert_equals(top1, top1c, '[after showing controls, 1]');
+
+  v.controls = false;
+  await animationFrame();
+  await animationFrame();
+  assert_equals(top0c, textTrackCueElementByIndex(v, 0).offsetTop, '[after hiding controls, 0]');
+  assert_equals(top1c, textTrackCueElementByIndex(v, 1).offsetTop, '[after hiding controls, 1]');
+
+  v.controls = true;
+  v.controls = false;
+  await animationFrame();
+  await animationFrame();
+  // Ideally the following assert should be |assert_equals| because the first
+  // cue and the controls are not overlapped. But it seems togging controls
+  // move the cue to the initial position.
+  assert_not_equals(top0c, textTrackCueElementByIndex(v, 0).offsetTop, '[after toggling controls, 0]');
+  assert_equals(top1c, textTrackCueElementByIndex(v, 1).offsetTop, '[after toggling controls, 1]');
+}, 'Showing media controls should do block position adjustment again');
+</script>
diff --git a/third_party/blink/web_tests/media/track/track-cue-rendering-dynamic-style.html b/third_party/blink/web_tests/media/track/track-cue-rendering-dynamic-style.html
@@ -0,0 +1,38 @@
+<!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';
+  track.addCue(new VTTCue(1, 60, 'First subtitle'));
+  track.addCue(new VTTCue(1, 60, 'Second substitle'));
+  v.currentTime = 3;
+  await new Promise(resolve => { v.addEventListener('seeked', resolve, {once:true}); });
+  await animationFrame();
+  await animationFrame();
+  // Now cues are shown.
+  let top0 = textTrackCueElementByIndex(v, 0).offsetTop;
+  let top1 = textTrackCueElementByIndex(v, 1).offsetTop;
+
+  let style = document.createElement('style');
+  style.textContent = `::cue { color: lime; font-size: 48px; }`;
+  document.body.appendChild(style);
+  await animationFrame();
+  await animationFrame();
+  assert_not_equals(top0, textTrackCueElementByIndex(v, 0).offsetTop);
+  assert_not_equals(top1, textTrackCueElementByIndex(v, 1).offsetTop);
+}, 'Updating ::cue style dynamically should do block position adjustment again');
+</script>
diff --git a/third_party/blink/web_tests/media/track/track-cue-rendering-ruby.html b/third_party/blink/web_tests/media/track/track-cue-rendering-ruby.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+::cue { font-size: 24px; }
+</style>
+<video src="../content/test.ogv" width="640"></video>
+<script>
+if (window.testRunner)
+  testRunner.waitUntilDone();
+
+let v = document.querySelector('video');
+let track = v.addTextTrack('subtitles', 'label', 'ja');
+track.mode = 'showing';
+track.addCue(new VTTCue(1, 60, '<ruby>渋谷ストリーム<rt>しぶやすとりーむ</rt></ruby>'));
+track.addCue(new VTTCue(1, 60, '<ruby>六本木<rt>ろっぽんぎ</rt></ruby>ヒルズ'));
+let cue3 = new VTTCue(1, 60, '👅<ruby>臥薪嘗胆<rt>がしんしょうたん</rt></ruby>');
+cue3.vertical = 'rl';
+track.addCue(cue3);
+if (window.testRunner)
+  v.onseeked = () => { testRunner.notifyDone(); };
+v.currentTime = 3;
+</script>
diff --git a/...link/web_tests/platform/linux/media/track/track-cue-rendering-ruby-expected.png b/...link/web_tests/platform/linux/media/track/track-cue-rendering-ruby-expected.png
diff --git a/.../web_tests/platform/mac-mac11/media/track/track-cue-rendering-ruby-expected.png b/.../web_tests/platform/mac-mac11/media/track/track-cue-rendering-ruby-expected.png
diff --git a/.../blink/web_tests/platform/mac/media/track/track-cue-rendering-ruby-expected.png b/.../blink/web_tests/platform/mac/media/track/track-cue-rendering-ruby-expected.png
diff --git a/.../blink/web_tests/platform/win/media/track/track-cue-rendering-ruby-expected.png b/.../blink/web_tests/platform/win/media/track/track-cue-rendering-ruby-expected.png