1<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2<html>
3<head>
4<script src="../../resources/js-test-pre.js"></script>
5</head>
6<body>
7<p id="description"></p>
8<div id="console"></div>
9<script>
10description('Clicking on items of <select> with padding set.');
11
12var parent = document.createElement('div');
13parent.innerHTML = '<select id="sl1" multiple size=5>'
14 + '<option id="opt1">one</option>'
15 + '<option id="opt2">two</option>'
16 + '<option id="opt3">three</option>'
17 + '<option id="opt4">four</option>'
18 + '<option id="opt5">five</option>'
19 + '<option id="opt6">six</option>'
20 + '<option id="opt7">seven</option>'
21 + '<option id="opt8">eight</option>'
22 + '<option id="opt9">nine</option>'
23 + '<option id="opt10">ten</option>'
24 + '<option id="opt11">eleven</option>'
25 + '<option id="opt12">twelve</option>'
26 + '<option id="opt13">thirteen</option>'
27 + '<option id="opt14">fourteen</option>'
28 + '<option id="opt15">fifteen</option>'
29 + '<option id="opt16">sixteen</option>'
30 + '<option id="opt17">seventeen</option>'
31 + '</select>';
32document.body.appendChild(parent);
33
34// Determine the item height.
35var sl1 = document.getElementById('sl1');
36var sl2 = document.getElementById('sl2');
37var itemHeight = Math.floor(sl1.offsetHeight / sl1.size);
38sl1.removeAttribute('size');
39var height = itemHeight * 9;
40sl1.setAttribute('style', 'height: ' + height + 'px; border: 0px; padding-top: 0px; padding-left: 25px; padding-right: 25px; padding-bottom: 20px;');
41
42var kClickOnPaddingLeftArea = 1;
43var kClickOnPaddingRightArea = 2;
44var kClickOnOptionElement = 3;
45
46function mouseDownOnSelect(selId, index, fudge)
47{
48 var sl = document.getElementById(selId);
49 var opt = document.getElementById("opt" + index);
50 var paddingTop = 0;
51 var paddingLeft = 25;
52 var paddingRight = 25;
53
54 // default clicking to the middle of the option element.
55 var x = ((sl.offsetLeft + sl.offsetWidth - paddingRight) - (sl.offsetLeft + paddingLeft)) / 2;
56 x += sl.offsetLeft + paddingLeft;
57
58 var y = (index - 1) * itemHeight + itemHeight / 3 - window.pageYOffset + paddingTop;
59 y += sl.offsetTop;
60
61 if (fudge == kClickOnPaddingLeftArea) {
62 x = opt.offsetLeft + (paddingLeft / 2); // middle of the padding left area.
63 } else if (fudge == kClickOnOptionElement) {
64 // do nothing, already set as default value above.
65 } else if (fudge == kClickOnPaddingRightArea) {
66 x = opt.offsetRight + (paddingRight / 2); // middle of the padding right area.
67 }
68 var event = document.createEvent("MouseEvent");
69 event.initMouseEvent("mousedown", true, true, document.defaultView, 1, x, y, x, y, false, false, false, false, 0, document);
70 sl.dispatchEvent(event);
71}
72
73function selectionPattern(selectId)
74{
75 var select = document.getElementById(selectId);
76 var result = "";
77 for (var i = 0; i < select.options.length; i++)
78 result += select.options[i].selected ? '1' : '0';
79 return result;
80}
81
82window.onload = function () {
83 mouseDownOnSelect("sl1", 2, kClickOnPaddingRightArea);
84 shouldBe('selectionPattern("sl1")', '"00000000000000000"');
85
86 mouseDownOnSelect("sl1", 2, kClickOnOptionElement);
87 shouldBe('selectionPattern("sl1")', '"01000000000000000"');
88
89 mouseDownOnSelect("sl1", 1, kClickOnOptionElement);
90 shouldBe('selectionPattern("sl1")', '"10000000000000000"');
91
92 mouseDownOnSelect("sl1", 2, kClickOnPaddingRightArea);
93 shouldBe('selectionPattern("sl1")', '"10000000000000000"');
94
95 mouseDownOnSelect("sl1", 2, kClickOnPaddingLeftArea);
96 shouldBe('selectionPattern("sl1")', '"10000000000000000"');
97
98 mouseDownOnSelect("sl1", 9, kClickOnOptionElement);
99 shouldBe('selectionPattern("sl1")', '"00000000100000000"');
100};
101</script>
102<script src="../../resources/js-test-post.js"></script>
103</body>
104</html>