117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
HTML
<!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>
|