[Media Controls] Prevent sizing issue with audio controls

This CL removes the min-height CSS properties for audio elements and video elements acting as audio elements. We had these rules to handle the width/height-zero elements in the MediaDocument, but we have changed how the MediaDocument sizing works, so they're no longer needed. Bug: 842900 Change-Id: I050aba4786f84754843ee611ead1dabe220381cb Reviewed-on: https://chromium-review.googlesource.com/1239725Reviewed-by: Becca Hughes <beccahughes@chromium.org> Commit-Queue: Tommy Steimel <steimel@chromium.org> Cr-Commit-Position: refs/heads/master@{#593621}

[Media Controls] Prevent sizing issue with audio controls
This CL removes the min-height CSS properties for audio elements and video elements acting as audio elements. We had these rules to handle the width/height-zero elements in the MediaDocument, but we have changed how the MediaDocument sizing works, so they're no longer needed. Bug: 842900 Change-Id: I050aba4786f84754843ee611ead1dabe220381cb Reviewed-on: https://chromium-review.googlesource.com/1239725Reviewed-by: Becca Hughes <beccahughes@chromium.org> Commit-Queue: Tommy Steimel <steimel@chromium.org> Cr-Commit-Position: refs/heads/master@{#593621}
d1a164e1 · Tommy Steimel · Commit Bot · a85bd054 · d1a164e1 · d1a164e1
Commit d1a164e1 authored Sep 24, 2018 by Tommy Steimel Committed by Commit Bot Sep 24, 2018
3 changed files
--- a/third_party/WebKit/LayoutTests/media/controls/audio-element-should-not-exceed-its-set-height.html
+++ b/third_party/WebKit/LayoutTests/media/controls/audio-element-should-not-exceed-its-set-height.html
+<!DOCTYPE html>
+<html>
+<title>Test that an audio element does not stretch past its set height.</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../media-controls.js"></script>
+<style>
+video, audio {
+  height: 2px;
+}
+</style>
+<audio controls preload=none src="../content/test.oga"></audio>
+<!-- Also test for a video acting as an audio element. -->
+<video controls preload=none src="../content/test.oga"></video>
+<script>
+async_test(t => {
+  const audio = document.querySelector('audio');
+  const video = document.querySelector('video');
+  video.addEventListener("loadedmetadata", t.step_func_done(() => {
+    assert_equals(getComputedStyle(panelElement(audio)).height, "2px", "audio tag panel height");
+    assert_equals(getComputedStyle(panelElement(video)).height, "2px", "video tag panel height");
+  }), { once: true });
+  video.load();
+});
+</script>
+</html>
--- a/third_party/WebKit/LayoutTests/media/media-controls.js
+++ b/third_party/WebKit/LayoutTests/media/media-controls.js
@@ -32,6 +32,13 @@ function buttonPanelElement(videoElement) {
  return element;
 }
+function panelElement(videoElement) {
+  var element = mediaControlsButton(videoElement, "panel");
+  if (!element)
+    throw 'Failed to find media controls panel';
+  return element;
+}
 function castButton(videoElement) {
    var controlID = '-internal-media-controls-cast-button';
    var button = mediaControlsElement(internals.shadowRoot(videoElement).firstChild, controlID);

--- a/third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css
+++ b/third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css
@@ -811,12 +811,6 @@ audio {
  height: 54px;
 }
-audio::-webkit-media-controls,
-video::-webkit-media-controls.audio-only {
-  min-width: 240px;
-  min-height: 54px;
-}
 audio::-webkit-media-controls-overlay-enclosure,
 video::-webkit-media-controls.audio-only [pseudo="-webkit-media-controls-overlay-enclosure"] {
  display: none;
@@ -824,7 +818,6 @@ video::-webkit-media-controls.audio-only [pseudo="-webkit-media-controls-overlay
 audio::-webkit-media-controls-enclosure,
 video::-webkit-media-controls.audio-only [pseudo="-webkit-media-controls-enclosure"] {
-  min-height: 54px;
  max-height: 54px;
  flex-direction: row;
  background: #F1F3F4;