simple-shadow-dom.html | Explore in Territory

<!DOCTYPE html>
<head>
<style>
#targetDiv {
    background: #00f;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 0px;
    top: 0px;
}
</style>
</head>
<div id="targetDiv"></div>

<script src="../resources/js-test.js"></script>
<script src="resources/touchadjustment.js"></script>
<script>
function addShadowDOM() {
    var targetDiv = document.getElementById("targetDiv");
    var root = targetDiv.attachShadow({mode: 'open'});
    var shadowDiv = document.createElement("div");
    shadowDiv.style.width = "50px";
    shadowDiv.style.height = "50px";
    shadowDiv.style.background = "#ff0";
    shadowDiv.style.position = "absolute";
    shadowDiv.style.left = "0px";
    shadowDiv.style.top = "0px";
    shadowDiv.id = 'shadowDiv';
    shadowDiv.addEventListener('click', function() {}, false);
    root.appendChild(shadowDiv);
    return shadowDiv;
}

function runTouchTests() {
    var shadowDiv = addShadowDOM();
    element = document.getElementById("targetDiv");
    element.addEventListener('click', function() {}, false);
    document.addEventListener('click', function() {}, false);
    testTouchPoint(touchPoint(25, 25, 10), shadowDiv);
}

function runTests()
{
    if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
        description('Test that a hit right in the middle of a shadow dom node returns it and not its host.')
        runTouchTests();
    }
}
runTests();
</script>
chromium/third_party/blink/web_tests/touchadjustment/simple-shadow-dom.html
