<!DOCTYPE html>
<html>
<head>
    <title>Touch Adjustment : Testing that active will be set on a tapDown - bug 96677</title>
    <script src="../resources/js-test-pre.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        #sandbox {
            position: absolute;
            left: 0px;
            top: 100px;
        }
        a {
            background-color: rgb(255,255,255);
        }
        a:active {
            background-color: rgb(0,0,255);
        }        
    </style>
</head>

<body>

<div id="sandbox">
<p><a href="" id="link1">I</a> propose to consider <a href="" id="link2">the question</a>, "Can machines think?"<br>This should begin with definitions of the meaning of the terms "machine" and <a href="" id="link3">"think."</a></p>
</div>

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

<script>
    var element;
    var adjustedNode;
    // Set up shortcut access to elements
    var e = {};
    ['sandbox', 'link1', 'link2', 'link3'].forEach(function(a) {
        e[a] = document.getElementById(a);
    });
    
    var curElement;
    
    function isLinkActive()
    {
        // These need to match the background-color used above, after round-tripping.
        var defaultColor = "rgb(255, 255, 255)";
        var activeColor = "rgb(0, 0, 255)";
    
        color = window.getComputedStyle(curElement).backgroundColor;
        if (color == activeColor)
            return true;
        if (color != defaultColor)
            testFailed('Got unexpected backgroundColor: ' + color);
        return false;
    }
    
    function testTapDown(touchpoint, element)
    {
        curElement = element;
        if (isLinkActive()) testFailed('Link unexpectedly active on entry');
        eventSender.gestureTapDown(touchpoint.x, touchpoint.y, touchpoint.width, touchpoint.height);
        shouldBeTrue("isLinkActive()");
        eventSender.gestureTapCancel(touchpoint.x, touchpoint.y);
        if (isLinkActive()) testFailed('Link unexpectedly active on exit');
    }

    function testDirectTouch(element)
    {
        // Touch directly in the center of the element.
        var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'center', 0, 20, 30);
        if (document.elementFromPoint(touchpoint.x, touchpoint.y) != element)
            testFailed('Direct touch ended up on some other element');
        testTapDown(touchpoint, element);
    }

    function isDescendantOf(parent, child)
    {
        var n = child;
        while(n) {
            if(n==parent)
                return true;
            n = n.parentNode;
        }
        return false;
    }
    
    function testIndirectTouch(element)
    {
        // Touch just right of the element.
        var touchpoint = offsetTouchPoint(findAbsoluteBounds(element), 'right', 10, 30, 20);
        if (isDescendantOf(element, document.elementFromPoint(touchpoint.x, touchpoint.y)))
            testFailed('Indirect touch ended up still on top of the element');
        testTapDown(touchpoint, element);
    }

    function testDirectTouches()
    {
        debug('Testing direct hits.');
        testDirectTouch(e.link1);
        testDirectTouch(e.link2);
        testDirectTouch(e.link3);
    }

    function testIndirectTouches()
    {
        debug('Testing indirect hits.');
        testIndirectTouch(e.link1);
        testIndirectTouch(e.link2);
        testIndirectTouch(e.link3);
    }

    function runTests()
    {
        if (!window.eventSender) {
            debug('This test requires DumpRenderTree');
            return;
        }
        if (!window.eventSender.gestureTapDown) {
            debug('GestureTapDown not supported by this platform');
            return;
        } 
          
        description('Tests that tapDown will trigger the active state.');
        testIndirectTouches();
        testDirectTouches();
        e.sandbox.style.display = 'none';
    }
    runTests();
</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>