touchadjustment/context-menu-shadow-node.html

<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : Handle long press on a shadow DOM element - bug 96313</title>
    <script src="../fast/js/resources/js-test-pre.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        #sandbox {
            background: #00f;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
        }
        #description {
          margin-top: 110px;
        }
    </style>
</head>

<body>

<div id="sandbox"></div>
<p id='description'></p>
<div id='console'></div>

<script>
    var sandbox = document.getElementById('sandbox');

    function addShadowDOM() {
        var targetDiv = document.getElementById("sandbox");
        var root = internals.ensureShadowRoot(targetDiv);
        var shadowDiv = document.createElement("div");
        shadowDiv.style.width = "20px";
        shadowDiv.style.height = "20px";
        shadowDiv.style.background = "#ff0";
        shadowDiv.style.position = "absolute";
        shadowDiv.style.right = "10px";
        shadowDiv.style.top = "10px";
        root.appendChild(shadowDiv);
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestContextMenuNode && internals.ensureShadowRoot) {
            description('Test touch adjustment for context-menu gestures on a shadow-DOM element.');
            addShadowDOM();
            // Test that a long press centered on a shadow-DOM element does not crash.
            testTouchPointContextMenu(touchPoint(80, 20, 10), null);
        }
    }
    runTests();
</script>
<script src="../fast/js/resources/js-test-post.js"></script>
</body>
</html>