chromium/src/third_party/blink/web_tests/fast/forms/form-pseudo-valid-style.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../resources/js-test.js"></script>
 <style>
 :invalid { background: rgb(255, 0, 0); }
 :valid { background: rgb(0, 255, 0); }
 form:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
 form:valid input[type=submit] { background-color: rgb(0, 127, 0); }
 </style>
 </head>
 <body>
 <script>
 description('Check if :valid/:invalid CSS pseudo selectors are lively applied for forms');

 function $(id) {
     return document.getElementById(id);
 }

 function backgroundOf(element) {
     return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
 }

 var invalidColor = 'rgb(255, 0, 0)';
 var validColor = 'rgb(0, 255, 0)';
 var subInvalidColor = 'rgb(127, 0, 0)';
 var subValidColor = 'rgb(0, 127, 0)';

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

 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');
 var input2 = $('input2');
 var sub1 = $('sub1');
 shouldBe('backgroundOf(form1)', 'invalidColor');
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor');
 shouldBe('backgroundOf(sub1)', 'subValidColor');
 shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor');
 shouldBe('backgroundOf(sub1)', 'subValidColor');
 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');
 shouldBe('backgroundOf(form1)', 'validColor');
 var div1 = document.createElement('div');
 var input1 = document.createElement('input');
 input1.setAttribute('type', 'text');
 input1.setAttribute('required', '');
 form1.appendChild(div1);
 shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
 debug('');

 debug('Render multiple forms and reassign an invalid input from one to another:');
 parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value="a"></form>'
     + '<form id=form2><input type=text id=input3><input type=text id=input4 required value="a"></form>'
     + '<form id=form3></form>';
 shouldBe('backgroundOf($("form1"))', 'invalidColor');
 shouldBe('backgroundOf($("form2"))', 'validColor');
 shouldBe('backgroundOf($("form3"))', 'validColor');
 var input1 = $('input1');
 input1.setAttribute("form", "form3");
 shouldBe('backgroundOf($("form1"))', 'validColor');
 shouldBe('backgroundOf($("form3"))', 'invalidColor');
 debug('');

 debug('Ensure that invalid event was not triggered on style evaluation:');
 var val = '0';
 parent.innerHTML = '<form id=form1><input type=text id=input1 required oninvalid="val=\'1\';"></form>';
 var form1 = $('form1');
 shouldBe('backgroundOf(form1)', 'invalidColor');
 shouldBeEqualToString('val', '0');
 shouldBeEqualToString('form1.checkValidity(); val', '1');
 debug('');

 parent.innerHTML = '';
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../resources/js-test.js"></script>
	<style>
	:invalid { background: rgb(255, 0, 0); }
	:valid { background: rgb(0, 255, 0); }
	form:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
	form:valid input[type=submit] { background-color: rgb(0, 127, 0); }
	</style>
	</head>
	<body>
	<script>
	description('Check if :valid/:invalid CSS pseudo selectors are lively applied for forms');

	function $(id) {
	return document.getElementById(id);
	}

	function backgroundOf(element) {
	return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
	}

	var invalidColor = 'rgb(255, 0, 0)';
	var validColor = 'rgb(0, 255, 0)';
	var subInvalidColor = 'rgb(127, 0, 0)';
	var subValidColor = 'rgb(0, 127, 0)';

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

	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');
	var input2 = $('input2');
	var sub1 = $('sub1');
	shouldBe('backgroundOf(form1)', 'invalidColor');
	shouldBe('backgroundOf(sub1)', 'subInvalidColor');
	shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor');
	shouldBe('backgroundOf(sub1)', 'subValidColor');
	shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
	shouldBe('backgroundOf(sub1)', 'subInvalidColor');
	shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor');
	shouldBe('backgroundOf(sub1)', 'subValidColor');
	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');
	shouldBe('backgroundOf(form1)', 'validColor');
	var div1 = document.createElement('div');
	var input1 = document.createElement('input');
	input1.setAttribute('type', 'text');
	input1.setAttribute('required', '');
	form1.appendChild(div1);
	shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
	debug('');

	debug('Render multiple forms and reassign an invalid input from one to another:');
	parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value="a"></form>'
	+ '<form id=form2><input type=text id=input3><input type=text id=input4 required value="a"></form>'
	+ '<form id=form3></form>';
	shouldBe('backgroundOf($("form1"))', 'invalidColor');
	shouldBe('backgroundOf($("form2"))', 'validColor');
	shouldBe('backgroundOf($("form3"))', 'validColor');
	var input1 = $('input1');
	input1.setAttribute("form", "form3");
	shouldBe('backgroundOf($("form1"))', 'validColor');
	shouldBe('backgroundOf($("form3"))', 'invalidColor');
	debug('');

	debug('Ensure that invalid event was not triggered on style evaluation:');
	var val = '0';
	parent.innerHTML = '<form id=form1><input type=text id=input1 required oninvalid="val=\'1\';"></form>';
	var form1 = $('form1');
	shouldBe('backgroundOf(form1)', 'invalidColor');
	shouldBeEqualToString('val', '0');
	shouldBeEqualToString('form1.checkValidity(); val', '1');
	debug('');

	parent.innerHTML = '';
	</script>
	</body>
	</html>