<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : content editable div - bug 97576</title>
    <script src="../resources/js-test.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        body {
            font-size: 12px;
            line-height: 14px;
        }

        #text-area,
        #rich-text {
            background: #eee;
            border: none;
            margin: 0 5px;
            padding: 0;
        }

        #rich-text {
            margin-top: 50px;
            outline: none;
            width: 300px;
        }
    </style>
</head>

<body>

<div id=sandbox>
    <textarea id="text-area" rows="5" cols="40">A lengthy line of text.

Another line of text separated by a blank line.</textarea>

    <div id="rich-text" contentEditable>
        <b>Hello</b><br><br><i>World</i>
    </div>
</div>

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

<script>
    var element;
    var rowHeight;
    var touchOffset = 4;
    var touchRadius = 20;
    var origin;
    var adjustedNode;
    var adjustedPoint;

    function testTouchOnRow(row, offset) {
        var bounds = findAbsoluteBounds(element);
        var midPoint = bounds.left + 0.5 * bounds.width;
        var x = bounds.left + 2 * touchRadius;  
        var y = bounds.top + (row + 0.5) * rowHeight + offset; // Vertically centered on row when offset is zero.
        var point = touchPoint(x, y, touchRadius, touchRadius);
        adjustedPoint = adjustTouchPoint(point);
        origin = bounds.top;
        shouldEvaluateTo('Math.floor((adjustedPoint.y - origin) / rowHeight)', row);
    }

    function testDirectTouches() {
        debug('test direct touches');
        // Touches centered on the blank line should not be adjusted a neighboring text line.
        for (var row = 0; row < 3; row++) {
            for (var offset = -touchOffset; offset <= touchOffset; offset += touchOffset) {
                testTouchOnRow(row, offset);
            }
        }
    }

    function testTouchOnBoundary(position) {
        var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), position, touchOffset, touchRadius, touchRadius);
        testTouchPoint(touchpoint, element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
    }

    function testIndirectTouches() {
      debug('test indirect touches');
      testTouchOnBoundary('bottom');
      testTouchOnBoundary('left');
      testTouchOnBoundary('right');
      testTouchOnBoundary('top');
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description('Tests touch adjustment on a text-area.');
            debug('test textarea');
            element = document.getElementById('text-area');
            rowHeight = 15; // Height of each row is line-height + 1
            testDirectTouches();
            testIndirectTouches();
            debug('test richly editable div');
            element = document.getElementById('rich-text');
            rowHeight = 14;
            testDirectTouches();
            testIndirectTouches();
        }
    }
    runTests();
</script>
</body>
</html>