| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Datalist element options</title> |
| <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org"> |
| <link rel=help href="https://html.spec.whatwg.org/multipage/#the-datalist-element"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <div id="log"></div> |
| <label> |
| Number: |
| <input list=numbers> |
| </label> |
| <datalist id=numbers> |
| <label> Select number: |
| <select id=num> |
| <option label="zero" value="0"> |
| <option label="one" value="1"> |
| <option label="two">2 |
| <option label="three" disabled>3 |
| <option> |
| </select> |
| </label> |
| </datalist> |
| <script> |
| test(function(){ |
| var datalist = document.getElementById('numbers'), |
| labels = [], |
| values = []; |
| assert_equals(datalist.options.length, 5); |
| |
| for (var i = 0, len = datalist.options.length; i < len; i++) { |
| assert_equals(datalist.options[i], datalist.options.item(i)); |
| labels.push(datalist.options[i].label); |
| values.push(datalist.options[i].value); |
| } |
| assert_array_equals(labels, ["zero", "one", "two", "three", ""]); |
| assert_array_equals(values, ["0", "1", "2", "3", ""]); |
| }, "options label/value"); |
| |
| test(function(){ |
| assert_false(document.getElementById('num').willValidate); |
| }, "If an element has a datalist element ancestor, it is barred from constraint validation"); |
| </script> |
