Changeset 201355 in webkit


Ignore:
Timestamp:
May 24, 2016 2:48:20 PM (8 years ago)
Author:
adachan@apple.com
Message:

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.

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.

Location:
trunk
Files:
3 added
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r201350 r201355  
     12016-05-24  Ada Chan  <adachan@apple.com>
     2
     3        Only set overflow:hidden on -webkit-media-controls when the placeholder is showing.
     4        https://bugs.webkit.org/show_bug.cgi?id=157975
     5
     6        Reviewed by Eric Carlson.
     7
     8        This is a Mac only test. The media controls panel should still be visible
     9        even if the media element's height is very short.
     10
     11        * TestExpectations:
     12        * media/mac/controls-panel-not-clipped-out-expected.html: Added.
     13        * media/mac/controls-panel-not-clipped-out.html: Added.
     14        * platform/mac/TestExpectations:
     15
     16        * platform/mac/media/media-document-audio-repaint-expected.txt:
     17        * platform/mac/media/video-zoom-controls-expected.txt:
     18        Rebaseline tests.
     19
    1202016-05-24  Adam Bergkvist  <adam.bergkvist@ericsson.com>
    221

  • trunk/LayoutTests/TestExpectations

    r201289 r201355  
    2222fast/events/touch/ios [ Skip ]
    2323fast/scrolling/ios [ Skip ]
     24media/mac [ Skip ]
    2425
    2526fast/forms/attributed-strings.html [ Skip ]

  • trunk/LayoutTests/platform/mac/TestExpectations

    r201308 r201355  
    1111editing/mac [ Pass ]
    1212fast/scrolling/latching [ Pass ]
     13media/mac [ Pass ]
    1314
    1415fast/forms/search/search-padding-cancel-results-buttons.html [ Pass ]

  • trunk/LayoutTests/platform/mac/media/media-document-audio-repaint-expected.txt

    r200196 r201355  
    2222    layer at (40,165) size 300x1
    2323      RenderFlexibleBox {DIV} at (0,0) size 300x1
    24     layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
     24    layer at (40,121) size 300x45
    2525      RenderFlexibleBox {DIV} at (0,-44) size 300x45
    26     layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1 isolatesBlending
     26    layer at (40,121) size 300x45 isolatesBlending
    2727      RenderBlock (positioned) {DIV} at (0,0) size 300x45
    28     layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
     28    layer at (40,121) size 300x45
    2929      RenderBlock (positioned) {DIV} at (0,0) size 300x45 [bgcolor=#1E1E1E73]
    30     layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1 blendMode: lighten
     30    layer at (40,121) size 300x45 blendMode: lighten
    3131      RenderBlock (positioned) {DIV} at (0,0) size 300x45 [bgcolor=#292929]
    32     layer at (318,141) size 14x25 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
     32    layer at (48,146) size 12x15 blendMode: plus-lighter
     33      RenderButton {BUTTON} at (8,25) size 12x15 [color=#FFFFFF]
     34    layer at (76,145) size 16x15 blendMode: plus-lighter
     35      RenderButton {BUTTON} at (36,24) size 16x16 [color=#FFFFFF]
     36    layer at (100,145) size 210x17
     37      RenderFlexibleBox {DIV} at (60,24) size 210x17
     38    layer at (108,146) size 32x13 blendMode: plus-lighter
     39      RenderFlexibleBox {DIV} at (8,2) size 32x13 [color=#FFFFFF]
     40        RenderBlock (anonymous) at (2,0) size 30x13
     41          RenderText {#text} at (0,0) size 30x13
     42            text run at (0,0) width 30: "00:00"
     43    layer at (150,145) size 105x17
     44      RenderFlexibleBox {DIV} at (50,0) size 105x17
     45    layer at (150,145) size 105x17 blendMode: plus-lighter
     46      RenderSlider {INPUT} at (0,0) size 105x17 [color=#909090]
     47        RenderFlexibleBox {DIV} at (0,0) size 105x17
     48          RenderBlock {DIV} at (0,1) size 105x15
     49            RenderBlock {DIV} at (50,0) size 4x15
     50    layer at (265,146) size 37x13 blendMode: plus-lighter
     51      RenderFlexibleBox {DIV} at (165,2) size 37x13 [color=#FFFFFF]
     52        RenderBlock (anonymous) at (0,0) size 35x13
     53          RenderText {#text} at (0,0) size 35x13
     54            text run at (0,0) width 35: "-00:00"
     55    layer at (318,141) size 14x25
    3356      RenderFlexibleBox {DIV} at (278,20) size 14x25
     57    layer at (318,146) size 14x15 blendMode: plus-lighter
     58      RenderButton {BUTTON} at (0,5) size 14x15 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/media/video-zoom-controls-expected.txt

    r200196 r201355  
    1313layer at (57,198) size 240x67
    1414  RenderFlexibleBox {DIV} at (0,112) size 240x68
    15 layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180 isolatesBlending
     15layer at (57,198) size 240x68 isolatesBlending
    1616  RenderBlock (positioned) {DIV} at (0,0) size 240x68
    17 layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180
     17layer at (57,198) size 240x68
    1818  RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#1E1E1E73]
    19 layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180 blendMode: lighten
     19layer at (57,198) size 240x68 blendMode: lighten
    2020  RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#292929]
    2121layer at (69,235) size 18x22 blendMode: plus-lighter
    … …  
    2323layer at (111,234) size 24x22 blendMode: plus-lighter
    2424  RenderButton {BUTTON} at (54,36) size 24x24 [color=#FFFFFF]
    25 layer at (221,228) size 21x38 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180
     25layer at (221,228) size 21x38
    2626  RenderFlexibleBox {DIV} at (163,30) size 22x38
    2727layer at (221,235) size 21x22 blendMode: plus-lighter
    … …  
    3333layer at (57,310) size 240x180
    3434  RenderFlexibleBox {DIV} at (0,0) size 240x180
    35 layer at (57,423) size 240x67 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
     35layer at (57,423) size 240x67
    3636  RenderFlexibleBox {DIV} at (0,112) size 240x68
    37 layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 isolatesBlending
     37layer at (57,423) size 240x68 isolatesBlending
    3838  RenderBlock (positioned) {DIV} at (0,0) size 240x68
    39 layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
     39layer at (57,423) size 240x68
    4040  RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#1E1E1E73]
    41 layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: lighten
     41layer at (57,423) size 240x68 blendMode: lighten
    4242  RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#292929]
    43 layer at (69,460) size 18x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
     43layer at (69,460) size 18x22 blendMode: plus-lighter
    4444  RenderButton {BUTTON} at (12,37) size 18x23 [color=#FFFFFF]
    45 layer at (111,459) size 24x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
     45layer at (111,459) size 24x22 blendMode: plus-lighter
    4646  RenderButton {BUTTON} at (54,36) size 24x24 [color=#FFFFFF]
    47 layer at (221,453) size 21x38 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
     47layer at (221,453) size 21x38
    4848  RenderFlexibleBox {DIV} at (163,30) size 22x38
    49 layer at (221,460) size 21x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
     49layer at (221,460) size 21x22 blendMode: plus-lighter
    5050  RenderButton {BUTTON} at (0,7) size 21x23 [color=#FFFFFF]
    51 layer at (266,460) size 21x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
     51layer at (266,460) size 21x22 blendMode: plus-lighter
    5252  RenderButton {BUTTON} at (208,37) size 22x23 [color=#FFFFFF]

  • trunk/Source/WebCore/ChangeLog

    r201354 r201355  
     12016-05-23  Ada Chan  <adachan@apple.com>
     2
     3        Only set overflow:hidden on -webkit-media-controls when the placeholder is showing.
     4        https://bugs.webkit.org/show_bug.cgi?id=157975
     5
     6        Reviewed by Eric Carlson.
     7
     8        Test: media/mac/controls-panel-not-clipped-out.html
     9
     10        overflow:hidden was added to clip out content contained in -webkit-media-controls
     11        that sticks out of the bounds of that container when the inlinePlaybackPlaceholder
     12        is showing. However, that style also clips out things that we want to show when the
     13        inlinePlaybackPlaceholder is not showing. For example, the volume slider or the
     14        controls panel when the video element's height is too short.
     15
     16        To fix that, we only set overflow:hidden on -webkit-media-controls when the
     17        inlinePlaybackPlaceholder is visible.
     18
     19        * Modules/mediacontrols/mediaControlsApple.css:
     20        (::-webkit-media-controls):
     21        (::-webkit-media-controls.placeholder-showing):
     22        Set overflow:hidden only when the placeholder is showing.
     23
     24        * Modules/mediacontrols/mediaControlsApple.js:
     25        (Controller.prototype.handlePresentationModeChange):
     26        Add the placeholderShowing class to -webkit-media-controls only when the
     27        inlinePlaybackPlaceholder is not hidden.
     28
    1292016-05-24  Ryan Haddad  <ryanhaddad@apple.com>
    230

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css

    r200584 r201355  
    6060    white-space: nowrap;
    6161    -webkit-font-smoothing: subpixel-antialiased;
     62}
     63
     64::-webkit-media-controls.placeholder-showing {
    6265    overflow: hidden;
    6366}

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

    r200976 r201355  
    116116        out: 'out',
    117117        pictureInPictureButton: 'picture-in-picture-button',
     118        placeholderShowing: 'placeholder-showing',
    118119    },
    119120    KeyCodes: {
    … …  
    872873                break;
    873874        }
     875
     876        if (this.controls.inlinePlaybackPlaceholder.classList.contains(this.ClassNames.hidden))
     877            this.base.classList.remove(this.ClassNames.placeholderShowing);
     878        else
     879            this.base.classList.add(this.ClassNames.placeholderShowing);
    874880
    875881        this.updateControls();
Note: See TracChangeset for help on using the changeset viewer.