attr-title-inherit.html | Explore in Territory

<!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'><slot></slot></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'><slot></slot></div>").firstChild;
createShadowRootWithInnerHtml(host2ndLevel, "<div title='PASS-multilevel'><slot></slot></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.attachShadow({mode: 'open'});
    root.innerHTML = shadowHtml;
    return root;
}

if (window.testRunner)
    container.style.display = "none";
done();
</script>
chromium/third_party/blink/web_tests/fast/dom/shadow/attr-title-inherit.html
