blob: 36e4773dc1069fd6c300630567318be1595acc31 [file] [log] [blame]
<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>