summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/forms/select/listbox-hit-test-zoomed.html
blob: 5f105b574c469843d1c15d8a066a2f01327dddd0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body { overflow: hidden; }
html {
    zoom: 120%;
}
#sl1 option {
    font-size: 15px;
    padding: 0;
}
</style>
<script>
var sl;
window.jsTestIsAsync = true;

function test() {
    description("Make sure mouse operations on listbox SELECT element work well even if it is zoomed.");
    sl = document.getElementById("sl1");

    mouseDownOnSelect(1);
    shouldBe("sl.selectedIndex", "1");

    mouseDownOnSelect(6);
    shouldBe("sl.selectedIndex", "6");

    finishJSTest();
}
            
function mouseDownOnSelect(index) {
    var itemHeight = (sl.scrollHeight - 20) * 1.2 / sl.length;
    var borderPaddingTop = 20 * 1.2;
    var borderPaddingLeft = 20 * 1.2;
    var y = index * itemHeight - window.pageYOffset + borderPaddingTop + itemHeight / 2;

    var clickX = sl.offsetLeft * 1.2 + borderPaddingLeft + 5;
    var clickY = sl.offsetTop * 1.2 + y;
    eventSender.mouseMoveTo(clickX, clickY);
    eventSender.mouseDown();
    eventSender.mouseUp();
}
</script>
<script src="../../../resources/js-test.js"></script>
</head>
<body onload="test()">

<select id="sl1" multiple style="height: 160px; border: 10px solid; padding: 10px;">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
<option>seven</option>
<option>eight</option>
<option>nine</option>
<option>ten</option>
<option>eleven</option>
<option>twelve</option>
<option>thirteen</option>
<option>fourteen</option>
<option>fifteen</option>
<option>sixteen</option>
<option>seventeen</option>
</select>
    
</body>
</html>