[Media Controls VR] Increase specificity for VR CSS rules

This CL increases the specificity for the VR CSS changes for the media
controls. This fixes an issue where some of the CSS rules were being
overridden by more specific (but non-VR rules).

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

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

@@ -9,13 +9,34 @@
 async_test(t => {
   const video = document.querySelector('video');
   const controls = mediaControls(video);
-  const immersiveModeCSSClass = "immersive-mode";
+  const immersiveModeCSSClass = 'immersive-mode';
 
   window.onload = t.step_func_done(() => {
     assert_false(controls.classList.contains(immersiveModeCSSClass));
     enableImmersiveMode(t);
     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 overflowButtonStyle = getComputedStyle(overflowButton(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('43px', overflowButtonStyle.width, 'Overflow button width 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');
+    assert_equals('471px', timelineStyle['max-width'], 'Timeline max-width is respected');
+    assert_equals('16px', thumbStyle.width, 'Thumb width is respected');
+    assert_equals('64px', overlayPlayButtonStyle.height, 'Overlay play button height is respected');
+  }
 });
 </script>
 </html>

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

@@ -24,6 +24,14 @@ function mediaControls(videoElement) {
   return element;
 }
 
+function buttonPanelElement(videoElement) {
+  var controlID = '-internal-media-controls-button-panel';
+  var element = mediaControlsElement(internals.shadowRoot(videoElement).firstChild, controlID);
+  if (!element)
+    throw 'Failed to find media controls button panel';
+  return element;
+}
+
 function castButton(videoElement) {
     var controlID = '-internal-media-controls-cast-button';
     var button = mediaControlsElement(internals.shadowRoot(videoElement).firstChild, controlID);

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

@@ -829,14 +829,14 @@ video::-internal-media-controls-scrubbing-message {
 /**
  * VR styling.
  */
-.immersive-mode input[pseudo="-webkit-media-controls-timeline" i],
-.immersive-mode div[pseudo="-internal-media-controls-button-panel" i] {
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-timeline" i],
+video::-webkit-media-controls.immersive-mode div[pseudo="-internal-media-controls-button-panel" i] {
   padding-left: 32px;
   padding-right: 32px;
 }
 
 /* Timeline sizing does not include padding in max width. */
-.immersive-mode input[pseudo="-webkit-media-controls-timeline" i] {
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-timeline" i] {
   max-width: 471px;
   height: 5px;
   margin-bottom: 20px;
@@ -845,11 +845,11 @@ video::-internal-media-controls-scrubbing-message {
 }
 
 /* Button panel sizing does include padding in max width. */
-.immersive-mode div[pseudo="-internal-media-controls-button-panel" i] {
+video::-webkit-media-controls.immersive-mode div[pseudo="-internal-media-controls-button-panel" i] {
   max-width: 535px; /* 471px + 64px padding. */
 }
 
-.immersive-mode div[pseudo="-webkit-media-controls-panel" i] {
+video::-webkit-media-controls.immersive-mode div[pseudo="-webkit-media-controls-panel" i] {
   /* Centering the button panel and timeline within the controls. */
   text-align: -webkit-center;
 
@@ -859,50 +859,50 @@ video::-internal-media-controls-scrubbing-message {
     repeat-x bottom left;
 }
 
-.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-before,
-.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-after,
-.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-background,
-.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-buffering {
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-before,
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-after,
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-background,
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-buffering {
   height: 5px;
 }
 
-.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-webkit-slider-thumb {
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-timeline" i]::-webkit-slider-thumb {
   width: 16px;
   height: 16px;
   border-radius: 8px;
   margin-top: -5px;
 }
 
-.immersive-mode input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-controls-overlay-play-button-internal {
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-controls-overlay-play-button-internal {
   width: 64px;
   height: 64px;
   border-radius: 32px;
   background-size: 36px;
 }
 
-.immersive-mode input[pseudo="-webkit-media-controls-mute-button" i],
-.immersive-mode input[pseudo="-webkit-media-controls-fullscreen-button" i],
-.immersive-mode input[pseudo="-internal-media-controls-overflow-button" i] {
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-mute-button" i],
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-fullscreen-button" i],
+video::-webkit-media-controls.immersive-mode input[pseudo="-internal-media-controls-overflow-button" i] {
   width: 43px;
   height: 43px;
   min-width: 43px;
   margin-left: 5px;
 }
 
-.immersive-mode div[pseudo="-internal-media-controls-button-panel" i] {
+video::-webkit-media-controls.immersive-mode div[pseudo="-internal-media-controls-button-panel" i] {
   height: 43px;
 }
 
 /* Hover highlighting. */
-.immersive-mode input[pseudo="-webkit-media-controls-mute-button" i]:hover,
-.immersive-mode input[pseudo="-webkit-media-controls-fullscreen-button" i]:hover,
-.immersive-mode input[pseudo="-internal-media-controls-overflow-button" i]:hover {
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-mute-button" i]:hover,
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-fullscreen-button" i]:hover,
+video::-webkit-media-controls.immersive-mode input[pseudo="-internal-media-controls-overflow-button" i]:hover {
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 4px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 2) {
-  .immersive-mode div[pseudo="-webkit-media-controls-panel" i] {
+  video::-webkit-media-controls.immersive-mode div[pseudo="-webkit-media-controls-panel" i] {
     background:
       -webkit-image-set(url('default_200_percent/modern/vr_gradient_bg.png') 1x)
       repeat-x bottom left auto 198px;