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