1 files changed, 84 insertions, 0 deletions
diff --git a/testing/web-platform/tests/uievents/order-of-events/focus-events/legacy-manual.html b/testing/web-platform/tests/uievents/order-of-events/focus-events/legacy-manual.html
new file mode 100644
index 0000000000..e71273973e
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/focus-events/legacy-manual.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Focus-related events (including legacy events) should fire in the correct order</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://w3c.github.io/uievents/#legacy-focusevent-event-order">
+    <meta name="flags" content="interact">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <ol>
+      <li>Click into the first text input.</li>
+      <li>Click into the second text input.</li>
+      <li>Click the "Done" button.</li>
+    </ol>
+
+    <input type="text" id="a" value="First">
+    <br>
+    <input type="text" id="b" value="Second">
+    <br>
+    <button type="button" id="done">Done</button>
+
+    <script>
+setup({explicit_timeout: true});
+var done = false;
+var events = [];
+var targets = [];
+function record(e) {
+  if (done) {
+    return;
+  }
+  events.push(e.type);
+  targets.push(e.target.id);
+}
+function finish() {
+  done = true;
+}
+var relevantEvents = [
+  'focus',
+  'blur',
+  'focusin',
+  'focusout',
+  'DOMFocusIn',
+  'DOMFocusOut'
+];
+window.onload = function () {
+  var a = document.getElementById('a');
+  var b = document.getElementById('b');
+  var inputs = [a, b];
+
+  b.addEventListener('blur', finish, false);
+  b.addEventListener('focusout', finish, false);
+  b.addEventListener('DOMFocusOut', finish, false);
+
+  for (var i = 0; i < inputs.length; i++) {
+    for (var k = 0; k < relevantEvents.length; k++) {
+      inputs[i].addEventListener(relevantEvents[k], record, false);
+    }
+  }
+
+  async_test(function(t) {
+    document.getElementById('done').addEventListener('click', function () {
+      finish();
+      t.step(function () {
+        assert_array_equals(
+          events,
+          ['focusin', 'focus', 'DOMFocusIn', 'focusout', 'focusin', 'blur', 'DOMFocusOut', 'focus', 'DOMFocusIn'],
+          'Focus-related events should fire in this order: focusin, focus, DOMFocusIn, focusout, focusin, blur, DOMFocusOut, focus, DOMFocusIn'
+        );
+        assert_array_equals(
+          targets,
+          [      'a',     'a',          'a',        'a',       'b',    'a',           'a',     'b',          'b'],
+          'Focus-related events should fire at the correct targets'
+        );
+        t.done();
+      });
+    }, false);
+  }, 'Focus-related events should fire in the correct order');
+};
+    </script>
+  </body>
+</html>