fix: WebVTT line not correctly positioned in UITextDisplayer (shaka-p…

…roject#4567)

As stated in the specifications at
https://w3c.github.io/webvtt/#webvtt-line-cue-setting
and
https://w3c.github.io/webvtt/#webvtt-cue-line-alignment
the "end" modifier in the line alignment directive means that the box
is positioned from the top of the screen but relatively to its bottom
edge. The previous code actually positioned the box from the bottom of
the screen.

AUTHORS

@@ -65,6 +65,7 @@ Philo Inc. <*@philo.com>
 Prakash <[email protected]>
 Robert Colantuoni <[email protected]>
 Robert Galluccio <[email protected]>
+Rodolphe Breton <[email protected]>
 Roi Lipman <[email protected]>
 Roksolana Ivanyshyn <[email protected]>
 Rostislav Hejduk <[email protected]>

CONTRIBUTORS

@@ -96,6 +96,7 @@ Peter Nycander <[email protected]>
 Prakash Duggaraju <[email protected]>
 Robert Colantuoni <[email protected]>
 Robert Galluccio <[email protected]>
+Rodolphe Breton <[email protected]>
 Rohit Makasana <[email protected]>
 Roi Lipman <[email protected]>
 Roksolana Ivanyshyn <[email protected]>

lib/text/ui_text_displayer.js

@@ -591,21 +591,21 @@ shaka.text.UITextDisplayer = class {
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.top = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.bottom = cue.line + '%';
+            style.bottom = (100 - cue.line) + '%';
           }
         } else if (cue.writingMode == Cue.writingMode.VERTICAL_LEFT_TO_RIGHT) {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.left = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.right = cue.line + '%';
+            style.right = (100 - cue.line) + '%';
           }
         } else {
           style.height = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {
             style.right = cue.line + '%';
           } else if (cue.lineAlign == Cue.lineAlign.END) {
-            style.left = cue.line + '%';
+            style.left = (100 - cue.line) + '%';
           }
         }
       }