fix(WebVTT): Fix horizontal positioning with cue box size

.github/workflows/selenium-lab-tests.yaml

@@ -8,6 +8,9 @@ on:
       pr:
         description: "A PR number to build and test in the lab.  If empty, will build and test from main."
         required: false
+      test_filter:
+        description: "A filter to run a subset of the tests.  If empty, all tests will run."
+        required: false
   schedule:
     # Runs every night at 2am PST / 10am UTC, testing against the main branch.
     - cron: '0 10 * * *'
@@ -191,6 +194,11 @@ jobs:
             extra_flags=""
           fi
 
+          filter="${{ github.event.inputs.test_filter }}"
+          if [[ "$filter" != "" ]]; then
+            extra_flags="$extra_flags --filter $filter"
+          fi
+
           python3 build/test.py \
               --no-build \
               --reporters spec --spec-hide-passed \

lib/text/ui_text_displayer.js

@@ -617,12 +617,7 @@ shaka.text.UITextDisplayer = class {
     // TODO: Implement lineAlignment of 'CENTER'.
     if (cue.line != null) {
       if (cue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
-        // When setting absolute positioning, you need to set x/y/width/height
-        // so the element is positioned correctly.  Set these as default and
-        // other settings will override them.
         style.position = 'absolute';
-        style.left = '0';
-        style.top = '0';
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
           style.width = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {

test/test/assets/screenshots/review.html

@@ -34,8 +34,10 @@
   'firefox-Linux',
   'firefox-Mac',
   'firefox-Windows',
-  'safari-Mac',
+  'msedge-Linux',
+  'msedge-Mac',
   'msedge-Windows',
+  'safari-Mac',
   'xboxone',
 ];
 
@@ -75,6 +77,7 @@
     'line-0',
     'line-1',
     'line-50',
+    'line-85-position-50-size-63',
     'bold-long',
     'italic-long',
     'underline-long',

test/text/web_vtt_layout_integration.js

@@ -248,6 +248,23 @@ filterDescribe('WebVTT layout', shaka.test.TextLayoutTests.supported, () => {
       await helper.checkScreenshot('line-50');
     });
 
+    // Regression case for http://b/259121343
+    // The top center of the cue box should be 85% from the top and
+    // horizontally centered.
+    // NOTE: The native version is wrong on Chrome and Edge due to layout bugs
+    // in Chrome.  https://crbug.com/1411464
+    it('align to bottom center with restricted size', async () => {
+      parseAndDisplay([
+        'WEBVTT\n',
+        '\n',
+        '00:00:00.000 --> 00:00:05.000 ', // continued on next line
+        'line:85% position:50% size:63%\n',
+        'This is a test\n',
+      ].join(''));
+
+      await helper.checkScreenshot('line-85-position-50-size-63');
+    });
+
     // FIXME: UI version is slightly wrong: gaps between lines when bold
     it('bold long', async () => {
       parseAndDisplay([