fix(WebVTT): Fix horizontal positioning with cue box size #4949
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. Closes b/259121343
joeyparrish
requested review from
littlespex,
avelad,
JulianDomingo and
theodab
avelad
reviewed
Jan 30, 2023
avelad
previously approved these changes
Jan 30, 2023
theodab
previously approved these changes
Jan 30, 2023
|
Incremental code coverage: No instrumented code was changed. |
|
Screenshots updated, crbug link added. Re-review is required to merge. Thanks! |
theodab
approved these changes
Jan 30, 2023
joeyparrish
added a commit
that referenced
this pull request
Jan 31, 2023
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
joeyparrish
added a commit
that referenced
this pull request
Jan 31, 2023
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
joeyparrish
added a commit
that referenced
this pull request
Jan 31, 2023
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
joeyparrish
added a commit
that referenced
this pull request
Jan 31, 2023
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-actions
bot
added
the
status: archived
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
translatestyle 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 thentop: 85%;andwidth: 63%;were set based on the cue settings. The default ofleft: 0was what broke the positioning. Removing this leavesleftset implicitly toauto, 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