1 files changed, 118 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_01.html b/devtools/client/inspector/markup/test/doc_markup_events_01.html
new file mode 100644
index 0000000000..49496dc2f2
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_events_01.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+    #container {
+      border: 1px solid #000;
+      width: 200px;
+      height: 85px;
+    }
+
+    #container > div {
+      border: 1px solid #000;
+      display: inline-block;
+      margin: 2px;
+    }
+
+    #output,
+    #noevents,
+    #DOM0,
+    #handleevent,
+    #output,
+    #noevents {
+      cursor: auto;
+    }
+
+    #output {
+      min-height: 1.5em;
+    }
+    </style>
+    <script type="application/javascript">
+      "use strict";
+
+      /* exported init */
+      function init() {
+        const container = document.getElementById("container");
+        const multiple = document.getElementById("multiple");
+
+        container.addEventListener("mouseover", mouseoverHandler, true);
+        multiple.addEventListener("click", clickHandler);
+        multiple.addEventListener("mouseup", mouseupHandler);
+
+        const he = new HandleEventClick();
+        const handleevent = document.getElementById("handleevent");
+        handleevent.addEventListener("click", he);
+      }
+
+      function mouseoverHandler(event) {
+        if (event.target.id !== "container") {
+          const output = document.getElementById("output");
+          output.textContent = event.target.textContent;
+        }
+      }
+
+      function clickHandler(event) {
+        const output = document.getElementById("output");
+        output.textContent = "click";
+      }
+
+      function mouseupHandler(event) {
+        const output = document.getElementById("output");
+        output.textContent = "mouseup";
+      }
+
+      function HandleEventClick(hehe) {
+
+      }
+
+      HandleEventClick.prototype = {
+        // eslint-disable-next-line object-shorthand
+        handleEvent: function(blah) {
+          alert("handleEvent");
+        }
+      };
+
+      function noeventsClickHandler(event) {
+        alert("noevents has an event listener");
+      }
+
+      /* exported addNoeventsClickHandler, removeNoeventsClickHandler */
+      function addNoeventsClickHandler() {
+        const noevents = document.getElementById("noevents");
+        noevents.addEventListener("click", noeventsClickHandler);
+      }
+
+      function removeNoeventsClickHandler() {
+        const noevents = document.getElementById("noevents");
+        noevents.removeEventListener("click", noeventsClickHandler);
+      }
+    </script>
+  </head>
+  <body onload="init();">
+    <h1>Events test 1</h1>
+    <div id="container">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+      <div>7</div>
+      <div>8</div>
+      <div>9</div>
+      <div>10</div>
+      <div>11</div>
+      <div>12</div>
+      <div>13</div>
+      <div>14</div>
+      <div>15</div>
+      <div>16</div>
+      <div id="multiple">multiple</div>
+    </div>
+    <div id="output"></div>
+    <div id="noevents">noevents</div>
+    <div id="DOM0" onclick="alert('DOM0')">DOM0 event here</div>
+    <div id="handleevent">handleEvent</div>
+  </body>
+</html>