OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
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 </head> | 5 </head> |
6 <body> | 6 <body> |
7 <p id="description"></p> | 7 <p id="description"></p> |
8 <div id="console"></div> | 8 <div id="console"></div> |
9 <script> | 9 <script> |
10 description('HTMLFormElement::checkValidity() with cases that event handlers cal
led by checkValidity() updates DOM structure.') | 10 function $(id) { return document.getElementById(id); } |
| 11 |
| 12 description('HTMLFormElement::reportValidity() with cases that event handlers ca
lled by reportValidity() updates DOM structure.') |
11 | 13 |
12 var parent = document.createElement('div'); | 14 var parent = document.createElement('div'); |
13 document.body.appendChild(parent); | 15 document.body.appendChild(parent); |
14 | 16 |
15 // ---------------------------------------------------------------- | 17 // ---------------------------------------------------------------- |
16 debug('The target form is removed.'); | 18 debug('The target form is removed.'); |
17 parent.innerHTML = '<form id=f1><input name=i id=i required></form>'; | 19 parent.innerHTML = '<form id=f1><input name=i id=i required></form>'; |
18 var handler = function(event) { | 20 var handler = function(event) { |
19 parent.innerHTML = ''; | 21 parent.innerHTML = ''; |
20 }; | 22 }; |
21 document.getElementById('i').addEventListener('invalid', handler, false); | 23 $('i').addEventListener('invalid', handler, false); |
22 // The specificiation doesn't define the behavior in this case. | 24 // The specificiation doesn't define the behavior in this case. |
23 // It's ok if WebKit doesn't crash. | 25 // It's ok if WebKit doesn't crash. |
24 shouldBeFalse('document.getElementById("f1").checkValidity()'); | 26 shouldBeFalse('$("f1").reportValidity()'); |
25 | 27 |
26 // ---------------------------------------------------------------- | 28 // ---------------------------------------------------------------- |
27 debug(''); | 29 debug(''); |
28 debug('A control to be checked is removed.'); | 30 debug('A control to be checked is removed.'); |
29 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=
i2 required></form>'; | 31 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=
i2 required></form>'; |
30 var handler1 = function(event) { | 32 var handler1 = function(event) { |
31 document.getElementById('f1').removeChild(document.getElementById('i2')); | 33 $('f1').removeChild($('i2')); |
32 }; | 34 }; |
33 document.getElementById('i1').addEventListener('invalid', handler1, false); | 35 $('i1').addEventListener('invalid', handler1, false); |
34 var handler2Called = false; | 36 var handler2Called = false; |
35 var handler2 = function(event) { | 37 var handler2 = function(event) { |
36 handler2Called = true; | 38 handler2Called = true; |
37 }; | 39 }; |
38 document.getElementById('i2').addEventListener('invalid', handler2, false); | 40 $('i2').addEventListener('invalid', handler2, false); |
39 shouldBeFalse('document.getElementById("f1").checkValidity()'); | 41 shouldBeFalse('$("f1").reportValidity()'); |
40 // If the node was removed from the form, i2.checkValidity() is called, but an | 42 // If the node was removed from the form, i2.checkValidity() is called, but an |
41 // invalid event is not fired because it is not in any documents. | 43 // invalid event is not fired because it is not in any documents. |
42 shouldBeFalse('handler2Called'); | 44 shouldBeFalse('handler2Called'); |
| 45 shouldBe('document.activeElement', '$("i1")'); |
43 | 46 |
44 // ---------------------------------------------------------------- | 47 // ---------------------------------------------------------------- |
45 debug(''); | 48 debug(''); |
| 49 debug('A control that was checked was removed.'); |
| 50 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=
i2 required></form>'; |
| 51 var handler1 = function(event) { |
| 52 $('f1').removeChild($('i1')); |
| 53 }; |
| 54 $('i1').addEventListener('invalid', handler1, false); |
| 55 var handler2Called = false; |
| 56 var handler2 = function(event) { |
| 57 handler2Called = true; |
| 58 }; |
| 59 $('i2').addEventListener('invalid', handler2, false); |
| 60 shouldBeFalse('$("f1").reportValidity()'); |
| 61 shouldBeTrue('handler2Called'); |
| 62 shouldBe('document.activeElement', '$("i2")'); |
| 63 |
| 64 // ---------------------------------------------------------------- |
| 65 debug(''); |
46 debug('A new control is added.'); | 66 debug('A new control is added.'); |
47 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>'; | 67 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>'; |
48 handler2Called = false; | 68 handler2Called = false; |
49 handler2 = function(event) { | 69 handler2 = function(event) { |
50 handler2Called = true; | 70 handler2Called = true; |
51 }; | 71 }; |
52 handler1 = function(event) { | 72 handler1 = function(event) { |
53 var input = document.createElement('input'); | 73 var input = document.createElement('input'); |
54 input.name = 'i2'; | 74 input.name = 'i2'; |
55 input.required = true; | 75 input.required = true; |
56 input.addEventListener('invalid', handler2, false); | 76 input.addEventListener('invalid', handler2, false); |
57 document.getElementById('f1').appendChild(input); | 77 $('f1').appendChild(input); |
58 }; | 78 }; |
59 document.getElementById('i1').addEventListener('invalid', handler1, false); | 79 $('i1').addEventListener('invalid', handler1, false); |
60 shouldBeFalse('document.getElementById("f1").checkValidity()'); | 80 shouldBeFalse('$("f1").reportValidity()'); |
61 // If a new node is added to the form, checkValidity() doesn't handle it. | 81 // If a new node is added to the form, reportValidity() doesn't handle it. |
62 shouldBeFalse('handler2Called'); | 82 shouldBeFalse('handler2Called'); |
| 83 shouldBe('document.activeElement', '$("i1")'); |
63 | 84 |
64 // ---------------------------------------------------------------- | 85 // ---------------------------------------------------------------- |
65 debug(''); | 86 debug(''); |
66 debug('A control is moved to another form.'); | 87 debug('A control is moved to another form.'); |
67 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=
i2 required></form>' | 88 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required><input name=i2 id=
i2 required></form>' |
68 + '<form id=f2></form>'; | 89 + '<form id=f2></form>'; |
69 handler1 = function(event) { | 90 handler1 = function(event) { |
70 document.getElementById('f2').appendChild(document.getElementById('i2')); | 91 $('f2').appendChild($('i2')); |
71 }; | 92 }; |
72 document.getElementById('i1').addEventListener('invalid', handler1, false); | 93 $('i1').addEventListener('invalid', handler1, false); |
73 handler2Called = false; | 94 handler2Called = false; |
74 handler2 = function(event) { | 95 handler2 = function(event) { |
75 handler2Called = true; | 96 handler2Called = true; |
76 }; | 97 }; |
77 document.getElementById('i2').addEventListener('invalid', handler2, false); | 98 $('i2').addEventListener('invalid', handler2, false); |
78 shouldBeFalse('document.getElementById("f1").checkValidity()'); | 99 shouldBeFalse('$("f1").reportValidity()'); |
79 // The moved control is not checked. | 100 // The moved control is not checked. |
80 shouldBeFalse('handler2Called'); | 101 shouldBeFalse('handler2Called'); |
| 102 shouldBe('document.activeElement', '$("i1")'); |
81 | 103 |
82 // ---------------------------------------------------------------- | 104 // ---------------------------------------------------------------- |
83 debug(''); | 105 debug(''); |
84 debug('A control is moved to another document.'); | 106 debug('A control is moved to another document.'); |
85 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>'; | 107 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>'; |
86 var doc2 = document.implementation.createHTMLDocument(); | 108 var doc2 = document.implementation.createHTMLDocument(); |
87 handler1 = function(event) { | 109 handler1 = function(event) { |
88 doc2.body.appendChild(doc2.adoptNode(document.getElementById('i1'))); | 110 doc2.body.appendChild(doc2.adoptNode($('i1'))); |
89 }; | 111 }; |
90 document.getElementById('i1').addEventListener('invalid', handler1, false); | 112 $('i1').addEventListener('invalid', handler1, false); |
91 // i1 is not listed in 'unhandled invalid controls' because it was moved to | 113 // i1 is not listed in 'unhandled invalid controls' because it was moved to |
92 // another document. | 114 // another document. |
93 shouldBeTrue('document.getElementById("f1").checkValidity()'); | 115 shouldBeTrue('$("f1").reportValidity()'); |
94 | 116 |
95 parent.innerHTML = ''; | 117 parent.innerHTML = ''; |
96 </script> | 118 </script> |
97 </body> | 119 </body> |
98 </html> | 120 </html> |
OLD | NEW |