https://github.com/web-platform-tests/wpt
Tip revision: 64da316928b38f3dbd2231dbfb0f7f776170a106 authored by Brad Werth on 11 April 2018, 09:35:18 UTC
Part 9: Fix wpt reftest shape-image-025.html to make every frame of the animated GIF use a green box in the lower-left quadrant.
Part 9: Fix wpt reftest shape-image-025.html to make every frame of the animated GIF use a green box in the lower-left quadrant.
Tip revision: 64da316
DocumentOrShadowRoot-prototype-elementFromPoint.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>
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);
assert_equals(shadow.elementFromPoint(...pointInElement(host)), host);
}, 'document.elementFromPoint and shadow.ElementFromPoint must return the shadow host of the hit-tested text node 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 = 'text';
container.appendChild(host);
assert_equals(document.elementFromPoint(...pointInElement(host)), host);
assert_equals(shadow.elementFromPoint(...pointInElement(host)), host);
}, 'document.elementFromPoint and shadowRoot.elementFromPoint must return the shadow host when the hit-tested text node is assigned to a slot 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 = '<span>text</span>';
container.appendChild(host);
assert_equals(document.elementFromPoint(...pointInElement(host)), host.querySelector('span'));
assert_equals(shadow.elementFromPoint(...pointInElement(host)), host.querySelector('span'));
}, 'document.elementFromPoint and shadowRoot.elementFromPoint must return the element assigned to a slot when hit-tested text node under an element is assigned to a slot in the shadow tree and 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(document.elementFromPoint(...pointInElement(host)), host);
assert_equals(shadow.elementFromPoint(...pointInElement(host)), shadow.querySelector('span'));
}, 'document.elementFromPoint must return the shadow host of the hit-tested element under a shadow root and 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 = '<slot>fallback</slot>';
container.appendChild(host);
assert_equals(document.elementFromPoint(...pointInElement(host)), host);
assert_equals(shadow.elementFromPoint(...pointInElement(host)), shadow.querySelector('slot'));
}, 'document.elementFromPoint must return the shadow host and shadowRoot.elementFromPoint must return the slot parent of the fallback text when the hit-tested text node is a fallback content 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 = '<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(document.elementFromPoint(...pointInElement(host)), innerHost);
assert_equals(shadow.elementFromPoint(...pointInElement(host)), innerHost);
assert_equals(innerShadow.elementFromPoint(...pointInElement(host)), innerHost);
}, 'document.elementFromPoint, shadowRoot.elementFromPoint, innerShadow.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(document.elementFromPoint(...pointInElement(host)), innerHost);
assert_equals(shadow.elementFromPoint(...pointInElement(host)), innerHost);
assert_equals(innerShadow.elementFromPoint(...pointInElement(host)), innerHost);
}, 'document.elementFromPoint, shadowRoot.elementFromPoint, innerShadow.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(document.elementFromPoint(...pointInElement(host)), innerHost);
assert_equals(shadow.elementFromPoint(...pointInElement(host)), innerHost);
assert_equals(innerShadow.elementFromPoint(...pointInElement(host)), innerShadow.querySelector('span'));
}, 'document.elementFromPoint, 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 innerShadow.elementFromPoint must return the parent element of the hit-tested text node under it when 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 = 'hello';
container.appendChild(host);
assert_array_equals(document.elementsFromPoint(...pointInElement(host)), [host, container, document.body, document.documentElement]);
assert_array_equals(shadow.elementsFromPoint(...pointInElement(host)), [host, container, document.body, document.documentElement]);
}, 'document.elementsFromPoint and shadow.elementsFromPoint must return the shadow host and its ancestors of the hit-tested text node 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 = 'text';
container.appendChild(host);
assert_array_equals(document.elementsFromPoint(...pointInElement(host)), [host, container, document.body, document.documentElement]);
assert_array_equals(shadow.elementsFromPoint(...pointInElement(host)), [host, container, document.body, document.documentElement]);
},'document.elementsFromPoint and shadowRoot.elementsFromPoint must return the shadow host and its ancestors when the hit-tested text node is assigned to a slot 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 = '<div><slot></slot></div>';
host.innerHTML = '<span>text</span>';
container.appendChild(host);
assert_array_equals(document.elementsFromPoint(...pointInElement(host)), [host.querySelector('span'), host, container, document.body, document.documentElement]);
assert_array_equals(shadow.elementsFromPoint(...pointInElement(host)), [host.querySelector('span'), shadow.querySelector('div'), host, container, document.body, document.documentElement]);
}, 'document.elementsFromPoint and shadowRoot.elementsFromPoint must return the element assigned to a slot and its non-shadow ancestors when hit-tested text node under an element is assigned to a slot in the shadow tree and 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_array_equals(document.elementsFromPoint(...pointInElement(host)), [host, container, document.body, document.documentElement]);
assert_array_equals(shadow.elementsFromPoint(...pointInElement(host)), [shadow.querySelector('span'), host, container, document.body, document.documentElement]);
}, 'document.elementsFromPoint must return the shadow host and its ancestors of the hit-tested element under a shadow root and'
+ 'shadowRoot.elementsFromPoint must return the element parent and its non-shadow ancestors 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 = '<div><slot>fallback</slot></div>';
container.appendChild(host);
assert_array_equals(document.elementsFromPoint(...pointInElement(host)), [host, container, document.body, document.documentElement]);
assert_array_equals(shadow.elementsFromPoint(...pointInElement(host)), [shadow.querySelector('slot'), shadow.querySelector('div'), host, container, document.body, document.documentElement]);
}, 'document.elementsFromPoint must return the shadow host and its ancestors and shadowRoot.elementsFromPoint must return the slot parent of the fallback text and its non-shadow ancestors when the hit-tested text node is a fallback content and the host has display: ' + displayValue);
});
container.innerHTML = '';
</script>
</body>
</html>
