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
|
<!DOCTYPE html>
<html lang="en">
<title>HTMLSelectListElement Test: nested selects</title>
<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>
<selectlist id="selectList0">
<div popover slot="listbox" behavior="listbox">
<selectlist id="nested0">
<option id="child1">one</option>
<option id="child2">two</option>
</selectlist>
<option id="child3">three</option>
</div>
</selectlist>
<selectlist id="selectList1">
<div popover slot="listbox" behavior="listbox">
<select>
<option>one</option>
<option>two</option>
</select>
<option>three</option>
</div>
</selectlist>
<selectlist id="selectList2">
<div slot="button">
<selectlist id="nested2">
<button type=selectlist id="selectList2-button0">button0</button>
<option id="nested2-option1">one</option>
</selectlist>
<button type=selectlist id="selectList2-button1">button1</button>
</div>
<option>two</option>
</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 nested0 = document.getElementById("nested0");
const child2 = document.getElementById("child2");
assert_equals(selectList0.value, "three", "Options nested in another <selectlist> should not get controller code from outer <selectlist>");
await clickOn(selectList0);
assert_true(selectList0.open);
assert_false(nested0.open);
await clickOn(nested0);
assert_true(nested0.open);
await clickOn(child2);
assert_false(nested0.open);
assert_equals(nested0.value, "two");
assert_true(selectList0.open, "click on option in inner <selectlist> should not close outer <selectlist>");
assert_equals(selectList0.value, "three", "click on option in inner <selectlist> should not change value of outer <selectlist>");
}, "A <selectlist> shouldn't apply controller code to parts nested in a <selectlist> child");
promise_test(async () => {
const selectList1 = document.getElementById("selectList1");
assert_equals(selectList0.value, "three");
}, "A <selectlist> shouldn't apply controller code to parts nested in a <select> child");
promise_test(async () => {
const selectList2 = document.getElementById("selectList2");
const nested2 = document.getElementById("nested2");
const button0 = document.getElementById("selectList2-button0");
const button1 = document.getElementById("selectList2-button1");
const nested2Option1 = document.getElementById("nested2-option1");
assert_false(selectList2.open);
assert_false(nested2.open);
await clickOn(button0);
assert_false(selectList2.open, "Clicking the button of a nested <selectlist> should not open the outer <selectlist>");
assert_true(nested2.open, "Clicking the button of a nested <selectlist> should open the outer <selectlist>");
await clickOn(nested2Option1);
assert_false(nested2.open);
await clickOn(button1);
assert_true(selectList2.open);
assert_false(nested2.open);
}, "A nested button part in a nested <selectlist> shouldn't get controller code even if it comes first in document order");
</script>
|
