fix(WebVTT): Fix horizontal positioning with cue box size (shaka-proj…

…ect#4949)

When the VTT size setting is used, the horizontal positioning was wrong
in both native and UI display.

The native display is wrong on Chrome and Edge because of a layout bug
in Chrome, where the shadow DOM for the cue box has conflicting
(redundant) styles. For example, these VTT settings:

`line: 85% position: 50% size: 63%`

result in these styles in the shadow DOM:

`top: 85%; left: 18.5%; transform: translate(-18.5%, -85%)`.

The `translate` style is what breaks the positioning. Unfortunately,
there is no way to fix that in JavaScript.

The UI display, however, was buggy for different reasons and is fixable.
The styles `left: 0; top: 0;` were applied by default, and then `top:
85%;` and `width: 63%;` were set based on the cue settings. The default
of `left: 0` was what broke the positioning. Removing this leaves `left`
set implicitly to `auto`, which is correct.

No other test cases were broken (or fixed) by this change.

This also adds a filter parameter to the lab workflow to run a subset of
tests for quicker results. This is useful for updating screenshots.

Closes b/259121343

.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([