fix(WebVTT): Fix rendering of WebVTT in UITextDisplayer (#7023)

Fix rendering of align:start and align:end in UITextDisplayer
Fix rendering of position in UITextDisplayer

Fixes #4486

lib/text/ui_text_displayer.js

@@ -726,6 +726,15 @@ shaka.text.UITextDisplayer = class {
       style.display = 'flex';
       style.flexDirection = 'column';
       style.alignItems = 'center';
+      if (cue.textAlign == Cue.textAlign.LEFT ||
+          cue.textAlign == Cue.textAlign.START) {
+        style.width = '100%';
+        style.alignItems = 'start';
+      } else if (cue.textAlign == Cue.textAlign.RIGHT ||
+          cue.textAlign == Cue.textAlign.END) {
+        style.width = '100%';
+        style.alignItems = 'end';
+      }
 
       if (cue.displayAlign == Cue.displayAlign.BEFORE) {
         style.justifyContent = 'flex-start';
@@ -811,23 +820,41 @@ shaka.text.UITextDisplayer = class {
 
     style.lineHeight = cue.lineHeight;
 
-    // The position defines the indent of the text container in the
-    // direction defined by the writing direction.
-    if (cue.position != null) {
-      if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
-        style.paddingLeft = cue.position;
-      } else {
-        style.paddingTop = cue.position;
-      }
-    }
-
     // The positionAlign attribute is an alignment for the text container in
     // the dimension of the writing direction.
     const computedPositionAlign = this.computeCuePositionAlignment_(cue);
     if (computedPositionAlign == Cue.positionAlign.LEFT) {
       style.cssFloat = 'left';
+      if (cue.position !== null) {
+        style.position = 'absolute';
+        if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
+          style.left = cue.position + '%';
+          style.width = 'auto';
+        } else {
+          style.top = cue.position + '%';
+        }
+      }
     } else if (computedPositionAlign == Cue.positionAlign.RIGHT) {
       style.cssFloat = 'right';
+      if (cue.position !== null) {
+        style.position = 'absolute';
+        if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
+          style.right = cue.position + '%';
+          style.width = 'auto';
+        } else {
+          style.bottom = cue.position + '%';
+        }
+      }
+    } else {
+      if (cue.position !== null && cue.position != 50) {
+        style.position = 'absolute';
+        if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
+          style.left = cue.position + '%';
+          style.width = 'auto';
+        } else {
+          style.top = cue.position + '%';
+        }
+      }
     }
 
     style.textAlign = cue.textAlign;

test/text/web_vtt_layout_integration.js

@@ -91,7 +91,6 @@ filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
       await helper.checkScreenshot('align-center-position-50');
     });
 
-    // FIXME: UI version is wrong: not positioned on the right
     it('align center position 90%', async () => {
       parseAndDisplay([
         'WEBVTT\n',
@@ -115,7 +114,6 @@ filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
       await helper.checkScreenshot('align-center-position-10');
     });
 
-    // FIXME: UI version is wrong: not positioned on the left
     it('align center position 10% size 10%', async () => {
       parseAndDisplay([
         'WEBVTT\n',
@@ -127,7 +125,6 @@ filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
       await helper.checkScreenshot('align-center-position-10-size-10');
     });
 
-    // FIXME: UI version is wrong: not positioned on the right
     it('align end', async () => {
       parseAndDisplay([
         'WEBVTT\n',
@@ -152,7 +149,6 @@ filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
       await helper.checkScreenshot('align-end-long');
     });
 
-    // FIXME: UI version is wrong: not positioned on the left
     it('align start', async () => {
       parseAndDisplay([
         'WEBVTT\n',
@@ -201,7 +197,6 @@ filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
       await helper.checkScreenshot('size-50');
     });
 
-    // FIXME: UI version is wrong: not positioned by line
     it('line -2', async () => {
       parseAndDisplay([
         'WEBVTT\n',
@@ -224,7 +219,6 @@ filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
       await helper.checkScreenshot('line-0');
     });
 
-    // FIXME: UI version is wrong: not positioned by line
     it('line 1', async () => {
       parseAndDisplay([
         'WEBVTT\n',