pointerevent_pointercapture-in-shadow-dom.html (4338B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>PointerCapture for Shadow DOM Elements</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 </head> 14 <body onload="onLoad()"> 15 <template id="template"> 16 <style> 17 #content{ 18 height:100px; 19 width:100px; 20 background-color: lightgrey; 21 } 22 </style> 23 <div id="content"></div> 24 </template> 25 <h4>PointerCapture by Shadow DOM element</h4> 26 The light gray box below is part of Shadow DOM. 27 <ul> 28 <li> Click left mouse button inside the box and keep mouse button depressed </li> 29 <li> Move the mouse </li> 30 <li> There should be a message stating <em>Pointer was captured by Shadow DOM!</em></li> 31 <li> Release left mouse button 32 <li> There should be a message stating <em>Pointer was released by Shadow DOM!</em></li> 33 </ul> 34 <div id="shadowhost"></div> 35 <div id="log"></div> 36 <script> 37 function onLoad(){ 38 var logDiv = document.getElementById("log"); 39 function logMessage(message){ 40 var log = document.createElement("div"); 41 var messageNode = document.createTextNode(message); 42 log.appendChild(messageNode); 43 logDiv.appendChild(log); 44 } 45 var events = []; 46 47 var host = document.getElementById("shadowhost"); 48 var shadowRoot = host.attachShadow({mode: "open"}); 49 var template = document.getElementById("template"); 50 var node = template.content.cloneNode(true); 51 shadowRoot.appendChild(node); 52 53 var content = host.shadowRoot.getElementById("content"); 54 55 content.addEventListener("pointerdown", function(e){ 56 content.setPointerCapture(e.pointerId); 57 events.push("pointerdown@content"); 58 }); 59 content.addEventListener("gotpointercapture", function(e){ 60 logMessage("Pointer was captured by Shadow DOM!"); 61 events.push("gotpointercapture@content"); 62 }); 63 content.addEventListener("pointerup", function(e){ 64 content.releasePointerCapture(e.pointerId); 65 events.push("pointerup@content"); 66 }); 67 content.addEventListener("lostpointercapture", function(e){ 68 logMessage("Pointer was released by Shadow DOM!"); 69 events.push("lostpointercapture@content"); 70 if(window.promise_test && shadow_dom_test){ 71 shadow_dom_test.step(function(){ 72 assert_array_equals(events, ["pointerdown@content", 73 "gotpointercapture@content", "pointerup@content", 74 "lostpointercapture@content"]); 75 resolve_test(); 76 }); 77 } 78 }); 79 80 var shadow_dom_test = null; 81 var resolve_test = null; 82 var reject_test = null; 83 84 function cleanup(){ 85 events = []; 86 shadow_dom_test = null; 87 resolve_test = null; 88 reject_test = null; 89 } 90 91 if(window.promise_test){ 92 promise_test(async function(t){ 93 var actions_promise; 94 return new Promise(async function(resolve, reject){ 95 shadow_dom_test = t; 96 resolve_test = resolve; 97 reject_test = reject; 98 t.add_cleanup(function(){ 99 cleanup(); 100 }); 101 var contentRect = content.getBoundingClientRect(); 102 var actions = new test_driver.Actions(); 103 actions_promise = actions 104 .pointerMove(Math.ceil(contentRect.x), Math.ceil(contentRect.y)) 105 .pointerDown({button: actions.ButtonType.LEFT}) 106 .pointerUp({button: actions.ButtonType.LEFT}) 107 .send(); 108 }).then(async ()=>{ 109 await actions_promise; 110 t.done(); 111 }); 112 }, "PointerCapture works for Shadow DOM element."); 113 } 114 } 115 </script> 116 </body> 117 </html>