LayoutTests/fast/shadow-dom/DocumentOrShadowRoot-prototype-elementFromPoint.html - WebKit - Git at Google

 <!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>
	<!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>