touchadjustment/context-menu.html

<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : Adjust to context menu providers - bug 94101</title>
    <script src="../fast/js/resources/js-test-pre.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        #sandbox {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 400px;
            height: 200px;
        }
        #sandbox p {
            padding: 5px;
            font: 20px Ahem;
        }
    </style>
</head>
<body>

<script>
    function onClick() {}
</script>

<div id=sandbox>
    <p id=p0><a id=a0 href="#a0">Link with URL.</a>
    <p id=p1><span id=span0 onclick=onClick>Text with onclick handler.</span>
    <p id=p2><img id=img0 height=20 width=100 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAAA1BMVEUAgACc+aWRAAAADElEQVR42mNgIAEAAAAtAAH7KhMqAAAAAElFTkSuQmCC"></img>
</div>

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

<script>
    // Set up shortcut access to elements
    var e = {};
    ['sandbox', 'a0', 'span0', 'img0', 'p0', 'p1', 'p2'].forEach(function(a) {
        e[a] = document.getElementById(a);
    });

    function testDirectTouches()
    {
        // Check links can be targeted with context menu gesture.
        testTouchPointContextMenu(touchPoint(100, 35, 10), e.a0);
        // Check onclick can be targeted with activate gesture.
        testTouchPoint(touchPoint(100, 100, 10), e.span0);
        // Check onclick can not be targeted with context menu.
        testTouchPointContextMenu(touchPoint(100, 100, 10), null);
        // But that the adjusted point still hits it, if no better target is available
        var adjustedPoint = adjustTouchPointContextMenu(touchPoint(100, 100, 10));
        if (adjustedPoint) {
            shouldBeNode(document.elementFromPoint(adjustedPoint.x, adjustedPoint.y), e.span0);
        }
        // Check images can be targeted with context menu.
        testTouchPointContextMenu(offsetTouchPoint(findAbsoluteBounds(e.img0), 'center', 0, 5, 5), e.img0);
    }

    function testAdjustedTouches()
    {
        // Check we if we adjust the context menu onto the link.
        testTouchPointContextMenu(touchPoint(100, 50, 10), e.a0);
        // Check we if we do not adjust the context menu onto the onclick element.
        testTouchPointContextMenu(touchPoint(100, 70, 10), null);
        // Check the link is strongly preferred.
        testTouchPointContextMenu(touchPoint(100, 60, 20), e.a0);
        // Check adjustment onto the image.
        testTouchPointContextMenu(touchPoint(20, 140, 10), e.img0);
        // Check the image is strongly preferred for context menu gestures.
        testTouchPointContextMenu(touchPoint(20, 120, 30), e.img0);
        // But the onclick handler would be preferred for activate gestures.
        testTouchPoint(touchPoint(20, 120, 30), e.span0);
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestContextMenuNode) {
            description('Test touch adjustment for context-menu gestures.');
            // Set editing-behaviour to win, so context-menu gesture does not trigger selections.
            internals.settings.setEditingBehavior('win');
            testDirectTouches();
            testAdjustedTouches();
            e.sandbox.style.display = 'none';
        }
    }
    runTests();
</script>

<script src="../fast/js/resources/js-test-post.js"></script>

</body>
</html>