Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/uievents/order-of-events
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
9 files changed, 705 insertions, 0 deletions
diff --git a/testing/web-platform/tests/uievents/order-of-events/README.md b/testing/web-platform/tests/uievents/order-of-events/README.md
new file mode 100644
index 000000000..a6ef35eb0
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/README.md
@@ -0,0 +1,15 @@
+Order of events
+============================
+
+Testing of how events fire in relation to one another
+
+(this is the big work item)
+
+Expecting to need:
+ * braindead test (does it work at all?)
+ * specific functional tests
+ * specific edge cases
+
+Notes:
+ * small tests so that they can be given specific names for what's broken if it fails
+ * include a link to the corresponding test in the spec.
diff --git a/testing/web-platform/tests/uievents/order-of-events/focus-events/focus-automated-blink-webkit.html b/testing/web-platform/tests/uievents/order-of-events/focus-events/focus-automated-blink-webkit.html
new file mode 100644
index 000000000..f98109a9f
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/focus-events/focus-automated-blink-webkit.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<!-- Modified from Chris Rebert's manual version -->
+<!-- This documents the behavior according to blink's implementation -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Focus-related events should fire in the correct order</title>
+    <link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-event-order">
+    <meta name="flags" content="interact">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body id="body">
+    <input type="text" id="a" value="First">
+    <input type="text" id="b" value="Second">
+    <br>
+    <input type="text" id="c" value="Third">
+    <iframe id="iframe">
+    </iframe>
+    <br>
+    <script>
+
+    var test_id = 0;
+    var tests = ['normal', 'iframe']
+
+    function record(evt) {
+      if (done && (evt.type == 'focusin' || evt.type == 'focus') && (evt.target == c)) {
+          startNext();
+      }
+      if (!done) {
+          var activeElement = document.activeElement ?
+            (document.activeElement.tagName === 'IFRAME' ?
+            document.activeElement.contentDocument.activeElement.id :
+            document.activeElement.id) : null;
+          events[tests[test_id]].push(evt.type);
+          targets[tests[test_id]].push(evt.target.id);
+          focusedElements[tests[test_id]].push(activeElement);
+          relatedTargets[tests[test_id]].push(evt.relatedTarget ? evt.relatedTarget.id : null);
+      }
+    }
+    function startNext() {
+        done = false;
+        test_id++;
+    }
+    function finish() {
+        done = true;
+    }
+    var relevantEvents = [
+      'focus',
+      'blur',
+      'focusin',
+      'focusout'
+    ];
+
+    var iframe = document.getElementById('iframe');
+    var a = document.getElementById('a');
+    var b = document.getElementById('b');
+    var c = document.getElementById('c');
+    var d = document.createElement('input');
+
+    d.setAttribute('id', 'd');
+    d.setAttribute('type', 'text');
+    d.setAttribute('value', 'Fourth');
+
+    var events = {'normal': [], 'iframe': []};
+    var targets = {'normal': [], 'iframe': []};
+    var focusedElements = {'normal': [], 'iframe': []};
+    var relatedTargets = {'normal': [], 'iframe': []};
+    var done = false;
+
+    var async_test_normal = async_test('Focus-related events should fire in the correct order (same DocumentOwner)');
+    var async_test_iframe_static = async_test('Focus-related events should fire in the correct order (different DocumentOwner)');
+
+    window.onload = function(evt) {
+
+        iframe.contentDocument.body.appendChild(d);
+
+        var inputs = [a, b, c, d];
+
+        for (var i = 0; i < inputs.length; i++) {
+          for (var k = 0; k < relevantEvents.length; k++) {
+            inputs[i].addEventListener(relevantEvents[k], record, false);
+          }
+        }
+
+        a.addEventListener('focusin', function() { b.focus(); }, false);
+        b.addEventListener('focusin', function() {
+            console.log(events['normal']);
+            console.log(targets['normal']);
+            console.log(relatedTargets['normal']);
+            console.log(focusedElements['normal']);
+
+            async_test_normal.step( function() {
+                assert_array_equals(
+                  events['normal'],
+                  ['focus', 'focusin', 'blur', 'focusout', 'focus', 'focusin'],
+                  'Focus-related events should fire in this order: focusin, focus, focusout, focusin, blur, focus'
+                );
+
+                assert_array_equals(
+                  targets['normal'],
+                  [      'a',     'a',        'a',       'a',    'b',     'b'],
+                  'Focus-related events should fire at the correct targets'
+                );
+
+                assert_array_equals(
+                  relatedTargets['normal'],
+                  [    null,    null,         'b',       'b',    'a',     'a'],
+                  'Focus-related events should reference correct relatedTargets'
+                );
+
+                assert_array_equals(
+                  focusedElements['normal'],
+                  [   'a',     'a',        'body',    'body',    'b',     'b'],
+                  'Focus-related events should fire at the correct time relative to actual focus changes'
+                );
+
+                async_test_normal.done();
+                });
+
+            b.addEventListener('focusout', function() { finish(); c.focus(); });
+            b.blur();
+
+            }, false);
+
+        c.addEventListener('focusin', function() {d.focus();});
+        d.addEventListener('focusin', function() {
+            console.log(events['iframe']);
+            console.log(targets['iframe']);
+            console.log(relatedTargets['iframe']);
+            console.log(focusedElements['iframe']);
+
+            async_test_iframe_static.step(function() {
+                assert_array_equals(
+                  events['iframe'],
+                  ['focus', 'focusin', 'blur', 'focusout', 'focus', 'focusin'],
+                  'Focus-related events should fire in this order: focusin, focus, focusout, focusin, blur, focus'
+                );
+
+                assert_array_equals(
+                  targets['iframe'],
+                  [      'c',     'c',        'c',       'c',    'd',     'd'],
+                  'Focus-related events should fire at the correct targets'
+                );
+
+                assert_array_equals(
+                  relatedTargets['iframe'],
+                  [    null,    null,        null,      null,   null,    null],
+                  'Focus-related events should reference correct relatedTargets'
+                );
+
+                assert_array_equals(
+                  focusedElements['iframe'],
+                  [   'c',     'c',        'body',      'body', 'd',     'd'],
+                  'Focus-related events should fire at the correct time relative to actual focus changes'
+                );
+
+                async_test_iframe_static.done();
+                });
+
+            d.addEventListener('focusout', function() { finish();});
+
+          }, false);
+
+        a.focus();
+    }
+
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/uievents/order-of-events/focus-events/focus-manual.html b/testing/web-platform/tests/uievents/order-of-events/focus-events/focus-manual.html
new file mode 100644
index 000000000..c91f790e2
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/focus-events/focus-manual.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Focus-related 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/#events-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'
+];
+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);
+
+  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', 'focusout', 'focusin', 'blur', 'focus'],
+          'Focus-related events should fire in this order: focusin, focus, focusout, focusin, blur, focus'
+        );
+        assert_array_equals(
+          targets,
+          [      'a',     'a',        'a',       'b',    'a',     '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>
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 000000000..e71273973
--- /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>
diff --git a/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-body-manual.html b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-body-manual.html
new file mode 100644
index 000000000..30b6646af
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-body-manual.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Clicking on the body element itself fires a click event</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://w3c.github.io/uievents/#event-type-click">
+    <meta name="flags" content="interact">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+html {
+  background-color: white;
+  margin: 0;
+}
+body {
+  background-color: blue;
+  margin: 0;
+}
+#guineapig {
+  background-color: white;
+  margin-bottom: 100px;/* Expose an area of the body element itself */
+}
+#other {
+  background-color: white;
+}
+    </style>
+  </head>
+  <body>
+    <p id="guineapig">Click on the blue area below. If a "PASS" result appears, the test passes; otherwise, it fails.</p>
+    <p id="other">&nbsp;</p><!-- Needed to prevent the margin from collapsing -->
+    <script>
+setup({explicit_timeout: true});
+async_test(function(t) {
+  document.body.addEventListener('click', function (event) {
+    t.step(function () {
+      assert_equals(event.target, document.body, 'target of click event must be the body element');
+      assert_equals(event.eventPhase, Event.AT_TARGET, 'click event must propagate to the body element at the Target Phase');
+      var passed = event.target === document.body && event.eventPhase === Event.AT_TARGET;
+      document.body.style.backgroundColor = 'white';
+      var guineapig = document.getElementById('guineapig');
+      guineapig.style.marginBottom = '16px';
+      if (passed) {
+        guineapig.textContent = 'PASS';
+        guineapig.style.backgroundColor = 'green';
+      }
+      t.done();
+    });
+  }, false);
+}, "Clicking on the body element itself should fire a click event targeted at the body element");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-div-manual.html b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-div-manual.html
new file mode 100644
index 000000000..173e520a1
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-div-manual.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Clicking on a div element that has no click event handler fires a click event</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://w3c.github.io/uievents/#event-type-click">
+    <link rel="help" href="https://dom.spec.whatwg.org/#concept-event-dispatch">
+    <meta name="flags" content="interact">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+#square {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  color: white;
+  /* Center the "Click me" text */
+  line-height: 100px;
+  text-align: center;
+}
+    </style>
+  </head>
+  <body>
+    <p>Click on the blue square below. If a "PASS" result appears, the test passes; otherwise, it fails.</p>
+    <div id="square">Click me</div>
+    <script>
+setup({explicit_timeout: true});
+async_test(function(t) {
+  document.addEventListener('click', function (event) {
+    var square = document.getElementById('square');
+    t.step(function () {
+      assert_equals(event.target, square, 'target of click event must be the test square');
+      assert_equals(event.eventPhase, Event.BUBBLING_PHASE, 'click event must propagate to the document object during the Bubbling Phase');
+      square.textContent = 'PASS';
+      square.style.backgroundColor = 'green';
+      t.done();
+    });
+  }, false);
+}, "Clicking on a div element and having a click event listener on only document");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html-manual.html b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html-manual.html
new file mode 100644
index 000000000..7f3514fdd
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/mouse-events/click-on-html-manual.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Clicking on the html element itself fires a click event</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="https://w3c.github.io/uievents/#event-type-click">
+    <meta name="flags" content="interact">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+html {
+  background-color: blue;
+  margin: 0;
+}
+body {
+  background-color: red;
+  height: 0;
+  margin: 0;
+}
+#guineapig {
+  background-color: white;
+  padding-top: 50px;/* Text is easier to see when it's not at the exact top of the viewport */
+  margin-top: 0;/* Ensure there's no exposed html element above this */
+  margin-bottom: 100px;/* Expose an area of the html element itself */
+}
+#other {
+  background-color: white;
+  height: 100vh;/* Push the rest of the html element outside of the viewport */
+}
+    </style>
+  </head>
+  <body>
+    <p id="guineapig">Click on the blue area below. If a "PASS" result appears, the test passes; otherwise, it fails.</p>
+    <p id="other">&nbsp;</p><!-- Needed to prevent the margin from collapsing -->
+    <script>
+setup({explicit_timeout: true});
+async_test(function(t) {
+  document.documentElement.addEventListener('click', function (event) {
+    t.step(function () {
+      assert_equals(event.target, document.documentElement, 'target of click event must be the html element');
+      assert_equals(event.eventPhase, Event.AT_TARGET, 'click event must propagate to the html element at the Target Phase');
+      var passed = event.target === document.documentElement && event.eventPhase === Event.AT_TARGET;
+      document.documentElement.style.backgroundColor = 'white';
+      document.getElementById('other').style.height = 'auto';
+      var guineapig = document.getElementById('guineapig');
+      guineapig.style.marginBottom = '16px';
+      if (passed) {
+        guineapig.textContent = 'PASS';
+        guineapig.style.backgroundColor = 'green';
+      }
+      t.done();
+    });
+  }, false);
+}, "Clicking on the html element itself should fire a click event targeted at the html element");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove-manual.htm b/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove-manual.htm
new file mode 100644
index 000000000..8ed9c1c28
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseevents-mousemove-manual.htm
@@ -0,0 +1,76 @@
+<!doctype html>
+ <head>
+  <meta charset=utf-8>
+  <title>MouseEvent - mousemove event order</title>
+  <style>
+    .testarea { margin: auto; width: 80%; height: 250px; border: 1px solid grey; position: relative; }
+
+    #start,#end { background-color: red; border: 1px solid black; margin: 0; padding: 0; }
+   /* start/end layout */
+   #start.green,#end.green { background-color: green; }
+   #start { position: absolute; left: 15%; top: 15%; width: 50%; height: 50%; }
+   #end { position: absolute; right: 15%; bottom: 15%; width: 50%; height: 50%; }
+  </style>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script>
+   setup({explicit_timeout: true});
+  </script>
+  <script src="/uievents/resources/eventrecorder.js"></script>
+ </head>
+ <body>
+ <p><strong>Description</strong>: Verifies that mousemove events track the pointer position and transition from top-most
+ visible element to top-most visible element, changing targets
+ in the DOM along the way.</p>
+
+ <p><strong>Instructions</strong>: </p>
+ <ol>
+   <li>Move the pointer to the upper-left red box and then move it directly toward and into the lower-right red box.
+ </ol>
+ <p><strong>Test Passes</strong> if both boxes turn green and the word 'PASS' appears below</p>
+
+ <section class="testarea">
+  <div id="end"></div>
+  <div id="start"></div>
+ </section>
+
+ <script>
+    var start = document.getElementById("start");
+    var end = document.getElementById("end");
+
+    EventRecorder.configure({
+      mergeEventTypes: ["mousemove"],
+      objectMap: {
+         "div#start": start,
+         "div#end": end
+      }
+    });
+
+
+    start.addRecordedEventListener('mousemove', function (e) {
+      e.stopPropagation();
+      this.className = "green";
+    });
+
+    end.addRecordedEventListener('mousemove', function (e) {
+      e.stopPropagation();
+      this.className = "green";
+      endTest();
+      done();
+    });
+
+    function endTest() {
+      EventRecorder.stop();
+      var results = EventRecorder.getRecords();
+      // Check results:
+      assert_equals(results.length, 2, "Two mousemove events");
+      assert_equals(results[0].event.type, "mousemove", "First event is a mousemove event");
+      assert_equals(results[1].event.type, "mousemove", "Second event is a mousemove event");
+      assert_equals(results[0].event.target, "div#start", "First event targetted #start");
+      assert_equals(results[1].event.target, "div#end", "Second event targetted #end");
+    }
+
+    EventRecorder.start();
+  </script>
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseover-out-manual.html b/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseover-out-manual.html
new file mode 100644
index 000000000..1d96fd303
--- /dev/null
+++ b/testing/web-platform/tests/uievents/order-of-events/mouse-events/mouseover-out-manual.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Mouseover/mouseout handling</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#outer,
+#inner,
+#released {
+  padding: 10px;
+  margin: 10px;
+  height: 15px;
+}
+
+#outer:hover,
+#inner:hover,
+#released:hover {
+  background: red;
+}
+
+#outer {
+  background: blue;
+}
+
+#inner {
+  background: green;
+}
+
+#released {
+  background: yellow;
+}
+</style>
+<p>
+  Steps:
+
+  <ol>
+    <li>Move your mouse over the blue <code>&lt;div&gt;</code> element, later
+      over the green one, later over the yellow one.
+    <li>Move the mouse from the yellow element to the green one, later to the
+      blue one, and later over this paragraph.
+  </ol>
+</p>
+
+
+<div id="outer">
+  <div id="inner"></div>
+</div>
+<div id="released"></div>
+
+<div id="log"></div>
+
+<script>
+var t = async_test("Mouseover/out events");
+var outer = document.getElementById("outer");
+var inner = document.getElementById("inner");
+
+var inner_over = 0;
+var inner_out = 0;
+
+var outer_own_over = 0;
+var outer_own_out = 0;
+var outer_over = 0;
+var outer_out = 0;
+
+
+inner.addEventListener("mouseover", t.step_func(function(e) {
+  assert_true(inner_over == inner_out, "mouseover is received before mouseout");
+
+  switch (inner_over) {
+    case 0:
+      assert_true(outer_own_over == 1, "should have triggered a mouseover in the outer before");
+      break;
+    case 1:
+      assert_true(outer_own_over == 1, "should have not triggered a mouseover in the outer before");
+      break;
+    default:
+      assert_true(false, "should not get more than two mouseovers");
+  }
+
+  inner_over++;
+}), false);
+
+inner.addEventListener("mouseout", t.step_func(function(e) {
+  assert_true(inner_over == inner_out + 1, "mouseout is received after mouseover");
+
+  switch (inner_out) {
+    case 0:
+      assert_true(outer_own_out == 1, "mouseout should have been received in the parent when hovering over this element");
+      break;
+    case 1:
+      break;
+    default:
+      assert_true(false, "should not get more than two mouseouts");
+  }
+
+  inner_out++;
+}), false);
+
+outer.addEventListener("mouseover", t.step_func(function(e) {
+  if (e.target == outer) {
+    assert_true(outer_own_over == outer_own_out, "outer: mouseover is received before mouseout");
+    outer_own_over++;
+  } else {
+    assert_true(outer_over - outer_own_over == inner_over - 1, "mouseover: should only receive this via bubbling");
+  }
+
+  outer_over++;
+}), false);
+
+outer.addEventListener('mouseout', t.step_func(function(e) {
+  if (e.target == outer) {
+    assert_true(outer_own_over == outer_own_out + 1, "outer: mouseout is received after mouseover");
+    if (outer_own_out == 1) {
+      assert_true(inner_out == 2, "inner should be done now");
+      t.done();
+    }
+
+    outer_own_out++;
+  } else {
+    assert_true(outer_out - outer_own_out == inner_out - 1, "mouseout: should only receive this via bubbling");
+  }
+
+  outer_out++;
+}), false);
+</script>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/uievents/order-of-events
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip