| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>PointerCapture for Shadow DOM Elements</title> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width"> |
| <link rel="help" href= "https://bugs.chromium.org/p/chromium/issues/detail?id=810882"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| </head> |
| <body onload="onLoad()"> |
| <template id="template"> |
| <style> |
| #content{ |
| height:100px; |
| width:100px; |
| background-color: lightgrey; |
| } |
| </style> |
| <div id="content"></div> |
| </template> |
| <h4>PointerCapture by Shadow DOM element</h4> |
| The light gray box below is part of Shadow DOM. |
| <ul> |
| <li> Click left mouse button inside the box and keep mouse button depressed </li> |
| <li> Move the mouse </li> |
| <li> There should be a message stating <em>Pointer was captured by Shadow DOM!</em></li> |
| <li> Release left mouse button |
| <li> There should be a message stating <em>Pointer was released by Shadow DOM!</em></li> |
| </ul> |
| <div id="shadowhost"></div> |
| <div id="log"></div> |
| <script> |
| function onLoad(){ |
| var logDiv = document.getElementById("log"); |
| function logMessage(message){ |
| var log = document.createElement("div"); |
| var messageNode = document.createTextNode(message); |
| log.appendChild(messageNode); |
| logDiv.appendChild(log); |
| } |
| var events = []; |
| |
| var host = document.getElementById("shadowhost"); |
| var shadowRoot = host.attachShadow({mode: "open"}); |
| var template = document.getElementById("template"); |
| var node = template.content.cloneNode(true); |
| shadowRoot.appendChild(node); |
| |
| var content = host.shadowRoot.getElementById("content"); |
| |
| content.addEventListener("pointerdown", function(e){ |
| content.setPointerCapture(e.pointerId); |
| events.push("pointerdown@content"); |
| }); |
| content.addEventListener("gotpointercapture", function(e){ |
| logMessage("Pointer was captured by Shadow DOM!"); |
| events.push("gotpointercapture@content"); |
| }); |
| content.addEventListener("pointerup", function(e){ |
| content.releasePointerCapture(e.pointerId); |
| events.push("pointerup@content"); |
| }); |
| content.addEventListener("lostpointercapture", function(e){ |
| logMessage("Pointer was released by Shadow DOM!"); |
| events.push("lostpointercapture@content"); |
| if(window.promise_test && shadow_dom_test){ |
| shadow_dom_test.step(function(){ |
| assert_array_equals(events, ["pointerdown@content", |
| "gotpointercapture@content", "pointerup@content", |
| "lostpointercapture@content"]); |
| resolve_test(); |
| }); |
| } |
| }); |
| |
| var shadow_dom_test = null; |
| var resolve_test = null; |
| var reject_test = null; |
| |
| function cleanup(){ |
| events = []; |
| shadow_dom_test = null; |
| resolve_test = null; |
| reject_test = null; |
| } |
| |
| if(window.promise_test){ |
| promise_test(async function(t){ |
| var actions_promise; |
| return new Promise(async function(resolve, reject){ |
| shadow_dom_test = t; |
| resolve_test = resolve; |
| reject_test = reject; |
| t.add_cleanup(function(){ |
| cleanup(); |
| }); |
| var contentRect = content.getBoundingClientRect(); |
| var actions = new test_driver.Actions(); |
| actions_promise = actions |
| .pointerMove(Math.ceil(contentRect.x), Math.ceil(contentRect.y)) |
| .pointerDown({button: actions.ButtonType.LEFT}) |
| .pointerUp({button: actions.ButtonType.LEFT}) |
| .send(); |
| }).then(async ()=>{ |
| await actions_promise; |
| t.done(); |
| }); |
| }, "PointerCapture works for Shadow DOM element."); |
| } |
| } |
| </script> |
| </body> |
| </html> |
