third_party/WebKit/LayoutTests/fast/forms/checkValidity-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 description('HTMLFormElement::checkValidity() with cases that event handlers called by checkValidity() updates DOM structure.')
  11
  12 var parent = document.createElement('div');
  13 document.body.appendChild(parent);
  14
  15 // ----------------------------------------------------------------
  16 debug('The target form is removed.');
  17 parent.innerHTML = '<form id=f1><input name=i id=i required></form>';
  18 var handler = function(event) {
  19     parent.innerHTML = '';
  20 };
  21 document.getElementById('i').addEventListener('invalid', handler, false);
  22 // The specificiation doesn't define the behavior in this case.
  23 // It's ok if WebKit doesn't crash.
  24 shouldBeFalse('document.getElementById("f1").checkValidity()');
  25
  26 // ----------------------------------------------------------------
  27 debug('');
  28 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>';
  30 var handler1 = function(event) {
  31     document.getElementById('f1').removeChild(document.getElementById('i2'));
  32 };
  33 document.getElementById('i1').addEventListener('invalid', handler1, false);
  34 var handler2Called = false;
  35 var handler2 = function(event) {
  36     handler2Called = true;
  37 };
  38 document.getElementById('i2').addEventListener('invalid', handler2, false);
  39 shouldBeFalse('document.getElementById("f1").checkValidity()');
  40 // 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.
  42 shouldBeFalse('handler2Called');
  43
  44 // ----------------------------------------------------------------
  45 debug('');
  46 debug('A new control is added.');
  47 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>';
  48 handler2Called = false;
  49 handler2 = function(event) {
  50     handler2Called = true;
  51 };
  52 handler1 = function(event) {
  53     var input = document.createElement('input');
  54     input.name = 'i2';
  55     input.required = true;
  56     input.addEventListener('invalid', handler2, false);
  57     document.getElementById('f1').appendChild(input);
  58 };
  59 document.getElementById('i1').addEventListener('invalid', handler1, false);
  60 shouldBeFalse('document.getElementById("f1").checkValidity()');
  61 // If a new node is added to the form, checkValidity() doesn't handle it.
  62 shouldBeFalse('handler2Called');
  63
  64 // ----------------------------------------------------------------
  65 debug('');
  66 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>'
  68     + '<form id=f2></form>';
  69 handler1 = function(event) {
  70     document.getElementById('f2').appendChild(document.getElementById('i2'));
  71 };
  72 document.getElementById('i1').addEventListener('invalid', handler1, false);
  73 handler2Called = false;
  74 handler2 = function(event) {
  75     handler2Called = true;
  76 };
  77 document.getElementById('i2').addEventListener('invalid', handler2, false);
  78 shouldBeFalse('document.getElementById("f1").checkValidity()');
  79 // The moved control is not checked.
  80 shouldBeFalse('handler2Called');
  81
  82 // ----------------------------------------------------------------
  83 debug('');
  84 debug('A control is moved to another document.');
  85 parent.innerHTML = '<form id=f1><input name=i1 id=i1 required></form>';
  86 var doc2 = document.implementation.createHTMLDocument();
  87 handler1 = function(event) {
  88     doc2.body.appendChild(doc2.adoptNode(document.getElementById('i1')));
  89 };
  90 document.getElementById('i1').addEventListener('invalid', handler1, false);
  91 // i1 is not listed in 'unhandled invalid controls' because it was moved to
  92 // another document.
  93 shouldBeTrue('document.getElementById("f1").checkValidity()');
  94
  95 parent.innerHTML = '';
  96 </script>
  97 </body>
  98 </html>