forked from mirrors/gecko-dev
8346839a9e
Differential Revision: https://phabricator.services.mozilla.com/D62026 --HG-- extra : moz-landing-system : lando
96 lines
4.4 KiB
HTML
96 lines
4.4 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<meta charset="UTF-8">
|
|
<head>
|
|
<title>Marionette Test</title>
|
|
</head>
|
|
<body>
|
|
<h1 id="testh1">Test Page</h1>
|
|
<button id="button1" style="position:absolute;left:0px;top:55px;" type="button" allowevents=true>button1</button>
|
|
<button id="button2" style="position:absolute;left:0px;top:355px;" type="button" allowevents=true>button2</button>
|
|
<button id="button3" style="position:absolute;left:0px;top:455px;" type="button" allowevents=true>button3</button>
|
|
<button id="button4" style="position:absolute;left:100px;top:455px;" type="button" allowevents=true>button4</button>
|
|
<button id="buttonScroll" style="position:absolute;left:100px;top:855px;" type="button" allowevents=true>buttonScroll</button>
|
|
<h2 id="hidden" style="visibility: hidden" class="linkClass">Hidden</h2>
|
|
<button id="buttonFlick" style="position:absolute;left:0px;top:255px;" type="button" allowevents=true>buttonFlick</button>
|
|
<script type="text/javascript">
|
|
let button3Timer = null;
|
|
let button4Timer = null;
|
|
//appends passed in text to the innerHTML of the event's target
|
|
function appendText(text) {
|
|
return function(evt) {
|
|
let element;
|
|
if (evt.type.includes("touch")) {
|
|
if (evt.type == "touchstart") {
|
|
element = evt.target;
|
|
}
|
|
else {
|
|
//since the target of touchstart is the target of all subsequent events, then
|
|
//changedTouches holds the current coordinates of this touch event, so we
|
|
//use these coordinates to find the element under the touch event
|
|
let touches = evt.changedTouches;
|
|
let x = touches[0].clientX;
|
|
let y = touches[0].clientY;
|
|
element = document.elementFromPoint(x,y);
|
|
}
|
|
}
|
|
//handle mouse events or contextmenu
|
|
else {
|
|
element = evt.target;
|
|
}
|
|
// eslint-disable-next-line no-unsanitized/property
|
|
element.innerHTML += text;
|
|
};
|
|
};
|
|
//use this function outside of attachListeners when you want to test sendMouseOnlyEvents on a target
|
|
function attachMouseListeners(element) {
|
|
element.addEventListener("contextmenu", appendText("-contextmenu"));
|
|
element.addEventListener("mousedown", appendText("-mousedown"));
|
|
element.addEventListener("mousemove", appendText("-mousemove"));
|
|
element.addEventListener("mouseup", appendText("-mouseup"));
|
|
element.addEventListener("click", appendText("-click"));
|
|
};
|
|
function attachListeners(id) {
|
|
let element = document.getElementById(id);
|
|
element.addEventListener("touchstart", appendText("-touchstart"));
|
|
element.addEventListener("touchmove", appendText("-touchmove"));
|
|
element.addEventListener("touchend", appendText("-touchend"));
|
|
element.addEventListener("touchcancel", appendText("-touchcancel"));
|
|
attachMouseListeners(element);
|
|
};
|
|
//for tracking time on an element
|
|
function addTimers(id, timer) {
|
|
let element = document.getElementById(id);
|
|
element.addEventListener("touchstart", function(evt) { timer = (new Date()).getTime();});
|
|
// eslint-disable-next-line no-unsanitized/property
|
|
element.addEventListener("touchend", function(evt) { timer = (new Date()).getTime() - timer; evt.target.innerHTML += "-" + timer;});
|
|
}
|
|
attachListeners("button1");
|
|
attachListeners("button2");
|
|
attachListeners("button3");
|
|
attachListeners("button4");
|
|
attachListeners("buttonScroll");
|
|
addTimers("button3");
|
|
addTimers("button4");
|
|
const buttonFlick = document.getElementById("buttonFlick");
|
|
attachMouseListeners(buttonFlick);
|
|
function createDelayed() {
|
|
let newButton = document.createElement("button");
|
|
newButton.id = "delayed";
|
|
newButton.setAttribute("style", "position:absolute;left:220px;top:455px;");
|
|
let content = document.createTextNode("delayed");
|
|
newButton.appendChild(content);
|
|
document.body.appendChild(newButton);
|
|
newButton.addEventListener("mousemove", appendText("-mousemove"));
|
|
newButton.addEventListener("mouseup", appendText("-mouseup"));
|
|
newButton.addEventListener("click", appendText("-click"));
|
|
};
|
|
window.setTimeout(createDelayed, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|