<!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>
<script>
description("This test examines the order of the elements attribute of a form element with form-associated elements with form attribute or witout form attibute.");

var container = document.createElement('div');
document.body.appendChild(container);

debug('');
debug('- Test for the case where some elements have form attribute but some others not.');
container.innerHTML = '<form id=owner>' +
    '    <input id=input1 name=victim />' +
    '    <input id=input2 name=victim form=owner />' +
    '    <input id=input3 name=victim />' +
    '</form>';
var owner = document.getElementById('owner');
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var input3 = document.getElementById('input3');
shouldBe('owner.elements.length', '3');
shouldBe('owner.elements[0]', 'input1');
shouldBe('owner.elements[1]', 'input2');
shouldBe('owner.elements[2]', 'input3');

container.innerHTML = '<form id=owner>' +
    '    <input id=input1 name=victim form=owner />' +
    '    <input id=input2 name=victim />' +
    '    <input id=input3 name=victim form=owner />' +
    '</form>';
owner = document.getElementById('owner');
input1 = document.getElementById('input1');
input2 = document.getElementById('input2');
input3 = document.getElementById('input3');
shouldBe('owner.elements.length', '3');
shouldBe('owner.elements[0]', 'input1');
shouldBe('owner.elements[1]', 'input2');
shouldBe('owner.elements[2]', 'input3');

debug('');
debug('- Test for inserting/removing a form-associated element without form attribute.');
container.innerHTML = '<input name=victim id=before form=owner />' +
    '<form id=owner action= method=GET>' +
    '    <input name=victim id=inner />' +
    '</form>' +
    '<input name=victim id=after form=owner />';
owner = document.getElementById('owner');
var before = document.getElementById('before');
var inner = document.getElementById('inner');
var after = document.getElementById('after');

var inner2 = document.createElement('input');
inner2.name = 'victim';
inner2.id = 'inner2';
owner.appendChild(inner2);
shouldBe('owner.elements.length', '4');
shouldBe('owner.elements[0]', 'before');
shouldBe('owner.elements[1]', 'inner');
shouldBe('owner.elements[2]', 'inner2');
shouldBe('owner.elements[3]', 'after');

owner.removeChild(inner);
owner.insertBefore(inner, inner2);
shouldBe('owner.elements.length', '4');
shouldBe('owner.elements[0]', 'before');
shouldBe('owner.elements[1]', 'inner');
shouldBe('owner.elements[2]', 'inner2');
shouldBe('owner.elements[3]', 'after');

debug('');
debug('- Test for inserting/removing a form-associated element with form attribute.');
var before2 = document.createElement('input');
before2.name = 'victim';
before2.id = 'before2';
before2.setAttribute('form', 'owner');
container.insertBefore(before2, owner);
var after2 = document.createElement('input');
after2.name = 'victim';
after2.id = 'after2';
after2.setAttribute('form', 'owner');
container.appendChild(after2);
shouldBe('owner.elements.length', '6');
shouldBe('owner.elements[0]', 'before');
shouldBe('owner.elements[1]', 'before2');
shouldBe('owner.elements[2]', 'inner');
shouldBe('owner.elements[3]', 'inner2');
shouldBe('owner.elements[4]', 'after');
shouldBe('owner.elements[5]', 'after2');

container.removeChild(before);
container.removeChild(after);
container.insertBefore(before, before2);
container.insertBefore(after, after2);
shouldBe('owner.elements.length', '6');
shouldBe('owner.elements[0]', 'before');
shouldBe('owner.elements[1]', 'before2');
shouldBe('owner.elements[2]', 'inner');
shouldBe('owner.elements[3]', 'inner2');
shouldBe('owner.elements[4]', 'after');
shouldBe('owner.elements[5]', 'after2');
</script>
</body>
</html>