third_party/WebKit/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html - Issue 1528823002: Move tests related to <fieldset> and <legend> to fast/forms/fieldset.

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

Issue 1528823002: Move tests related to <fieldset> and <legend> to fast/forms/fieldset. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years 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 | « third_party/WebKit/LayoutTests/fast/forms/fieldset-legend-padding-unclipped-fieldset-border.html ('k') | third_party/WebKit/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 their value by a D OM 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('Disabling and marking inputs readonly by a DOM tree mutation:');

51 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 >';

52 var fieldset1 = $('fieldset1');

53 var input1 = $('input1');

54 var sub1 = $('sub1');

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

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

57 shouldBe('input1.disabled=1; backgroundOf(fieldset1)', 'validColor');

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

59 shouldBe('input1.disabled=0; backgroundOf(fieldset1)', 'invalidColor');

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

61 shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(fieldset1)', 'valid Color');

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

63 debug('')

64

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

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

67 var fieldset1 = $('fieldset1');

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

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

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

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

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

73 fieldset1.appendChild(div1);

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

75 debug('');

76

77 debug('Nested fieldsets:');

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

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

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

81 + '</fieldset>';

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

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

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

85 var input1 = $('input1');

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

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

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

89 var input2 = $('input2');

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

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

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

93 debug('');

94

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

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

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

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

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

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

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

102 var input1 = $('input1');

103 var fieldset1 = $('fieldset1');

104 var fieldset3 = $('fieldset3');

105 fieldset1.removeChild(input1);

106 fieldset3.appendChild(input1);

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

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

109 debug('');

110

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

112 var val = '0';

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

114 var fieldset1 = $('fieldset1');

115 var input1 = $('input1');

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

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

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

119 debug('');

120

121 parent.innerHTML = '';

122 </script>

123 </body>

124 </html>

OLD	NEW