<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("This test examines the order of form associated elements which are classified as 'listed'.");

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

function checkOrder(victims) {
    if (owner.elements.length != victims.length)
        return 'length mismatch, elements.length = ' + owner.elements.length +
               ', expected length = ' + victims.length;
    for (var i = 0; i < victims.length; ++i)
        if (owner.elements[i] != victims[i])
            return 'element mismatch at index ' + i;
    return 'OK';
}

debug('- Checks the order of form associated elements.');
container.innerHTML = '<form id=owner>' +
    '<button name=victim></button>' +
    '<fieldset name=victim>Test</fieldset>' +
    '<input name=victim/>' +
    '<keygen name=victim></keygen>' +
    '<label name=victim></label>' +
    '<meter name=victim></meter>' +
    '<object name=victim></object>' +
    '<output name=victim></output>' +
    '<progress name=victim></progress>' +
    '<select name=victim></select>' +
    '<textarea name=victim></textarea>'+
    '</form>';
owner = document.getElementById('owner');
var button = document.getElementsByTagName('button')[0];
var fieldset = document.getElementsByTagName('fieldset')[0];
var input = document.getElementsByTagName('input')[0];
var keygen = document.getElementsByTagName('keygen')[0];
var label = document.getElementsByTagName('label')[0];
var meter = document.getElementsByTagName('meter')[0];
var object = document.getElementsByTagName('object')[0];
var output = document.getElementsByTagName('output')[0];
var progress = document.getElementsByTagName('progress')[0];
var select = document.getElementsByTagName('select')[0];
var textarea = document.getElementsByTagName('textarea')[0];
shouldBe('checkOrder([button, fieldset, input, object, output, select, textarea])', '"OK"');

debug('');
debug('- Checks the order after some elements removed/inserted.');
owner.removeChild(object);
shouldBe('checkOrder([button, fieldset, input, output, select, textarea])', '"OK"');
owner.removeChild(button);
shouldBe('checkOrder([fieldset, input, output, select, textarea])', '"OK"');
owner.insertBefore(object, fieldset);
shouldBe('checkOrder([object, fieldset, input, output, select, textarea])', '"OK"');
owner.appendChild(button);
shouldBe('checkOrder([object, fieldset, input, output, select, textarea, button])', '"OK"');

debug('');
debug('- Checks the order of form associated elements with form attribute.');
container.innerHTML = '<button name=victim form=owner></button>' +
    '<fieldset name=victim form=owner>Test</fieldset>' +
    '<input name=victim form=owner />' +
    '<keygen name=victim form=owner></keygen>' +
    '<form id=owner>' +
    '<label name=victim></label>' +
    '<meter name=victim></meter>' +
    '<object name=victim></object>' +
    '</form>' +
    '<output name=victim form=owner></output>' +
    '<progress name=victim form=owner></progress>' +
    '<select name=victim form=owner></select>' +
    '<textarea name=victim form=owner></textarea>';
owner = document.getElementById('owner');
button = document.getElementsByTagName('button')[0];
fieldset = document.getElementsByTagName('fieldset')[0];
input = document.getElementsByTagName('input')[0];
keygen = document.getElementsByTagName('keygen')[0];
label = document.getElementsByTagName('label')[0];
meter = document.getElementsByTagName('meter')[0];
object = document.getElementsByTagName('object')[0];
output = document.getElementsByTagName('output')[0];
progress = document.getElementsByTagName('progress')[0];
select = document.getElementsByTagName('select')[0];
textarea = document.getElementsByTagName('textarea')[0];
shouldBe('checkOrder([button, fieldset, input, object, output, select, textarea])', '"OK"');

debug('');
debug('- Checks the order after some elements removed/inserted with form attribute.');
owner.removeChild(object);
shouldBe('checkOrder([button, fieldset, input, output, select, textarea])', '"OK"');
container.removeChild(button);
shouldBe('checkOrder([fieldset, input, output, select, textarea])', '"OK"');
container.removeChild(textarea);
shouldBe('checkOrder([fieldset, input, output, select])', '"OK"');
owner.appendChild(object);
shouldBe('checkOrder([fieldset, input, object, output, select])', '"OK"');
container.insertBefore(textarea, fieldset);
shouldBe('checkOrder([textarea, fieldset, input, object, output, select])', '"OK"');
container.appendChild(button);
shouldBe('checkOrder([textarea, fieldset, input, object, output, select, button])', '"OK"');
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>