<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Clicks on detached checkboxes don't bubble"
   href="https://bugs.webkit.org/show_bug.cgi?id=146516">146516</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>Clicks on detached checkboxes don't bubble
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>528+ (Nightly build)
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>All
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>All
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>Event Handling
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>m.goleb+bugzilla&#64;gmail.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Steps to reproduce the problem:

var div = document.createElement('div');
div.innerHTML = '&lt;input type=&quot;checkbox&quot;&gt;';
var input = div.querySelector('input');
div.addEventListener('click', function () {console.log('click on the div');});
input.addEventListener('click', function () {console.log('click on the input');});
var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
input.dispatchEvent(event);

What is the expected behavior?
Console output should show:

&quot;click on the input&quot;
&quot;click on the div&quot;

What went wrong?
Console output shows:

&quot;click on the input&quot;

That is, the event is not bubbled to the div.

Reported also for Chrome at <a href="https://code.google.com/p/chromium/issues/detail?id=479207">https://code.google.com/p/chromium/issues/detail?id=479207</a>. Safari is now the only browser that does it this way. This seems to be introduced in <a class="bz_bug_link 
          bz_status_RESOLVED  bz_closed"
   title="RESOLVED FIXED - REGRESSION: Google Finance dropdown Flickers"
   href="show_bug.cgi?id=12918">https://bugs.webkit.org/show_bug.cgi?id=12918</a></pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>