title: setPointerCapture behaves differently in Chrome and Firefox
body: <p>I have a bunch of square div inside flexboxes. When I press a mouse button inside a square, I would like the background of the target square to change. I would like to capture the mouse, so when I move the mouse outside the captured square and release the mouse button the background should change back to its original color.</p>
  
  <p>This is a little difficult to describe, so here's the code. <a href="https://codepen.io/tqphan/pen/qBWaVod" rel="nofollow noreferrer">https://codepen.io/tqphan/pen/qBWaVod</a></p>
  
  <pre><code>window.addEventListener('mousedown', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target.classList.add("pressed")
    target.setPointerCapture(e.pointerId);
  }, true);
  window.addEventListener('mouseup', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target.classList.remove("pressed")
    target.releasePointerCapture(e.pointerId);
  }, true);
  </code></pre>
  
  <p>To reproduce the problem, please follow these steps:</p>
  
  <ol>
  <li>Press the left mouse button over a square.</li>
  <li>While the left mouse button is held down, drag the mouse outside the square.</li>
  <li>Release the left mouse button.</li>
  </ol>
  
  <p>In Firefox, it works as I expected. In Chrome, the background doesn't change back to its original color. </p>
  
  <p>I tried capturing the events for window and document.</p>
  
  <p>edit: 
  It appears pointer capture and release are not executed in Chrome.</p>
  
  <pre><code>pen.js:6 Uncaught DOMException: Failed to execute 'setPointerCapture' on 'Element': No active pointer with the given id is found.
  
  pen.js:12 Uncaught DOMException: Failed to execute 'releasePointerCapture' on 'Element': No active pointer with the given id is found.
  </code></pre>