Set overflow: hidden on ::-webkit-media-controls in mediaControlsApple.css
authoradachan@apple.com <adachan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 28 Apr 2016 17:34:24 +0000 (17:34 +0000)
committeradachan@apple.com <adachan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 28 Apr 2016 17:34:24 +0000 (17:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=157110

Reviewed by Eric Carlson.

Source/WebCore:

Test: fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html

This matches what we do in mediaControlsiOS.css.

* Modules/mediacontrols/mediaControlsApple.css:
(::-webkit-media-controls):

LayoutTests:

The style change caused an image only failure for fast/regions/inline-block-inside-anonymous-overflow.html.
Mark that test as image-failure-only and add a new test that's basically a copy of inline-block-inside-anonymous-overflow.html
with the default controls covered so we can still catch layout regressions related to flowing content from region to region.

* fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls-expected.html: Added.
* fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html: Added.
* platform/ios-simulator/TestExpectations:
fast/regions/inline-block-inside-anonymous-overflow.html is already marked as image-failure-only
so this new test needs to be marked too.
* platform/mac/TestExpectations:
* platform/mac/media/media-document-audio-repaint-expected.txt:
* platform/mac/media/video-zoom-controls-expected.txt:
Rebaseline test due to style change in mediaControlsApple.css.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@200196 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
LayoutTests/platform/mac/TestExpectations
LayoutTests/platform/mac/media/media-document-audio-repaint-expected.txt
LayoutTests/platform/mac/media/video-zoom-controls-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsApple.css

index 4909ece..414014b 100644 (file)
@@ -1,3 +1,24 @@
+2016-04-27  Ada Chan  <adachan@apple.com>
+
+        Set overflow: hidden on ::-webkit-media-controls in mediaControlsApple.css
+        https://bugs.webkit.org/show_bug.cgi?id=157110
+
+        Reviewed by Eric Carlson.
+
+        The style change caused an image only failure for fast/regions/inline-block-inside-anonymous-overflow.html.
+        Mark that test as image-failure-only and add a new test that's basically a copy of inline-block-inside-anonymous-overflow.html
+        with the default controls covered so we can still catch layout regressions related to flowing content from region to region.
+
+        * fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls-expected.html: Added.
+        * fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html: Added.
+        * platform/ios-simulator/TestExpectations:
+        fast/regions/inline-block-inside-anonymous-overflow.html is already marked as image-failure-only
+        so this new test needs to be marked too.
+        * platform/mac/TestExpectations:
+        * platform/mac/media/media-document-audio-repaint-expected.txt:
+        * platform/mac/media/video-zoom-controls-expected.txt:
+        Rebaseline test due to style change in mediaControlsApple.css.
+
 2016-04-28  Youenn Fablet  <youenn.fablet@crf.canon.fr>
 
         [Fetch API] Import remaining fetch tests
diff --git a/LayoutTests/fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls-expected.html b/LayoutTests/fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls-expected.html
new file mode 100644 (file)
index 0000000..f0c8003
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .region {
+                border: 3px solid blue;
+                float: left;
+            }
+            #region1 {
+                height: 250px;
+            }
+            #region2 {
+                width: 300px;
+                height: 200px;
+                margin-left: 50px;
+            }
+            .article {
+                background-color: #009999;
+            }
+            #article1 {
+                height: 230px;
+            }
+            #video {
+                width: 320px;
+                height: 300px;
+                background-color: salmon;
+                border: 3px solid black;
+            }
+            #controlsBlocker {
+                position: absolute;
+                display: block;
+                width: 350px;
+                height: 40px;
+                top: 350px;
+                left: 5px;
+                z-index: 1000;
+                background-color: black;
+            }
+        </style>
+    </head>
+
+    <body>
+        <a href="https://bugs.webkit.org/show_bug.cgi?id=132601">Bug 132601 - [CSS Regions] Block incorrectly sized when containing an unsplittable box</a>
+        <p>This test passes if the <span style="color:#00BB00">green text</span> is positioned at the very top of the second <span style="color:blue">region</span> and the <span style="color:blue">blue text</span> immediately after it.</p>
+        <div class="region" id="region1">
+            <div class="article" id="article1">
+                <video id="video" controls></video><span style="color:#00FF00">
+            </div>
+        </div>
+        
+        <div class="region" id="region2">
+            <div class="article" id="article2">
+                <span style="color:#00FF00">This text, together with the video element, are inside an anonymouse block</span>
+                <div id="after" style="color:blue">This div is after the anonymous block</div>
+            </div>
+        </div>
+        <div id="controlsBlocker"></div>
+    </body>
+</html>
diff --git a/LayoutTests/fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html b/LayoutTests/fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html
new file mode 100644 (file)
index 0000000..39590b4
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .region {
+                -webkit-flow-from: flow;
+                border: 3px solid blue;
+                float: left;
+            }
+            #region1 {
+                height: 250px;
+            }
+            #region2 {
+                width: 300px;
+                height: 200px;
+                margin-left: 50px;
+            }
+            #article {
+                -webkit-flow-into: flow;
+                background-color: #009999;
+            }
+            #video {
+                width: 320px;
+                height: 300px;
+                background-color: salmon;
+                border: 3px solid black;
+            }
+            #controlsBlocker {
+                position: absolute;
+                display: block;
+                width: 350px;
+                height: 40px;
+                top: 350px;
+                left: 5px;
+                z-index: 1000;
+                background-color: black;
+            }
+        </style>
+    </head>
+
+    <body>
+        <a href="https://bugs.webkit.org/show_bug.cgi?id=132601">Bug 132601 - [CSS Regions] Block incorrectly sized when containing an unsplittable box</a>
+        <p>This test passes if the <span style="color:#00BB00">green text</span> is positioned at the very top of the second <span style="color:blue">region</span> and the <span style="color:blue">blue text</span> immediately after it.</p>
+        <div class="region" id="region1"></div>
+        <div class="region" id="region2"></div>
+        <div id="article">
+            <video id="video" controls></video><span style="color:#00FF00">This text, together with the video element, are inside an anonymouse block</span>
+            <div id="after" style="color:blue">This div is after the anonymous block</div>
+        </div>
+        <div id="controlsBlocker"></div>
+    </body>
+</html>
index df883c4..34253da 100644 (file)
@@ -2005,6 +2005,7 @@ fast/regions/hover-overflow-hidden.html [ ImageOnlyFailure ]
 fast/regions/inline-block-flowed-in-regions.html [ ImageOnlyFailure ]
 fast/regions/inline-block-inline-children-flowed-in-regions.html [ ImageOnlyFailure ]
 fast/regions/inline-block-inside-anonymous-overflow.html [ ImageOnlyFailure ]
+fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html [ ImageOnlyFailure ]
 fast/regions/inline-block-overflow.html [ ImageOnlyFailure ]
 fast/regions/inline-blocks-dyn-enlarged-regions.html [ ImageOnlyFailure ]
 fast/regions/inline-blocks-dyn-shrunk-regions.html [ ImageOnlyFailure ]
index 92690b1..9baebfc 100644 (file)
@@ -1331,3 +1331,5 @@ webkit.org/b/156112 [ ElCapitan ] media/controls-without-preload.html [ Pass Fai
 webkit.org/b/156351 storage/indexeddb/modern/autoincrement-abort-private.html [ Pass Timeout ]
 
 webkit.org/b/156983 media/video-fullscreen-restriction-removed.html [ Pass Failure ]
+
+webkit.org/b/156320 fast/regions/inline-block-inside-anonymous-overflow.html [ ImageOnlyFailure ]
index e4ef90c..ee853a5 100644 (file)
@@ -21,38 +21,13 @@ 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
+    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
       RenderFlexibleBox {DIV} at (0,-44) size 300x45
-    layer at (40,121) size 300x45 isolatesBlending
+    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1 isolatesBlending
       RenderBlock (positioned) {DIV} at (0,0) size 300x45
-    layer at (40,121) size 300x45
+    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
       RenderBlock (positioned) {DIV} at (0,0) size 300x45 [bgcolor=#1E1E1E73]
-    layer at (40,121) size 300x45 blendMode: lighten
+    layer at (40,121) size 300x45 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1 blendMode: lighten
       RenderBlock (positioned) {DIV} at (0,0) size 300x45 [bgcolor=#292929]
-    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
+    layer at (318,141) size 14x25 backgroundClip at (40,165) size 300x1 clip at (40,165) size 300x1
       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]
index 4492c85..10de90e 100644 (file)
@@ -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 isolatesBlending
+layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180 isolatesBlending
   RenderBlock (positioned) {DIV} at (0,0) size 240x68
-layer at (57,198) size 240x68
+layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180
   RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#1E1E1E73]
-layer at (57,198) size 240x68 blendMode: lighten
+layer at (57,198) size 240x68 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180 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
+layer at (221,228) size 21x38 backgroundClip at (57,85) size 240x180 clip at (57,85) size 240x180
   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
+layer at (57,423) size 240x67 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
   RenderFlexibleBox {DIV} at (0,112) size 240x68
-layer at (57,423) size 240x68 isolatesBlending
+layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 isolatesBlending
   RenderBlock (positioned) {DIV} at (0,0) size 240x68
-layer at (57,423) size 240x68
+layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
   RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#1E1E1E73]
-layer at (57,423) size 240x68 blendMode: lighten
+layer at (57,423) size 240x68 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: lighten
   RenderBlock (positioned) {DIV} at (0,0) size 240x68 [bgcolor=#292929]
-layer at (69,460) size 18x22 blendMode: plus-lighter
+layer at (69,460) size 18x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
   RenderButton {BUTTON} at (12,37) size 18x23 [color=#FFFFFF]
-layer at (111,459) size 24x22 blendMode: plus-lighter
+layer at (111,459) size 24x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
   RenderButton {BUTTON} at (54,36) size 24x24 [color=#FFFFFF]
-layer at (221,453) size 21x38
+layer at (221,453) size 21x38 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180
   RenderFlexibleBox {DIV} at (163,30) size 22x38
-layer at (221,460) size 21x22 blendMode: plus-lighter
+layer at (221,460) size 21x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
   RenderButton {BUTTON} at (0,7) size 21x23 [color=#FFFFFF]
-layer at (266,460) size 21x22 blendMode: plus-lighter
+layer at (266,460) size 21x22 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 blendMode: plus-lighter
   RenderButton {BUTTON} at (208,37) size 22x23 [color=#FFFFFF]
index 800ceae..2f7f273 100644 (file)
@@ -1,3 +1,17 @@
+2016-04-27  Ada Chan  <adachan@apple.com>
+
+        Set overflow: hidden on ::-webkit-media-controls in mediaControlsApple.css
+        https://bugs.webkit.org/show_bug.cgi?id=157110
+
+        Reviewed by Eric Carlson.
+
+        Test: fast/regions/inline-block-inside-anonymous-overflow-with-covered-controls.html
+
+        This matches what we do in mediaControlsiOS.css.
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (::-webkit-media-controls):
+
 2016-04-28  Chris Dumez  <cdumez@apple.com>
 
         [Web IDL] Specify default values for optional parameters of type 'DOMString'
index b886531..625ef7d 100644 (file)
@@ -59,6 +59,7 @@ video:-webkit-full-page-media::-webkit-media-controls-panel.no-video {
     font: -webkit-small-control;
     white-space: nowrap;
     -webkit-font-smoothing: subpixel-antialiased;
+    overflow: hidden;
 }
 
 video::-webkit-media-text-track-container,