Title: [219549] trunk
- Revision
- 219549
- Author
- [email protected]
- Date
- 2017-07-16 15:23:52 -0700 (Sun, 16 Jul 2017)
Log Message
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>
Patch by Antoine Quint <[email protected]> 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:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (219548 => 219549)
--- trunk/LayoutTests/ChangeLog 2017-07-16 21:36:54 UTC (rev 219548)
+++ trunk/LayoutTests/ChangeLog 2017-07-16 22:23:52 UTC (rev 219549)
@@ -1,3 +1,18 @@
+2017-07-16 Antoine Quint <[email protected]>
+
+ 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 <[email protected]>
line-height: <number> gets visually applied twice when text autosizing is in effect
Added: trunk/LayoutTests/media/modern-media-controls/button/button-click-on-edges-expected.txt (0 => 219549)
--- trunk/LayoutTests/media/modern-media-controls/button/button-click-on-edges-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/button/button-click-on-edges-expected.txt 2017-07-16 22:23:52 UTC (rev 219549)
@@ -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
+
+
Added: trunk/LayoutTests/media/modern-media-controls/button/button-click-on-edges.html (0 => 219549)
--- trunk/LayoutTests/media/modern-media-controls/button/button-click-on-edges.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/button/button-click-on-edges.html 2017-07-16 22:23:52 UTC (rev 219549)
@@ -0,0 +1,53 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>
Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (219548 => 219549)
--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-07-16 21:36:54 UTC (rev 219548)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-07-16 22:23:52 UTC (rev 219549)
@@ -122,6 +122,7 @@
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 ]
Modified: trunk/Source/WebCore/ChangeLog (219548 => 219549)
--- trunk/Source/WebCore/ChangeLog 2017-07-16 21:36:54 UTC (rev 219548)
+++ trunk/Source/WebCore/ChangeLog 2017-07-16 22:23:52 UTC (rev 219549)
@@ -1,3 +1,22 @@
+2017-07-16 Antoine Quint <[email protected]>
+
+ 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 <[email protected]>
Make the decision for asynchronously decoding an image be in one place
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css (219548 => 219549)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css 2017-07-16 21:36:54 UTC (rev 219548)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css 2017-07-16 22:23:52 UTC (rev 219549)
@@ -46,6 +46,8 @@
-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,
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
