LayoutTests/fast/forms/form-collection-elements-order.html - WebKit - Git at Google

 <!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>
 <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, keygen, object, output, select, textarea])', '"OK"');

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

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