chromium/src/third_party/blink/web_tests/fast/css/pseudo-default-dynamic.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <div id="log"></div>
 <div id="container"></div>
 <style>
 button, input, option { background: red; }
 button:default, input:default, option:default { background: green; }
 </style>
 <script>
 // TODO(tkent): This should be merged to web-platform-tests/html/semantics/selectors/pseudo-classes/default.html.

 var container = document.querySelector('#container');
 const DEFAULT = 'rgb(0, 128, 0)';
 const NOT_DEFAULT = 'rgb(255, 0, 0)';

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

 test(function() {
     container.innerHTML = '<form><input type=submit id=removed><object></object><input type=submit id=second></form>';
     assert_equals(background('removed'), DEFAULT);
     assert_equals(background('second'), NOT_DEFAULT);
     document.querySelector('#removed').type = 'text';
     assert_equals(background('removed'), NOT_DEFAULT);
     assert_equals(background('second'), DEFAULT);

     container.innerHTML = '<form><button type=submit id=removed></button><input type=submit id=second></form>';
     assert_equals(background('removed'), DEFAULT);
     assert_equals(background('second'), NOT_DEFAULT);
     document.querySelector('#removed').type = 'reset';
     assert_equals(background('removed'), NOT_DEFAULT);
     assert_equals(background('second'), DEFAULT);

     container.innerHTML = '<form id=f1><input type=submit id=removed></form><input type=submit id=second form=f1>';
     assert_equals(background('removed'), DEFAULT);
     assert_equals(background('second'), NOT_DEFAULT);
     document.querySelector('#removed').type = 'reset';
     assert_equals(background('removed'), NOT_DEFAULT);
     assert_equals(background('second'), DEFAULT);
 }, 'Removing the :default button by updating type attribute should update the default button.');

 test(function() {
     container.innerHTML = '<form><input type=submit id=removed><input type=submit id=second></form>';
     assert_equals(background('removed'), DEFAULT);
     assert_equals(background('second'), NOT_DEFAULT);
     document.querySelector('#removed').remove();
     assert_equals(background('second'), DEFAULT);
 }, 'Removing the :default button by detaching should update the default button.');

 test(function() {
     container.innerHTML = '<input type=submit id=removed form=f1><form id=f1><input type=submit id=second></form>';
     assert_equals(background('removed'), DEFAULT);
     assert_equals(background('second'), NOT_DEFAULT);
     document.querySelector('#removed').removeAttribute('form');
     assert_equals(background('removed'), NOT_DEFAULT);
     assert_equals(background('second'), DEFAULT);
 }, 'Removing the :default button by updating form content attribute should update the default button.');

 test(function() {
     container.innerHTML = '<form><input type=text id=added><input type=submit id=second></form>';
     assert_equals(background('added'), NOT_DEFAULT);
     assert_equals(background('second'), DEFAULT);
     document.querySelector('#added').type = 'image';
     assert_equals(background('added'), DEFAULT);
     assert_equals(background('second'), NOT_DEFAULT);
 }, 'Adding a button by updating type attribute should update the default button.');

 test(function() {
     container.innerHTML = '<form><input type=submit id=second></form>';
     assert_equals(background('second'), DEFAULT);
     var button = document.createElement('button');
     button.id = 'added'
     document.querySelector('form').insertBefore(button, document.querySelector('#second'));
     assert_equals(background('added'), DEFAULT);
     assert_equals(background('second'), NOT_DEFAULT);
 }, 'Adding a button to a DOM tree should update the default button.');

 test(function() {
     container.innerHTML = '<input type=submit id=added><form id=f1><input type=submit id=second></form>';
     assert_equals(background('added'), NOT_DEFAULT);
     assert_equals(background('second'), DEFAULT);
     document.querySelector('#added').setAttribute('form', 'f1');
     assert_equals(background('added'), DEFAULT, 'added button should be default.');
     assert_equals(background('second'), NOT_DEFAULT);
 }, 'Adding a button by form content attribute should update the default button.');

 test(function() {
     container.innerHTML = '<form><input type=checkbox checked id=c1><input type=text checked id=t1></form>';
     assert_equals(background('c1'), DEFAULT);
     assert_equals(background('t1'), NOT_DEFAULT);
     document.querySelector('#c1').type = 'text';
     document.querySelector('#t1').type = 'checkbox';
     assert_equals(background('c1'), NOT_DEFAULT);
     assert_equals(background('t1'), DEFAULT);
 }, 'Updating type attribute of :default checkbox should update default status');

 test(function() {
     container.innerHTML = '<form><input type=radio checked id=r1><input type=text checked id=t1></form>';
     assert_equals(background('r1'), DEFAULT);
     assert_equals(background('t1'), NOT_DEFAULT);
     document.querySelector('#r1').type = 'text';
     document.querySelector('#t1').type = 'radio';
     assert_equals(background('r1'), NOT_DEFAULT);
     assert_equals(background('t1'), DEFAULT);
 }, 'Updating type attribute of :default radio should update default status');

 test(function() {
     container.innerHTML = '<form><input type=checkbox checked id=c1><input type=radio checked id=r1></form>';
     assert_equals(background('c1'), DEFAULT);
     assert_equals(background('r1'), DEFAULT);
     document.querySelector('#c1').defaultChecked = false;
     document.querySelector('#r1').defaultChecked = false;
     assert_equals(background('c1'), NOT_DEFAULT);
     assert_equals(background('r1'), NOT_DEFAULT);
 }, 'Updating the checked attribute of :default checkbox or radio should update default status');

 test(function() {
     container.innerHTML = '<form><input type=checkbox id=c1><input type=radio id=r1></form>';
     assert_equals(background('c1'), NOT_DEFAULT);
     assert_equals(background('r1'), NOT_DEFAULT);
     if (window.eventSender){
         var checkbox = document.querySelector('#c1');
         checkbox.focus();
         eventSender.keyDown(' ');
         assert_equals(checkbox.checked, true);
         assert_equals(background('c1'), NOT_DEFAULT);

         var radio = document.querySelector('#r1');
         radio.focus();
         eventSender.keyDown(' ');
         assert_equals(radio.checked, true);
         assert_equals(background('r1'), NOT_DEFAULT);
     }
     document.querySelector('#c1').setAttribute('checked', 'checked');
     document.querySelector('#r1').setAttribute('checked', 'checked');
     assert_equals(background('c1'), DEFAULT);
     assert_equals(background('r1'), DEFAULT);

     document.querySelector('#c1').removeAttribute('checked');
     document.querySelector('#r1').removeAttribute('checked');
     assert_equals(background('c1'), NOT_DEFAULT);
     assert_equals(background('r1'), NOT_DEFAULT);
 }, 'Dynamically updating checked status or setting checked attribute should reflect correct default status');

 test(function() {
     container.innerHTML = '<form><select><option selected id=o1>1</option><option id=o2>2</option></select></form>';
     assert_equals(background('o1'), DEFAULT);
     assert_equals(background('o2'), NOT_DEFAULT);
     document.querySelector('#o1').defaultSelected = false;
     document.querySelector('#o2').defaultSelected = true;
     assert_equals(background('o1'), NOT_DEFAULT);
     assert_equals(background('o2'), DEFAULT);
 }, 'Updating the selected attribute of :default option element should update default status');

 test(function() {
     container.innerHTML = '<form><select><option id=o1></option><option id=o2></option</select></form>';
     assert_equals(background('o1'), NOT_DEFAULT);
     document.querySelector('#o1').selected = true;
     assert_equals(background('o1'), NOT_DEFAULT);
     document.querySelector('#o1').setAttribute('selected', 'selected');
     assert_equals(background('o1'), DEFAULT);
     document.querySelector('#o1').removeAttribute('selected');
     assert_equals(background('o1'), NOT_DEFAULT);
 }, 'Dynamically updating selected status or setting selected attribute should reflect correct default status');

 </script>
	<!DOCTYPE html>
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	<div id="log"></div>
	<div id="container"></div>
	<style>
	button, input, option { background: red; }
	button:default, input:default, option:default { background: green; }
	</style>
	<script>
	// TODO(tkent): This should be merged to web-platform-tests/html/semantics/selectors/pseudo-classes/default.html.

	var container = document.querySelector('#container');
	const DEFAULT = 'rgb(0, 128, 0)';
	const NOT_DEFAULT = 'rgb(255, 0, 0)';

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

	test(function() {
	container.innerHTML = '<form><input type=submit id=removed><object></object><input type=submit id=second></form>';
	assert_equals(background('removed'), DEFAULT);
	assert_equals(background('second'), NOT_DEFAULT);
	document.querySelector('#removed').type = 'text';
	assert_equals(background('removed'), NOT_DEFAULT);
	assert_equals(background('second'), DEFAULT);

	container.innerHTML = '<form><button type=submit id=removed></button><input type=submit id=second></form>';
	assert_equals(background('removed'), DEFAULT);
	assert_equals(background('second'), NOT_DEFAULT);
	document.querySelector('#removed').type = 'reset';
	assert_equals(background('removed'), NOT_DEFAULT);
	assert_equals(background('second'), DEFAULT);

	container.innerHTML = '<form id=f1><input type=submit id=removed></form><input type=submit id=second form=f1>';
	assert_equals(background('removed'), DEFAULT);
	assert_equals(background('second'), NOT_DEFAULT);
	document.querySelector('#removed').type = 'reset';
	assert_equals(background('removed'), NOT_DEFAULT);
	assert_equals(background('second'), DEFAULT);
	}, 'Removing the :default button by updating type attribute should update the default button.');

	test(function() {
	container.innerHTML = '<form><input type=submit id=removed><input type=submit id=second></form>';
	assert_equals(background('removed'), DEFAULT);
	assert_equals(background('second'), NOT_DEFAULT);
	document.querySelector('#removed').remove();
	assert_equals(background('second'), DEFAULT);
	}, 'Removing the :default button by detaching should update the default button.');

	test(function() {
	container.innerHTML = '<input type=submit id=removed form=f1><form id=f1><input type=submit id=second></form>';
	assert_equals(background('removed'), DEFAULT);
	assert_equals(background('second'), NOT_DEFAULT);
	document.querySelector('#removed').removeAttribute('form');
	assert_equals(background('removed'), NOT_DEFAULT);
	assert_equals(background('second'), DEFAULT);
	}, 'Removing the :default button by updating form content attribute should update the default button.');

	test(function() {
	container.innerHTML = '<form><input type=text id=added><input type=submit id=second></form>';
	assert_equals(background('added'), NOT_DEFAULT);
	assert_equals(background('second'), DEFAULT);
	document.querySelector('#added').type = 'image';
	assert_equals(background('added'), DEFAULT);
	assert_equals(background('second'), NOT_DEFAULT);
	}, 'Adding a button by updating type attribute should update the default button.');

	test(function() {
	container.innerHTML = '<form><input type=submit id=second></form>';
	assert_equals(background('second'), DEFAULT);
	var button = document.createElement('button');
	button.id = 'added'
	document.querySelector('form').insertBefore(button, document.querySelector('#second'));
	assert_equals(background('added'), DEFAULT);
	assert_equals(background('second'), NOT_DEFAULT);
	}, 'Adding a button to a DOM tree should update the default button.');

	test(function() {
	container.innerHTML = '<input type=submit id=added><form id=f1><input type=submit id=second></form>';
	assert_equals(background('added'), NOT_DEFAULT);
	assert_equals(background('second'), DEFAULT);
	document.querySelector('#added').setAttribute('form', 'f1');
	assert_equals(background('added'), DEFAULT, 'added button should be default.');
	assert_equals(background('second'), NOT_DEFAULT);
	}, 'Adding a button by form content attribute should update the default button.');

	test(function() {
	container.innerHTML = '<form><input type=checkbox checked id=c1><input type=text checked id=t1></form>';
	assert_equals(background('c1'), DEFAULT);
	assert_equals(background('t1'), NOT_DEFAULT);
	document.querySelector('#c1').type = 'text';
	document.querySelector('#t1').type = 'checkbox';
	assert_equals(background('c1'), NOT_DEFAULT);
	assert_equals(background('t1'), DEFAULT);
	}, 'Updating type attribute of :default checkbox should update default status');

	test(function() {
	container.innerHTML = '<form><input type=radio checked id=r1><input type=text checked id=t1></form>';
	assert_equals(background('r1'), DEFAULT);
	assert_equals(background('t1'), NOT_DEFAULT);
	document.querySelector('#r1').type = 'text';
	document.querySelector('#t1').type = 'radio';
	assert_equals(background('r1'), NOT_DEFAULT);
	assert_equals(background('t1'), DEFAULT);
	}, 'Updating type attribute of :default radio should update default status');

	test(function() {
	container.innerHTML = '<form><input type=checkbox checked id=c1><input type=radio checked id=r1></form>';
	assert_equals(background('c1'), DEFAULT);
	assert_equals(background('r1'), DEFAULT);
	document.querySelector('#c1').defaultChecked = false;
	document.querySelector('#r1').defaultChecked = false;
	assert_equals(background('c1'), NOT_DEFAULT);
	assert_equals(background('r1'), NOT_DEFAULT);
	}, 'Updating the checked attribute of :default checkbox or radio should update default status');

	test(function() {
	container.innerHTML = '<form><input type=checkbox id=c1><input type=radio id=r1></form>';
	assert_equals(background('c1'), NOT_DEFAULT);
	assert_equals(background('r1'), NOT_DEFAULT);
	if (window.eventSender){
	var checkbox = document.querySelector('#c1');
	checkbox.focus();
	eventSender.keyDown(' ');
	assert_equals(checkbox.checked, true);
	assert_equals(background('c1'), NOT_DEFAULT);

	var radio = document.querySelector('#r1');
	radio.focus();
	eventSender.keyDown(' ');
	assert_equals(radio.checked, true);
	assert_equals(background('r1'), NOT_DEFAULT);
	}
	document.querySelector('#c1').setAttribute('checked', 'checked');
	document.querySelector('#r1').setAttribute('checked', 'checked');
	assert_equals(background('c1'), DEFAULT);
	assert_equals(background('r1'), DEFAULT);

	document.querySelector('#c1').removeAttribute('checked');
	document.querySelector('#r1').removeAttribute('checked');
	assert_equals(background('c1'), NOT_DEFAULT);
	assert_equals(background('r1'), NOT_DEFAULT);
	}, 'Dynamically updating checked status or setting checked attribute should reflect correct default status');

	test(function() {
	container.innerHTML = '<form><select><option selected id=o1>1</option><option id=o2>2</option></select></form>';
	assert_equals(background('o1'), DEFAULT);
	assert_equals(background('o2'), NOT_DEFAULT);
	document.querySelector('#o1').defaultSelected = false;
	document.querySelector('#o2').defaultSelected = true;
	assert_equals(background('o1'), NOT_DEFAULT);
	assert_equals(background('o2'), DEFAULT);
	}, 'Updating the selected attribute of :default option element should update default status');

	test(function() {
	container.innerHTML = '<form><select><option id=o1></option><option id=o2></option</select></form>';
	assert_equals(background('o1'), NOT_DEFAULT);
	document.querySelector('#o1').selected = true;
	assert_equals(background('o1'), NOT_DEFAULT);
	document.querySelector('#o1').setAttribute('selected', 'selected');
	assert_equals(background('o1'), DEFAULT);
	document.querySelector('#o1').removeAttribute('selected');
	assert_equals(background('o1'), NOT_DEFAULT);
	}, 'Dynamically updating selected status or setting selected attribute should reflect correct default status');

	</script>