Skip to content

GitLab

T
tangled
Commit 84c8b188 authored by Tommy Steimel's avatar Tommy Steimel Committed by Commit Bot
Browse files
Options

Media Controls: Add styling for track kind markers 

This CL adds track kind marker styling to the Media Controls CSS that
was never copied over from the legacy controls CSS.

Bug: 933000
Change-Id: Ie4fc1c5a7706664a9afff841c5ccc47399dbb4b4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1829278Reviewed-by: default avatarMounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702490}
parent adfc4df0
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 0 deletions
third_party/blink/renderer/modules/media_controls/resources/mediaControls.css
View file @ 84c8b188
...@@ -1312,6 +1312,32 @@ video::-internal-media-controls-scrubbing-message { ...@@ -1312,6 +1312,32 @@ video::-internal-media-controls-scrubbing-message {
display: none; display: none;
} }
video::-internal-media-controls-text-track-list-kind-captions {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(ic_closed_caption.svg) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 20px;
margin-left: 10px;
vertical-align: middle;
}
video::-internal-media-controls-text-track-list-kind-subtitles {
-webkit-appearance: none;
background-image: -webkit-image-set(
url(ic_subtitles.svg) 1x);
background-size: 32px;
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 20px;
margin-left: 10px;
vertical-align: middle;
}
/** /**
* VR styling. * VR styling.
*/ */
......
third_party/blink/web_tests/media/controls/text-track-duplicate-label.html 0 → 100644
View file @ 84c8b188
<!DOCTYPE html>
<html>
<title>Test that when a video has multiple text tracks with the same label we show a kind indicator.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls width=500 preload=none src="../content/60_sec_video.webm">
<track id="captions" kind="captions" label="English">
<track id="subtitles" kind="subtitles" label="English">
<track id="unique" kind="captions" label="French">
</video>
<script>
async_test(t => {
const video = document.querySelector('video');
enableTestMode(video);
video.addEventListener('loadedmetadata', t.step_func(() => {
clickCaptionButton(video, t.step_func_done(() => {
const captions = textTrackListItemAtIndex(video, 0);
const captionsIndicator = textTrackListItemInnerKindIndicator(captions);
assert_not_equals(null, captionsIndicator, 'captions should have an indicator');
assert_equals('-internal-media-controls-text-track-list-kind-captions',
internals.shadowPseudoId(captionsIndicator),
'the captions indicator should be the right type');
assert_not_equals(getComputedStyle(captionsIndicator)['background-image'], 'none',
'the captions indicator should have a background image')
const subtitles = textTrackListItemAtIndex(video, 1);
const subtitlesIndicator = textTrackListItemInnerKindIndicator(subtitles);
assert_not_equals(null, subtitlesIndicator, 'subtitles should have an indicator');
assert_equals('-internal-media-controls-text-track-list-kind-subtitles',
internals.shadowPseudoId(subtitlesIndicator),
'the subtitles indicator should be the right type');
assert_not_equals(getComputedStyle(subtitlesIndicator)['background-image'], 'none',
'the subtitles indicator should have a background image')
const unique = textTrackListItemAtIndex(video, 2);
const uniqueIndicator = textTrackListItemInnerKindIndicator(unique);
assert_equals(null, uniqueIndicator, 'unique should not have an indicator');
}));
}), { once: true });
video.load();
});
</script>
</html>
third_party/blink/web_tests/media/media-controls.js
View file @ 84c8b188
...@@ -404,6 +404,19 @@ function textTrackListItemInnerCheckbox(trackListItem) { ...@@ -404,6 +404,19 @@ function textTrackListItemInnerCheckbox(trackListItem) {
return null; return null;
} }
function textTrackListItemInnerKindIndicator(trackListItem) {
const children = trackListItem.children;
for (var i = 0; i < children.length; i++) {
const child = children[i];
const pseudoId = internals.shadowPseudoId(child);
if (pseudoId == "-internal-media-controls-text-track-list-kind-captions" ||
pseudoId == "-internal-media-controls-text-track-list-kind-subtitles") {
return child;
}
}
return null;
}
function clickCaptionButton(video, callback) { function clickCaptionButton(video, callback) {
openOverflowAndClickButton(video, captionsOverflowItem(video), callback); openOverflowAndClickButton(video, captionsOverflowItem(video), callback);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment