blob: 06f3371b408c7df1df20d38077e340187df2bc96 [file] [log] [blame]
<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
.target {
background-color:blue;
color:white;
width:100px; height:40px;
margin:10px;
}
</style>
<div id="container">
<p>To test manually, hover over blue boxes and see if the tooltip says "PASS"</p>
<div id="fromdoc" title="PASS-fromdoc"></div>
<div id="distributed" title="NG-distributed"><div class="target">Distributed</div></div>
<div id="multilevel" title="NG-multilevel"><div class="target">Multi-level Distributed</div></div>
</div>
<script>
setup({ explicit_done: true });
var style = "<style>.target { background-color:blue; color:white; width:100px; height:40px; margin:10px; }</style>";
if (!window.eventSender || !window.testRunner)
test(function () { assert_unreached(); }, "Cannot automate the tests without eventSender and testRunner");
var host = document.getElementById("fromdoc");
var root = createShadowRootWithInnerHtml(host, style + "<div class=target>Shadow</div>");
testTooltipTextInShadow("The title of elements in shadow inherits from the document", root.querySelector(".target"), "PASS-fromdoc");
host = document.getElementById("distributed");
createShadowRootWithInnerHtml(host, "<div title='PASS-distributed'><content></content></div>");
testTooltipTextInShadow("The title of distributed elements inherits in the flat tree", host.querySelector(".target"), "PASS-distributed");
host = document.getElementById("multilevel");
var host2ndLevel = createShadowRootWithInnerHtml(host, "<div title='NG-multilevel'><content></content></div>").firstChild;
createShadowRootWithInnerHtml(host2ndLevel, "<div title='PASS-multilevel'><content></content></div>");
testTooltipTextInShadow("The title of distributed elements inherits in the flat tree (multiple levels)", host.querySelector(".target"), "PASS-multilevel");
function testTooltipTextInShadow(description, element, expected) {
if (!window.eventSender || !window.testRunner)
return;
eventSender.dragMode = false;
eventSender.mouseMoveTo(element.offsetLeft, element.offsetTop + element.offsetHeight / 2);
test(function () {
assert_equals(testRunner.tooltipText, expected);
}, description);
}
function createShadowRootWithInnerHtml(host, shadowHtml) {
var root = host.createShadowRoot();
root.innerHTML = shadowHtml;
return root;
}
if (window.testRunner)
container.style.display = "none";
done();
</script>