big-div.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : Too aggresive adjustments for large elements - bug 91262</title>
    <script src="../resources/js-test.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        #targetDiv {
            background: #00f;
            height: 400px;
            width: 400px;
        }
    </style>
</head>

<body>

<div id="targetDiv">
</div>

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

<script>
    var element;
    var adjustedNode;
    var adjustedPoint;
    var targetBounds;
    var touchBounds;

    function runTouchTests() {
        element = document.getElementById("targetDiv");
        element.addEventListener('click', function() {}, false);
        document.addEventListener('click', function() {}, false);

        targetBounds = findAbsoluteBounds(element);

        var touchRadius = 10;
        var offset = touchRadius / 2;
        var midX = targetBounds.left + targetBounds.width / 2;
        var midY = targetBounds.top + targetBounds.height / 2;

        debug('\nOverlapping touch above the target should snap to the top of the target element.');
        testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds);
        debug('\nOverlapping touch below the target should snap to the bottom of the target element.');
        testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRadius, targetBounds);
        debug('\nOverlapping touch left of the target should snap to the left side of the target element.');
        testTouch(targetBounds.left - offset, midY, touchRadius, targetBounds);
        debug('\nOverlapping touch right of the target should snap to the right side of the target element.');
        testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRadius, targetBounds);
        debug('\nTest touch area contained within the target element.');
        testTouch(midX, midY, touchRadius, targetBounds);
    }

    function testTouch(touchX, touchY, radius, targetBounds) {

        touchBounds = {
            x: touchX - radius,
            y: touchY - radius,
            width: 2 * radius,
            height: 2 * radius
        };
        adjustedNode = internals.touchNodeAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document);
        shouldBe('adjustedNode.id', 'element.id');
        adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.x, touchBounds.y, touchBounds.width, touchBounds.height, document);

        shouldBeTrue('adjustedPoint.x >= targetBounds.left');
        shouldBeTrue('adjustedPoint.x <= targetBounds.left + targetBounds.width');
        shouldBeTrue('adjustedPoint.y >= targetBounds.top');
        shouldBeTrue('adjustedPoint.y <= targetBounds.top + targetBounds.height');
        shouldBeTrue('adjustedPoint.x >= touchBounds.x');
        shouldBeTrue('adjustedPoint.x <= touchBounds.x + touchBounds.width');
        shouldBeTrue('adjustedPoint.y >= touchBounds.y');
        shouldBeTrue('adjustedPoint.y <= touchBounds.y + touchBounds.height');
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description('Test touch adjustment on a large div.  The adjusted touch point should lie inside the target element and within the touch area.');
            runTouchTests();
        }
    }
    runTests();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/touchadjustment/big-div.html
