<style>
  .target {
    border: 1px solid orange;
    color: brown;
    background-color: lightgrey;
    padding: 2px;
  }

  div {
    margin: 5px;
  }

  img {
    width: 20px;
    height: 20px;
  }
  
  #log {
    border: 0px;
    font-size: small;
    clear: both;
  }

  .config {
    font-size: smaller;
  }

  .mousemove {
    color: black;
    background: lightgrey;
  }

  .selectstart {
    color: blue;
    background: lightblue;
  }

  .dragstart {
    color: darkcyan;
    background: lightcyan;
  }
</style>
<h1>crbug269917 and crbug346473: mousedown and mousemove default actions</h1>
<h2></h2>
<div>
  <div>Manual tests for default actions of
    <a href="https://w3c.github.io/uievents/#event-type-mousedown">mousedown</a> and
    <a href="https://w3c.github.io/uievents/#event-type-mousemove">mousemove</a>
    events.    
  </div>
  <div>
    Expected: the text is selectable and the image is draggable regardless of whether
    mousemove is cancelled or not. None of them work when mousedown is cancelled.
  </div>
</div>

<fieldset class="config">
  <legend>Configuration: events to cancel (preventDefault)</legend>
  <input type="checkbox" id="cancel_selectstart" /><label for="cancel_selectstart">selectstart (to suppress text selection)</label>
  <br/>
  <input type="checkbox" id="cancel_dragstart" /><label for="cancel_dragstart">dragstart (to suppress drag)</label>
  <br/>
  <input type="checkbox" id="cancel_mousedown" /><label for="cancel_mousedown">mousedown</label>
  <input type="checkbox" id="cancel_pointerdown" /><label for="cancel_pointerdown">pointerdown</label>
  <br/>
  <input type="checkbox" id="cancel_mousemove" /><label for="cancel_mousemove">mousemove</label>
  <input type="checkbox" id="cancel_pointermove" /><label for="cancel_pointermove">pointermove</label>
</fieldset>

<div>
  <span class="label">Try to select the text:</span>
  <span class="target">sample text</span>
</div>

<div>
  <span class="label">Try to drag the image:</span>
  <img class="target" src="https://avatars.githubusercontent.com/u/8505377"/>
</div>

<div id="log"></div>

<script>
  function log(msg) {
    document.getElementById("log").innerHTML += msg;
  }

  let event_list = [
    "selectstart", "dragstart",
    "mousedown", "mousemove", "pointerdown", "pointermove"
  ];
  let target_list = document.getElementsByClassName("target");
  let events_to_cancel = new Set();

  event_list.forEach(ename => {
    check_box = document.getElementById("cancel_" + ename);
    check_box.addEventListener("input", e => {
      if (e.target.checked)
        events_to_cancel.add(ename);
      else
        events_to_cancel.delete(ename);
    });
  });
  
  event_list.forEach(ename => {
    for (var i = 0; i < target_list.length; i++) {
      target_list[i].addEventListener(ename, e => {
        let msg = e.type;
        if (events_to_cancel.has(e.type)) {          
          e.preventDefault();
          msg += " (canceled)"
        }
        log(`<span class='${e.type}'>${msg}</span> `);
        console.log(msg);
      });
    }
  });
</script>