205 lines
9.0 KiB
HTML
205 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Shadow DOM and CSSOM View: Document.prototype.elementFromPoint</title>
|
|
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
|
|
<meta name="assert" content="DocumentOrShadowRoot must have elementFromPoint and must return retarget the result against the context object.">
|
|
<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-document-elementfrompoint">
|
|
<link rel="help" href="https://www.w3.org/TR/shadow-dom/#extensions-to-the-documentorshadowroot-mixin">
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container"></div>
|
|
<style>
|
|
|
|
container { position: relative; }
|
|
test-element { display: block; width: 100px; height: 100px; }
|
|
|
|
</style>
|
|
<script>
|
|
|
|
function pointInElement(node) {
|
|
let x = 5;
|
|
let y = 5;
|
|
do {
|
|
x += node.offsetLeft;
|
|
y += node.offsetTop;
|
|
node = node.offsetParent;
|
|
} while (node);
|
|
return [x, y];
|
|
}
|
|
|
|
const displayValues = ['inline', 'block', 'inline-block'];
|
|
var container = document.getElementById('container');
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = 'hello';
|
|
container.appendChild(host);
|
|
assert_equals(document.elementFromPoint(...pointInElement(host)), host);
|
|
}, 'document.elementFromPoint must return the shadow host of the hit-tested text node when the host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = 'text';
|
|
container.appendChild(host);
|
|
assert_equals(document.elementFromPoint(...pointInElement(host)), host);
|
|
}, 'document.elementFromPoint must return the shadow host of the hit-tested text node assigned to a slot when the host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = '<span>text</span>';
|
|
container.appendChild(host);
|
|
assert_equals(document.elementFromPoint(...pointInElement(host)), host.querySelector('span'));
|
|
}, 'document.elementFromPoint must return the element assigned to a slot when the shadow host of the slot has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<span>text</span>';
|
|
container.appendChild(host);
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(shadow.querySelector('span'))), shadow.querySelector('span'));
|
|
}, 'shadowRoot.elementFromPoint must return the element parent of the hit-tested text node under the point when the shadow host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = 'text';
|
|
container.appendChild(host);
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(host)), host);
|
|
}, 'shadowRoot.elementFromPoint must return the shadow host when the hit-tested text node is a direct child of the root and the host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = 'hello';
|
|
container.appendChild(host);
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(host)), shadow.querySelector('slot'));
|
|
}, 'shadowRoot.elementFromPoint must return the slot to which the hit-tested text node is assigned when its host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = '<span>hello</span>';
|
|
container.appendChild(host);
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(host)), host.querySelector('span'));
|
|
}, 'shadowRoot.elementFromPoint must return the element parent of the hit-tested text node assigned to a slot in the shadow tree when its host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = '<inner-host>hello</inner-host>';
|
|
container.appendChild(host);
|
|
|
|
let innerHost = host.querySelector('inner-host');
|
|
let innerShadow = innerHost.attachShadow({mode: 'closed'});
|
|
innerShadow.innerHTML = '<slot></slot>';
|
|
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(host)), innerHost);
|
|
}, 'shadowRoot.elementFromPoint must return a child element assigned to a slot'
|
|
+ ' when the hit-tested text node is assigned to the shadow tree of the child element and the outer shadow host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = '<inner-host>hello</inner-host>';
|
|
container.appendChild(host);
|
|
|
|
let innerHost = host.querySelector('inner-host');
|
|
let innerShadow = innerHost.attachShadow({mode: 'closed'});
|
|
innerShadow.innerHTML = '<slot></slot>';
|
|
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(host)), innerHost);
|
|
}, 'shadowRoot.elementFromPoint must return a child element assigned to a slot'
|
|
+ ' when the hit-tested text node is assigned to a slot in the shadow tree of the child element and the outer shadow host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = '<inner-host></inner-host>';
|
|
container.appendChild(host);
|
|
|
|
let innerHost = host.querySelector('inner-host');
|
|
let innerShadow = innerHost.attachShadow({mode: 'closed'});
|
|
innerShadow.innerHTML = 'hello';
|
|
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(host)), innerHost);
|
|
}, 'shadowRoot.elementFromPoint must return a child element with its own shadow tree assigned to a slot'
|
|
+ ' when the hit-tested text node is its direct child and the outer shadow host has display: ' + displayValue);
|
|
});
|
|
|
|
displayValues.forEach(function (displayValue) {
|
|
test(function () {
|
|
container.innerHTML = '';
|
|
let host = document.createElement('test-element');
|
|
host.style.display = displayValue;
|
|
let shadow = host.attachShadow({mode: 'closed'});
|
|
shadow.innerHTML = '<slot></slot>';
|
|
host.innerHTML = '<inner-host></inner-host>';
|
|
container.appendChild(host);
|
|
|
|
let innerHost = host.querySelector('inner-host');
|
|
let innerShadow = innerHost.attachShadow({mode: 'closed'});
|
|
innerShadow.innerHTML = '<span>hello</span>';
|
|
|
|
assert_equals(shadow.elementFromPoint(...pointInElement(host)), innerHost);
|
|
}, 'shadowRoot.elementFromPoint must return a child element with its own shadow tree assigned to a slot'
|
|
+ ' when the hit-tested text node is a child of another element and the outer shadow host has display: ' + displayValue);
|
|
});
|
|
|
|
container.innerHTML = '';
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|