LayoutTests/fast/forms/fieldset-pseudo-valid-style.html - Issue 646273004: Implement :valid and :invalid pseudoclass for <fieldset>

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

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

Patch Set: Pull 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

« no previous file with comments | « LayoutTests/fast/css/pseudo-valid-unapplied-expected.txt ('k') | LayoutTests/fast/forms/fieldset-pseudo-valid-style-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 fieldset:invalid input[type=submit] { background-color: rgb(127, 0, 0); }

	9 fieldset: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 fieldsets');

	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 = '<fieldset id=fieldset1><input type=text id=input1 required>< input type=text id=input2 required value=a><input type=submit id=sub1></fieldset >';

	34 var fieldset1 = $('fieldset1');

	35 var input1 = $('input1');

	36 var input2 = $('input2');

	37 var sub1 = $('sub1');

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

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

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

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

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

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

	44 shouldBe('input1.setAttribute("value", "a"); backgroundOf(fieldset1)', 'validCol or');

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

	46 shouldBe('input2.setAttribute("value", ""); backgroundOf(fieldset1)', 'invalidCo lor');

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

	48 debug('')

	49

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

	51 parent.innerHTML = '<fieldset id=fieldset1></fieldset>';

	52 var fieldset1 = $('fieldset1');

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

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

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

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

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

	58 fieldset1.appendChild(div1);

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

	60 debug('');

	61

	62 debug('Nested fieldsets:');

	63 parent.innerHTML = '<fieldset id=fieldset0>'

	64 + '<fieldset id=fieldset1><input type=text id=input1 required></fieldset>'

	65 + '<fieldset id=fieldset2><input type=text id=input2></fieldset>'

	66 + '</fieldset>';

	67 shouldBe('backgroundOf($("fieldset0"))', 'invalidColor');

	68 shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');

	69 shouldBe('backgroundOf($("fieldset2"))', 'validColor');

	70 var input1 = $('input1');

	71 shouldBe('input1.setAttribute("value", "v"); backgroundOf($("fieldset0"))', 'val idColor');

	72 shouldBe('backgroundOf($("fieldset1"))', 'validColor');

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

	74 var input2 = $('input2');

	75 shouldBe('input2.setAttribute("required", ""); backgroundOf($("fieldset0"))', 'i nvalidColor');

	76 shouldBe('backgroundOf($("fieldset1"))', 'validColor');

	77 shouldBe('backgroundOf($("fieldset2"))', 'invalidColor');

	78 debug('');

	79

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

	81 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required>< input type=text id=input2 required value="a"></fieldset>'

	82 + '<fieldset id=fieldset2><input type=text id=input3><input type=text id=inp ut4 required value="a"></fieldset>'

	83 + '<fieldset id=fieldset3></fieldset>';

	84 shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');

	85 shouldBe('backgroundOf($("fieldset2"))', 'validColor');

	86 shouldBe('backgroundOf($("fieldset3"))', 'validColor');

	87 var input1 = $('input1');

	88 var fieldset1 = $('fieldset1');

	89 var fieldset3 = $('fieldset3');

	90 fieldset1.removeChild(input1);

	91 fieldset3.appendChild(input1);

	92 shouldBe('backgroundOf($("fieldset1"))', 'validColor');

	93 shouldBe('backgroundOf($("fieldset3"))', 'invalidColor');

	94 debug('');

	95

	96 debug('Ensure that invalid event was not triggered on style evaluation:');

	97 var val = '0';

	98 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required o ninvalid="val=\'1\';"></fieldset>';

	99 var fieldset1 = $('fieldset1');

	100 var input1 = $('input1');

	101 shouldBe('backgroundOf(fieldset1)', 'invalidColor');

	102 shouldBeEqualToString('val', '0');

	103 shouldBeEqualToString('input1.checkValidity(); val', '1');

	104 debug('');

	105

	106 parent.innerHTML = '';

	107 </script>

	108 </body>

	109 </html>

OLD	NEW