Skip to content

Commit

Permalink
fix(WebVTT): Fix horizontal positioning with cue box size (#4949)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
joeyparrish authored Jan 31, 2023
1 parent 2b50b88 commit f456318
Show file tree
Hide file tree
Showing 24 changed files with 29 additions and 6 deletions.
8 changes: 8 additions & 0 deletions .github/workflows/selenium-lab-tests.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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 * * *'
Expand Down Expand Up @@ -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 \
Expand Down
5 changes: 0 additions & 5 deletions lib/text/ui_text_displayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion test/test/assets/screenshots/review.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,10 @@
'firefox-Linux',
'firefox-Mac',
'firefox-Windows',
'safari-Mac',
'msedge-Linux',
'msedge-Mac',
'msedge-Windows',
'safari-Mac',
'xboxone',
];

Expand Down Expand Up @@ -75,6 +77,7 @@
'line-0',
'line-1',
'line-50',
'line-85-position-50-size-63',
'bold-long',
'italic-long',
'underline-long',
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions test/text/web_vtt_layout_integration.js
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand Down

0 comments on commit f456318

Please sign in to comment.