<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
<style>
    .result {
        font-family:monospace;
    }
    .target {
        background-color:silver;
        border:1px solid;
        cursor:default;
    }
</style>
<title>Press Targets Center Point</title>
</head>
<body>

<div class="target" id="t0" style="height: 18px; width:160px;">target</div>
<p>Actual: <span class="result" id="a0">waiting</span><br>Expected: <span class="result" id="e0">waiting</span></p>

<div class="target" id="t1" style="-webkit-transform:translate(160px, 160px); height: 18px; width:240px;">translate transform target</div>
<p>Actual: <span class="result" id="a1">waiting</span><br>Expected: <span class="result" id="e1">waiting</span></p>

<div class="target" id="t2" style="-webkit-writing-mode:vertical-lr; width: 18px;">vertical left-to-right writing mode target</div>
<p>Actual: <span class="result" id="a2">waiting</span><br>Expected: <span class="result" id="e2">waiting</span></p>

<div class="target" id="t3" style="direction:rtl; height: 18px; width:240px;">right-to-left direction target</div>
<p>Actual: <span class="result" id="a3">waiting</span><br>Expected: <span class="result" id="e3">waiting</span></p>

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

<script>
    description("This tests that press targets the receiving elements center point.");
    
    var targetCount = document.getElementsByClassName("target").length;
    
    for (var i = 0; i < targetCount; ++i) {
        (function(i) {
            document.getElementById("t" + i).addEventListener("click", function(e) {
                document.getElementById("a" + i).innerHTML = "(" + e.clientX + ", " + e.clientY + ")";
            });
        })(i);
        
        var targetClientRect = document.getElementById("t" + i).getBoundingClientRect();
        var targetClientX = Math.round(targetClientRect.left + targetClientRect.width / 2);
        var targetClientY = Math.round(targetClientRect.top + targetClientRect.height / 2);
        document.getElementById("e" + i).innerHTML = "(" + targetClientX + ", " + targetClientY + ")";
    }
    
    if (window.accessibilityController) {
        window.jsTestIsAsync = true;
        
        // Press all targets.
        accessibilityPress(0);
    }
    
    function accessibilityPress(i) {
        if (i == targetCount)
            finishJSTest();
        
        accessibilityController.accessibleElementById("t" + i).press();
        setTimeout(function() {
            accessibilityPress(i+1);
        }, 10);
    }
</script>

<script src="../resources/js-test-post.js"></script>
</body>
</html>