pointerevent_pointercapture-in-custom-element.html (4615B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>PointerCapture for Custome Shadow DOM</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width"> 7 <link rel="help" href= "https://bugs.chromium.org/p/chromium/issues/detail?id=810882"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script> 14 class WC extends HTMLElement{ 15 constructor(){ 16 super(); 17 let template = document.getElementById('template-wc'); 18 let node = template.content.cloneNode(true) ; 19 20 let shadowRoot = this.attachShadow({mode: 'open'}); 21 shadowRoot.appendChild(node); 22 } 23 } 24 customElements.define("wc-wc", WC); 25 </script> 26 </head> 27 <body onload="onLoad()"> 28 <template id="template-wc"> 29 <style> 30 #content{ 31 height:50px; 32 width:50px; 33 background-color: magenta; 34 } 35 </style> 36 <div id="content"></div> 37 </template> 38 <h4>PointerCapture by Custom Element's Shadow DOM</h4> 39 The magenta box below is part of a custom element's Shadow DOM. 40 <ul> 41 <li> Click left mouse button inside the box and keep mouse button depressed</li> 42 <li> Move the mouse</li> 43 <li> There should be a message stating <em>Pointer was captured by custom element's Shadow DOM!</em></li> 44 <li> Release left mouse button</li> 45 <li> There should be a message stating <em>Pointer was released by custom element's Shadow DOM!</em></li> 46 </ul> 47 48 <wc-wc id="wc-wc"></wc-wc> 49 <div id="log"></div> 50 <script> 51 function onLoad(){ 52 var logDiv = document.getElementById("log"); 53 function logMessage(message){ 54 var log = document.createElement("div"); 55 var messageNode = document.createTextNode(message); 56 log.appendChild(messageNode); 57 logDiv.appendChild(log); 58 } 59 var events = []; 60 61 var content = document.getElementById("wc-wc") 62 .shadowRoot.getElementById("content"); 63 64 content.addEventListener("pointerdown", function(e){ 65 content.setPointerCapture(e.pointerId); 66 events.push("pointerdown@content"); 67 }); 68 content.addEventListener("gotpointercapture", function(e){ 69 logMessage("Pointer was captured by custom element's Shadow DOM!"); 70 events.push("gotpointercapture@content"); 71 }); 72 content.addEventListener("pointerup", function(e){ 73 content.releasePointerCapture(e.pointerId); 74 events.push("pointerup@content"); 75 }); 76 content.addEventListener("lostpointercapture", function(e){ 77 logMessage("Pointer was released by custom element's Shadow DOM!"); 78 events.push("lostpointercapture@content"); 79 if(window.promise_test && wc_shadow_dom_test){ 80 wc_shadow_dom_test.step(function(){ 81 assert_array_equals(events, ["pointerdown@content", 82 "gotpointercapture@content", "pointerup@content", 83 "lostpointercapture@content"]); 84 resolve_test(); 85 }); 86 } 87 }); 88 89 var wc_shadow_dom_test = null; 90 var resolve_test = null; 91 var reject_test = null; 92 93 function cleanup(){ 94 events = []; 95 shadow_dom_test = null; 96 resolve_test = null; 97 reject_test = null; 98 } 99 if(window.promise_test){ 100 promise_test(async function(t){ 101 var actions_promise; 102 return new Promise(async function(resolve, reject){ 103 wc_shadow_dom_test = t; 104 resolve_test = resolve; 105 reject_test = reject; 106 t.add_cleanup(function(){ 107 cleanup(); 108 }); 109 var contentRect = content.getBoundingClientRect(); 110 var actions = new test_driver.Actions(); 111 actions_promise = actions 112 .pointerMove(Math.ceil(contentRect.x), Math.ceil(contentRect.y)) 113 .pointerDown({button: actions.ButtonType.LEFT}) 114 .pointerUp({button: actions.ButtonType.LEFT}) 115 .send(); 116 }).then(async()=>{ 117 await actions_promise; 118 t.done(); 119 }); 120 }, "PointerCapture works for custom element Shadow DOM."); 121 } 122 } 123 </script> 124 </body> 125 </html>