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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html>
<html>
<title>HTMLSelectListElement Test: popover position with zoom</title>
<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
#selectList0 {
position: absolute;
top: 0px;
left: 0px;
zoom: 2;
}
#selectList1 {
position: absolute;
bottom: 0px;
left: 0px;
zoom: 1.5;
}
#selectList1-popover {
zoom: 2;
}
#selectList2 {
position: absolute;
top: 0px;
right: 0px;
zoom: 3;
}
#selectList3 {
position: absolute;
bottom: 0px;
right: 0px;
zoom: 4;
}
#selectList3-popover {
zoom: 1.5;
}
</style>
<selectlist id="selectList0">
<button type=selectlist id="selectList0-button">Custom bottom left</button>
<listbox id="selectList0-popover">
<option>bottom left</option>
<option>two</option>
<option>three</option>
</listbox>
</selectlist>
<br>
<selectlist id="selectList1">
<button type=selectlist id="selectList1-button">Custom top left</button>
<listbox id="selectList1-popover">
<option>top left</option>
<option>two</option>
<option>three</option>
</listbox>
</selectlist>
<selectlist id="selectList2">
<button type=selectlist id="selectList2-button">Custom bottom right</button>
<listbox id="selectList2-popover">
<option>bottom right</option>
<option>two</option>
<option>three</option>
</listbox>
</selectlist>
<selectlist id="selectList3">
<button type=selectlist id="selectList3-button">Custom top right</button>
<listbox id="selectList3-popover">
<option>top right</option>
<option>two</option>
<option>three</option>
</listbox>
</selectlist>
<script>
function clickOn(element) {
const actions = new test_driver.Actions();
return actions.pointerMove(0, 0, {origin: element})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
}
promise_test(async () => {
const selectList0 = document.getElementById("selectList0");
const selectList0Popover = document.getElementById("selectList0-popover");
const selectList0Button = document.getElementById("selectList0-button");
await clickOn(selectList0);
assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().bottom - selectList0Popover.getBoundingClientRect().top)), 0);
assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().left - selectList0Popover.getBoundingClientRect().left)), 0);
}, "The popover should be bottom left positioned");
promise_test(async () => {
const selectList1 = document.getElementById("selectList1");
const selectList1Popover = document.getElementById("selectList1-popover");
const selectList1Button = document.getElementById("selectList1-button");
selectList1Button.click();
assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().top - selectList1Popover.getBoundingClientRect().bottom * 2)), 0);
assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().left - selectList1Popover.getBoundingClientRect().left * 2)), 0);
}, "The popover should be top left positioned");
promise_test(async () => {
const selectList2 = document.getElementById("selectList2");
const selectList2Popover = document.getElementById("selectList2-popover");
const selectList2Button = document.getElementById("selectList2-button");
selectList2Button.click();
assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().bottom - selectList2Popover.getBoundingClientRect().top)), 0);
assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().right - selectList2Popover.getBoundingClientRect().right)), 0);
}, "The popover should be bottom right positioned");
promise_test(async () => {
const selectList3 = document.getElementById("selectList3");
const selectList3Popover = document.getElementById("selectList3-popover");
const selectList3Button = document.getElementById("selectList3-button");
selectList3Button.click();
assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().top - selectList3Popover.getBoundingClientRect().bottom * 1.5)), 0);
assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().right - selectList3Popover.getBoundingClientRect().right * 1.5)), 0);
}, "The popover should be top right positioned");
</script>
|
