gesture-tapHighlight-shadow-tree.html

<!DOCTYPE html>
<html>
<script src="../../../compositing/gestures/resources/link-highlight-helper.js"></script>
<link rel="stylesheet" href="../../../compositing/gestures/resources/link-highlight-style.css">
<body onload="runTest();">

<template id="shadow-tree">
<a href="" id="targetLink" style="-webkit-tap-highlight-color: rgb(0, 255, 0)"><slot></slot></a>
</template>

<div id="host" style="transform: translateZ(0); padding: 20px;">
<img style="vertical-align: bottom" width="320" height="240" src="../../../compositing/gestures/resources/dice.png">
</div>

<script>
useMockHighlight();
var shadowRoot = document.querySelector('#host').attachShadow({mode: 'open'});
shadowRoot.appendChild(document.importNode(document.querySelector('#shadow-tree').content, true));
var targetLink = shadowRoot.querySelector('#targetLink');

function runTest() {
    var clientRect = targetLink.getBoundingClientRect();
    x = (clientRect.left + clientRect.right) / 2;
    y = (clientRect.top + clientRect.bottom) / 2;
    if (window.testRunner)
        testRunner.waitUntilDone();

    if (window.eventSender) {
        eventSender.gestureShowPress(x, y);
        window.setTimeout(function() { testRunner.notifyDone(); }, 0);
    } else {
        debug("This test requires DumpRenderTree.");
        debug("This test is successful if the image below is covered in a green box with square ranges.");
    }
}
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/shadow/gesture-tapHighlight-shadow-tree.html
