html-label.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : HTML Label and form fields - bug 78801</title>
    <script src="../resources/ahem.js"></script>
    <script src="../resources/js-test.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        #sandbox {
            position: absolute;
            left: 0px;
            top: 0px;
            font: 16px Ahem;
        }
    </style>
</head>

<body>

<div id=sandbox>
    <a href="#myform" id="mylink">Do not click here</a><br>
    <form id="myform">
    <label for="myinput" id="mylabel">Click here,</label>
    <span id="myspan">but not here.</span>
    <input type="text" id="myinput" value="To focus this."></input>
    </form>
</div>

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

<script>
    var element;
    var adjustedNode;
    // Set up shortcut access to elements
    var e = {};
    ['sandbox', 'mylink', 'myform', 'myinput', 'mylabel', 'myspan'].forEach(function(a) {
        e[a] = document.getElementById(a);
    });

    function testDirectTouch(element)
    {
        var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'center', 0, 20, 30);
        testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
    }

    function testIndirectTouch(element, offset)
    {
        // Touch just right of the element.
        var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'right', offset, 30, 20);
        testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
    }

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

        testDirectTouch(e.mylink);
        testDirectTouch(e.mylabel);
        testDirectTouch(e.myinput);
    }

    function testIndirectTouches()
    {
        debug('Testing indirect hits.');

        testIndirectTouch(e.mylink, 10);

        // This case is very borderline - there's not much reason to adjust
        // left to the label instead of up to the link (it's closer to
        // the label, but overlaps with more of the link).
        testIndirectTouch(e.mylabel, 1);

        testIndirectTouch(e.myinput, 10);
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description('Tests if labels are treated as clickable if the input they control is.');
            testDirectTouches();
            testIndirectTouches();
            e.sandbox.style.display = 'none';
        }
    }
    runTests();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/touchadjustment/html-label.html
