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 |