Skip to content

GitLab

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

Show pause icon on non-overlay play button when playing 

This CL adds a CSS rule to show a white pause icon on the non-overlay
play button when a video is playing.

Bug: 834396
Change-Id: I94694d2a3cecdb62d4f4a53b819e2f744ce61659
Reviewed-on: https://chromium-review.googlesource.com/1017345
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Reviewed-by: default avatarMounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#551834}
parent 527badd1
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 0 deletions
third_party/WebKit/LayoutTests/media/controls/modern/show-pause-icon-on-non-overlay-play-button.html 0 → 100644
View file @ fdd87291
<!DOCTYPE html>
<html>
<title>Test that playing a video shows a pause icon in the non-overlay play button.</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../media-controls.js"></script>
<video controls width=90 preload=metadata src="../../content/60_sec_video.webm"></video>
<script>
async_test(t => {
const video = document.querySelector('video');
const button = playButton(video);
let currentImage;
video.addEventListener('canplay', t.step_func(() => {
// Get the data string for the play button.
currentImage = getCurrentImage();
video.play();
}), { once: true });
video.addEventListener('playing', t.step_func(() => {
const newImage = getCurrentImage();
assert_not_equals(currentImage, newImage, "Play button should change to pause button.");
currentImage = newImage;
video.pause();
}), { once: true });
video.addEventListener('pause', t.step_func_done(() => {
const newImage = getCurrentImage();
assert_not_equals(currentImage, newImage, "Pause button should change back to play button");
}), { once: true });
function getCurrentImage() {
return getComputedStyle(button).backgroundImage;
}
});
</script>
</html>
third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css
View file @ fdd87291
...@@ -315,6 +315,10 @@ input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-co ...@@ -315,6 +315,10 @@ input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-co
background-image: -webkit-image-set(url(ic_pause.svg) 1x); background-image: -webkit-image-set(url(ic_pause.svg) 1x);
} }
video::-webkit-media-controls.state-playing:not(.audio-only) input[pseudo="-webkit-media-controls-play-button" i] {
background-image: -webkit-image-set(url(ic_pause_white.svg) 1x);
}
/** /**
* Timeline * Timeline
*/ */
......
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