search-cancel.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : Shadow DOM Element Search Cancel Button - bug 91894</title>
    <script src="../resources/js-test.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        input[type='search'] {
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        border: 1px solid #999;
        padding: 5px;
        }

        input[type='search']::-webkit-search-cancel-button {
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        background: #999;
        height: 10px;
        margin: 0;
        padding: 0;
        width: 10px;
        }
    </style>
</head>

<body>

<div>
  <input id="target" type="search" value="abcd">
</div>

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

<script>
    var element;
    var adjustedNode;
    var adjustedPoint;
    var inputBounds;
    var cancelBounds;
    var textContentBounds;
    var touchBounds;
    var targetBounds;
    var targetContainsPoint;
    var touchContainsPoint;

    function runTouchTests() {
        document.addEventListener('click', function() {}, false);

        element = document.getElementById('target');
        element.focus();
        
        inputBounds = findAbsoluteBounds(element);

        var touchRadius = 20;
        var offset = touchRadius / 2;

        // Center of cancel button.
        var midX = inputBounds.left + inputBounds.width - 11;
        var midY = inputBounds.top + inputBounds.height / 2;

        cancelBounds = {
            left: midX - 5,
            top: midY - 5,
            width: 10,
            height: 10
        };

        textContentBounds = {
           left: inputBounds.left,
           top: inputBounds.top,
           width: inputBounds.width - 16,
           height: inputBounds.height
        };

        debug('\nTouch centered on cancel button but overlapping neighboring candidate.');
        testTouch(midX, midY, touchRadius, cancelBounds);

        debug('\nOff-center touches enclosing cancel button.');
        testTouch(midX - offset, midY, touchRadius, cancelBounds);
        testTouch(midX - offset, midY + offset, touchRadius, cancelBounds);
        testTouch(midX - offset, midY - offset, touchRadius, cancelBounds);

        debug('\nTouches clipping left edge of cancel-button.');
        testTouch(midX - touchRadius - 2, midY, touchRadius, textContentBounds);
        testTouch(midX - touchRadius - 2, midY - offset, touchRadius, textContentBounds);
        testTouch(midX - touchRadius - 2, midY + offset, touchRadius, textContentBounds);
    }

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

        targetBounds = bounds;

        touchBounds = {
            left: touchX - radius,
            top: touchY - radius,
            width: 2 * radius,
            height: 2 * radius
        };
        adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(touchBounds.left, touchBounds.top, touchBounds.width, touchBounds.height, document);
        targetContainsPoint = containsPoint(targetBounds, adjustedPoint);
        touchContainsPoint = containsPoint(touchBounds, adjustedPoint);
        shouldBeTrue('targetContainsPoint');
        shouldBeTrue('touchContainsPoint');
    }

    function containsPoint(bounds, point) {
        return bounds.left <= point.x && bounds.top <= point.y && bounds.left + bounds.width >= point.x && bounds.left + bounds.height >= point.y;
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description('Test touch adjustment on a search field with a visible cancel button.');
            runTouchTests();
        }
    }
    runTests();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/touchadjustment/search-cancel.html
