Diff
Modified: trunk/LayoutTests/ChangeLog (177727 => 177728)
--- trunk/LayoutTests/ChangeLog 2014-12-25 00:54:11 UTC (rev 177727)
+++ trunk/LayoutTests/ChangeLog 2014-12-25 02:31:36 UTC (rev 177728)
@@ -1,3 +1,20 @@
+2014-12-24 Benjamin Poulain <[email protected]>
+
+ Import the tests for :valid/:invalid on form/fieldset from blink
+ https://bugs.webkit.org/show_bug.cgi?id=139899
+
+ Reviewed by Darin Adler.
+
+ blink's tests are incredibly basic but it is better to include them
+ for completeness.
+
+ * fast/forms/fieldset-pseudo-valid-style-expected.txt: Added.
+ * fast/forms/fieldset-pseudo-valid-style.html: Added.
+ * fast/forms/form-pseudo-valid-style-expected.txt: Added.
+ * fast/forms/form-pseudo-valid-style.html: Added.
+ Both tests are from Bartek Nowierski.
+
+
2014-12-23 Zalan Bujtas <[email protected]>
Incorrect dashed and dotted border painting.
Added: trunk/LayoutTests/fast/forms/fieldset-pseudo-valid-style-expected.txt (0 => 177728)
--- trunk/LayoutTests/fast/forms/fieldset-pseudo-valid-style-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/forms/fieldset-pseudo-valid-style-expected.txt 2014-12-25 02:31:36 UTC (rev 177728)
@@ -0,0 +1,58 @@
+Check if :valid/:invalid CSS pseudo selectors are lively applied for fieldsets
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Removing and adding required text inputs and modifying their value by a DOM tree mutation:
+PASS backgroundOf(fieldset1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS fieldset1.removeChild(input1); backgroundOf(fieldset1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+PASS fieldset1.appendChild(input1); backgroundOf(fieldset1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS input1.setAttribute("value", "a"); backgroundOf(fieldset1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+PASS input2.setAttribute("value", ""); backgroundOf(fieldset1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+
+Disabling and marking inputs readonly by a DOM tree mutation:
+PASS backgroundOf(fieldset1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS input1.disabled=1; backgroundOf(fieldset1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+PASS input1.disabled=0; backgroundOf(fieldset1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS input1.setAttribute("readonly", "1"); backgroundOf(fieldset1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+
+Adding a required text input that is not a direct child of the fieldset:
+PASS backgroundOf(fieldset1) is validColor
+PASS div1.appendChild(input1); backgroundOf(fieldset1) is invalidColor
+
+Nested fieldsets:
+PASS backgroundOf($("fieldset0")) is invalidColor
+PASS backgroundOf($("fieldset1")) is invalidColor
+PASS backgroundOf($("fieldset2")) is validColor
+PASS input1.setAttribute("value", "v"); backgroundOf($("fieldset0")) is validColor
+PASS backgroundOf($("fieldset1")) is validColor
+PASS backgroundOf($("fieldset2")) is validColor
+PASS input2.setAttribute("required", ""); backgroundOf($("fieldset0")) is invalidColor
+PASS backgroundOf($("fieldset1")) is validColor
+PASS backgroundOf($("fieldset2")) is invalidColor
+
+Render multiple fieldsets and move an invalid input from one to another:
+PASS backgroundOf($("fieldset1")) is invalidColor
+PASS backgroundOf($("fieldset2")) is validColor
+PASS backgroundOf($("fieldset3")) is validColor
+PASS backgroundOf($("fieldset1")) is validColor
+PASS backgroundOf($("fieldset3")) is invalidColor
+
+Ensure that invalid event was not triggered on style evaluation:
+PASS backgroundOf(fieldset1) is invalidColor
+PASS val is "0"
+PASS input1.checkValidity(); val is "1"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html (0 => 177728)
--- trunk/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html (rev 0)
+++ trunk/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html 2014-12-25 02:31:36 UTC (rev 177728)
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/forms/form-pseudo-valid-style-expected.txt (0 => 177728)
--- trunk/LayoutTests/fast/forms/form-pseudo-valid-style-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/forms/form-pseudo-valid-style-expected.txt 2014-12-25 02:31:36 UTC (rev 177728)
@@ -0,0 +1,53 @@
+Check if :valid/:invalid CSS pseudo selectors are lively applied for forms
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Removing and adding required text inputs and modifying their value by a DOM tree mutation:
+PASS backgroundOf(form1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS form1.removeChild(input1); backgroundOf(form1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+PASS form1.appendChild(input1); backgroundOf(form1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS input1.setAttribute("value", "a"); backgroundOf(form1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+PASS input2.setAttribute("value", ""); backgroundOf(form1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+
+Disabling and marking inputs readonly by a DOM tree mutation:
+PASS backgroundOf(form1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS input1.disabled=1; backgroundOf(form1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+PASS input1.disabled=0; backgroundOf(form1) is invalidColor
+PASS backgroundOf(sub1) is subInvalidColor
+PASS input1.setAttribute("readonly", "1"); backgroundOf(form1) is validColor
+PASS backgroundOf(sub1) is subValidColor
+
+Move element under datalist by a DOM tree mutation:
+PASS backgroundOf(form1) is invalidColor
+PASS parent.removeChild(input1); backgroundOf(form1) is validColor
+PASS dl1.appendChild(input1); backgroundOf(form1) is validColor
+PASS parent.appendChild(input1); backgroundOf(form1) is invalidColor
+
+Adding a required text input that is not a direct child of the form:
+PASS backgroundOf(form1) is validColor
+PASS div1.appendChild(input1); backgroundOf(form1) is invalidColor
+
+Render multiple forms and reassign an invalid input from one to another:
+PASS backgroundOf($("form1")) is invalidColor
+PASS backgroundOf($("form2")) is validColor
+PASS backgroundOf($("form3")) is validColor
+PASS backgroundOf($("form1")) is validColor
+PASS backgroundOf($("form3")) is invalidColor
+
+Ensure that invalid event was not triggered on style evaluation:
+PASS backgroundOf(form1) is invalidColor
+PASS val is "0"
+PASS form1.checkValidity(); val is "1"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/fast/forms/form-pseudo-valid-style.html (0 => 177728)
--- trunk/LayoutTests/fast/forms/form-pseudo-valid-style.html (rev 0)
+++ trunk/LayoutTests/fast/forms/form-pseudo-valid-style.html 2014-12-25 02:31:36 UTC (rev 177728)
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<style>
+:invalid { background: rgb(255, 0, 0); }
+:valid { background: rgb(0, 255, 0); }
+form:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
+form: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 forms');
+
+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 = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>';
+var form1 = $('form1');
+var input1 = $('input1');
+var input2 = $('input2');
+var sub1 = $('sub1');
+shouldBe('backgroundOf(form1)', 'invalidColor');
+shouldBe('backgroundOf(sub1)', 'subInvalidColor');
+shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor');
+shouldBe('backgroundOf(sub1)', 'subValidColor');
+shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
+shouldBe('backgroundOf(sub1)', 'subInvalidColor');
+shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor');
+shouldBe('backgroundOf(sub1)', 'subValidColor');
+shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor');
+shouldBe('backgroundOf(sub1)', 'subInvalidColor');
+debug('')
+
+debug('Disabling and marking inputs readonly by a DOM tree mutation:');
+parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>';
+var form1 = $('form1');
+var input1 = $('input1');
+var sub1 = $('sub1');
+shouldBe('backgroundOf(form1)', 'invalidColor');
+shouldBe('backgroundOf(sub1)', 'subInvalidColor');
+shouldBe('input1.disabled=1; backgroundOf(form1)', 'validColor');
+shouldBe('backgroundOf(sub1)', 'subValidColor');
+shouldBe('input1.disabled=0; backgroundOf(form1)', 'invalidColor');
+shouldBe('backgroundOf(sub1)', 'subInvalidColor');
+shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(form1)', 'validColor');
+shouldBe('backgroundOf(sub1)', 'subValidColor');
+debug('')
+
+debug('Move element under datalist by a DOM tree mutation:');
+parent.innerHTML = '<form id=form1></form><datalist id=dl1></datalist><input type=text id=input1 required form=form1>';
+var form1 = $('form1');
+var input1 = $('input1');
+var dl1 = $('dl1');
+shouldBe('backgroundOf(form1)', 'invalidColor');
+shouldBe('parent.removeChild(input1); backgroundOf(form1)', 'validColor');
+shouldBe('dl1.appendChild(input1); backgroundOf(form1)', 'validColor');
+shouldBe('parent.appendChild(input1); backgroundOf(form1)', 'invalidColor');
+debug('')
+
+debug('Adding a required text input that is not a direct child of the form:');
+parent.innerHTML = '<form id=form1></form>';
+var form1 = $('form1');
+shouldBe('backgroundOf(form1)', 'validColor');
+var div1 = document.createElement('div');
+var input1 = document.createElement('input');
+input1.setAttribute('type', 'text');
+input1.setAttribute('required', '');
+form1.appendChild(div1);
+shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
+debug('');
+
+debug('Render multiple forms and reassign an invalid input from one to another:');
+parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value="a"></form>'
+ + '<form id=form2><input type=text id=input3><input type=text id=input4 required value="a"></form>'
+ + '<form id=form3></form>';
+shouldBe('backgroundOf($("form1"))', 'invalidColor');
+shouldBe('backgroundOf($("form2"))', 'validColor');
+shouldBe('backgroundOf($("form3"))', 'validColor');
+var input1 = $('input1');
+input1.setAttribute("form", "form3");
+shouldBe('backgroundOf($("form1"))', 'validColor');
+shouldBe('backgroundOf($("form3"))', 'invalidColor');
+debug('');
+
+debug('Ensure that invalid event was not triggered on style evaluation:');
+var val = '0';
+parent.innerHTML = '<form id=form1><input type=text id=input1 required _oninvalid_="val=\'1\';"></form>';
+var form1 = $('form1');
+shouldBe('backgroundOf(form1)', 'invalidColor');
+shouldBeEqualToString('val', '0');
+shouldBeEqualToString('form1.checkValidity(); val', '1');
+debug('');
+
+parent.innerHTML = '';
+</script>
+</body>
+</html>
