Chromium Code Reviews Chromium Code Reviews
Issue 616443002:
Implement :valid and :invalid pseudoclass for <form> (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/forms/form-pseudo-valid-style.html |
| diff --git a/LayoutTests/fast/forms/form-pseudo-valid-style.html b/LayoutTests/fast/forms/form-pseudo-valid-style.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..a8f9234d5a4d610b564e92d3f368808e3f65e722 |
| --- /dev/null |
| +++ b/LayoutTests/fast/forms/form-pseudo-valid-style.html |
| @@ -0,0 +1,74 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| +<script src="../../resources/js-test.js"></script> |
| +<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'); |
| + |
| +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 ther 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('Adding a required text input indirectly to a form:'); |
|
keishi
2014/10/03 03:44:13
nit: 'indirectly' is hard to understand. Maybe 'fr
Bartek Nowierski
2014/10/03 06:01:33
Oh, I meant that it isn't a direct child of <form>
|
| +parent.innerHTML = '<form id=form1></form>'; |
| +var form1 = $('form1'); |
| +shouldBe('backgroundOf(form1)', 'validColor'); |
| +var dev1 = document.createElement('dev'); |
|
keishi
2014/10/03 03:44:13
/dev/div/?
Bartek Nowierski
2014/10/03 06:01:33
Done.
|
| +var input1 = document.createElement('input'); |
| +input1.setAttribute('type', 'text') |
| +input1.setAttribute('required', '') |
| +form1.appendChild(dev1); |
| +shouldBe('dev1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); |
| +debug('') |
| + |
| +debug('Multiple forms:'); |
| +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=input1><input type=text id=input2 required value="a"></form>' |
| + + '<form id=form3></form>'; |
| +shouldBe('backgroundOf($("form1"))', 'invalidColor'); |
| +shouldBe('backgroundOf($("form2"))', 'validColor'); |
| +shouldBe('backgroundOf($("form3"))', 'validColor'); |
| +debug(''); |
| + |
| +parent.innerHTML = ''; |
| +</script> |
| +</body> |
| +</html> |
