LayoutTests/fast/events/onsubmit-bubbling.html

   1 <html>
   2 <head>
   3 <script>
   4 function print(message, color)
   5 {
   6     var paragraph = document.createElement("div");
   7     paragraph.appendChild(document.createTextNode(message));
   8     paragraph.style.fontFamily = "monospace";
   9     if (color)
  10         paragraph.style.color = color;
  11     document.getElementById("console").appendChild(paragraph);
  12 }
  13
  14 function test()
  15 {
  16     if (window.layoutTestController)
  17         layoutTestController.dumpAsText();
  18
  19
  20     document.getElementById('div1').onsubmit = function () {
  21         pass(this.id);
  22         return false; // returning false cancels form submission
  23     };
  24     document.getElementById('input1').click();
  25 }
  26
  27 function pass(id)
  28 {
  29     print("PASS: containing element " + id + " caught submit event", "green");
  30 }
  31
  32 function fail()
  33 {
  34     print("FAIL: containing element did not cancel submit event", "red");
  35 }
  36
  37 </script>
  38 </head>
  39 <body onload="test();">
  40 <p>This page tests whether the form 'submit' event bubbles to containing elements.
  41    If it passes, you'll see 'PASS' messages below.</p>
  42 <hr>
  43 <div id='console'></div>
  44 <div id="div1">
  45     <div id="div2" onsubmit="pass(this.id);">
  46         <form id="form1" action="javascript:fail();"> <!-- only executes if form submits -->
  47             <input id="input1" type="submit">
  48         </form>
  49     </div>
  50 </div>
  51 </body>
  52 </html>