test_datalist_element.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <title>Test for the datalist element</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

</head>

<body>

<p id="display"></p>

<div id="content" style="display: none">

  <datalist>

  </datalist>

</div>

<pre id="test">

<script type="application/javascript">

/** Test for Bug 555840 **/

function checkClassesAndAttributes()

  var d = document.getElementsByTagName('datalist');

  is(d.length, 1, "One datalist has been found");

  d = d[0];

  ok(d instanceof HTMLDataListElement,

     "The datalist should be instance of HTMLDataListElement");

  ok('options' in d, "datalist has an options IDL attribute");

  ok(d.options, "options IDL attribute is not null");

  ok(!d.getAttribute('options'), "datalist has no options content attribute");

  ok(d.options instanceof HTMLCollection,

     "options IDL attribute should be instance of HTMLCollection");

function checkOptions()

  var testData = [

    /* [ Child list, Function modifying children, Recognized options ] */

    [['option'], null, 1],

    [['option', 'option', 'option', 'option'], null, 4],

    /* Disabled options are not valid. */

    [['option'], function(d) { d.childNodes[0].disabled = true; }, 0],

    [['option', 'option'], function(d) { d.childNodes[0].disabled = true; }, 1],

    /* Non-option elements are not recognized. */

    [['input'], null, 0],

    [['input', 'option'], null, 1],

    [['input', 'textarea'], null, 0],

    /* .value and .label are not needed to be valid options. */

    [['option', 'option'], function(d) { d.childNodes[0].value = 'value'; }, 2],

    [['option', 'option'], function(d) { d.childNodes[0].label = 'label'; }, 2],

    [['option', 'option'], function(d) { d.childNodes[0].value = 'value'; d.childNodes[0].label = 'label'; }, 2],

    [['select'],

     function(d) {

       var s = d.childNodes[0];

       s.appendChild(new Option("foo"));

       s.appendChild(new Option("bar"));

},

2],

    [['select'],

     function(d) {

       var s = d.childNodes[0];

       s.appendChild(new Option("foo"));

       s.appendChild(new Option("bar"));

       var label = document.createElement("label");

       d.appendChild(label);

       label.appendChild(new Option("foobar"));

},

3],

    [['select'],

     function(d) {

       var s = d.childNodes[0];

       s.appendChild(new Option("foo"));

       s.appendChild(new Option("bar"));

       var label = document.createElement("label");

       d.appendChild(label);

       label.appendChild(new Option("foobar"));

       s.appendChild(new Option())

},

4],

     [[], function(d) { d.appendChild(document.createElementNS("foo", "option")); }, 0]

];

  var d = document.getElementsByTagName('datalist')[0];

  var cachedOptions = d.options;

  testData.forEach(function(data) {

    data[0].forEach(function(e) {

      d.appendChild(document.createElement(e));

})

    /* Modify children. */

    if (data[1]) {

      data[1](d);

    is(d.options, cachedOptions, "Should get the same object")

    is(d.options.length, data[2],

       "The number of recognized options should be " + data[2])

    for (var i = 0; i < d.options.length; ++i) {

      is(d.options[i].localName, "option",

         "Should get an option for d.options[" + i + "]")

    /* Cleaning-up. */

    d.textContent = "";

})

checkClassesAndAttributes();

checkOptions();

</script>

</pre>

</body>

</html>