220 lines
5.0 KiB
HTML
220 lines
5.0 KiB
HTML
<style>
|
|
.test {
|
|
margin: 0;
|
|
padding: 10px;
|
|
width: 300px;
|
|
height: 60px;
|
|
float: left;
|
|
}
|
|
</style>
|
|
|
|
<p>Tests 1-10 should have a tick at 80%. Tests 11 and 12 should have no ticks.</p>
|
|
|
|
<div class="test">
|
|
<h4>Test 1: Changing option value</h4>
|
|
<input type="range" list="list1" />
|
|
<datalist id="list1">
|
|
<option id="option1">20</option>
|
|
</datalist>
|
|
<script>
|
|
function test1() {
|
|
document.getElementById("option1").value = "80";
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 2: Changing option attribute</h4>
|
|
<input type="range" list="list2" />
|
|
<datalist id="list2">
|
|
<option id="option2">20</option>
|
|
</datalist>
|
|
<script>
|
|
function test2() {
|
|
document.getElementById("option2").setAttribute("value", "80");
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 3: Changing option text content</h4>
|
|
<input type="range" list="list3" />
|
|
<datalist id="list3">
|
|
<option id="option3">20</option>
|
|
</datalist>
|
|
<script>
|
|
function test3() {
|
|
document.getElementById("option3").textContent = "80";
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 4: Set datalist</h4>
|
|
<input type="range" id="input4" />
|
|
<datalist id="list4">
|
|
<option>80</option>
|
|
</datalist>
|
|
<script>
|
|
function test4() {
|
|
document.getElementById("input4").setAttribute("list", "list4");
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 5: Set another datalist</h4>
|
|
<input type="range" id="input5" list="list5-1" />
|
|
<datalist id="list5-1">
|
|
<option>20</option>
|
|
</datalist>
|
|
<datalist id="list5-2">
|
|
<option>80</option>
|
|
</datalist>
|
|
<script>
|
|
function test5() {
|
|
document.getElementById("input5").setAttribute("list", "list5-2");
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 6: Reassign datalist id</h4>
|
|
<input type="range" list="list6-1" />
|
|
<datalist id="list6-2">
|
|
<option>80</option>
|
|
</datalist>
|
|
<script>
|
|
function test6() {
|
|
document.getElementById("list6-2").id = "list6-1";
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 7: Reassign datalist in front</h4>
|
|
<input type="range" list="list7-2" />
|
|
<datalist id="list7-1">
|
|
<option>80</option>
|
|
</datalist>
|
|
<datalist id="list7-2">
|
|
<option>20</option>
|
|
</datalist>
|
|
<script>
|
|
function test7() {
|
|
document.getElementById("list7-1").id = "list7-2";
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 8: Insert datalist in front</h4>
|
|
<input type="range" list="list8-1" />
|
|
<datalist id="list8-1">
|
|
<option>20</option>
|
|
</datalist>
|
|
<script>
|
|
function test8() {
|
|
var e = document.createElement("datalist");
|
|
e.innerHTML = "<option>80</option>";
|
|
e.id = "list8-1";
|
|
var f = document.getElementById("list8-1");
|
|
f.parentNode.insertBefore(e, f);
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 9: Insert option</h4>
|
|
<input type="range" list="list9" />
|
|
<datalist id="list9">
|
|
</datalist>
|
|
<script>
|
|
function test9() {
|
|
var e = document.createElement("option");
|
|
e.value = "80";
|
|
document.getElementById("list9").appendChild(e);
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 10: Remove option</h4>
|
|
<input type="range" list="list10" />
|
|
<datalist id="list10">
|
|
<option id="option10">20</option>
|
|
<option>80</option>
|
|
</datalist>
|
|
<script>
|
|
function test10() {
|
|
var e = document.getElementById("option10");
|
|
e.parentNode.removeChild(e);
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 11: Insert non-datalist in front</h4>
|
|
<input type="range" list="list11" />
|
|
<datalist id="list11">
|
|
<option>20</option>
|
|
</datalist>
|
|
<script>
|
|
function test11() {
|
|
var e = document.createElement("div");
|
|
e.id = "list11";
|
|
var f = document.getElementById("list11");
|
|
f.parentNode.insertBefore(e, f);
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h4>Test 12: Remove datalist</h4>
|
|
<input type="range" list="list12" />
|
|
<datalist id="list12">
|
|
<option>20</option>
|
|
</datalist>
|
|
<script>
|
|
function test12() {
|
|
var e = document.getElementById("list12");
|
|
e.parentNode.removeChild(e);
|
|
};
|
|
</script>
|
|
</div>
|
|
|
|
<button id="button">Run tests.</button>
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
|
|
function clickOn(element)
|
|
{
|
|
var x = element.offsetLeft + element.offsetWidth / 2;
|
|
var y = element.offsetTop + element.offsetHeight / 2;
|
|
eventSender.mouseMoveTo(x, y);
|
|
eventSender.mouseDown();
|
|
eventSender.mouseUp();
|
|
eventSender.mouseMoveTo(0, 0);
|
|
}
|
|
|
|
var button = document.getElementById("button");
|
|
button.onclick = function() {
|
|
test1();
|
|
test2();
|
|
test3();
|
|
test4();
|
|
test5();
|
|
test6();
|
|
test7();
|
|
test8();
|
|
test9();
|
|
test10();
|
|
test11();
|
|
test12();
|
|
};
|
|
if (window.eventSender)
|
|
clickOn(button);
|
|
</script>
|