 Chromium Code Reviews
 Chromium Code Reviews Issue 658063002:
  Fix the issue where checking a form for :valid/:invalid would trigger invalid events for its elemen…  (Closed) 
  Base URL: https://chromium.googlesource.com/chromium/blink.git@master
    
  
    Issue 658063002:
  Fix the issue where checking a form for :valid/:invalid would trigger invalid events for its elemen…  (Closed) 
  Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW | 
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> | 
| 2 <html> | 2 <html> | 
| 3 <head> | 3 <head> | 
| 4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> | 
| 5 <style> | 5 <style> | 
| 6 :invalid { background: rgb(255, 0, 0); } | 6 :invalid { background: rgb(255, 0, 0); } | 
| 7 :valid { background: rgb(0, 255, 0); } | 7 :valid { background: rgb(0, 255, 0); } | 
| 8 form:invalid input[type=submit] { background-color: rgb(127, 0, 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); } | 9 form:valid input[type=submit] { background-color: rgb(0, 127, 0); } | 
| 10 </style> | 10 </style> | 
| (...skipping 12 matching lines...) Expand all Loading... | |
| 23 | 23 | 
| 24 var invalidColor = 'rgb(255, 0, 0)'; | 24 var invalidColor = 'rgb(255, 0, 0)'; | 
| 25 var validColor = 'rgb(0, 255, 0)'; | 25 var validColor = 'rgb(0, 255, 0)'; | 
| 26 var subInvalidColor = 'rgb(127, 0, 0)'; | 26 var subInvalidColor = 'rgb(127, 0, 0)'; | 
| 27 var subValidColor = 'rgb(0, 127, 0)'; | 27 var subValidColor = 'rgb(0, 127, 0)'; | 
| 28 | 28 | 
| 29 var parent = document.createElement('div'); | 29 var parent = document.createElement('div'); | 
| 30 document.body.appendChild(parent); | 30 document.body.appendChild(parent); | 
| 31 | 31 | 
| 32 debug('Removing and adding required text inputs and modifying ther value by a DO M tree mutation:'); | 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>'; | 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'); | 34 var form1 = $('form1'); | 
| 35 var input1 = $('input1'); | 35 var input1 = $('input1'); | 
| 36 var input2 = $('input2'); | 36 var input2 = $('input2'); | 
| 37 var sub1 = $('sub1'); | 37 var sub1 = $('sub1'); | 
| 38 shouldBe('backgroundOf(form1)', 'invalidColor'); | 38 shouldBe('backgroundOf(form1)', 'invalidColor'); | 
| 39 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); | 39 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); | 
| 40 shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor'); | 40 shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor'); | 
| 41 shouldBe('backgroundOf(sub1)', 'subValidColor'); | 41 shouldBe('backgroundOf(sub1)', 'subValidColor'); | 
| 42 shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); | 42 shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); | 
| 43 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); | 43 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); | 
| 44 shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor') ; | 44 shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor') ; | 
| 45 shouldBe('backgroundOf(sub1)', 'subValidColor'); | 45 shouldBe('backgroundOf(sub1)', 'subValidColor'); | 
| 46 shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor' ); | 46 shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor' ); | 
| 47 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); | 47 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); | 
| 48 debug('') | 48 debug('') | 
| 49 | 49 | 
| 50 debug('Adding a required text input that is not a direct child of the form:'); | 50 debug('Adding a required text input that is not a direct child of the form:'); | 
| 51 parent.innerHTML = '<form id=form1></form>'; | 51 parent.innerHTML = '<form id=form1></form>'; | 
| 52 var form1 = $('form1'); | 52 var form1 = $('form1'); | 
| 53 shouldBe('backgroundOf(form1)', 'validColor'); | 53 shouldBe('backgroundOf(form1)', 'validColor'); | 
| 54 var div1 = document.createElement('div'); | 54 var div1 = document.createElement('div'); | 
| 55 var input1 = document.createElement('input'); | 55 var input1 = document.createElement('input'); | 
| 56 input1.setAttribute('type', 'text'); | 56 input1.setAttribute('type', 'text'); | 
| 57 input1.setAttribute('required', ''); | 57 input1.setAttribute('required', ''); | 
| 58 form1.appendChild(div1); | 58 form1.appendChild(div1); | 
| 59 shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); | 59 shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); | 
| 60 debug(''); | 60 debug(''); | 
| 61 | 61 | 
| 62 debug('Render multiple forms and move an invalid input from one to another:'); | 62 debug('Render multiple forms and reassign an invalid input from one to another:' ); | 
| 63 parent.innerHTML = '<form id=form1><input type=text id=input1 required><input ty pe=text id=input2 required value="a"></form>' | 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=input3><input type=text id=input4 requ ired value="a"></form>' | 64 + '<form id=form2><input type=text id=input3><input type=text id=input4 requ ired value="a"></form>' | 
| 65 + '<form id=form3></form>'; | 65 + '<form id=form3></form>'; | 
| 66 shouldBe('backgroundOf($("form1"))', 'invalidColor'); | 66 shouldBe('backgroundOf($("form1"))', 'invalidColor'); | 
| 67 shouldBe('backgroundOf($("form2"))', 'validColor'); | 67 shouldBe('backgroundOf($("form2"))', 'validColor'); | 
| 68 shouldBe('backgroundOf($("form3"))', 'validColor'); | 68 shouldBe('backgroundOf($("form3"))', 'validColor'); | 
| 69 var input1 = $('input1'); | 69 var input1 = $('input1'); | 
| 70 var form1 = $('form1'); | |
| 71 var form3 = $('form3'); | |
| 72 input1.setAttribute("form", "form3"); | 70 input1.setAttribute("form", "form3"); | 
| 73 shouldBe('backgroundOf($("form1"))', 'validColor'); | 71 shouldBe('backgroundOf($("form1"))', 'validColor'); | 
| 74 shouldBe('backgroundOf($("form3"))', 'invalidColor'); | 72 shouldBe('backgroundOf($("form3"))', 'invalidColor'); | 
| 75 debug(''); | 73 debug(''); | 
| 76 | 74 | 
| 75 debug('Ensure that invalid event was not triggered on style evaluation:'); | |
| 76 var val = '0'; | |
| 77 parent.innerHTML = '<form id=form1><input type=text id=input1 required oninvalid ="val=\'1\';"></form>'; | |
| 78 var form1 = $('form1'); | |
| 79 shouldBe('backgroundOf(form1)', 'invalidColor'); | |
| 80 shouldBe('val', '"0"'); | |
| 
keishi
2014/10/17 06:24:53
nit: For strings we try to use shouldBeEqualToStri
 
Bartek Nowierski
2014/10/17 06:52:23
Done.
 | |
| 81 shouldBe('form1.checkValidity(); val', '"1"'); | |
| 82 debug(''); | |
| 83 | |
| 77 parent.innerHTML = ''; | 84 parent.innerHTML = ''; | 
| 78 </script> | 85 </script> | 
| 79 </body> | 86 </body> | 
| 80 </html> | 87 </html> | 
| OLD | NEW |