<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<div id="test" style="display:none;"></div>
<script>
description('Test for the datalist element.');
var testElement = document.getElementById("test");
function createForm(id) {
var form = document.createElement("form");
form.id = id;
testElement.appendChild(form);
return form;
};
function createInput(form) {
var input = document.createElement("input");
input.setAttribute("form", form);
testElement.appendChild(input);
return input;
};
function test1() {
debug("Test 1: Insert new input after form.");
form = createForm("test1");
input = createInput("test1");
shouldBe('form.elements.length', '1');
shouldBe('form.elements[0]', 'input');
};
function test2() {
debug("Test 2: Insert two forms with same id.");
input = createInput("test2");
form1 = createForm("test2");
form2 = createForm("test2");
shouldBe('form1.elements.length', '1');
shouldBe('form2.elements.length', '0');
shouldBe('form1.elements[0]', 'input');
};
function test3() {
debug("Test 3: Change form id.");
form = createForm("test3-1");
input = createInput("test3-2");
form.id = "test3-2";
shouldBe('form.elements.length', '1');
shouldBe('form.elements[0]', 'input');
};
function test4() {
debug("Test 4: Order.");
input1 = createInput("test4");
input2 = createInput("test4");
form = createForm("test4");
input3 = document.createElement("input");
form.appendChild(input3);
input4 = createInput("test4");
input5 = createInput("test4");
shouldBe('form.elements.length', '5');
shouldBe('form.elements[0]', 'input1');
shouldBe('form.elements[1]', 'input2');
shouldBe('form.elements[2]', 'input3');
shouldBe('form.elements[3]', 'input4');
shouldBe('form.elements[4]', 'input5');
input2.setAttribute("form", "");
shouldBe('form.elements.length', '4');
shouldBe('form.elements[0]', 'input1');
shouldBe('form.elements[1]', 'input3');
shouldBe('form.elements[2]', 'input4');
shouldBe('form.elements[3]', 'input5');
};
function test5() {
debug("Test 5: Add new element with form attribute to the form.");
form = document.createElement("form");
form.id = "test5";
form.innerHTML = "<textarea id=\"test5-input1\"></textarea><input form=test5 id=\"test5-input2\"><select id=\"test5-input3\">";
test.appendChild(form);
input1 = document.getElementById("test5-input1");
input2 = document.getElementById("test5-input2");
input3 = document.getElementById("test5-input3");
shouldBe('form.elements.length', '3');
shouldBe('form.elements[0]', 'input1');
shouldBe('form.elements[1]', 'input2');
shouldBe('form.elements[2]', 'input3');
};
test1();
test2();
test3();
test4();
test5();
</script>
</body>
</html>