drag-drop-events.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<input type="text" id="src" value="abc">
<input type="text" id="dst">
<script>
test(() => {
    const expected = [
      {name: 'focus', target: 'src'},
      {name: 'drop', target: 'dst'},
      {name: 'input', target: 'src'},
      {name: 'change', target: 'src'},
      {name: 'blur', target: 'src'},
      {name: 'focus', target: 'dst'},
      {name: 'input', target: 'dst'},
    ];

    var fired = 0;
    function checkEvent(name, target) {
      assert_equals(name, expected[fired].name, `Expected: 
          "${expected[fired].name}" fired on "${expected[fired].target}". ` + 
          `Actual: "${name}" fired on "${target}".`);
      assert_equals(target, expected[fired].target, `Expected: 
          "${expected[fired].name}" fired on "${expected[fired].target}". ` + 
          `Actual: "${name}" fired on "${target}".`);
      ++fired;
    }

    var src = document.getElementById('src');
    var dst = document.getElementById('dst');

    ['blur', 'change', 'drop', 'focus', 'input'].forEach(function(event) {
        src.addEventListener(event, () => checkEvent(event, 'src'));
        dst.addEventListener(event, () => checkEvent(event, 'dst'));
    });

    src.select();
    eventSender.mouseMoveTo(src.offsetLeft + src.offsetWidth / 2, src.offsetTop + src.offsetHeight / 2);
    eventSender.mouseDown();
    eventSender.leapForward(1000);
    eventSender.mouseMoveTo(dst.offsetLeft + dst.offsetWidth / 2, dst.offsetTop + dst.offsetHeight / 2);
    eventSender.mouseUp();
}, 'Event order by drag-and-drop');
</script>
</body>
</html>
chromium/third_party/blink/web_tests/editing/selection/drag-drop-events.html
