small-target-test.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<title>Touch Adjustment : Improved targetting for small controls - bug 92293</title>
<script src="../resources/js-test.js"></script>
<script src="resources/touchadjustment.js"></script>

<style>
  body {
    margin-inline-start: 20px;
    margin-top: 20px;
  }
  .control-pair {
    margin-bottom: 30px;
  }

  #check {
    border: 1px solid black;
    display: inline-block;
    padding: 5px;
    vertical-align: middle;
  }

  #remove-button {
    border: none;
    background: #999;
    display: inline-block;
    padding: 5px;
    vertical-align: middle;
  }

  #combo-button {
    border: 1px solid #777;
    padding: 5px;
    margin-top: 20px;
  }

  #combo-label {
    border: 1px solid #777;
    height: 1em;
    width: 4em;
  }

  #combo-button,
  #combo-label,
  #drop-down-selector {
    display: inline-block;
    vertical-align: middle;
  }

  #drop-down-selector {
    -webkit-box-sizing: content-box;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #777;
  }
  
</style>

</head>

<body id="mybody">

<div id=sandbox>
    <div class="control-pair">
        <!-- Small checkbox to the left of another control -->
        <div id="check" onclick="onClick();"></div>
        <input id="task" type="text" value="Task 1">
    </div>
    <div class="control-pair">
        <!-- Small remove button to the right of another control -->
        <input id = "item-label" type="text" value = "Option 1">
        <div id = "remove-button" onclick="onClick();"></div>
    </div>
    <div>
        <div id="combo-button">
            <!-- Combo-button controls -->
            <div id = "combo-label" onclick="function() {};"></div>
            <div id = "drop-down-selector" onclick="onClick();"></div>
        </div>
    </div>
</div>

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

<script>
    var touchRadius = 20;
    var touchOffset = 8;

    var element;
    var adjustedNode;

    function onClick()
    {
    }

    function testDirectTouch(id)
    {
        testTouch(id, 'center');
    }

    function testIndirectTouch(id)
    {
        testTouch(id, 'left');
        testTouch(id, 'right');
        testTouch(id, 'top-left');
        testTouch(id, 'top-right');
        testTouch(id, 'bottom-left');
        testTouch(id, 'bottom-right');
        testTouch(id, 'top');
        testTouch(id, 'bottom');
    }

    function testTouch(id, relativePosition)
    {
        var element = document.getElementById(id);
        testTouchPoint(offsetTouchPoint(findAbsoluteBounds(element), relativePosition, touchOffset, touchRadius), element, /* allowTextNodes */ false, /* disallowShadowDOM */ true);
    }

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

        testDirectTouch('check');
        testDirectTouch('task');
        testDirectTouch('item-label');
        testDirectTouch('remove-button');
        testDirectTouch('combo-label');
        testDirectTouch('drop-down-selector');
    }

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

        testIndirectTouch('check');
        testIndirectTouch('remove-button');
        testIndirectTouch('drop-down-selector');
    }

    function runTests()
    {
        if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
            description('Tests if small clickable targets adjacent to larger clickable controls are properly targetted with touch adjustment.');
            testDirectTouches();
            testIndirectTouches();
            document.getElementById('sandbox').style.display = 'none';
        }
    }
    runTests();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/touchadjustment/small-target-test.html
