[Media Controls VR] Fix time display and buttons on large videos

This CL adds specifications for time display font size and media button
background size. This fixes an issue where the time display and media
buttons were scaling up with the video size despite being in immersive
mode.

Bug: 850562
Change-Id: I1d6734f281bcfe2c269ab39efea958bd6087a1b5
Reviewed-on: https://chromium-review.googlesource.com/1101904Reviewed-by: Becca Hughes <beccahughes@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567681}

third_party/WebKit/LayoutTests/media/controls/modern/immersive-mode-adds-css-class.html

@@ -11,25 +11,35 @@ async_test(t => {
   const controls = mediaControls(video);
   const immersiveModeCSSClass = 'immersive-mode';
 
-  window.onload = t.step_func_done(() => {
+  window.onload = t.step_func(() => {
     assert_false(controls.classList.contains(immersiveModeCSSClass));
     enableImmersiveMode(t);
     assert_true(controls.classList.contains(immersiveModeCSSClass));
     checkThatVRCSSRulesAreRespected();
-  });
 
+    // Make sure that we still respect immersive mode when enlarged.
+    video.width = 1000;
+    testRunner.layoutAndPaintAsyncThen(t.step_func_done(() => {
+      assert_true(controls.classList.contains(immersiveModeCSSClass));
+      checkThatVRCSSRulesAreRespected();
+    }));
+  });
 
   function checkThatVRCSSRulesAreRespected() {
     // Check a few styles to make sure VR rules are not being overridden.
     const muteButtonStyle = getComputedStyle(muteButton(video));
+    const fullscreenButtonStyle = getComputedStyle(fullscreenButton(video));
     const overflowButtonStyle = getComputedStyle(overflowButton(video));
+    const currentTimeStyle = getComputedStyle(currentTimeElement(video));
     const buttonPanelStyle = getComputedStyle(buttonPanelElement(video));
     const timelineStyle = getComputedStyle(timelineElement(video));
     const thumbStyle = getComputedStyle(timelineThumb(video));
     const overlayPlayButtonStyle = getComputedStyle(mediaControlsOverlayPlayButtonInternal(video));
 
     assert_equals('43px', muteButtonStyle.height, 'Mute button height is respected');
+    assert_equals('24px', fullscreenButtonStyle['background-size'], 'Fullscreen button background size is respected');
     assert_equals('43px', overflowButtonStyle.width, 'Overflow button width is respected');
+    assert_equals('16px', currentTimeStyle['font-size'], 'Current time display font size is respected');
     assert_equals('43px', buttonPanelStyle.height, 'Button panel height is respected');
     assert_equals('535px', buttonPanelStyle['max-width'], 'Button panel max-width is respected');
     assert_equals('5px', timelineStyle.height, 'Timeline height is respected');

third_party/WebKit/LayoutTests/media/media-controls.js

@@ -40,6 +40,14 @@ function castButton(videoElement) {
     return button;
 }
 
+function currentTimeElement(videoElement) {
+  var controlID = '-webkit-media-controls-current-time-display';
+  var element = mediaControlsElement(internals.shadowRoot(videoElement).firstChild, controlID);
+  if (!element)
+    throw 'Failed to find current time element';
+  return element;
+}
+
 function downloadButton(videoElement) {
     var controlID = '-internal-media-controls-download-button';
     var button = mediaControlsElement(internals.shadowRoot(videoElement).firstChild, controlID);

third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css

@@ -1090,10 +1090,17 @@ video::-webkit-media-controls.immersive-mode input[pseudo="-internal-media-contr
   height: 43px;
   min-width: 43px;
   margin-left: 5px;
+  background-size: 24px;
 }
 
 video::-webkit-media-controls.immersive-mode div[pseudo="-internal-media-controls-button-panel" i] {
   height: 43px;
+  line-height: 43px;
+}
+
+video::-webkit-media-controls.immersive-mode div[pseudo="-webkit-media-controls-current-time-display" i],
+video::-webkit-media-controls.immersive-mode div[pseudo="-webkit-media-controls-time-remaining-display" i] {
+  font-size: 16px;
 }
 
 /* Hover highlighting. */