Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Test for touchend on media elements</title>
<script type="application/javascript" src="apz_test_native_event_utils.js"></script>
<script type="application/javascript" src="apz_test_utils.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<script type="application/javascript">
async function handleTouchStart() {
let v = document.getElementById("video");
let d = document.getElementById("div");
let e = await new Promise(resolve => {
document.body.addEventListener("touchstart", resolve, {once: true});
});
if (e.target === v || e.target === d) {
e.target.style.display = "none";
ok(true, "Set display to none on #" + e.target.id);
} else {
ok(false, "Got unexpected touchstart on " + e.target);
}
await promiseAllPaintsDone();
}
async function handleTouchEnd() {
let v = document.getElementById("video");
let d = document.getElementById("div");
let e = await new Promise(resolve => {
document.body.addEventListener("touchend", resolve, {once: true});
});
if (e.target === v || e.target === d) {
e.target._gotTouchend = true;
ok(true, "Got touchend event on #" + e.target.id);
}
}
async function test() {
var v = document.getElementById("video");
var d = document.getElementById("div");
var utils = SpecialPowers.getDOMWindowUtils(window);
let startHandledPromise = handleTouchStart();
let endHandledPromise = handleTouchEnd();
var pt = await coordinatesRelativeToScreen({ offsetX: 25, offsetY: 5, target: v });
utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_CONTACT, pt.x, pt.y, 1, 90, null);
await startHandledPromise;
utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_REMOVE, pt.x, pt.y, 1, 90, null);
await endHandledPromise;
ok(v._gotTouchend, "Touchend was received on video element");
startHandledPromise = handleTouchStart();
endHandledPromise = handleTouchEnd();
pt = await coordinatesRelativeToScreen({ offsetX: 25, offsetY: 5, target: d });
utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_CONTACT, pt.x, pt.y, 1, 90, null);
await startHandledPromise;
utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_REMOVE, pt.x, pt.y, 1, 90, null);
await endHandledPromise;
ok(d._gotTouchend, "Touchend was received on div element");
}
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
</script>
<style>
* {
font-size: 24px;
box-sizing: border-box;
}
#video {
display:block;
position:absolute;
top: 100px;
left:0;
width: 50%;
height: 100px;
border:solid black 1px;
background-color: #8a8;
}
#div {
display:block;
position:absolute;
top: 100px;
left: 50%;
width: 50%;
height: 100px;
border:solid black 1px;
background-color: #88a;
}
</style>
</head>
<body>
<p>Tap on the colored boxes to hide them.</p>
<video id="video"></video>
<div id="div"></div>
</body>
</html>