| 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 11 matching lines...) Expand all Loading... |
| 22 } | 22 } |
| 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 their value by a D
OM 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('Disabling and marking inputs readonly by a DOM tree mutation:'); |
| 51 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>'; |
| 52 var form1 = $('form1'); |
| 53 var input1 = $('input1'); |
| 54 var sub1 = $('sub1'); |
| 55 shouldBe('backgroundOf(form1)', 'invalidColor'); |
| 56 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); |
| 57 shouldBe('input1.disabled=1; backgroundOf(form1)', 'validColor'); |
| 58 shouldBe('backgroundOf(sub1)', 'subValidColor'); |
| 59 shouldBe('input1.disabled=0; backgroundOf(form1)', 'invalidColor'); |
| 60 shouldBe('backgroundOf(sub1)', 'subInvalidColor'); |
| 61 shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(form1)', 'validColo
r'); |
| 62 shouldBe('backgroundOf(sub1)', 'subValidColor'); |
| 63 debug('') |
| 64 |
| 65 debug('Move element under datalist by a DOM tree mutation:'); |
| 66 parent.innerHTML = '<form id=form1></form><datalist id=dl1></datalist><input typ
e=text id=input1 required form=form1>'; |
| 67 var form1 = $('form1'); |
| 68 var input1 = $('input1'); |
| 69 var dl1 = $('dl1'); |
| 70 shouldBe('backgroundOf(form1)', 'invalidColor'); |
| 71 shouldBe('parent.removeChild(input1); backgroundOf(form1)', 'validColor'); |
| 72 shouldBe('dl1.appendChild(input1); backgroundOf(form1)', 'validColor'); |
| 73 shouldBe('parent.appendChild(input1); backgroundOf(form1)', 'invalidColor'); |
| 74 debug('') |
| 75 |
| 50 debug('Adding a required text input that is not a direct child of the form:'); | 76 debug('Adding a required text input that is not a direct child of the form:'); |
| 51 parent.innerHTML = '<form id=form1></form>'; | 77 parent.innerHTML = '<form id=form1></form>'; |
| 52 var form1 = $('form1'); | 78 var form1 = $('form1'); |
| 53 shouldBe('backgroundOf(form1)', 'validColor'); | 79 shouldBe('backgroundOf(form1)', 'validColor'); |
| 54 var div1 = document.createElement('div'); | 80 var div1 = document.createElement('div'); |
| 55 var input1 = document.createElement('input'); | 81 var input1 = document.createElement('input'); |
| 56 input1.setAttribute('type', 'text'); | 82 input1.setAttribute('type', 'text'); |
| 57 input1.setAttribute('required', ''); | 83 input1.setAttribute('required', ''); |
| 58 form1.appendChild(div1); | 84 form1.appendChild(div1); |
| 59 shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); | 85 shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); |
| (...skipping 18 matching lines...) Expand all Loading... |
| 78 var form1 = $('form1'); | 104 var form1 = $('form1'); |
| 79 shouldBe('backgroundOf(form1)', 'invalidColor'); | 105 shouldBe('backgroundOf(form1)', 'invalidColor'); |
| 80 shouldBeEqualToString('val', '0'); | 106 shouldBeEqualToString('val', '0'); |
| 81 shouldBeEqualToString('form1.checkValidity(); val', '1'); | 107 shouldBeEqualToString('form1.checkValidity(); val', '1'); |
| 82 debug(''); | 108 debug(''); |
| 83 | 109 |
| 84 parent.innerHTML = ''; | 110 parent.innerHTML = ''; |
| 85 </script> | 111 </script> |
| 86 </body> | 112 </body> |
| 87 </html> | 113 </html> |
| OLD | NEW |