| <!doctype html> |
| <html> |
| <head> |
| <title>WebVTTRubyText elements should appear above WebVTTRuby elements</title> |
| <script src=../../resources/js-test-pre.js></script> |
| <script src=../video-test.js></script> |
| <script src=../media-file.js></script> |
| <script> |
| async function runTest() |
| { |
| video = document.getElementById('video'); |
| video.src = findMediaFile('video', '../content/test'); |
| await waitFor(video, 'canplay'); |
| let track = document.createElement('track'); |
| track.src = 'captions-webvtt/ruby.vtt'; |
| video.appendChild(track) |
| |
| await waitFor(video.textTracks, 'addtrack'); |
| testExpected("video.textTracks.length", 1); |
| run("video.textTracks[0].mode = 'showing'"); |
| |
| run("video.currentTime = 1"); |
| await waitFor(video, 'seeked'); |
| |
| window.internals.ensureUserAgentShadowRoot(video); |
| await testExpectedEventually("window.internals.shadowRoot(video).querySelector('rt')", null, "!=", 1000); |
| rubyBase = window.internals.shadowRoot(video).querySelector('ruby'); |
| rubyText = window.internals.shadowRoot(video).querySelector('rt'); |
| testExpected("rubyText.getBoundingClientRect().top < rubyBase.getBoundingClientRect().top", true); |
| testExpected("rubyBase.getBoundingClientRect().top == rubyText.getBoundingClientRect().bottom", true); |
| endTest(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <video id="video" width="320px" height="240px" paused></video> |
| </body> |
| </html> |
