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