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

<datalist id="list80">
    <option>80</option>
</datalist>

<div class="test">
    <h4>Test 1: Changing option value</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 2: Changing option attribute</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 3: Changing option text content</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 4: Set datalist</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 5: Set another datalist</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 6: Reassign datalist id</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 7: Reassign datalist in front</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 8: Insert datalist in front</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 9: Insert option</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 10: Remove option</h4>
    <input type="range" list="list80" />
</div>

<div class="test">
    <h4>Test 11: Insert non-datalist in front</h4>
    <input type="range" />
</div>

<div class="test">
    <h4>Test 12: Remove datalist</h4>
    <input type="range" />
</div>

<button id="button">Run tests.</button>