pseudo-element.html | Explore in Territory

<!DOCTYPE html>
<title>Touch Adjustment: Shouldn't return pseudo elements - bug 395942</title>
<script src="../resources/js-test.js"></script>
<script src="resources/touchadjustment.js"></script>
<style>
    #targetDiv {
        height: 0;
        width: 0;
    }
    #targetDiv:after {
        display: block;
        position: relative;
        left: 50px;
        background-color: blue;
        width: 50px;
        height: 50px;
        content: '';
    }
</style>
<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);

        // Adjust for offset to the pseudo element
        targetBounds = {
            left: targetBounds.left + 50,
            top: targetBounds.top,
            width: 50,
            height: 50
        };

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

        debug('Test touch area contained within the pseudo element.');
        testTouch(midX, midY, touchRadius, targetBounds);
        debug('');

        debug('Overlapping touch above the target should snap to the top of the pseudo element.');
        testTouch(midX, targetBounds.top - offset, touchRadius, targetBounds);
        debug('');

        debug('Overlapping touch below the target should snap to the bottom of the pseudo element.');
        testTouch(midX, targetBounds.top + targetBounds.height + offset, touchRadius, targetBounds);
        debug('');

        debug('Overlapping touch left of the target should snap to the left side of the pseudo element.');
        testTouch(targetBounds.left - offset, midY, touchRadius, targetBounds);
        debug('');

        debug('Overlapping touch right of the target should snap to the right side of the pseudo element.');
        testTouch(targetBounds.left + targetBounds.width + offset, midY, touchRadius, targetBounds);
        debug('');
    }

    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');
    }

    description('Test touch adjustment over pseudo elements.  Pseudo elements should be candidates for adjustment, but should not themselves be returned as valid target nodes.');

    if (window.internals) {
        runTouchTests();
    }
</script>
chromium/third_party/blink/web_tests/touchadjustment/pseudo-element.html
