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