Clicking edges of media control buttons changes visual state of button (pressed)...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 16 Jul 2017 22:23:52 +0000 (22:23 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 16 Jul 2017 22:23:52 +0000 (22:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=174565
<rdar://problem/33294833>

Patch by Antoine Quint <graouts@apple.com> on 2017-07-16
Reviewed by Dean Jackson.

Source/WebCore:

WebCore doesn't dispatch a "click" event to a parent element when a child that was the original target when
the "mousedown" occured is no longer hit-testing at the location where the mouse pointer is at when the "mouseup"
occurs (see webkit.org/b/174564). Since button icons, which are a <picture> element that is a child of the
<button> element for media controls buttons, shrink to 89% of their size when the ":active" pseudo-class matches,
clicking on the edges of the media controls buttons would not trigger the expected action.

Test: media/modern-media-controls/button/button-click-on-edges.html

* Modules/modern-media-controls/controls/button.css:
(button > picture):

LayoutTests:

Add a new test where we click on the edge of a button and check that we trigger the Button's
UI delegate. This test fails prior to this patch.

* media/modern-media-controls/button/button-click-on-edges-expected.txt: Added.
* media/modern-media-controls/button/button-click-on-edges.html: Added.
* platform/ios-simulator/TestExpectations:

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

LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/button/button-click-on-edges-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/button/button-click-on-edges.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/button.css

index 5aab119..c98b9a3 100644 (file)
@@ -1,3 +1,18 @@
+2017-07-16  Antoine Quint  <graouts@apple.com>
+
+        Clicking edges of media control buttons changes visual state of button (pressed) but doesn't execute action
+        https://bugs.webkit.org/show_bug.cgi?id=174565
+        <rdar://problem/33294833>
+
+        Reviewed by Dean Jackson.
+
+        Add a new test where we click on the edge of a button and check that we trigger the Button's
+        UI delegate. This test fails prior to this patch.
+
+        * media/modern-media-controls/button/button-click-on-edges-expected.txt: Added.
+        * media/modern-media-controls/button/button-click-on-edges.html: Added.
+        * platform/ios-simulator/TestExpectations:
+
 2017-07-15  Myles C. Maxfield  <mmaxfield@apple.com>
 
         line-height: <number> gets visually applied twice when text autosizing is in effect
diff --git a/LayoutTests/media/modern-media-controls/button/button-click-on-edges-expected.txt b/LayoutTests/media/modern-media-controls/button/button-click-on-edges-expected.txt
new file mode 100644 (file)
index 0000000..57115d0
--- /dev/null
@@ -0,0 +1,17 @@
+Testing the Button class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS button.image.element.style.webkitMaskImage.includes("macOS/Pause.svg") became true
+eventSender.mouseMoveTo(0, 0)
+eventSender.mouseDown()
+Wait 125ms for the transition to shrink the 'picture' element to happen.
+eventSender.mouseUp()
+Button was pressed.
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
diff --git a/LayoutTests/media/modern-media-controls/button/button-click-on-edges.html b/LayoutTests/media/modern-media-controls/button/button-click-on-edges.html
new file mode 100644 (file)
index 0000000..0821052
--- /dev/null
@@ -0,0 +1,53 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+
+button {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+    
+</style>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>Button</code> class.");
+
+const button = new Button({
+    layoutDelegate: {
+        layoutTraits: LayoutTraits.macOS
+    } 
+});
+button.iconName = Icons.Pause;
+
+const buttonElement = document.body.appendChild(button.element);
+
+button.uiDelegate = {
+    buttonWasPressed: function()
+    {
+        debug("Button was pressed.");
+        debug("");
+        finishJSTest();
+    }
+}
+
+shouldBecomeEqual('button.image.element.style.webkitMaskImage.includes("macOS/Pause.svg")', "true", () => {
+    debug("eventSender.mouseMoveTo(0, 0)");
+    eventSender.mouseMoveTo(0, 0);
+    debug("eventSender.mouseDown()");
+    eventSender.mouseDown();
+
+    debug("Wait 125ms for the transition to shrink the 'picture' element to happen.");
+    setTimeout(() => {
+        debug("eventSender.mouseUp()");
+        eventSender.mouseUp();
+    }, 125);
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index 2f61b47..61f7c08 100644 (file)
@@ -122,6 +122,7 @@ media/modern-media-controls/placard-support/placard-support-airplay-fullscreen.h
 media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-button-padding.html [ Pass ]
 
 # These tests are designed to work only on macOS
+media/modern-media-controls/button/button-click-on-edges.html [ Skip ]
 media/modern-media-controls/placard-support/placard-support-pip.html [ Skip ]
 media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html [ Skip ]
 media/modern-media-controls/media-documents/media-document-video-mac-sizing.html [ Skip ]
index 64bbab2..b74a793 100644 (file)
@@ -1,3 +1,22 @@
+2017-07-16  Antoine Quint  <graouts@apple.com>
+
+        Clicking edges of media control buttons changes visual state of button (pressed) but doesn't execute action
+        https://bugs.webkit.org/show_bug.cgi?id=174565
+        <rdar://problem/33294833>
+
+        Reviewed by Dean Jackson.
+
+        WebCore doesn't dispatch a "click" event to a parent element when a child that was the original target when
+        the "mousedown" occured is no longer hit-testing at the location where the mouse pointer is at when the "mouseup"
+        occurs (see webkit.org/b/174564). Since button icons, which are a <picture> element that is a child of the
+        <button> element for media controls buttons, shrink to 89% of their size when the ":active" pseudo-class matches,
+        clicking on the edges of the media controls buttons would not trigger the expected action.
+
+        Test: media/modern-media-controls/button/button-click-on-edges.html
+
+        * Modules/modern-media-controls/controls/button.css:
+        (button > picture):
+
 2017-07-16  Said Abou-Hallawa  <sabouhallawa@apple.com>
 
         Make the decision for asynchronously decoding an image be in one place
index e0cbc90..fb6172b 100644 (file)
@@ -46,6 +46,8 @@ button > picture {
     -webkit-mask-repeat: no-repeat;
     transition: transform 150ms;
     will-change: transform;
+    /* Work around webkit.org/b/174565 by making the shrinking button's icon non-interactive */
+    pointer-events: none;
 }
 
 button.skip-back > picture,