66 lines
1.9 KiB
HTML
66 lines
1.9 KiB
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>
|