<!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>
function $(id) { return document.getElementById(id); }
description('HTMLFormElement::reportValidity() with cases that event handlers called by reportValidity() updates DOM structure.')
var parent = document.createElement('div');
document.body.appendChild(parent);
// ----------------------------------------------------------------
debug('The target form is removed.');
parent.innerHTML = '<form id=f1><input name=i id=i required></form>';
var handler = function(event) {
parent.innerHTML = '';
};
$('i').addEventListener('invalid', handler, false);
// The specificiation doesn't define the behavior in this case.
// It's ok if WebKit doesn't crash.
shouldBeFalse('$("f1").reportValidity()');
// ----------------------------------------------------------------
debug('');
debug('A control to be checked is removed.');
parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=i2 required></form>';
var handler1 = function(event) {
$('f1').removeChild($('i2'));
};
$('i1').addEventListener('invalid', handler1, false);
var handler2Called = false;
var handler2 = function(event) {
handler2Called = true;
};
$('i2').addEventListener('invalid', handler2, false);
shouldBeFalse('$("f1").reportValidity()');
// If the node was removed from the form, i2.checkValidity() is called, but an
// invalid event is not fired because it is not in any documents.
shouldBeFalse('handler2Called');
shouldBe('document.activeElement', '$("i1")');
// ----------------------------------------------------------------
debug('');
debug('A control that was checked was removed.');
parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=i2 required></form>';
var handler1 = function(event) {
$('f1').removeChild($('i1'));
};
$('i1').addEventListener('invalid', handler1, false);
var handler2Called = false;
var handler2 = function(event) {
handler2Called = true;
};
$('i2').addEventListener('invalid', handler2, false);
shouldBeFalse('$("f1").reportValidity()');
shouldBeTrue('handler2Called');
shouldBe('document.activeElement', '$("i2")');
// ----------------------------------------------------------------
debug('');
debug('A new control is added.');
parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>';
handler2Called = false;
handler2 = function(event) {
handler2Called = true;
};
handler1 = function(event) {
var input = document.createElement('input');
input.name = 'i2';
input.required = true;
input.addEventListener('invalid', handler2, false);
$('f1').appendChild(input);
};
$('i1').addEventListener('invalid', handler1, false);
shouldBeFalse('$("f1").reportValidity()');
// If a new node is added to the form, reportValidity() doesn't handle it.
shouldBeFalse('handler2Called');
shouldBe('document.activeElement', '$("i1")');
// ----------------------------------------------------------------
debug('');
debug('A control is moved to another form.');
parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=i2 required></form>'
+ '<form id=f2></form>';
handler1 = function(event) {
$('f2').appendChild($('i2'));
};
$('i1').addEventListener('invalid', handler1, false);
handler2Called = false;
handler2 = function(event) {
handler2Called = true;
};
$('i2').addEventListener('invalid', handler2, false);
shouldBeFalse('$("f1").reportValidity()');
// The moved control is not checked.
shouldBeFalse('handler2Called');
shouldBe('document.activeElement', '$("i1")');
// ----------------------------------------------------------------
debug('');
debug('A control is moved to another document.');
parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>';
var doc2 = document.implementation.createHTMLDocument();
handler1 = function(event) {
doc2.body.appendChild(doc2.adoptNode($('i1')));
};
$('i1').addEventListener('invalid', handler1, false);
// i1 is not listed in 'unhandled invalid controls' because it was moved to
// another document.
shouldBeTrue('$("f1").reportValidity()');
parent.innerHTML = '';
</script>
</body>
</html>