track-cue-rendering-position-auto-rtl-expected.html

<!DOCTYPE html>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();

function waitForVideoPresentation(video) {
  return new Promise(resolve => {
    video.requestVideoFrameCallback(resolve);
  });
}
function loadAndQueueVideoPresentation(video) {
  video.src = '../content/test.ogv';
  videoPresentations.push(waitForVideoPresentation(video));
}
let videoPresentations = [];
</script>
<style>
.container {
    position: relative;
    display: inline-block;
    width: 320px;
    height: 240px;
}
.cue {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.cue.start {
    right: 50%;
    text-align: end;
}
.cue.middle {
    text-align: center;
}
.cue.end {
    left: 50%;
    text-align: start;
}
.cue > span {
    font-family: sans-serif;
    background: green;
    color: green;
    font-size: 50px;
    padding: 2px;
}
</style>
<div class="container">
  <video preload="auto">
    <script>loadAndQueueVideoPresentation(document.currentScript.parentNode);</script>
  </video>
  <div class=video><div class="cue start"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
</div>
<div class="container">
  <video preload="auto">
    <script>loadAndQueueVideoPresentation(document.currentScript.parentNode);</script>
  </video>
  <div class=video><div class="cue middle"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
</div>
<div class="container">
  <video preload="auto">
    <script>loadAndQueueVideoPresentation(document.currentScript.parentNode);</script>
  </video>
  <div class=video><div class="cue end"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
</div>
<script>
  Promise.all(videoPresentations).then(() => {
    testRunner.notifyDone();
  });
</script>
chromium/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto-rtl-expected.html
