Only set overflow:hidden on -webkit-media-controls when the placehold…

…er is showing. https://bugs.webkit.org/show_bug.cgi?id=157975 Reviewed by Eric Carlson. Source/WebCore: Test: media/mac/controls-panel-not-clipped-out.html overflow:hidden was added to clip out content contained in -webkit-media-controls that sticks out of the bounds of that container when the inlinePlaybackPlaceholder is showing. However, that style also clips out things that we want to show when the inlinePlaybackPlaceholder is not showing. For example, the volume slider or the controls panel when the video element's height is too short. To fix that, we only set overflow:hidden on -webkit-media-controls when the inlinePlaybackPlaceholder is visible. * Modules/mediacontrols/mediaControlsApple.css: (::-webkit-media-controls): (::-webkit-media-controls.placeholder-showing): Set overflow:hidden only when the placeholder is showing. * Modules/mediacontrols/mediaControlsApple.js: (Controller.prototype.handlePresentationModeChange): Add the placeholderShowing class to -webkit-media-controls only when the inlinePlaybackPlaceholder is not hidden. LayoutTests: This is a Mac only test. The media controls panel should still be visible even if the media element's height is very short. * TestExpectations: * media/mac/controls-panel-not-clipped-out-expected.html: Added. * media/mac/controls-panel-not-clipped-out.html: Added. * platform/mac/TestExpectations: * platform/mac/media/media-document-audio-repaint-expected.txt: * platform/mac/media/video-zoom-controls-expected.txt: Rebaseline tests. Canonical link: https://commits.webkit.org/176163@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@201355 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · May 24, 2016 · 5224612 · 5224612
1 parent a44a24b
commit 5224612
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 18 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,22 @@
+2016-05-24  Ada Chan  <adachan@apple.com>
+
+        Only set overflow:hidden on -webkit-media-controls when the placeholder is showing.
+        https://bugs.webkit.org/show_bug.cgi?id=157975
+
+        Reviewed by Eric Carlson.
+
+        This is a Mac only test. The media controls panel should still be visible
+        even if the media element's height is very short.
+
+        * TestExpectations:
+        * media/mac/controls-panel-not-clipped-out-expected.html: Added.
+        * media/mac/controls-panel-not-clipped-out.html: Added.
+        * platform/mac/TestExpectations:
+
+        * platform/mac/media/media-document-audio-repaint-expected.txt:
+        * platform/mac/media/video-zoom-controls-expected.txt:
+        Rebaseline tests.
+
 2016-05-24  Adam Bergkvist  <adam.bergkvist@ericsson.com>
 
         WebRTC: RTCIceCandidate: Make attributes readonly (and update constructor arg)

diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
@@ -21,6 +21,7 @@ fast/viewport/ios [ Skip ]
 fast/events/ios [ Skip ]
 fast/events/touch/ios [ Skip ]
 fast/scrolling/ios [ Skip ]
+media/mac [ Skip ]
 
 fast/forms/attributed-strings.html [ Skip ]
 fast/scrolling/latching [ Skip ]

diff --git a/LayoutTests/media/mac/controls-panel-not-clipped-out-expected.html b/LayoutTests/media/mac/controls-panel-not-clipped-out-expected.html
@@ -0,0 +1,3 @@
+<div style="position: relative; height: 100px; width: 200px">
+    <audio controls style="height: 60px; width: 200px; position: absolute; bottom: 0;"></audio>
+</div>
diff --git a/LayoutTests/media/mac/controls-panel-not-clipped-out.html b/LayoutTests/media/mac/controls-panel-not-clipped-out.html
@@ -0,0 +1,3 @@
+<div style="position: relative; height: 100px; width: 200px">
+    <audio controls style="height: 1px; width: 200px; position: absolute; bottom: 0;"></audio>
+</div>
diff --git a/LayoutTests/platform/mac/TestExpectations b/LayoutTests/platform/mac/TestExpectations
@@ -10,6 +10,7 @@ accessibility/mac [ Pass ]
 displaylists [ Pass ]
 editing/mac [ Pass ]
 fast/scrolling/latching [ Pass ]
+media/mac [ Pass ]
 
 fast/forms/search/search-padding-cancel-results-buttons.html [ Pass ]
 fast/forms/search/search-results-hidden-crash.html [ Pass ]

diff --git a/LayoutTests/platform/mac/media/media-document-audio-repaint-expected.txt b/LayoutTests/platform/mac/media/media-document-audio-repaint-expected.txt
@@ -21,13 +21,38 @@ layer at (8,42) size 384x334
       RenderVideo {VIDEO} at (40,164) size 300x2
     layer at (40,165) size 300x1
       RenderFlexibleBox {DIV} at (0,0) size 300x1
-    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
+    layer at (40,121) size 300x45
       RenderFlexibleBox {DIV} at (0,-44) size 300x45
-    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1 isolatesBlending
+    layer at (40,121) size 300x45 isolatesBlending
       RenderBlock (positioned) {DIV} at (0,0) size 300x45
-    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
+    layer at (40,121) size 300x45
       RenderBlock (positioned) {DIV} at (0,0) size 300x45 [bgcolor=#1E1E1E73]
-    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1 blendMode: lighten
+    layer at (40,121) size 300x45 blendMode: lighten
       RenderBlock (positioned) {DIV} at (0,0) size 300x45 [bgcolor=#292929]
-    layer at (318,141) size 14x25 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
+    layer at (48,146) size 12x15 blendMode: plus-lighter
+      RenderButton {BUTTON} at (8,25) size 12x15 [color=#FFFFFF]
+    layer at (76,145) size 16x15 blendMode: plus-lighter
+      RenderButton {BUTTON} at (36,24) size 16x16 [color=#FFFFFF]
+    layer at (100,145) size 210x17
+      RenderFlexibleBox {DIV} at (60,24) size 210x17
+    layer at (108,146) size 32x13 blendMode: plus-lighter
+      RenderFlexibleBox {DIV} at (8,2) size 32x13 [color=#FFFFFF]
+        RenderBlock (anonymous) at (2,0) size 30x13
+          RenderText {#text} at (0,0) size 30x13
+            text run at (0,0) width 30: "00:00"
+    layer at (150,145) size 105x17
+      RenderFlexibleBox {DIV} at (50,0) size 105x17
+    layer at (150,145) size 105x17 blendMode: plus-lighter
+      RenderSlider {INPUT} at (0,0) size 105x17 [color=#909090]
+        RenderFlexibleBox {DIV} at (0,0) size 105x17
+          RenderBlock {DIV} at (0,1) size 105x15
+            RenderBlock {DIV} at (50,0) size 4x15
+    layer at (265,146) size 37x13 blendMode: plus-lighter
+      RenderFlexibleBox {DIV} at (165,2) size 37x13 [color=#FFFFFF]
+        RenderBlock (anonymous) at (0,0) size 35x13
+          RenderText {#text} at (0,0) size 35x13
+            text run at (0,0) width 35: "-00:00"
+    layer at (318,141) size 14x25
       RenderFlexibleBox {DIV} at (278,20) size 14x25
+    layer at (318,146) size 14x15 blendMode: plus-lighter
+      RenderButton {BUTTON} at (0,5) size 14x15 [color=#FFFFFF]
diff --git a/LayoutTests/platform/mac/media/video-zoom-controls-expected.txt b/LayoutTests/platform/mac/media/video-zoom-controls-expected.txt
@@ -12,17 +12,17 @@ layer at (57,85) size 240x180
   RenderFlexibleBox {DIV} at (0,0) size 240x180
 layer at (57,198) size 240x67
   RenderFlexibleBox {DIV} at (0,112) size 240x68
-layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180 isolatesBlending
+layer at (57,198) size 240x68 isolatesBlending
   RenderBlock (positioned) {DIV} at (0,0) size 240x68
-layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180
+layer at (57,198) size 240x68
   RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#1E1E1E73]
-layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180 blendMode: lighten
+layer at (57,198) size 240x68 blendMode: lighten
   RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#292929]
 layer at (69,235) size 18x22 blendMode: plus-lighter
   RenderButton {BUTTON} at (12,37) size 18x23 [color=#FFFFFF]
 layer at (111,234) size 24x22 blendMode: plus-lighter
   RenderButton {BUTTON} at (54,36) size 24x24 [color=#FFFFFF]
-layer at (221,228) size 21x38 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180
+layer at (221,228) size 21x38
   RenderFlexibleBox {DIV} at (163,30) size 22x38
 layer at (221,235) size 21x22 blendMode: plus-lighter
   RenderButton {BUTTON} at (0,7) size 21x23 [color=#FFFFFF]
@@ -32,21 +32,21 @@ layer at (57,310) size 240x180 isolatesBlending
   RenderVideo {VIDEO} at (45,298) size 240x180
 layer at (57,310) size 240x180
   RenderFlexibleBox {DIV} at (0,0) size 240x180
-layer at (57,423) size 240x67 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
+layer at (57,423) size 240x67
   RenderFlexibleBox {DIV} at (0,112) size 240x68
-layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 isolatesBlending
+layer at (57,423) size 240x68 isolatesBlending
   RenderBlock (positioned) {DIV} at (0,0) size 240x68
-layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
+layer at (57,423) size 240x68
   RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#1E1E1E73]
-layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: lighten
+layer at (57,423) size 240x68 blendMode: lighten
   RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#292929]
-layer at (69,460) size 18x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
+layer at (69,460) size 18x22 blendMode: plus-lighter
   RenderButton {BUTTON} at (12,37) size 18x23 [color=#FFFFFF]
-layer at (111,459) size 24x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
+layer at (111,459) size 24x22 blendMode: plus-lighter
   RenderButton {BUTTON} at (54,36) size 24x24 [color=#FFFFFF]
-layer at (221,453) size 21x38 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
+layer at (221,453) size 21x38
   RenderFlexibleBox {DIV} at (163,30) size 22x38
-layer at (221,460) size 21x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
+layer at (221,460) size 21x22 blendMode: plus-lighter
   RenderButton {BUTTON} at (0,7) size 21x23 [color=#FFFFFF]
-layer at (266,460) size 21x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
+layer at (266,460) size 21x22 blendMode: plus-lighter
   RenderButton {BUTTON} at (208,37) size 22x23 [color=#FFFFFF]
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,31 @@
+2016-05-23  Ada Chan  <adachan@apple.com>
+
+        Only set overflow:hidden on -webkit-media-controls when the placeholder is showing.
+        https://bugs.webkit.org/show_bug.cgi?id=157975
+
+        Reviewed by Eric Carlson.
+
+        Test: media/mac/controls-panel-not-clipped-out.html
+
+        overflow:hidden was added to clip out content contained in -webkit-media-controls
+        that sticks out of the bounds of that container when the inlinePlaybackPlaceholder
+        is showing. However, that style also clips out things that we want to show when the
+        inlinePlaybackPlaceholder is not showing. For example, the volume slider or the
+        controls panel when the video element's height is too short.
+
+        To fix that, we only set overflow:hidden on -webkit-media-controls when the
+        inlinePlaybackPlaceholder is visible.
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (::-webkit-media-controls):
+        (::-webkit-media-controls.placeholder-showing):
+        Set overflow:hidden only when the placeholder is showing.
+
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.handlePresentationModeChange):
+        Add the placeholderShowing class to -webkit-media-controls only when the
+        inlinePlaybackPlaceholder is not hidden.
+
 2016-05-24  Ryan Haddad  <ryanhaddad@apple.com>
 
         Unreviewed, rolling out r201341.

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css b/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
@@ -59,6 +59,9 @@ video:-webkit-full-page-media::-webkit-media-controls-panel.no-video {
     font: -webkit-small-control;
     white-space: nowrap;
     -webkit-font-smoothing: subpixel-antialiased;
+}
+
+::-webkit-media-controls.placeholder-showing {
     overflow: hidden;
 }
 

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js b/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
@@ -115,6 +115,7 @@ Controller.prototype = {
         down: 'down',
         out: 'out',
         pictureInPictureButton: 'picture-in-picture-button',
+        placeholderShowing: 'placeholder-showing',
     },
     KeyCodes: {
         enter: 13,
@@ -872,6 +873,11 @@ Controller.prototype = {
                 break;
         }
 
+        if (this.controls.inlinePlaybackPlaceholder.classList.contains(this.ClassNames.hidden))
+            this.base.classList.remove(this.ClassNames.placeholderShowing);
+        else
+            this.base.classList.add(this.ClassNames.placeholderShowing);
+
         this.updateControls();
         this.updateCaptionContainer();
         this.resetHideControlsTimer();