<!DOCTYPE HTML>
<html>
 <head>
  <title>input list attribute</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
 </head>
 <body>
  <p>
    <h3>input_list</h3>
  </p>

  <hr>

  <div id="log"></div>

  <form method="post"
      enctype="application/x-www-form-urlencoded"
      action=""
      name="input_form">
    <datalist id="thelist">
      <option value="one">one</option>
      <option value="two">two</option>
    </datalist>

    <p id="non_datalist_first">
    <datalist id="non_datalist_first">
      <option value="one">one</option>
      <option value="two">two</option>
    </datalist>

    <datalist id="datalist_first">
      <option value="one">one</option>
      <option value="two">two</option>
    </datalist>
    <p id="datalist_first">

    <p><input list="thelist" id='input_with_list'></p>
    <p><input id='input_without_list'></p>
    <p><input list="input_with_list" id='input_with_nondatalist_list'></p>
    <p><input list="not_an_id" id='input_with_missing_list'></p>
    <p><input list="non_datalist_first" id='input_with_non_datalist_first'></p>
    <p><input list="datalist_first" id='input_with_datalist_first'></p>
  </form>

  <script>
     test(function() {
        assert_equals(document.getElementById("input_with_list").list, document.getElementById("thelist"));
     }, "getting .list of input must return the datalist with that id");
     test(function() {
        assert_equals(document.getElementById("input_without_list").list, null);
     }, "getting .list of input must return null if it has no list attribute");
     test(function() {
        assert_equals(document.getElementById("input_with_nondatalist_list").list, null);
     }, "getting .list of input must return null if the list attribute is a non-datalist's id");
     test(function() {
        assert_equals(document.getElementById("input_with_missing_list").list, null);
     }, "getting .list of input must return null if the list attribute is no element's id");
     test(function() {
        assert_equals(document.getElementById("input_with_non_datalist_first").list, null);
     }, "getting .list of input must return null if the list attribute is used in a non-datalist earlier than a datalist");
     test(function() {
        assert_equals(document.getElementById("input_with_datalist_first").list, document.querySelector("datalist#datalist_first"));
     }, "getting .list of input must return the datalist with that id even if a later non-datalist also has the id");
  </script>
 </body>
</html>
