moebius#195: DOM - PointerEvent - improvements

https://github.com/MoonchildProductions/moebius/pull/195
This commit is contained in:
janekptacijarabaci 2018-04-23 11:54:06 +02:00 • committed by Roy Tam
commit a968f1d6c2
10 changed files with 228 additions and 20 deletions

View file

@ -855,6 +855,25 @@ Event::GetEventPopupControlState(WidgetEvent* aEvent, nsIDOMEvent* aDOMEvent)
}
}
break;
case ePointerEventClass:
if (aEvent->IsTrusted() &&
aEvent->AsPointerEvent()->button == WidgetMouseEvent::eLeftButton) {
switch(aEvent->mMessage) {
case ePointerUp:
if (PopupAllowedForEvent("pointerup")) {
abuse = openControlled;
}
break;
case ePointerDown:
if (PopupAllowedForEvent("pointerdown")) {
abuse = openControlled;
}
break;
default:
break;
}
}
break;
case eFormEventClass:
// For these following events only allow popups if they're
// triggered while handling user input. See

View file

@ -6,6 +6,14 @@ support-files =
pointerevent_styles.css
pointerevent_support.js
[test_bug1285128.html]
[test_bug1293174_implicit_pointer_capture_for_touch_1.html]
support-files = bug1293174_implicit_pointer_capture_for_touch_1.html
[test_bug1293174_implicit_pointer_capture_for_touch_2.html]
support-files = bug1293174_implicit_pointer_capture_for_touch_2.html
[test_bug1323158.html]
[test_empty_file.html]
disabled = disabled # Bug 1150091 - Issue with support-files
[test_pointerevent_attributes_mouse-manual.html]
support-files = pointerevent_attributes_mouse-manual.html
[test_pointerevent_capture_mouse-manual.html]
@ -143,11 +151,5 @@ support-files =
pointerevent_touch-action-span-test_touch-manual.html
pointerevent_touch-action-svg-test_touch-manual.html
pointerevent_touch-action-table-test_touch-manual.html
[test_bug1285128.html]
[test_bug1293174_implicit_pointer_capture_for_touch_1.html]
support-files = bug1293174_implicit_pointer_capture_for_touch_1.html
[test_bug1293174_implicit_pointer_capture_for_touch_2.html]
support-files = bug1293174_implicit_pointer_capture_for_touch_2.html
[test_bug1323158.html]
[test_empty_file.html]
disabled = disabled # Bug 1150091 - Issue with support-files
[test_trigger_fullscreen_by_pointer_events.html]
[test_trigger_popup_by_pointer_events.html]

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test for triggering Fullscreen by pointer events</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<script>
SimpleTest.waitForExplicitFinish();
function startTest() {
let win = window.open("data:text/html,<body><div id='target' style='width: 50px; height: 50px; background: green'></div></body>", "_blank");
win.addEventListener("load", () => {
let target = win.document.getElementById("target");
target.addEventListener("pointerdown", () => {
target.requestFullscreen();
target.addEventListener("pointerdown", () => {
win.document.exitFullscreen();
}, {once: true});
}, {once: true});
win.document.addEventListener("fullscreenchange", () => {
if (win.document.fullscreenElement) {
ok(win.document.fullscreenElement, target, "fullscreenElement should be the div element");
// synthesize mouse events to generate pointer events and leave full screen.
synthesizeMouseAtCenter(target, { type: "mousedown" }, win);
synthesizeMouseAtCenter(target, { type: "mouseup" }, win);
} else {
win.close();
SimpleTest.finish();
}
});
// Make sure our window is focused before starting the test
SimpleTest.waitForFocus(() => {
// synthesize mouse events to generate pointer events and enter full screen.
synthesizeMouseAtCenter(target, { type: "mousedown" }, win);
synthesizeMouseAtCenter(target, { type: "mouseup" }, win);
}, win);
});
}
SimpleTest.waitForFocus(() => {
SpecialPowers.pushPrefEnv({
"set": [
["full-screen-api.unprefix.enabled", true],
["full-screen-api.allow-trusted-requests-only", false],
["dom.w3c_pointer_events.enabled", true]
]
}, startTest);
});
</script>
</body>
</html>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test for triggering popup by pointer events</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<div id="target" style="width: 50px; height: 50px; background: green"></div>
<script>
SimpleTest.waitForExplicitFinish();
function sendMouseEvent(element, eventName, listenEventName, handler) {
element.addEventListener(listenEventName, handler, {once: true});
synthesizeMouseAtCenter(element, {type: eventName});
}
function checkAllowOpenPopup(e) {
let w = window.open("about:blank");
ok(w, "Should allow popup in the " + e.type + " listener");
if (w) {
w.close();
}
}
function checkBlockOpenPopup(e) {
let w = window.open("about:blank");
ok(!w, "Should block popup in the " + e.type + " listener");
if (w) {
w.close();
}
}
function startTest() {
let target = document.getElementById("target");
// By default, only allow opening popup in the pointerup listener.
sendMouseEvent(target, "mousemove", "pointermove", checkBlockOpenPopup);
sendMouseEvent(target, "mousedown", "pointerdown", checkBlockOpenPopup);
sendMouseEvent(target, "mousemove", "pointermove", checkBlockOpenPopup);
sendMouseEvent(target, "mouseup", "pointerup", checkAllowOpenPopup);
SpecialPowers.pushPrefEnv({"set": [["dom.popup_allowed_events",
"pointerdown pointerup"]]}, () => {
// Adding pointerdown to preference should work
sendMouseEvent(target, "mousemove", "pointermove", checkBlockOpenPopup);
sendMouseEvent(target, "mousedown", "pointerdown", checkAllowOpenPopup);
sendMouseEvent(target, "mousemove", "pointermove", checkBlockOpenPopup);
sendMouseEvent(target, "mouseup", "pointerup", checkAllowOpenPopup);
SpecialPowers.pushPrefEnv({"set": [["dom.popup_allowed_events",
"pointerdown pointerup pointermove"]]}, () => {
// Adding pointermove to preference should be no effect.
sendMouseEvent(target, "mousemove", "pointermove", checkBlockOpenPopup);
sendMouseEvent(target, "mousedown", "pointerdown", checkAllowOpenPopup);
sendMouseEvent(target, "mousemove", "pointermove", checkBlockOpenPopup);
sendMouseEvent(target, "mouseup", "pointerup", checkAllowOpenPopup);
SimpleTest.finish();
});
});
}
const DENY_ACTION = SpecialPowers.Ci.nsIPermissionManager.DENY_ACTION;
SimpleTest.waitForFocus(() => {
SpecialPowers.pushPermissions([{'type': 'popup', 'allow': DENY_ACTION,
'context': document}], () => {
SpecialPowers.pushPrefEnv({
"set": [["dom.w3c_pointer_events.enabled", true]]
}, startTest);
});
});
</script>
</body>
</html>

View file

@ -8191,6 +8191,8 @@ PresShell::HandleEventInternal(WidgetEvent* aEvent,
}
case eMouseDown:
case eMouseUp:
case ePointerDown:
case ePointerUp:
isHandlingUserInput = true;
break;

View file

@ -1161,7 +1161,7 @@ pref("dom.require_user_interaction_for_beforeunload", true);
pref("dom.disable_open_during_load", false);
pref("dom.popup_maximum", 20);
pref("dom.popup_allowed_events", "change click dblclick mouseup notificationclick reset submit touchend");
pref("dom.popup_allowed_events", "change click dblclick mouseup pointerup notificationclick reset submit touchend");
pref("dom.disable_open_click_delay", 1000);
pref("dom.storage.enabled", true);

View file

@ -953,6 +953,12 @@ element.getContainer = function (el) {
* pointer-interactable, if it is found somewhere in the
* |elementsFromPoint| list at |el|'s in-view centre coordinates.
*
* Before running the check, we change |el|'s pointerEvents style property
* to "auto", since elements without pointer events enabled do not turn
* up in the paint tree we get from document.elementsFromPoint. This is
* a specialisation that is only relevant when checking if the element is
* in view.
*
* @param {Element} el
* Element to check if is in view.
*
@ -960,8 +966,14 @@ element.getContainer = function (el) {
* True if |el| is inside the viewport, or false otherwise.
*/
element.isInView = function (el) {
let tree = element.getPointerInteractablePaintTree(el);
let originalPointerEvents = el.style.pointerEvents;
try {
el.style.pointerEvents = "auto";
const tree = element.getPointerInteractablePaintTree(el);
return tree.includes(el);
} finally {
el.style.pointerEvents = originalPointerEvents;
}
};
/**

View file

@ -260,10 +260,23 @@ class ElementClickInterceptedError extends WebDriverError {
if (obscuredEl && coords) {
const doc = obscuredEl.ownerDocument;
const overlayingEl = doc.elementFromPoint(coords.x, coords.y);
switch (obscuredEl.style.pointerEvents) {
case "none":
msg = error.pprint`Element ${obscuredEl} is not clickable ` +
`at point (${coords.x},${coords.y}) ` +
`because it does not have pointer events enabled, ` +
error.pprint`and element ${overlayingEl} ` +
`would receive the click instead`;
break;
default:
msg = error.pprint`Element ${obscuredEl} is not clickable ` +
`at point (${coords.x},${coords.y}) ` +
error.pprint`because another element ${overlayingEl} ` +
`obscures it`;
break;
}
}
super(msg);

View file

@ -252,3 +252,20 @@ class TestClick(TestLegacyClick):
with self.assertRaises(errors.ElementClickInterceptedException):
obscured.click()
self.assertFalse(self.marionette.execute_script("return window.clicked", sandbox=None))
def test_pointer_events_none(self):
self.marionette.navigate(inline("""
<button style="pointer-events: none">click me</button>
<script>
window.clicked = false;
let button = document.querySelector("button");
button.addEventListener("click", () => window.clicked = true);
</script>
"""))
button = self.marionette.find_element(By.TAG_NAME, "button")
self.assertEqual("none", button.value_of_css_property("pointer-events"))
with self.assertRaisesRegexp(errors.ElementClickInterceptedException,
"does not have pointer events enabled"):
button.click()
self.assertFalse(self.marionette.execute_script("return window.clicked", sandbox=None))

View file

@ -209,15 +209,25 @@ add_test(function test_ElementClickInterceptedError() {
return otherEl;
},
},
style: {
pointerEvents: "auto",
}
};
let err = new ElementClickInterceptedError(obscuredEl, {x: 1, y: 2});
equal("ElementClickInterceptedError", err.name);
let err1 = new ElementClickInterceptedError(obscuredEl, {x: 1, y: 2});
equal("ElementClickInterceptedError", err1.name);
equal("Element <b> is not clickable at point (1,2) " +
"because another element <a> obscures it",
err.message);
equal("element click intercepted", err.status);
ok(err instanceof WebDriverError);
err1.message);
equal("element click intercepted", err1.status);
ok(err1 instanceof WebDriverError);
obscuredEl.style.pointerEvents = "none";
let err2 = new ElementClickInterceptedError(obscuredEl, {x: 1, y: 2});
equal("Element <b> is not clickable at point (1,2) " +
"because it does not have pointer events enabled, " +
"and element <a> would receive the click instead",
err2.message);
run_next_test();
});