src/third_party/WebKit/LayoutTests/fast/forms/reportValidity-handler-updates-dom.html

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