Use testRunner instead of layoutTestController in tests still found to be using layou...
[WebKit-https.git] / LayoutTests / fast / forms / datalist / update-range-with-datalist.html
1 <style>
2 .test {
3     margin: 0;
4     padding: 10px;
5     width: 300px;
6     height: 60px;
7     float: left;
8 }
9 </style>
10
11 <p>Tests 1-10 should have a tick at 80%. Tests 11 and 12 should have no ticks.</p>
12
13 <div class="test">
14     <h4>Test 1: Changing option value</h4>
15     <input type="range" list="list1" />
16     <datalist id="list1">
17         <option id="option1">20</option>
18     </datalist>
19     <script>
20     function test1() {
21         document.getElementById("option1").value = "80";
22     };
23     </script>
24 </div>
25
26 <div class="test">
27     <h4>Test 2: Changing option attribute</h4>
28     <input type="range" list="list2" />
29     <datalist id="list2">
30         <option id="option2">20</option>
31     </datalist>
32     <script>
33     function test2() {
34         document.getElementById("option2").setAttribute("value", "80");
35     };
36     </script>
37 </div>
38
39 <div class="test">
40     <h4>Test 3: Changing option text content</h4>
41     <input type="range" list="list3" />
42     <datalist id="list3">
43         <option id="option3">20</option>
44     </datalist>
45     <script>
46     function test3() {
47         document.getElementById("option3").textContent = "80";
48     };
49     </script>
50 </div>
51
52 <div class="test">
53     <h4>Test 4: Set datalist</h4>
54     <input type="range" id="input4" />
55     <datalist id="list4">
56         <option>80</option>
57     </datalist>
58     <script>
59     function test4() {
60         document.getElementById("input4").setAttribute("list", "list4");
61     };
62     </script>
63 </div>
64
65 <div class="test">
66     <h4>Test 5: Set another datalist</h4>
67     <input type="range" id="input5" list="list5-1" />
68     <datalist id="list5-1">
69         <option>20</option>
70     </datalist>
71     <datalist id="list5-2">
72         <option>80</option>
73     </datalist>
74     <script>
75     function test5() {
76         document.getElementById("input5").setAttribute("list", "list5-2");
77     };
78     </script>
79 </div>
80
81 <div class="test">
82     <h4>Test 6: Reassign datalist id</h4>
83     <input type="range" list="list6-1" />
84     <datalist id="list6-2">
85         <option>80</option>
86     </datalist>
87     <script>
88     function test6() {
89         document.getElementById("list6-2").id = "list6-1";
90     };
91     </script>
92 </div>
93
94 <div class="test">
95     <h4>Test 7: Reassign datalist in front</h4>
96     <input type="range" list="list7-2" />
97     <datalist id="list7-1">
98         <option>80</option>
99     </datalist>
100     <datalist id="list7-2">
101         <option>20</option>
102     </datalist>
103     <script>
104     function test7() {
105         document.getElementById("list7-1").id = "list7-2";
106     };
107     </script>
108 </div>
109
110 <div class="test">
111     <h4>Test 8: Insert datalist in front</h4>
112     <input type="range" list="list8-1" />
113     <datalist id="list8-1">
114         <option>20</option>
115     </datalist>
116     <script>
117     function test8() {
118         var e = document.createElement("datalist");
119         e.innerHTML = "<option>80</option>";
120         e.id = "list8-1";
121         var f = document.getElementById("list8-1");
122         f.parentNode.insertBefore(e, f);
123     };
124     </script>
125 </div>
126
127 <div class="test">
128     <h4>Test 9: Insert option</h4>
129     <input type="range" list="list9" />
130     <datalist id="list9">
131     </datalist>
132     <script>
133     function test9() {
134         var e = document.createElement("option");
135         e.value = "80";
136         document.getElementById("list9").appendChild(e);
137     };
138     </script>
139 </div>
140
141 <div class="test">
142     <h4>Test 10: Remove option</h4>
143     <input type="range" list="list10" />
144     <datalist id="list10">
145         <option id="option10">20</option>
146         <option>80</option>
147     </datalist>
148     <script>
149     function test10() {
150         var e = document.getElementById("option10");
151         e.parentNode.removeChild(e);
152     };
153     </script>
154 </div>
155
156 <div class="test">
157     <h4>Test 11: Insert non-datalist in front</h4>
158     <input type="range" list="list11" />
159     <datalist id="list11">
160         <option>20</option>
161     </datalist>
162     <script>
163     function test11() {
164         var e = document.createElement("div");
165         e.id = "list11";
166         var f = document.getElementById("list11");
167         f.parentNode.insertBefore(e, f);
168     };
169     </script>
170 </div>
171
172 <div class="test">
173     <h4>Test 12: Remove datalist</h4>
174     <input type="range" list="list12" />
175     <datalist id="list12">
176         <option>20</option>
177     </datalist>
178     <script>
179     function test12() {
180         var e = document.getElementById("list12");
181         e.parentNode.removeChild(e);
182     };
183     </script>
184 </div>
185
186 <button id="button">Run tests.</button>
187
188 <script>
189 if (window.testRunner)
190     testRunner.dumpAsText(true);
191
192 function clickOn(element)
193 {
194     var x = element.offsetLeft + element.offsetWidth / 2;
195     var y = element.offsetTop + element.offsetHeight / 2;
196     eventSender.mouseMoveTo(x, y);
197     eventSender.mouseDown();
198     eventSender.mouseUp();
199     eventSender.mouseMoveTo(0, 0);
200 }
201
202 var button = document.getElementById("button");
203 button.onclick = function() {
204     test1();
205     test2();
206     test3();
207     test4();
208     test5();
209     test6();
210     test7();
211     test8();
212     test9();
213     test10();
214     test11();
215     test12();
216 };
217 if (window.eventSender)
218     clickOn(button);
219 </script>