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| 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'); | |
| 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 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>
| |
| 51 parent.innerHTML = '<form id=form1></form>'; | |
| 52 var form1 = $('form1'); | |
| 53 shouldBe('backgroundOf(form1)', 'validColor'); | |
| 54 var dev1 = document.createElement('dev'); | |
|
keishi
2014/10/03 03:44:13
/dev/div/?
Bartek Nowierski
2014/10/03 06:01:33
Done.
| |
| 55 var input1 = document.createElement('input'); | |
| 56 input1.setAttribute('type', 'text') | |
| 57 input1.setAttribute('required', '') | |
| 58 form1.appendChild(dev1); | |
| 59 shouldBe('dev1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); | |
| 60 debug('') | |
| 61 | |
| 62 debug('Multiple forms:'); | |
| 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=input1><input type=text id=input2 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 debug(''); | |
| 70 | |
| 71 parent.innerHTML = ''; | |
| 72 </script> | |
| 73 </body> | |
| 74 </html> | |
| OLD | NEW |
