Reland remove audio element centering on MediaDocument

This is a reland of crrev.com/c/1028483. This CL removes a CSS rule
that centered the audio element on the MediaDocument page. This fixes
an issue where the overflow menu position calculation was incorrect.

Bug: 835279
Change-Id: I028383f5201c5bee741a6fb5dd5a825a9a808736
Reviewed-on: https://chromium-review.googlesource.com/1033914
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554599}

third_party/WebKit/LayoutTests/platform/linux/media/media-document-audio-repaint-expected.txt

@@ -20,29 +20,29 @@ layer at (8,44) size 384x334
       LayoutVideo (positioned) {VIDEO} at (40,90) size 300x150
     layer at (40,90) size 300x150
       LayoutFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
-    layer at (40,138) size 300x54
+    layer at (40,186) size 300x54
       LayoutFlexibleBox {DIV} at (0,96) size 300x54 [bgcolor=#F1F3F4]
-    layer at (40,138) size 300x54 scrollHeight 55
+    layer at (40,186) size 300x54 scrollHeight 55
       LayoutFlexibleBox {DIV} at (0,0) size 300x54
         LayoutButton {INPUT} at (10,11) size 32x32
         LayoutSlider {INPUT} at (115,-1) size 143x56 [color=#9D968E]
           LayoutFlexibleBox {DIV} at (16,26) size 111x4
         LayoutButton {INPUT} at (258,11) size 32x32
-    layer at (87,157) size 28x16 transparent
+    layer at (87,205) size 28x16 transparent
       LayoutBlockFlow {DIV} at (47,19) size 28x16
         LayoutText {#text} at (0,0) size 28x16
           text run at (0,0) width 28: "0:00"
-    layer at (119,157) size 36x16 transparent
+    layer at (119,205) size 36x16 transparent
       LayoutBlockFlow {DIV} at (79,19) size 36x16
         LayoutText {#text} at (0,0) size 36x16
           text run at (0,0) width 36: "/ 0:01"
-    layer at (171,163) size 111x4
+    layer at (171,211) size 111x4
       LayoutBlockFlow (relative positioned) {DIV} at (0,0) size 111x4 [bgcolor=#00000033]
-    layer at (220,159) size 12x12
+    layer at (220,207) size 12x12
       LayoutBlockFlow (relative positioned) {DIV} at (49.48,-4) size 12x12 [bgcolor=#000000DE]
-    layer at (171,163) size 111x4
+    layer at (171,211) size 111x4
       LayoutBlockFlow (positioned) {DIV} at (0,0) size 111x4
-    layer at (171,163) size 55x4
+    layer at (171,211) size 55x4
       LayoutBlockFlow (positioned) {DIV} at (0,0) size 55x4 [bgcolor=#000000DE]
-    layer at (226,163) size 55x4
+    layer at (226,211) size 55x4
       LayoutBlockFlow (positioned) {DIV} at (55,0) size 55x4 [bgcolor=#0000008A]

third_party/WebKit/LayoutTests/platform/mac/media/media-document-audio-repaint-expected.txt

@@ -20,29 +20,29 @@ layer at (8,42) size 384x334
       LayoutVideo (positioned) {VIDEO} at (40,90) size 300x150
     layer at (40,90) size 300x150
       LayoutFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
-    layer at (40,138) size 300x54
+    layer at (40,186) size 300x54
       LayoutFlexibleBox {DIV} at (0,96) size 300x54 [bgcolor=#F1F3F4]
-    layer at (40,138) size 300x54 scrollHeight 55
+    layer at (40,186) size 300x54 scrollHeight 55
       LayoutFlexibleBox {DIV} at (0,0) size 300x54
         LayoutButton {INPUT} at (10,11) size 32x32
         LayoutSlider {INPUT} at (113.28,-1) size 144.72x56 [color=#909090]
           LayoutFlexibleBox {DIV} at (16,26) size 112.72x4
         LayoutButton {INPUT} at (258,11) size 32x32
-    layer at (87,157) size 27x16 transparent
+    layer at (87,205) size 27x16 transparent
       LayoutBlockFlow {DIV} at (47,19) size 27.25x16
         LayoutText {#text} at (0,0) size 28x16
           text run at (0,0) width 28: "0:00"
-    layer at (118,157) size 35x16 transparent
+    layer at (118,205) size 35x16 transparent
       LayoutBlockFlow {DIV} at (78.25,19) size 35.03x16
         LayoutText {#text} at (0,0) size 36x16
           text run at (0,0) width 36: "/ 0:01"
-    layer at (169,163) size 113x4
+    layer at (169,211) size 113x4
       LayoutBlockFlow (relative positioned) {DIV} at (0,0) size 112.72x4 [bgcolor=#00000033]
-    layer at (220,159) size 12x12
+    layer at (220,207) size 12x12
       LayoutBlockFlow (relative positioned) {DIV} at (50.34,-4) size 12x12 [bgcolor=#000000DE]
-    layer at (169,163) size 113x4
+    layer at (169,211) size 113x4
       LayoutBlockFlow (positioned) {DIV} at (0,0) size 112.72x4
-    layer at (169,163) size 56x4
+    layer at (169,211) size 56x4
       LayoutBlockFlow (positioned) {DIV} at (0,0) size 56x4 [bgcolor=#000000DE]
-    layer at (225,163) size 56x4
+    layer at (225,211) size 56x4
       LayoutBlockFlow (positioned) {DIV} at (56,0) size 56x4 [bgcolor=#0000008A]

third_party/WebKit/LayoutTests/platform/win/media/media-document-audio-repaint-expected.txt

@@ -20,29 +20,29 @@ layer at (8,44) size 384x334
       LayoutVideo (positioned) {VIDEO} at (40,90) size 300x150
     layer at (40,90) size 300x150
       LayoutFlexibleBox (relative positioned) {DIV} at (0,0) size 300x150
-    layer at (40,138) size 300x54
+    layer at (40,186) size 300x54
       LayoutFlexibleBox {DIV} at (0,96) size 300x54 [bgcolor=#F1F3F4]
-    layer at (40,138) size 300x54 scrollHeight 55
+    layer at (40,186) size 300x54 scrollHeight 55
       LayoutFlexibleBox {DIV} at (0,0) size 300x54
         LayoutButton {INPUT} at (10,11) size 32x32
         LayoutSlider {INPUT} at (115,-1) size 143x56 [color=#C4C4C4]
           LayoutFlexibleBox {DIV} at (16,26) size 111x4
         LayoutButton {INPUT} at (258,11) size 32x32
-    layer at (87,157) size 28x16 transparent
+    layer at (87,205) size 28x16 transparent
       LayoutBlockFlow {DIV} at (47,19) size 28x16
         LayoutText {#text} at (0,0) size 28x16
           text run at (0,0) width 28: "0:00"
-    layer at (119,157) size 36x16 transparent
+    layer at (119,205) size 36x16 transparent
       LayoutBlockFlow {DIV} at (79,19) size 36x16
         LayoutText {#text} at (0,0) size 36x16
           text run at (0,0) width 36: "/ 0:01"
-    layer at (171,163) size 111x4
+    layer at (171,211) size 111x4
       LayoutBlockFlow (relative positioned) {DIV} at (0,0) size 111x4 [bgcolor=#00000033]
-    layer at (220,159) size 12x12
+    layer at (220,207) size 12x12
       LayoutBlockFlow (relative positioned) {DIV} at (49.48,-4) size 12x12 [bgcolor=#000000DE]
-    layer at (171,163) size 111x4
+    layer at (171,211) size 111x4
       LayoutBlockFlow (positioned) {DIV} at (0,0) size 111x4
-    layer at (171,163) size 55x4
+    layer at (171,211) size 55x4
       LayoutBlockFlow (positioned) {DIV} at (0,0) size 55x4 [bgcolor=#000000DE]
-    layer at (226,163) size 55x4
+    layer at (226,211) size 55x4
       LayoutBlockFlow (positioned) {DIV} at (55,0) size 55x4 [bgcolor=#0000008A]

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

@@ -18,15 +18,6 @@ video:-webkit-full-page-media {
     max-width: 100%;
 }
 
-/**
- * The audio controls have a height of 54px, but the video tag has an intrinsic
- * height of 150px. To center a 54px within a 150px box, shift up by
- * ((150-54)/2) = 48px.
- */
-video:-webkit-full-page-media::-webkit-media-controls.audio-only {
-  transform: translateY(-48px);
-}
-
 /**
  * Panel Structure
  */