chromium/src/third_party/blink/web_tests/fast/forms/fieldset/fieldset-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); }
 fieldset:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
 fieldset: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 fieldsets');

 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 = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
 var fieldset1 = $('fieldset1');
 var input1 = $('input1');
 var input2 = $('input2');
 var sub1 = $('sub1');
 shouldBe('backgroundOf(fieldset1)', 'invalidColor');
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 shouldBe('fieldset1.removeChild(input1); backgroundOf(fieldset1)', 'validColor');
 shouldBe('backgroundOf(sub1)', 'subValidColor');
 shouldBe('fieldset1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 shouldBe('input1.setAttribute("value", "a"); backgroundOf(fieldset1)', 'validColor');
 shouldBe('backgroundOf(sub1)', 'subValidColor');
 shouldBe('input2.setAttribute("value", ""); backgroundOf(fieldset1)', 'invalidColor');
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 debug('')

 debug('Disabling and marking inputs readonly by a DOM tree mutation:');
 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
 var fieldset1 = $('fieldset1');
 var input1 = $('input1');
 var sub1 = $('sub1');
 shouldBe('backgroundOf(fieldset1)', 'invalidColor');
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 shouldBe('input1.disabled=1; backgroundOf(fieldset1)', 'validColor');
 shouldBe('backgroundOf(sub1)', 'subValidColor');
 shouldBe('input1.disabled=0; backgroundOf(fieldset1)', 'invalidColor');
 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
 shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(fieldset1)', 'validColor');
 shouldBe('backgroundOf(sub1)', 'subValidColor');
 debug('')

 debug('Adding a required text input that is not a direct child of the fieldset:');
 parent.innerHTML = '<fieldset id=fieldset1></fieldset>';
 var fieldset1 = $('fieldset1');
 shouldBe('backgroundOf(fieldset1)', 'validColor');
 var div1 = document.createElement('div');
 var input1 = document.createElement('input');
 input1.setAttribute('type', 'text');
 input1.setAttribute('required', '');
 fieldset1.appendChild(div1);
 shouldBe('div1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
 debug('');

 debug('Nested fieldsets:');
 parent.innerHTML = '<fieldset id=fieldset0>'
     + '<fieldset id=fieldset1><input type=text id=input1 required></fieldset>'
     + '<fieldset id=fieldset2><input type=text id=input2></fieldset>'
     + '</fieldset>';
 shouldBe('backgroundOf($("fieldset0"))', 'invalidColor');
 shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
 shouldBe('backgroundOf($("fieldset2"))', 'validColor');
 var input1 = $('input1');
 shouldBe('input1.setAttribute("value", "v"); backgroundOf($("fieldset0"))', 'validColor');
 shouldBe('backgroundOf($("fieldset1"))', 'validColor');
 shouldBe('backgroundOf($("fieldset2"))', 'validColor');
 var input2 = $('input2');
 shouldBe('input2.setAttribute("required", ""); backgroundOf($("fieldset0"))', 'invalidColor');
 shouldBe('backgroundOf($("fieldset1"))', 'validColor');
 shouldBe('backgroundOf($("fieldset2"))', 'invalidColor');
 debug('');

 debug('Render multiple fieldsets and move an invalid input from one to another:');
 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value="a"></fieldset>'
     + '<fieldset id=fieldset2><input type=text id=input3><input type=text id=input4 required value="a"></fieldset>'
     + '<fieldset id=fieldset3></fieldset>';
 shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
 shouldBe('backgroundOf($("fieldset2"))', 'validColor');
 shouldBe('backgroundOf($("fieldset3"))', 'validColor');
 var input1 = $('input1');
 var fieldset1 = $('fieldset1');
 var fieldset3 = $('fieldset3');
 fieldset1.removeChild(input1);
 fieldset3.appendChild(input1);
 shouldBe('backgroundOf($("fieldset1"))', 'validColor');
 shouldBe('backgroundOf($("fieldset3"))', 'invalidColor');
 debug('');

 debug('Ensure that invalid event was not triggered on style evaluation:');
 var val = '0';
 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required oninvalid="val=\'1\';"></fieldset>';
 var fieldset1 = $('fieldset1');
 var input1 = $('input1');
 shouldBe('backgroundOf(fieldset1)', 'invalidColor');
 shouldBeEqualToString('val', '0');
 shouldBeEqualToString('input1.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); }
	fieldset:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
	fieldset: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 fieldsets');

	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 = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
	var fieldset1 = $('fieldset1');
	var input1 = $('input1');
	var input2 = $('input2');
	var sub1 = $('sub1');
	shouldBe('backgroundOf(fieldset1)', 'invalidColor');
	shouldBe('backgroundOf(sub1)', 'subInvalidColor');
	shouldBe('fieldset1.removeChild(input1); backgroundOf(fieldset1)', 'validColor');
	shouldBe('backgroundOf(sub1)', 'subValidColor');
	shouldBe('fieldset1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
	shouldBe('backgroundOf(sub1)', 'subInvalidColor');
	shouldBe('input1.setAttribute("value", "a"); backgroundOf(fieldset1)', 'validColor');
	shouldBe('backgroundOf(sub1)', 'subValidColor');
	shouldBe('input2.setAttribute("value", ""); backgroundOf(fieldset1)', 'invalidColor');
	shouldBe('backgroundOf(sub1)', 'subInvalidColor');
	debug('')

	debug('Disabling and marking inputs readonly by a DOM tree mutation:');
	parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
	var fieldset1 = $('fieldset1');
	var input1 = $('input1');
	var sub1 = $('sub1');
	shouldBe('backgroundOf(fieldset1)', 'invalidColor');
	shouldBe('backgroundOf(sub1)', 'subInvalidColor');
	shouldBe('input1.disabled=1; backgroundOf(fieldset1)', 'validColor');
	shouldBe('backgroundOf(sub1)', 'subValidColor');
	shouldBe('input1.disabled=0; backgroundOf(fieldset1)', 'invalidColor');
	shouldBe('backgroundOf(sub1)', 'subInvalidColor');
	shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(fieldset1)', 'validColor');
	shouldBe('backgroundOf(sub1)', 'subValidColor');
	debug('')

	debug('Adding a required text input that is not a direct child of the fieldset:');
	parent.innerHTML = '<fieldset id=fieldset1></fieldset>';
	var fieldset1 = $('fieldset1');
	shouldBe('backgroundOf(fieldset1)', 'validColor');
	var div1 = document.createElement('div');
	var input1 = document.createElement('input');
	input1.setAttribute('type', 'text');
	input1.setAttribute('required', '');
	fieldset1.appendChild(div1);
	shouldBe('div1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
	debug('');

	debug('Nested fieldsets:');
	parent.innerHTML = '<fieldset id=fieldset0>'
	+ '<fieldset id=fieldset1><input type=text id=input1 required></fieldset>'
	+ '<fieldset id=fieldset2><input type=text id=input2></fieldset>'
	+ '</fieldset>';
	shouldBe('backgroundOf($("fieldset0"))', 'invalidColor');
	shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
	shouldBe('backgroundOf($("fieldset2"))', 'validColor');
	var input1 = $('input1');
	shouldBe('input1.setAttribute("value", "v"); backgroundOf($("fieldset0"))', 'validColor');
	shouldBe('backgroundOf($("fieldset1"))', 'validColor');
	shouldBe('backgroundOf($("fieldset2"))', 'validColor');
	var input2 = $('input2');
	shouldBe('input2.setAttribute("required", ""); backgroundOf($("fieldset0"))', 'invalidColor');
	shouldBe('backgroundOf($("fieldset1"))', 'validColor');
	shouldBe('backgroundOf($("fieldset2"))', 'invalidColor');
	debug('');

	debug('Render multiple fieldsets and move an invalid input from one to another:');
	parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value="a"></fieldset>'
	+ '<fieldset id=fieldset2><input type=text id=input3><input type=text id=input4 required value="a"></fieldset>'
	+ '<fieldset id=fieldset3></fieldset>';
	shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
	shouldBe('backgroundOf($("fieldset2"))', 'validColor');
	shouldBe('backgroundOf($("fieldset3"))', 'validColor');
	var input1 = $('input1');
	var fieldset1 = $('fieldset1');
	var fieldset3 = $('fieldset3');
	fieldset1.removeChild(input1);
	fieldset3.appendChild(input1);
	shouldBe('backgroundOf($("fieldset1"))', 'validColor');
	shouldBe('backgroundOf($("fieldset3"))', 'invalidColor');
	debug('');

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

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