LayoutTests/fast/forms/form-pseudo-valid-style.html - Issue 646543004: Implement :valid and :invalid pseudoclass for <form> (resubmitting)

Side by Side Diff: LayoutTests/fast/forms/form-pseudo-valid-style.html

Issue 646543004: Implement :valid and :invalid pseudoclass for <form> (resubmitting) (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Reorder matchesValidityPseudoClasses() Created 6 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <script src="../../resources/js-test.js"></script>

	5 <style>

	6 :invalid { background: rgb(255, 0, 0); }

	7 :valid { background: rgb(0, 255, 0); }

	8 form:invalid input[type=submit] { background-color: rgb(127, 0, 0); }

	9 form:valid input[type=submit] { background-color: rgb(0, 127, 0); }

	10 </style>

	11 </head>

	12 <body>

	13 <script>

	14 description('Check if :valid/:invalid CSS pseudo selectors are lively applied fo r forms');

	15

	16 function $(id) {

	17 return document.getElementById(id);

	18 }

	19

	20 function backgroundOf(element) {

	21 return document.defaultView.getComputedStyle(element, null).getPropertyValue ('background-color');

	22 }

	23

	24 var invalidColor = 'rgb(255, 0, 0)';

	25 var validColor = 'rgb(0, 255, 0)';

	26 var subInvalidColor = 'rgb(127, 0, 0)';

	27 var subValidColor = 'rgb(0, 127, 0)';

	28

	29 var parent = document.createElement('div');

	30 document.body.appendChild(parent);

	31

	32 debug('Removing and adding required text inputs and modifying ther value by a DO M tree mutation:');

	33 parent.innerHTML = '<form id=form1><input type=text id=input1 required><input ty pe=text id=input2 required value="a"><input type=submit id=sub1></form>';

	34 var form1 = $('form1');

	35 var input1 = $('input1');

	36 var input2 = $('input2');

	37 var sub1 = $('sub1');

	38 shouldBe('backgroundOf(form1)', 'invalidColor');

	39 shouldBe('backgroundOf(sub1)', 'subInvalidColor');

	40 shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor');

	41 shouldBe('backgroundOf(sub1)', 'subValidColor');

	42 shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor');

	43 shouldBe('backgroundOf(sub1)', 'subInvalidColor');

	44 shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor') ;

	45 shouldBe('backgroundOf(sub1)', 'subValidColor');

	46 shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor' );

	47 shouldBe('backgroundOf(sub1)', 'subInvalidColor');

	48 debug('')

	49

	50 debug('Adding a required text input that is not a direct child of the form:');

	51 parent.innerHTML = '<form id=form1></form>';

	52 var form1 = $('form1');

	53 shouldBe('backgroundOf(form1)', 'validColor');

	54 var div1 = document.createElement('div');

	55 var input1 = document.createElement('input');

	56 input1.setAttribute('type', 'text');

	57 input1.setAttribute('required', '');

	58 form1.appendChild(div1);

	59 shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor');

	60 debug('');

	61

	62 debug('Render multiple forms and move an invalid input from one to another:');

	63 parent.innerHTML = '<form id=form1><input type=text id=input1 required><input ty pe=text id=input2 required value="a"></form>'

	64 + '<form id=form2><input type=text id=input3><input type=text id=input4 requ ired value="a"></form>'

	65 + '<form id=form3></form>';

	66 shouldBe('backgroundOf($("form1"))', 'invalidColor');

	67 shouldBe('backgroundOf($("form2"))', 'validColor');

	68 shouldBe('backgroundOf($("form3"))', 'validColor');

	69 var input1 = $('input1');

	70 var form1 = $('form1');

	71 var form3 = $('form3');

	72 input1.setAttribute("form", "form3");

	73 shouldBe('backgroundOf($("form1"))', 'validColor');

	74 shouldBe('backgroundOf($("form3"))', 'invalidColor');

	75 debug('');

	76

	77 parent.innerHTML = '';

	78 </script>

	79 </body>

	80 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/forms/form-pseudo-valid-style-expected.txt » ('j') | no next file with comments »