touchadjustment/nested-touch.html

<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : Prefer deepest event handler - bug 78801</title>
    <script src="../fast/js/resources/js-test-pre.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        #sandbox { }
        .box { border: 1px solid black; border-radius: 5px 5px; margin: 12px; max-width: 40em; }
    </style>
</head>

<body>

<div id=sandbox>
    <div class=box id=mybox1>
    Box with a local click handler.
    </div>

    <div class=box id=mybox2> 
    Box without a local click handler.
    </div>
</div>

<script>
    function monitor(e) { alert(e.target +( e.target.id ? ( ' #' + e.target.id) : '')); };
    function doSomething(e) {};

    var element = document.getElementById('mybox1');
    element.addEventListener('click', doSomething, false);
    element = document.body;
    element.addEventListener('click', monitor, false);
</script>

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

<script>
    var e = {};
    ['sandbox', 'mybox1', 'mybox2'].forEach(function(a) {
        e[a] = document.getElementById(a);
    });

    function touchPointDoubleTouch(element1, element2, offset)
    {
        var bounds1 = findAbsoluteBounds(element1);
        var bounds2 = findAbsoluteBounds(element2);
        var bounds = new Object();
        // We assume the elements have the same x coord and width.
        bounds.left = bounds1.left + bounds1.width/2 - 1;
        var y1 = bounds1.top + bounds1.height/2 + offset;
        var y2 = bounds2.top + bounds2.height/2 - 1;
        bounds.top = y1;
        bounds.width = y2 - y1;
        bounds.height = y2 - y1;
        return bounds;
    }

    function testDirectTouches()
    {
        debug('Testing small direct hits.');

        var touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox1), 'center', 0, 2);
        testTouchPoint(touchpoint, e.mybox1);

        touchpoint = offsetTouchPoint(findAbsoluteBounds(e.mybox2), 'center', 0, 2);
        testTouchPoint(touchpoint, e.mybox2);
    }

    function testPreferedTouch()
    {
        debug('Testing prefered hits.');

        testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 0), e.mybox1);

        // First test was centered, now move the test closer to the wrong node, and ensure we still get the prefered node.
        testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 5), e.mybox1);

        testTouchPoint(touchPointDoubleTouch(e.mybox1, e.mybox2, 10), e.mybox1);
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description('Test the case where a clickable target is nested inside a document that is monitoring clicks. The target with the local event-handler should be chosen if multiple targets are touched.');
            testDirectTouches();
            testPreferedTouch();
            e['sandbox'].style.display = 'none';
        }
    }
    runTests();
</script>
<script src="../fast/js/resources/js-test-post.js"></script>
</body>
</html>