<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.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>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>