Fix bug where form/fieldset :valid/:invalid won't be recalculated upon control's willValidate change

LayoutTests/fast/forms/form-pseudo-valid-style.html

Index: LayoutTests/fast/forms/form-pseudo-valid-style.html
diff --git a/LayoutTests/fast/forms/form-pseudo-valid-style.html b/LayoutTests/fast/forms/form-pseudo-valid-style.html
index 67285b68f74cf2eb6caa91c35bdbad22a48332de..764481e0d0230f60e62ef4362d294fa36977bd8d 100644
--- a/LayoutTests/fast/forms/form-pseudo-valid-style.html
+++ b/LayoutTests/fast/forms/form-pseudo-valid-style.html
@@ -29,7 +29,7 @@ var subValidColor = 'rgb(0, 127, 0)';
 var parent = document.createElement('div');
 document.body.appendChild(parent);
 
-debug('Removing and adding required text inputs and modifying ther value by a DOM tree mutation:');
+debug('Removing and adding required text inputs and modifying their value by a DOM tree mutation:');
 parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>';
 var form1 = $('form1');
 var input1 = $('input1');
@@ -47,6 +47,32 @@ shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor'
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 debug('')
 
+debug('Disabling and marking inputs readonly by a DOM tree mutation:');
+parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>';
+var form1 = $('form1');
+var input1 = $('input1');
+var sub1 = $('sub1');
+shouldBe('backgroundOf(form1)', 'invalidColor');
+shouldBe('backgroundOf(sub1)', 'subInvalidColor');
+shouldBe('input1.disabled=1; backgroundOf(form1)', 'validColor');
+shouldBe('backgroundOf(sub1)', 'subValidColor');
+shouldBe('input1.disabled=0; backgroundOf(form1)', 'invalidColor');
+shouldBe('backgroundOf(sub1)', 'subInvalidColor');
+shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(form1)', 'validColor');
+shouldBe('backgroundOf(sub1)', 'subValidColor');
+debug('')
+
+debug('Move element under datalist by a DOM tree mutation:');
+parent.innerHTML = '<form id=form1></form><datalist id=dl1></datalist><input type=text id=input1 required form=form1>';
+var form1 = $('form1');
+var input1 = $('input1');
+var dl1 = $('dl1');
+shouldBe('backgroundOf(form1)', 'invalidColor');
+shouldBe('parent.removeChild(input1); backgroundOf(form1)', 'validColor');
+shouldBe('dl1.appendChild(input1); backgroundOf(form1)', 'validColor');
+shouldBe('parent.appendChild(input1); backgroundOf(form1)', 'invalidColor');
+debug('')
+
 debug('Adding a required text input that is not a direct child of the form:');
 parent.innerHTML = '<form id=form1></form>';
 var form1 = $('form1');