<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>