touch-inlines.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : Inlines and line-breaks - 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; top: 0px; left: 0px; font: 16px Ahem; line-height: 20px }
    </style>
</head>
<body>

<div id=sandbox>
    <p style="width: 22em;">
    <a id="1" href="#1">some link</a><br>
    <a id="2" href="#2">some link breaking lines</a> and <a id="3" href="#3">link</a><br>
    hola mundo! <a id="4" href="#4">a split up link</a><br>
    hello world <a id="5" href="#5">some link also breaking</a><br>
    hi there <a id="6" href="#6">some link that is breaking multiple lines just for the very fun of it</a><br><br>
    </p>
</div>

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

<script>
    // Set up shortcut access to elements
    var e = {};
    ['sandbox', '1', '2', '3', '4', '5', '6'].forEach(function(a) {
        e[a] = document.getElementById(a);
    });

    function testDirectTouches()
    {
        debug('Test some direct hits.');
        testTouchPoint(touchPoint(30, 25, 10), e['1']);
        testTouchPoint(touchPoint(20, 65, 10), e['2']);
        testTouchPoint(touchPoint(220, 85, 10), e['4']);
        testTouchPoint(touchPoint(80, 195, 10), e['6']);
    }

    function testDirectMisses()
    {
        debug('Test a few direct misses.');
        // Hit 'and' betwen link 2 and 3
        testTouchPoint(touchPoint(120, 75, 6), null);
        // Hit 'hi there' above and to the left of link 6.
        testTouchPoint(touchPoint(72, 166, 6), null);
    }

    function testIndirectTouches()
    {
        debug('Test some indirect hits.');

        testTouchPoint(touchPoint(50, 60, 20), e['2']);
        testTouchPoint(touchPoint(172, 83, 20), e['3']);
        testTouchPoint(touchPoint(230, 74, 20), e['4']);
        testTouchPoint(touchPoint(30, 100, 20), e['4']);
        testTouchPoint(touchPoint(24, 170, 20), e['6']);

    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description('Tests touch-adjustment on inline links. Making sure we can hit over line-breaks, and can miss when tapping between parts of a line-broken link.');
            testDirectTouches();
            testDirectMisses();
            testIndirectTouches();
            e['sandbox'].style.display = 'none';
        }
    }
    runTests();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/touchadjustment/touch-inlines.html
