125 lines
4.5 KiB
HTML
125 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>PointerCapture for Custome Shadow DOM</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>
|
|
<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>
|