helper_bug1162771.html (3163B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 6 <title>Test for touchend on media elements</title> 7 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 8 <script type="application/javascript" src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <script type="application/javascript"> 11 12 async function handleTouchStart() { 13 let v = document.getElementById("video"); 14 let d = document.getElementById("div"); 15 16 let e = await new Promise(resolve => { 17 document.body.addEventListener("touchstart", resolve, {once: true}); 18 }); 19 20 if (e.target === v || e.target === d) { 21 e.target.style.display = "none"; 22 ok(true, "Set display to none on #" + e.target.id); 23 } else { 24 ok(false, "Got unexpected touchstart on " + e.target); 25 } 26 await promiseAllPaintsDone(); 27 } 28 29 async function handleTouchEnd() { 30 let v = document.getElementById("video"); 31 let d = document.getElementById("div"); 32 33 let e = await new Promise(resolve => { 34 document.body.addEventListener("touchend", resolve, {once: true}); 35 }); 36 37 if (e.target === v || e.target === d) { 38 e.target._gotTouchend = true; 39 ok(true, "Got touchend event on #" + e.target.id); 40 } 41 } 42 43 async function test() { 44 var v = document.getElementById("video"); 45 var d = document.getElementById("div"); 46 47 var utils = SpecialPowers.getDOMWindowUtils(window); 48 49 let startHandledPromise = handleTouchStart(); 50 let endHandledPromise = handleTouchEnd(); 51 var pt = await coordinatesRelativeToScreen({ offsetX: 25, offsetY: 5, target: v }); 52 utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_CONTACT, pt.x, pt.y, 1, 90, null); 53 await startHandledPromise; 54 utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_REMOVE, pt.x, pt.y, 1, 90, null); 55 await endHandledPromise; 56 ok(v._gotTouchend, "Touchend was received on video element"); 57 58 startHandledPromise = handleTouchStart(); 59 endHandledPromise = handleTouchEnd(); 60 pt = await coordinatesRelativeToScreen({ offsetX: 25, offsetY: 5, target: d }); 61 utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_CONTACT, pt.x, pt.y, 1, 90, null); 62 await startHandledPromise; 63 utils.sendNativeTouchPoint(0, SpecialPowers.DOMWindowUtils.TOUCH_REMOVE, pt.x, pt.y, 1, 90, null); 64 await endHandledPromise; 65 ok(d._gotTouchend, "Touchend was received on div element"); 66 } 67 68 waitUntilApzStable() 69 .then(test) 70 .then(subtestDone, subtestFailed); 71 72 </script> 73 <style> 74 * { 75 font-size: 24px; 76 box-sizing: border-box; 77 } 78 79 #video { 80 display:block; 81 position:absolute; 82 top: 100px; 83 left:0; 84 width: 50%; 85 height: 100px; 86 border:solid black 1px; 87 background-color: #8a8; 88 } 89 90 #div { 91 display:block; 92 position:absolute; 93 top: 100px; 94 left: 50%; 95 width: 50%; 96 height: 100px; 97 border:solid black 1px; 98 background-color: #88a; 99 } 100 </style> 101 </head> 102 <body> 103 <p>Tap on the colored boxes to hide them.</p> 104 <video id="video"></video> 105 <div id="div"></div> 106 </body> 107 </html>