Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /pointerevents/pointerevent_pointercapture-in-custom-element.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>PointerCapture for Custome Shadow DOM</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<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>
<script>
class WC extends HTMLElement{
constructor(){
super();
let template = document.getElementById('template-wc');
let node = template.content.cloneNode(true) ;
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(node);
}
}
customElements.define("wc-wc", WC);
</script>
</head>
<body onload="onLoad()">
<template id="template-wc">
<style>
#content{
height:50px;
width:50px;
background-color: magenta;
}
</style>
<div id="content"></div>
</template>
<h4>PointerCapture by Custom Element's Shadow DOM</h4>
The magenta box below is part of a custom element's 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 custom element's Shadow DOM!</em></li>
<li> Release left mouse button</li>
<li> There should be a message stating <em>Pointer was released by custom element's Shadow DOM!</em></li>
</ul>
<wc-wc id="wc-wc"></wc-wc>
<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 content = document.getElementById("wc-wc")
.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 custom element's 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 custom element's Shadow DOM!");
events.push("lostpointercapture@content");
if(window.promise_test && wc_shadow_dom_test){
wc_shadow_dom_test.step(function(){
assert_array_equals(events, ["pointerdown@content",
"gotpointercapture@content", "pointerup@content",
"lostpointercapture@content"]);
resolve_test();
});
}
});
var wc_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){
wc_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 custom element Shadow DOM.");
}
}
</script>
</body>
</html>