LayoutTests/fast/shadow-dom/tooltip-on-composed-tree.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <body>
 <p>This tests tooltip across shadow boundaries. To manually test, hover over two boxes below. You should see tooltips for each.</p>
 <div class="container"><a title="Tooltip"><span id="hostWithTitle"></span></a></div>
 <div class="container"><span id="hostWithSlottedContent"><span id="content">Hover over here 2</span></span></a></div>
 <style>

 .container {
     border: solid 1px blue;
     width: 100px;
     height: 100px;
     position: relative;
     margin-bottom: 10px;
 }

 #content {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100px;
     height: 100px;
     background: #eee;
 }

 </style>
 <pre><script>

 var hostWithTitle = document.getElementById('hostWithTitle');
 var shadowRoot = hostWithTitle.attachShadow({mode: 'closed'});
 shadowRoot.innerHTML = `
     <style>
         #content {
             position: absolute;
             left: 0px;
             top: 0px;
             width: 100px;
             height: 100px;
             background: #eee;
         }
     </style>
     <div id="content">Hover over here 1</div>
 `;

 var nodeInsideShadowRoot = shadowRoot.querySelector('#content');
 var slottedNode = document.querySelector('#content');

 shadowRootWithSlot = document.getElementById('hostWithSlottedContent').attachShadow({mode: 'closed'});
 shadowRootWithSlot.innerHTML = `<slot title="Tooltip"></slot>`;

 if (window.internals) {
     testRunner.dumpAsText();

     document.write((internals.toolTipFromElement(nodeInsideShadowRoot) == 'Tooltip' ? 'PASS' : 'FAIL')
         + ' - Tooltip on a node inside a shadow tree with title on its shadow host ancestor\n');

     document.write((internals.toolTipFromElement(slottedNode) == 'Tooltip' ? 'PASS' : 'FAIL')
         + ' - Tooltip on a slotted node with title on its slot\n');

     Array.from(document.querySelectorAll('.container')).map(function (node) { node.remove(); });
 }

 </script></pre>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<body>
	<p>This tests tooltip across shadow boundaries. To manually test, hover over two boxes below. You should see tooltips for each.</p>
	<div class="container"><a title="Tooltip"><span id="hostWithTitle"></span></a></div>
	<div class="container"><span id="hostWithSlottedContent"><span id="content">Hover over here 2</span></span></a></div>
	<style>

	.container {
	border: solid 1px blue;
	width: 100px;
	height: 100px;
	position: relative;
	margin-bottom: 10px;
	}

	#content {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100px;
	height: 100px;
	background: #eee;
	}

	</style>
	<pre><script>

	var hostWithTitle = document.getElementById('hostWithTitle');
	var shadowRoot = hostWithTitle.attachShadow({mode: 'closed'});
	shadowRoot.innerHTML = `
	<style>
	#content {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100px;
	height: 100px;
	background: #eee;
	}
	</style>
	<div id="content">Hover over here 1</div>
	`;

	var nodeInsideShadowRoot = shadowRoot.querySelector('#content');
	var slottedNode = document.querySelector('#content');

	shadowRootWithSlot = document.getElementById('hostWithSlottedContent').attachShadow({mode: 'closed'});
	shadowRootWithSlot.innerHTML = `<slot title="Tooltip"></slot>`;

	if (window.internals) {
	testRunner.dumpAsText();

	document.write((internals.toolTipFromElement(nodeInsideShadowRoot) == 'Tooltip' ? 'PASS' : 'FAIL')
	+ ' - Tooltip on a node inside a shadow tree with title on its shadow host ancestor\n');

	document.write((internals.toolTipFromElement(slottedNode) == 'Tooltip' ? 'PASS' : 'FAIL')
	+ ' - Tooltip on a slotted node with title on its slot\n');

	Array.from(document.querySelectorAll('.container')).map(function (node) { node.remove(); });
	}

	</script></pre>
	</body>
	</html>