rotated-node.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <title>Test touch adjustment to a non-rectilinear element.</title>
    <script src="../resources/js-test.js"></script>
    <script src="resources/touchadjustment.js"></script>
    <style>
        body { margin: 0px; padding: 0px; }
        #container {
            -webkit-box-sizing: border-box;
            position: relative;
            border: 1px solid black;
            height: 100px;
            width: 100px;
        }
        #rotated {
            -webkit-box-sizing: border-box;
            transform: rotate(45deg);
            border: 1px solid black;
            height: 40px;
            left: 10px;
            position: absolute;
            top: 10px;
            width: 40px;
        }
    </style>

</head>

<body>

<div id="container">
    <div id="rotated"></div>
</div>

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

<script>
    // Set up shortcut access to elements
    var e = {};
    ['container', 'rotated'].forEach(function(a) {
        e[a] = document.getElementById(a);
        e[a].addEventListener('click', function() {}, false);
    });

    function testDirectTouches()
    {
        debug('Direct Touches');

        testTouchPoint(touchPoint(30, 30, 20), e.rotated);
        testTouchPoint(touchPoint(20, 30, 20), e.rotated);
        testTouchPoint(touchPoint(40, 30, 20), e.rotated);
        testTouchPoint(touchPoint(30, 20, 20), e.rotated);
        testTouchPoint(touchPoint(30, 40, 20), e.rotated);

        testTouchPoint(touchPoint(80, 80, 20), e.container);
        testTouchPoint(touchPoint(80, 20, 20), e.container);
        testTouchPoint(touchPoint(20, 80, 20), e.container);
    }

    function testAdjustedTouches()
    {
        debug('\nAdjusted Touches');

        // Touch overlaps center of element.
        testTouchPoint(touchPoint(10, 10, 30), e.rotated);

        // Touch overlaps corner of element.
        testTouchPoint(touchPoint(20, 0, 20), e.rotated);

        debug('\nNear Misses');

        // Touch overlaps bounding-box of element, but not the actual bounds.
        testTouchPoint(touchPoint(71, 0, 20), e.container);
        testTouchPoint(touchPoint(71, 60, 20), e.container);
    }

    function testAdjustedPoints()
    {
        debug('\nAdjusted point within bounds');
        var adjustedPoint = adjustTouchPoint(touchPoint(20, 0, 20))
        // Note: we allow 1 pixel of slop here due to corresponding 1px
        // padding FIXME in HitTestLocation::rectForPoint.
        shouldBeWithin(adjustedPoint, touchPoint(20.5, 0.5, 20.5));

        adjustedPoint = adjustTouchPoint(touchPoint(60, 60, 20))
        shouldBeWithin(adjustedPoint, touchPoint(60, 60, 20));

        adjustedPoint = adjustTouchPoint(touchPoint(0, 60, 40, 20))
        shouldBeWithin(adjustedPoint, touchPoint(0, 60, 40, 20));

        adjustedPoint = adjustTouchPoint(touchPoint(70, 20, 20, 40))
        shouldBeWithin(adjustedPoint, touchPoint(70, 20, 20, 40));
    }

    function runTests()
    {
        document.addEventListener('click', function() {}, false);
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description(document.title);
            testDirectTouches();
            testAdjustedTouches();
            testAdjustedPoints()
            e.container.style.display = 'none';
        }
    }
    runTests();
</script>

</body>
</html>
chromium/third_party/blink/web_tests/touchadjustment/rotated-node.html
