[Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear

https://bugs.webkit.org/show_bug.cgi?id=168047
<rdar://problem/30441939>

Reviewed by Eric Carlson.

Source/WebCore:

The controls bar auto-hide behavior is disabled for <audio> elements, but on iOS we have
a TapGestureRecognizer to identify when controls are tapped to toggle controls visibility.
This gesture recognizer would be on at all times, but it should only be enabled when
fadesToIdle is set to true.

Test: media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html

* Modules/modern-media-controls/controls/controls-bar.js:
(ControlsBar.prototype.set fadesWhileIdle):

LayoutTests:

Add a new iOS-specific test that checks the TapGestureRecognizer is only enabled when
fadesToIdle is true.

* media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html: Added.
* platform/mac/TestExpectations:

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index c8a18ba..df3bca0 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,5 +1,20 @@
 2017-02-09  Antoine Quint  <graouts@apple.com>
 
+        [Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
+        https://bugs.webkit.org/show_bug.cgi?id=168047
+        <rdar://problem/30441939>
+
+        Reviewed by Eric Carlson.
+
+        Add a new iOS-specific test that checks the TapGestureRecognizer is only enabled when
+        fadesToIdle is true.
+
+        * media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html: Added.
+        * platform/mac/TestExpectations:
+
+2017-02-09  Antoine Quint  <graouts@apple.com>
+
         [Modern Media Controls] <audio> element does not show any background on iOS
         https://bugs.webkit.org/show_bug.cgi?id=168046
         <rdar://problem/30441872>

diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle-expected.txt
new file mode 100644 (file)
index 0000000..d32c3e2
--- /dev/null
+++ b/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle-expected.txt
@@ -0,0 +1,22 @@
+Testing the MediaController controls bar tap gesture recognizer is only enabled when fadesWhileIdle is true.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Default state
+PASS controlsBar.fadesWhileIdle is false
+PASS controlsBar._tapGestureRecognizer.enabled is false
+
+controlsBar.fadesWhileIdle = true
+PASS controlsBar.fadesWhileIdle is true
+PASS controlsBar._tapGestureRecognizer.enabled is true
+
+controlsBar.fadesWhileIdle = false
+PASS controlsBar.fadesWhileIdle is false
+PASS controlsBar._tapGestureRecognizer.enabled is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+

diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html
new file mode 100644 (file)
index 0000000..399ce23
--- /dev/null
+++ b/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html
@@ -0,0 +1,35 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<audio src="../../content/test.wav" controls style="width: 300px; pointer-events: none; opacity: 0;"></audio>
+<div id="shadow" style="width: 300px; height: 50px;"></div>
+<script type="text/javascript">
+
+description("Testing the <code>MediaController</code> controls bar tap gesture recognizer is only enabled when fadesWhileIdle is true.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+const controlsBar = mediaController.controls.controlsBar ;
+
+debug("Default state");
+shouldBeFalse("controlsBar.fadesWhileIdle");
+shouldBeFalse("controlsBar._tapGestureRecognizer.enabled");
+
+controlsBar.fadesWhileIdle = true;
+debug("");
+debug("controlsBar.fadesWhileIdle = true")
+shouldBeTrue("controlsBar.fadesWhileIdle");
+shouldBeTrue("controlsBar._tapGestureRecognizer.enabled");
+
+controlsBar.fadesWhileIdle = false;
+debug("");
+debug("controlsBar.fadesWhileIdle = false")
+shouldBeFalse("controlsBar.fadesWhileIdle");
+shouldBeFalse("controlsBar._tapGestureRecognizer.enabled");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>

diff --git a/LayoutTests/platform/mac/TestExpectations b/LayoutTests/platform/mac/TestExpectations
index 3d63db9..3ef44fd 100644 (file)
--- a/LayoutTests/platform/mac/TestExpectations
+++ b/LayoutTests/platform/mac/TestExpectations
@@ -1468,6 +1468,7 @@ media/modern-media-controls/pip-support/ipad/pip-support-tap.html [ Skip ]
 media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]
 media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
 media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
 
 # This one always times out on the bots, cannot reproduce locally.
 webkit.org/b/165234 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index ef0877b..17077b1 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,5 +1,23 @@
 2017-02-09  Antoine Quint  <graouts@apple.com>
 
+        [Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
+        https://bugs.webkit.org/show_bug.cgi?id=168047
+        <rdar://problem/30441939>
+
+        Reviewed by Eric Carlson.
+
+        The controls bar auto-hide behavior is disabled for <audio> elements, but on iOS we have
+        a TapGestureRecognizer to identify when controls are tapped to toggle controls visibility.
+        This gesture recognizer would be on at all times, but it should only be enabled when
+        fadesToIdle is set to true.
+
+        Test: media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html
+
+        * Modules/modern-media-controls/controls/controls-bar.js:
+        (ControlsBar.prototype.set fadesWhileIdle):
+
+2017-02-09  Antoine Quint  <graouts@apple.com>
+
         [Modern Media Controls] <audio> element does not show any background on iOS
         https://bugs.webkit.org/show_bug.cgi?id=168046
         <rdar://problem/30441872>

diff --git a/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js b/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js
index 967ad1e..a9cc535 100644 (file)
--- a/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js
+++ b/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js
@@ -33,13 +33,13 @@ class ControlsBar extends LayoutNode
         this._translation = new DOMPoint;
         this._mediaControls = mediaControls;
 
+        if (GestureRecognizer.SupportsTouches)
+            this._tapGestureRecognizer = new TapGestureRecognizer(this._mediaControls.element, this);
+
         this.autoHideDelay = ControlsBar.DefaultAutoHideDelay;
 
         this.fadesWhileIdle = false;
         this.userInteractionEnabled = true;
-
-        if (GestureRecognizer.SupportsTouches)
-            this._tapGestureRecognizer = new TapGestureRecognizer(this._mediaControls.element, this);
     }
 
     // Public
@@ -84,7 +84,9 @@ class ControlsBar extends LayoutNode
 
         this._fadesWhileIdle = flag;
 
-        if (!GestureRecognizer.SupportsTouches) {
+        if (GestureRecognizer.SupportsTouches)
+            this._tapGestureRecognizer.enabled = flag;
+        else {
             if (flag) {
                 this._mediaControls.element.addEventListener("mousemove", this);
                 this._mediaControls.element.addEventListener("mouseleave", this);