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