window_bug1429572.html (16701B)
1 <html> 2 <head> 3 <title></title> 4 <script src="/tests/SimpleTest/EventUtils.js"></script> 5 <script> 6 var tests = [ 7 simpleNonShadowTest, 8 nonShadowInputDate, 9 jsDispatchedNonShadowTouchEvents, 10 shadowDOMTest1, 11 shadowDOMTest2, 12 shadowDOMTest3, 13 jsDispatchedShadowTouchEvents, 14 jsDispatchedShadowTouchEvents2 15 ]; 16 var host; 17 var host2; 18 var shadowRoot; 19 var shadowRoot2; 20 var winUtils; 21 22 var touchCounter = 0; 23 function createTouchArray(targetList) { 24 var touchArray = []; 25 for (var i = 0; i < targetList.length; ++i) { 26 touchArray.push(new Touch({identifier: ++touchCounter, target: targetList[i]})); 27 } 28 return touchArray; 29 } 30 31 function synthesizeTouches(targets, xOffsets) { 32 if (xOffsets) { 33 opener.is(targets.length, xOffsets.length, "Wrong xOffsets length!"); 34 } 35 var touches = []; 36 var xs = []; 37 var ys = []; 38 var rxs = []; 39 var rys = []; 40 var angles = []; 41 var forces = []; 42 var tiltXs = []; 43 var tiltYs = []; 44 var twists = []; 45 for (var i = 0; i < targets.length; ++i) { 46 touches.push(++touchCounter); 47 var rect = targets[i].getBoundingClientRect(); 48 if (xOffsets) { 49 xs.push(rect.left + (rect.width / 2) + xOffsets[i]); 50 } else { 51 xs.push(rect.left + (rect.width / 2)); 52 } 53 ys.push(rect.top + (rect.height / 2)); 54 rxs.push(1); 55 rys.push(1); 56 angles.push(0); 57 forces.push(1); 58 tiltXs.push(0); 59 tiltYs.push(0); 60 twists.push(0); 61 } 62 winUtils.sendTouchEvent("touchstart", 63 touches, xs, ys, rxs, rys, angles, forces, tiltXs, tiltYs, twists, 0); 64 winUtils.sendTouchEvent("touchend", 65 touches, xs, ys, rxs, rys, angles, forces, tiltXs, tiltYs, twists, 0); 66 } 67 68 function next() { 69 if (!tests.length) { 70 opener.done(); 71 window.close(); 72 } else { 73 var test = tests.shift(); 74 requestAnimationFrame(function() { setTimeout(test); }); 75 } 76 } 77 78 function simpleNonShadowTest() { 79 var s1 = document.getElementById("span1"); 80 var s2 = document.getElementById("span2"); 81 var s3 = document.getElementById("span3"); 82 var nonShadow = document.getElementById("nonshadow"); 83 var event; 84 nonShadow.ontouchstart = function(e) { 85 event = e; 86 opener.is(e.targetTouches.length, 1, "Should have only one entry in targetTouches."); 87 opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); 88 opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); 89 opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); 90 } 91 synthesizeTouches([s1, s2, s3]); 92 93 opener.is(event.targetTouches.length, 1, "Should have only one entry in targetTouches. (2)"); 94 opener.is(event.targetTouches[0].target, event.target, "targetTouches should contain event.target. (2)"); 95 opener.is(event.touches.length, 3, "touches list should contain all the touch objects. (2)"); 96 opener.is(event.changedTouches.length, 3, "changedTouches list should contain all the touch objects. (2)"); 97 98 next(); 99 } 100 101 function jsDispatchedNonShadowTouchEvents() { 102 var s1 = document.getElementById("span1"); 103 var s2 = document.getElementById("span2"); 104 var s3 = document.getElementById("span3"); 105 var nonShadow = document.getElementById("nonshadow"); 106 var didCallListener = false; 107 nonShadow.ontouchstart = function(e) { 108 didCallListener = true; 109 opener.is(e.targetTouches.length, 3, "Should have all the entries in targetTouches."); 110 opener.is(e.targetTouches[0].target, s1, "targetTouches should contain s1 element."); 111 opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); 112 opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); 113 } 114 var touchArray = createTouchArray([s1, s2, s3]); 115 var touchEvent = new TouchEvent("touchstart", 116 { 117 touches: touchArray, 118 targetTouches: touchArray, 119 changedTouches: touchArray 120 }); 121 opener.is(touchEvent.targetTouches.length, 3, "Should have 3 entries in targetTouches"); 122 nonShadow.dispatchEvent(touchEvent); 123 opener.ok(didCallListener, "Should have called the listener."); 124 opener.is(touchEvent.targetTouches.length, 3, "Should have all the entries in targetTouches. (2)"); 125 opener.is(touchEvent.targetTouches[0].target, s1, "targetTouches should contain s1 element. (2)"); 126 opener.is(touchEvent.touches.length, 3, "touches list should contain all the touch objects. (2)"); 127 opener.is(touchEvent.changedTouches.length, 3, "changedTouches list should contain all the touch objects. (2)"); 128 129 nonShadow.ontouchstart = null; 130 next(); 131 } 132 133 function nonShadowInputDate() { 134 // This is a test for dispathing several touches to an element with 135 // native anonymous content. 136 var s1 = document.getElementById("span1"); 137 var date = document.getElementById("date"); 138 var nonShadow = document.getElementById("nonshadow"); 139 var hasDateAsTarget = false; 140 var didCallListener = false; 141 nonShadow.ontouchstart = function(e) { 142 didCallListener = true; 143 if (e.targetTouches[0].target == date) { 144 hasDateAsTarget = true; 145 opener.is(e.targetTouches.length, 2, "Should have two entries in targetTouches."); 146 opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain date."); 147 opener.is(e.targetTouches[1].target, e.target, "targetTouches should contain date twice."); 148 } 149 opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); 150 opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); 151 } 152 153 var rect = date.getBoundingClientRect(); 154 var quarter = rect.width / 4; 155 synthesizeTouches([date, date, s1], [-quarter, quarter, 0]); 156 opener.ok(didCallListener, "Should have called listener."); 157 opener.ok(hasDateAsTarget, "Should have seen touchstart with date element as the target.") 158 nonShadow.ontouchstart = null; 159 next(); 160 } 161 162 function shadowDOMTest1() { 163 var shadowS1 = shadowRoot.getElementById("shadowSpan1"); 164 165 // Ensure retargeting works. 166 var hostHandled = false; 167 host.ontouchstart = function(e) { 168 hostHandled = true; 169 opener.is(e.targetTouches.length, 1, "Should have only one entry in targetTouches."); 170 opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); 171 opener.is(e.target, host, "Event and touch should have been retargeted."); 172 opener.is(e.touches.length, 1, "touches list should contain one touch object."); 173 opener.is(e.changedTouches.length, 1, "changedTouches list should contain one touch objects."); 174 } 175 176 // Ensure retargeting doesn't happen inside shadow DOM. 177 var shadowHandled = false; 178 shadowS1.ontouchstart = function(e) { 179 shadowHandled = true; 180 opener.is(e.targetTouches.length, 1, "Should have only one entry in targetTouches."); 181 opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); 182 opener.is(e.target, shadowS1, "Event and touch should not have been retargeted."); 183 opener.is(e.touches.length, 1, "touches list should contain one touch object."); 184 opener.is(e.changedTouches.length, 1, "changedTouches list should contain one touch objects."); 185 } 186 synthesizeTouches([shadowS1]); 187 opener.ok(hostHandled, "Should have called listener on host."); 188 opener.ok(shadowHandled, "Should have called listener on shadow DOM element."); 189 host.ontouchstart = null; 190 shadowS1.ontouchstart = null; 191 192 next(); 193 } 194 195 function shadowDOMTest2() { 196 var shadowS1 = shadowRoot.getElementById("shadowSpan1"); 197 var shadowS2 = shadowRoot.getElementById("shadowSpan2"); 198 var s1 = document.getElementById("span1"); 199 200 var hostHandled = false; 201 host.ontouchstart = function(e) { 202 opener.is(e.target, host, "Event.target should be the host element."); 203 hostHandled = true; 204 opener.is(e.targetTouches.length, 2, "Should have two entries in targetTouches."); 205 opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); 206 opener.is(e.targetTouches[1].target, e.target, "targetTouches should contain event.target twice."); 207 opener.is(e.touches.length, 3, "touches list should contain one touch object."); 208 opener.is(e.changedTouches.length, 3, "changedTouches list should contain one touch objects."); 209 } 210 211 synthesizeTouches([shadowS1, shadowS2, s1]); 212 opener.ok(hostHandled, "Should have called listener on host."); 213 host.ontouchstart = null; 214 215 next(); 216 } 217 218 219 function shadowDOMTest3() { 220 var shadowS1 = shadowRoot.getElementById("shadowSpan1"); 221 var shadowS2 = shadowRoot2.getElementById("shadowSpan2"); 222 var s1 = document.getElementById("span1"); 223 224 var hostHandled = false; 225 host.ontouchstart = function(e) { 226 opener.is(e.target, host, "Event.target should be the host element."); 227 hostHandled = true; 228 opener.is(e.targetTouches.length, 1, "Should have one entry in targetTouches."); 229 opener.is(e.targetTouches[0].target, e.target, "targetTouches should contain event.target."); 230 opener.is(e.touches.length, 3, "touches list should contain one touch object."); 231 opener.is(e.touches[0].target, host, "Should have retargeted the first Touch object."); 232 opener.is(e.touches[1].target, host2, "Should have retargeted the second Touch object."); 233 opener.is(e.touches[3].target, s1, "Touch object targeted to light DOM should keep its target as is."); 234 opener.is(e.changedTouches.length, 3, "changedTouches list should contain one touch objects."); 235 } 236 237 synthesizeTouches([shadowS1, shadowS2, s1]); 238 opener.ok(hostHandled, "Should have called listener on host."); 239 host.ontouchstart = null; 240 241 next(); 242 } 243 244 function jsDispatchedShadowTouchEvents() { 245 var s1 = document.getElementById("span1"); 246 var shadowS1 = shadowRoot.getElementById("shadowSpan1"); 247 var shadowS2 = shadowRoot.getElementById("shadowSpan2"); 248 var hostHandled = false; 249 var shadowHandled = false; 250 host.ontouchstart = function(e) { 251 hostHandled = true; 252 opener.is(e.targetTouches.length, 2, "Should have all the shadow entries in targetTouches."); 253 opener.is(e.targetTouches[0].target, host, "targetTouches shouldn't reveal shadow DOM."); 254 opener.is(e.targetTouches[1].target, host, "targetTouches shouldn't reveal shadow DOM."); 255 opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); 256 opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); 257 } 258 shadowS1.ontouchstart = function(e) { 259 shadowHandled = true; 260 opener.is(e.targetTouches.length, 3, "Should have all the in targetTouches."); 261 opener.is(e.targetTouches[0].target, shadowS1, "targetTouches should contain two shadow elements."); 262 opener.is(e.targetTouches[1].target, shadowS2, "targetTouches should contain two shadow elements."); 263 opener.is(e.targetTouches[2].target, s1, "targetTouches should contain a slight element."); 264 opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); 265 opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); 266 } 267 var touchArray = createTouchArray([shadowS1, shadowS2, s1]); 268 var touchEvent = new TouchEvent("touchstart", 269 { 270 composed: true, 271 touches: touchArray, 272 targetTouches: touchArray, 273 changedTouches: touchArray 274 }); 275 opener.is(touchEvent.targetTouches.length, 3, "Should have 3 entries in targetTouches"); 276 shadowS1.dispatchEvent(touchEvent); 277 opener.ok(hostHandled, "Should have called listener on host."); 278 opener.ok(shadowHandled, "Should have called listener on shadow DOM element."); 279 host.ontouchstart = null; 280 shadowS1.ontouchstart = null; 281 next(); 282 } 283 284 function jsDispatchedShadowTouchEvents2() { 285 var s1 = document.getElementById("span1"); 286 var shadowS1 = shadowRoot.getElementById("shadowSpan1"); 287 var shadowS2 = shadowRoot2.getElementById("shadowSpan2"); 288 var hostHandled = false; 289 var shadowHandled = false; 290 host.ontouchstart = function(e) { 291 hostHandled = true; 292 opener.is(e.targetTouches.length, 1, "Should have one shadow entry in targetTouches."); 293 opener.is(e.targetTouches[0].target, host, "targetTouches shouldn't reveal shadow DOM."); 294 opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); 295 opener.is(e.touches[0].target, host, "Should have retargeted the first Touch object."); 296 opener.is(e.touches[1].target, host2, "Should have retargeted the second Touch object."); 297 opener.is(e.touches[2].target, s1, "Touch object targeted to light DOM should keep its target as is."); 298 opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); 299 } 300 shadowS1.ontouchstart = function(e) { 301 shadowHandled = true; 302 opener.is(e.targetTouches.length, 3, "Should have all the in targetTouches."); 303 opener.is(e.targetTouches[0].target, shadowS1, "targetTouches should contain two shadow elements."); 304 opener.is(e.targetTouches[1].target, shadowS2, "targetTouches should contain two shadow elements."); 305 opener.is(e.targetTouches[2].target, s1, "targetTouches should contain a slight element."); 306 opener.is(e.touches.length, 3, "touches list should contain all the touch objects."); 307 opener.is(e.changedTouches.length, 3, "changedTouches list should contain all the touch objects."); 308 } 309 var touchArray = createTouchArray([shadowS1, shadowS2, s1]); 310 var touchEvent = new TouchEvent("touchstart", 311 { 312 composed: true, 313 touches: touchArray, 314 targetTouches: touchArray, 315 changedTouches: touchArray 316 }); 317 opener.is(touchEvent.targetTouches.length, 3, "Should have 3 entries in targetTouches"); 318 shadowS1.dispatchEvent(touchEvent); 319 opener.ok(hostHandled, "Should have called listener on host."); 320 opener.ok(shadowHandled, "Should have called listener on shadow DOM element."); 321 host.ontouchstart = null; 322 shadowS1.ontouchstart = null; 323 next(); 324 } 325 326 function start() { 327 winUtils = _getDOMWindowUtils(this); 328 host = document.getElementById("host"); 329 shadowRoot = host.attachShadow({ mode: "open" }); 330 shadowRoot.innerHTML = 331 "<span id='shadowSpan1'>shadowFoo </span><span id='shadowSpan2'>shadowBar </span><span id='shadowSpan3'>shadowBaz </span><slot></slot>"; 332 333 host2 = document.getElementById("host2"); 334 shadowRoot2 = host2.attachShadow({ mode: "open" }); 335 shadowRoot2.innerHTML = 336 "<span id='shadowSpan1'>shadowFoo </span><span id='shadowSpan2'>shadowBar </span><span id='shadowSpan3'>shadowBaz </span><slot></slot>"; 337 next(); 338 } 339 </script> 340 <style> 341 </style> 342 </head> 343 <body onload="start();"> 344 <div id="nonshadow"> 345 <span id="span1">foo </span><span id="span2">bar </span><span id="span3"> baz</span> 346 <input type="date" id="date"> 347 </div> 348 <div id="host"><span id="assignedNode"> assigned node </span></div> 349 <div id="host2"><span id="assignedNode2"> assigned node 2 </span></div> 350 </body> 351 </html>