1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!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>
|
