cuprite 0.18 → 0.20

data/lib/capybara/cuprite/javascripts/index.js

@@ -1,606 +1,628 @@
-class InvalidSelector extends Error {}
-class TimedOutPromise extends Error {}
-class MouseEventFailed extends Error {}
-
-const EVENTS = {
-  FOCUS: ["blur", "focus", "focusin", "focusout"],
-  MOUSE: ["click", "dblclick", "mousedown", "mouseenter", "mouseleave",
-          "mousemove", "mouseover", "mouseout", "mouseup", "contextmenu"],
-  FORM: ["submit"]
-}
-
-class Cuprite {
-  constructor() {
-    this._json = JSON; // In case someone overrides it like mootools
+(() => {
+  if (window._cuprite) return;
+
+  class InvalidSelector extends Error {}
+  class TimedOutPromise extends Error {}
+  class MouseEventFailed extends Error {}
+
+  const EVENTS = {
+    FOCUS: ["blur", "focus", "focusin", "focusout"],
+    MOUSE: ["click", "dblclick", "mousedown", "mouseenter", "mouseleave",
+            "mousemove", "mouseover", "mouseout", "mouseup", "contextmenu"],
+    FORM: ["submit"]
   }
 
-  find(method, selector, within = document) {
-    try {
-      let results = [];
+  class Cuprite {
+    constructor() {
+      this._json = JSON; // In case someone overrides it like mootools
+    }
 
-      if (method == "xpath") {
-        let xpath = document.evaluate(selector, within, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-        for (let i = 0; i < xpath.snapshotLength; i++) {
-          results.push(xpath.snapshotItem(i));
+    find(method, selector, within = document) {
+      try {
+        let results = [];
+
+        if (method == "xpath") {
+          let xpath = document.evaluate(selector, within, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+          for (let i = 0; i < xpath.snapshotLength; i++) {
+            results.push(xpath.snapshotItem(i));
+          }
+        } else {
+          results = Array.from(within.querySelectorAll(selector));
         }
-      } else {
-        results = Array.from(within.querySelectorAll(selector));
-      }
 
-      return results;
-    } catch (error) {
-      // DOMException.INVALID_EXPRESSION_ERR is undefined, using pure code
-      if (error.code == DOMException.SYNTAX_ERR || error.code == 51) {
-        throw new InvalidSelector;
-      } else {
-        throw error;
+        return results;
+      } catch (error) {
+        // DOMException.INVALID_EXPRESSION_ERR is undefined, using pure code
+        if (error.code == DOMException.SYNTAX_ERR || error.code == 51) {
+          throw new InvalidSelector;
+        } else {
+          throw error;
+        }
       }
     }
-  }
 
-  parents(node) {
-    let nodes = [];
-    let parent = node.parentNode;
-    while (parent != document && parent !== null) {
-      nodes.push(parent);
-      parent = parent.parentNode;
-    }
-    return nodes;
-  }
-
-  visibleText(node) {
-    if (this.isVisible(node)) {
-      if (node.nodeName == "TEXTAREA") {
-        return node.textContent;
-      }
-      if (node instanceof SVGElement) {
-        return node.textContent;
+    parents(node) {
+      let nodes = [];
+      let parent = node.parentNode;
+      while (parent != document && parent !== null) {
+        nodes.push(parent);
+        parent = parent.parentNode;
       }
-      if (node instanceof ShadowRoot) {
-        return Array.from(node.children)
-          .map(child => this.visibleText(child))
-          .filter(text => text)
-          .join(" ");
-      }
-      return node.innerText;
+      return nodes;
     }
-  }
 
-  isVisible(node) {
-    let mapName, style;
-    // if node is area, check visibility of relevant image
-    if (node.tagName === "AREA") {
-      mapName = document.evaluate("./ancestor::map/@name", node, null, XPathResult.STRING_TYPE, null).stringValue;
-      node = document.querySelector(`img[usemap="#${mapName}"]`);
-      if (node == null) {
-        return false;
+    visibleText(node) {
+      if (this.isVisible(node)) {
+        if (node.nodeName == "TEXTAREA") {
+          return node.textContent;
+        }
+        if (node instanceof SVGElement) {
+          return node.textContent;
+        }
+        if (node instanceof ShadowRoot) {
+          return Array.from(node.children)
+            .map(child => this.visibleText(child))
+            .filter(text => text)
+            .join(" ");
+        }
+        return node.innerText;
       }
     }
 
-    while (node) {
-      if (node instanceof ShadowRoot) {
-        node = node.host;
-      } else {
-        style = window.getComputedStyle(node);
-        if (style.display === "none" || style.visibility === "hidden" || parseFloat(style.opacity) === 0) {
+    isVisible(node) {
+      let mapName, style;
+      // if node is area, check visibility of relevant image
+      if (node.tagName === "AREA") {
+        mapName = document.evaluate("./ancestor::map/@name", node, null, XPathResult.STRING_TYPE, null).stringValue;
+        node = document.querySelector(`img[usemap="#${mapName}"]`);
+        if (node == null) {
           return false;
         }
+      }
+
+      let ancestorOpacityApplies = true;
 
-        let parent = node.parentElement;
-        if (parent && parent.tagName === "DETAILS" && !parent.open) {
-          // In a closed <details> only the first <summary> (and its subtree) is rendered.
-          if (node !== parent.querySelector(":scope > summary")) {
+      while (node) {
+        if (node instanceof ShadowRoot) {
+          node = node.host;
+        } else {
+          style = window.getComputedStyle(node);
+          if (style.display === "none" || style.visibility === "hidden" || (ancestorOpacityApplies && parseFloat(style.opacity) === 0)) {
             return false;
           }
-        }
 
-        node = parent ?? (node.getRootNode() instanceof ShadowRoot && node.getRootNode());
-      }
-    }
+          // A node matching :modal or :popover-open is a top-layer element, so
+          // an ancestor's opacity no longer applies to it once shown.
+          if (ancestorOpacityApplies) {
+            try {
+              if (node.matches(":modal, :popover-open")) {
+                ancestorOpacityApplies = false;
+              }
+            } catch (e) {}
+          }
 
-    return true;
-  }
+          let parent = node.parentElement;
+          if (parent && parent.tagName === "DETAILS" && !parent.open) {
+            // In a closed <details> only the first <summary> (and its subtree) is rendered.
+            if (node !== parent.querySelector(":scope > summary")) {
+              return false;
+            }
+          }
 
-  isDisabled(node) {
-    let xpath = "parent::optgroup[@disabled] | \
-                 ancestor::select[@disabled] | \
-                 parent::fieldset[@disabled] | \
-                 ancestor::*[not(self::legend) or preceding-sibling::legend][parent::fieldset[@disabled]]";
+          node = parent ?? (node.getRootNode() instanceof ShadowRoot && node.getRootNode());
+        }
+      }
 
-    return node.disabled || document.evaluate(xpath, node, null, XPathResult.BOOLEAN_TYPE, null).booleanValue;
-  }
+      return true;
+    }
 
-  path(node) {
-    if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
-      return "(: Shadow DOM element - no XPath :)";
-    };
+    isDisabled(node) {
+      let xpath = "parent::optgroup[@disabled] | \
+                   ancestor::select[@disabled] | \
+                   parent::fieldset[@disabled] | \
+                   ancestor::*[not(self::legend) or preceding-sibling::legend][parent::fieldset[@disabled]]";
 
-    let nodes = [node];
-    let parent = node.parentNode;
-    while (parent !== document && parent !== null) {
-      nodes.unshift(parent);
-      parent = parent.parentNode;
+      return node.disabled || document.evaluate(xpath, node, null, XPathResult.BOOLEAN_TYPE, null).booleanValue;
     }
 
-    let selectors = nodes.map(node => {
-      let prevSiblings = [];
-      let xpath = document.evaluate(`./preceding-sibling::${node.tagName}`, node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+    path(node) {
+      if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
+        return "(: Shadow DOM element - no XPath :)";
+      };
 
-      for (let i = 0; i < xpath.snapshotLength; i++) {
-        prevSiblings.push(xpath.snapshotItem(i));
+      let nodes = [node];
+      let parent = node.parentNode;
+      while (parent !== document && parent !== null) {
+        nodes.unshift(parent);
+        parent = parent.parentNode;
       }
 
-      return `${node.tagName}[${(prevSiblings.length + 1)}]`;
-    });
-
-    return `//${selectors.join("/")}`;
-  }
+      let selectors = nodes.map(node => {
+        let prevSiblings = [];
+        let xpath = document.evaluate(`./preceding-sibling::${node.tagName}`, node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 
-  /**
-   * Returns true if the node is obscured in the viewport.
-   *
-   * @param {Element} node
-   * @return {boolean} true if the node is obscured, false otherwise
-   */
-  isObscured(node) {
-    let win = window;
-    let rect = node.getBoundingClientRect();
-    let px = rect.left + rect.width / 2;
-    let py = rect.top + rect.height / 2;
+        for (let i = 0; i < xpath.snapshotLength; i++) {
+          prevSiblings.push(xpath.snapshotItem(i));
+        }
 
-    while (win) {
-      let topNode = win.document.elementFromPoint(px, py);
+        return `${node.tagName}[${(prevSiblings.length + 1)}]`;
+      });
 
-      if (node !== topNode && !node.contains(topNode)) return true;
+      return `//${selectors.join("/")}`;
+    }
 
-      node = win.frameElement;
-      if (!node) return false;
+    /**
+     * Returns true if the node is obscured in the viewport.
+     *
+     * @param {Element} node
+     * @return {boolean} true if the node is obscured, false otherwise
+     */
+    isObscured(node) {
+      let win = window;
+      let rect = node.getBoundingClientRect();
+      let px = rect.left + rect.width / 2;
+      let py = rect.top + rect.height / 2;
+
+      while (win) {
+        let topNode = win.document.elementFromPoint(px, py);
+
+        if (node !== topNode && !node.contains(topNode)) return true;
+
+        node = win.frameElement;
+        if (!node) return false;
+
+        rect = node.getBoundingClientRect();
+        px = rect.left + px;
+        py = rect.top + py;
+        win = win.parent;
+      }
 
-      rect = node.getBoundingClientRect();
-      px = rect.left + px;
-      py = rect.top + py;
-      win = win.parent;
+      return false;
     }
 
-    return false;
-  }
+    set(node, value) {
+      if (node.readOnly) return;
 
-  set(node, value) {
-    if (node.readOnly) return;
-
-    if (node.maxLength >= 0) {
-      value = value.substr(0, node.maxLength);
-    }
-
-    let valueBefore = node.value;
-
-    node.focus();
-    this.trigger(node, "focus");
-    this.setValue(node, "");
-
-    if (node.type == "number" || node.type == "date" || node.type == "range" || node.type == "time" || node.type == "month" || node.type == "week") {
-      this.setValue(node, value);
-      this.input(node);
-    } else if (node.type == "datetime-local") {
-      value = new Date(value);
-      let year = value.getFullYear();
-      let month = ("0" + (value.getMonth() + 1)).slice(-2);
-      let date = ("0" + value.getDate()).slice(-2);
-      let hour = ("0" + value.getHours()).slice(-2);
-      let min = ("0" + value.getMinutes()).slice(-2);
-      let sec = ("0" + value.getSeconds()).slice(-2);
-      this.setValue(node, `${year}-${month}-${date}T${hour}:${min}:${sec}`);
-      this.input(node);
-    } else {
-      for (let i = 0; i < value.length; i++) {
-        let char = value[i];
-        let keyCode = this.characterToKeyCode(char);
-        // call the following functions in order, if one returns false (preventDefault),
-        // stop the call chain
-        [
-          () => this.keyupdowned(node, "keydown", char, keyCode),
-          () => this.keypressed(node, false, false, false, false, char.charCodeAt(0), char.charCodeAt(0)),
-          () => {
-            this.setValue(node, node.value + char)
-            this.input(node)
-          }
-        ].some(fn => fn())
+      if (node.maxLength >= 0) {
+        value = value.substr(0, node.maxLength);
+      }
+
+      let valueBefore = node.value;
+
+      node.focus();
+      this.trigger(node, "focus");
+      this.setValue(node, "");
+
+      if (node.type == "number" || node.type == "date" || node.type == "range" || node.type == "time" || node.type == "month" || node.type == "week") {
+        this.setValue(node, value);
+        this.input(node);
+      } else if (node.type == "datetime-local") {
+        value = new Date(value);
+        let year = value.getFullYear();
+        let month = ("0" + (value.getMonth() + 1)).slice(-2);
+        let date = ("0" + value.getDate()).slice(-2);
+        let hour = ("0" + value.getHours()).slice(-2);
+        let min = ("0" + value.getMinutes()).slice(-2);
+        let sec = ("0" + value.getSeconds()).slice(-2);
+        this.setValue(node, `${year}-${month}-${date}T${hour}:${min}:${sec}`);
+        this.input(node);
+      } else {
+        for (let i = 0; i < value.length; i++) {
+          let char = value[i];
+          let keyCode = this.characterToKeyCode(char);
+          // call the following functions in order, if one returns false (preventDefault),
+          // stop the call chain
+          [
+            () => this.keyupdowned(node, "keydown", char, keyCode),
+            () => this.keypressed(node, false, false, false, false, char.charCodeAt(0), char.charCodeAt(0)),
+            () => {
+              this.setValue(node, node.value + char)
+              this.input(node)
+            }
+          ].some(fn => fn())
+
+          this.keyupdowned(node, "keyup", char, keyCode);
+        }
 
-        this.keyupdowned(node, "keyup", char, keyCode);
+        if (valueBefore !== "" && node.value === "") {
+          this.input(node, "deleteContentBackward");
+        }
+      }
+
+      if (valueBefore !== node.value) {
+        this.changed(node);
       }
+      this.trigger(node, "blur");
     }
 
-    if (valueBefore !== node.value) {
-      this.changed(node);
+    setValue(node, value) {
+      let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+      let nativeTextareaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
+
+      if (node.tagName.toLowerCase() === 'input') {
+        return nativeInputValueSetter.call(node, value);
+      }
+      return nativeTextareaValueSetter.call(node, value);
     }
-    this.trigger(node, "blur");
-  }
 
-  setValue(node, value) {
-    let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
-    let nativeTextareaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
+    input(node, inputType = "insertText") {
+      let event = new InputEvent("input", { inputType: inputType, bubbles: true, cancelable: false });
+      node.dispatchEvent(event);
+    }
 
-    if (node.tagName.toLowerCase() === 'input') {
-      return nativeInputValueSetter.call(node, value);
+    /**
+     * @return {boolean} false when an event handler called preventDefault()
+     */
+    keyupdowned(node, eventName, char, keyCode) {
+      let event = new KeyboardEvent(
+        eventName, {
+          bubbles: true,
+          cancelable: true,
+          key: char,
+          keyCode: keyCode
+        }
+      );
+      return !node.dispatchEvent(event);
     }
-    return nativeTextareaValueSetter.call(node, value);
-  }
 
-  input(node) {
-    let event = new InputEvent("input", { inputType: "insertText", bubbles: true, cancelable: false });
-    node.dispatchEvent(event);
-  }
+    /**
+     * @return {boolean} false when an event handler called preventDefault()
+     */
+    keypressed(node, altKey, ctrlKey, shiftKey, metaKey, keyCode, charCode) {
+      let event = new KeyboardEvent(
+        "keypress", {
+          bubbles: true,
+          cancelable: true,
+          altKey: altKey,
+          ctrlKey: ctrlKey,
+          shiftKey: shiftKey,
+          metaKey: metaKey,
+          keyCode: keyCode,
+          charCode: charCode
+        }
+      );
+      return !node.dispatchEvent(event);
+    }
 
-  /**
-   * @return {boolean} false when an event handler called preventDefault()
-   */
-  keyupdowned(node, eventName, char, keyCode) {
-    let event = new KeyboardEvent(
-      eventName, {
-        bubbles: true,
-        cancelable: true,
-        key: char,
-        keyCode: keyCode
+    characterToKeyCode(char) {
+      const specialKeys = {
+        96: 192,  // `
+        45: 189,  // -
+        61: 187,  // =
+        91: 219,  // [
+        93: 221,  // ]
+        92: 220,  // \
+        59: 186,  // ;
+        39: 222,  // '
+        44: 188,  // ,
+        46: 190,  // .
+        47: 191,  // /
+        127: 46,  // delete
+        126: 192, // ~
+        33: 49,   // !
+        64: 50,   // @
+        35: 51,   // #
+        36: 52,   // $
+        37: 53,   // %
+        94: 54,   // ^
+        38: 55,   // &
+        42: 56,   // *
+        40: 57,   // (
+        41: 48,   // )
+        95: 189,  // _
+        43: 187,  // +
+        123: 219, // {
+        125: 221, // }
+        124: 220, // |
+        58: 186,  // :
+        34: 222,  // "
+        60: 188,  // <
+        62: 190,  // >
+        63: 191,  // ?
       }
-    );
-    return !node.dispatchEvent(event);
-  }
 
-  /**
-   * @return {boolean} false when an event handler called preventDefault()
-   */
-  keypressed(node, altKey, ctrlKey, shiftKey, metaKey, keyCode, charCode) {
-    let event = new KeyboardEvent(
-      "keypress", {
-        bubbles: true,
-        cancelable: true,
-        altKey: altKey,
-        ctrlKey: ctrlKey,
-        shiftKey: shiftKey,
-        metaKey: metaKey,
-        keyCode: keyCode,
-        charCode: charCode
-      }
-    );
-    return !node.dispatchEvent(event);
-  }
+      let code = char.toUpperCase().charCodeAt(0);
+      return specialKeys[code] || code;
+    }
 
-  characterToKeyCode(char) {
-    const specialKeys = {
-      96: 192,  // `
-      45: 189,  // -
-      61: 187,  // =
-      91: 219,  // [
-      93: 221,  // ]
-      92: 220,  // \
-      59: 186,  // ;
-      39: 222,  // '
-      44: 188,  // ,
-      46: 190,  // .
-      47: 191,  // /
-      127: 46,  // delete
-      126: 192, // ~
-      33: 49,   // !
-      64: 50,   // @
-      35: 51,   // #
-      36: 52,   // $
-      37: 53,   // %
-      94: 54,   // ^
-      38: 55,   // &
-      42: 56,   // *
-      40: 57,   // (
-      41: 48,   // )
-      95: 189,  // _
-      43: 187,  // +
-      123: 219, // {
-      125: 221, // }
-      124: 220, // |
-      58: 186,  // :
-      34: 222,  // "
-      60: 188,  // <
-      62: 190,  // >
-      63: 191,  // ?
-    }
-
-    let code = char.toUpperCase().charCodeAt(0);
-    return specialKeys[code] || code;
-  }
+    scrollIntoViewport(node) {
+      let areaImage = this._getAreaImage(node);
 
-  scrollIntoViewport(node) {
-    let areaImage = this._getAreaImage(node);
+      if (areaImage) {
+        return this.scrollIntoViewport(areaImage);
+      } else {
+        node.scrollIntoViewIfNeeded();
 
-    if (areaImage) {
-      return this.scrollIntoViewport(areaImage);
-    } else {
-      node.scrollIntoViewIfNeeded();
+        if (!this._isInViewport(node)) {
+          node.scrollIntoView({block: "center", inline: "center", behavior: "instant"});
+          return this._isInViewport(node);
+        }
 
-      if (!this._isInViewport(node)) {
-        node.scrollIntoView({block: "center", inline: "center", behavior: "instant"});
-        return this._isInViewport(node);
+        return true;
       }
-
-      return true;
     }
-  }
 
-  mouseEventTest(node, name, x, y) {
-    let frameOffset = this._frameOffset();
-    x -= frameOffset.left;
-    y -= frameOffset.top;
+    mouseEventTest(node, name, x, y) {
+      let frameOffset = this._frameOffset();
+      x -= frameOffset.left;
+      y -= frameOffset.top;
 
-    let element = node.getRootNode().elementFromPoint(x, y);
+      let element = node.getRootNode().elementFromPoint(x, y);
 
-    let el = element;
-    while (el) {
-      if (el == node) {
-        return true;
-      } else {
-        el = el.parentNode;
+      let el = element;
+      while (el) {
+        if (el == node) {
+          return true;
+        } else {
+          el = el.parentNode;
+        }
       }
+
+      let selector = element && this._getSelector(element) || "none";
+      throw new MouseEventFailed([name, selector, x, y].join(", "));
     }
 
-    let selector = element && this._getSelector(element) || "none";
-    throw new MouseEventFailed([name, selector, x, y].join(", "));
-  }
+    _getAreaImage(node) {
+      if ("area" == node.tagName.toLowerCase()) {
+        let map = node.parentNode;
+        if (map.tagName.toLowerCase() != "map") {
+          throw new Error("the area is not within a map");
+        }
 
-  _getAreaImage(node) {
-    if ("area" == node.tagName.toLowerCase()) {
-      let map = node.parentNode;
-      if (map.tagName.toLowerCase() != "map") {
-        throw new Error("the area is not within a map");
-      }
+        let mapName = map.getAttribute("name");
+        if (typeof mapName === "undefined" || mapName === null) {
+          throw new Error("area's parent map must have a name");
+        }
 
-      let mapName = map.getAttribute("name");
-      if (typeof mapName === "undefined" || mapName === null) {
-        throw new Error("area's parent map must have a name");
-      }
+        mapName = `#${mapName.toLowerCase()}`;
+        let imageNode = this.find("css", `img[usemap='${mapName}']`)[0];
+        if (typeof imageNode === "undefined" || imageNode === null) {
+          throw new Error("no image matches the map");
+        }
 
-      mapName = `#${mapName.toLowerCase()}`;
-      let imageNode = this.find("css", `img[usemap='${mapName}']`)[0];
-      if (typeof imageNode === "undefined" || imageNode === null) {
-        throw new Error("no image matches the map");
+        return imageNode;
       }
-
-      return imageNode;
     }
-  }
 
-  _frameOffset() {
-    let win = window;
-    let offset = { top: 0, left: 0 };
+    _frameOffset() {
+      let win = window;
+      let offset = { top: 0, left: 0 };
 
-    while (win.frameElement) {
-      let rect = win.frameElement.getClientRects()[0];
-      let style = win.getComputedStyle(win.frameElement);
-      win = win.parent;
+      while (win.frameElement) {
+        let rect = win.frameElement.getClientRects()[0];
+        let style = win.getComputedStyle(win.frameElement);
+        win = win.parent;
+
+        offset.top += rect.top + parseInt(style.getPropertyValue("padding-top"), 10)
+        offset.left += rect.left + parseInt(style.getPropertyValue("padding-left"), 10)
+      }
 
-      offset.top += rect.top + parseInt(style.getPropertyValue("padding-top"), 10)
-      offset.left += rect.left + parseInt(style.getPropertyValue("padding-left"), 10)
+      return offset;
     }
 
-    return offset;
-  }
+    _getSelector(el) {
+      let selector = (el.tagName != 'HTML') ? this._getSelector(el.parentNode) + " " : "";
+      selector += el.tagName.toLowerCase();
+      if (el.id) { selector += `#${el.id}` };
+      el.classList.forEach(c => selector += `.${c}`);
+      return selector;
+    }
 
-  _getSelector(el) {
-    let selector = (el.tagName != 'HTML') ? this._getSelector(el.parentNode) + " " : "";
-    selector += el.tagName.toLowerCase();
-    if (el.id) { selector += `#${el.id}` };
-    el.classList.forEach(c => selector += `.${c}`);
-    return selector;
-  }
+    _isInViewport(node) {
+      let rect = node.getBoundingClientRect();
 
-  _isInViewport(node) {
-    let rect = node.getBoundingClientRect();
+      let inViewport =  rect.top >= 0 &&
+                        rect.left >= 0 &&
+                        rect.bottom <= window.innerHeight &&
+                        rect.right <= window.innerWidth;
 
-    let inViewport =  rect.top >= 0 &&
-                      rect.left >= 0 &&
-                      rect.bottom <= window.innerHeight &&
-                      rect.right <= window.innerWidth;
+      if (inViewport) {
+        // check if obscured by another element
+        let x = rect.width/2;
+        let y = rect.height/2 ;
 
-    if (inViewport) {
-      // check if obscured by another element
-      let x = rect.width/2;
-      let y = rect.height/2 ;
+        let px = rect.left + x,
+            py = rect.top + y,
+            e = document.elementFromPoint(px, py);
+        return node == e;
+      }
 
-      let px = rect.left + x,
-          py = rect.top + y,
-          e = document.elementFromPoint(px, py);
-      return node == e;
+      return false;
     }
 
-    return false;
-  }
-
-  select(node, value) {
-    if (this.isDisabled(node)) {
-      return false;
-    } else if (value == false && !node.parentNode.multiple) {
-      return false;
-    } else {
-      let parentNode = node.parentNode;
-      this.trigger(parentNode, "focus");
+    select(node, value) {
+      if (this.isDisabled(node)) {
+        return false;
+      } else if (value == false && !node.parentNode.multiple) {
+        return false;
+      } else {
+        let selectNode = node.closest("select");
+        this.trigger(selectNode, "focus");
 
-      node.selected = value;
-      this.changed(node);
+        node.selected = value;
+        selectNode.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+        this.changed(node);
 
-      this.trigger(parentNode, "blur");
-      return true;
+        this.trigger(selectNode, "blur");
+        return true;
+      }
     }
-  }
 
-  changed(node) {
-    let element;
-    let event = document.createEvent("HTMLEvents");
-    event.initEvent("change", true, false);
-
-    // In the case of an OPTION tag, the change event should come
-    // from the parent SELECT
-    if (node.nodeName == "OPTION") {
-      element = node.parentNode
-      if (element.nodeName == "OPTGROUP") {
-        element = element.parentNode
+    changed(node) {
+      let element;
+      let event = document.createEvent("HTMLEvents");
+      event.initEvent("change", true, false);
+
+      // In the case of an OPTION tag, the change event should come
+      // from the parent SELECT
+      if (node.nodeName == "OPTION") {
+        element = node.parentNode
+        if (element.nodeName == "OPTGROUP") {
+          element = element.parentNode
+        }
+        element
+      } else {
+        element = node
       }
-      element
-    } else {
-      element = node
-    }
 
-    element.dispatchEvent(event)
-  }
+      element.dispatchEvent(event)
+    }
 
-  trigger(node, name, options = {}) {
-    let event;
-
-    if (EVENTS.MOUSE.indexOf(name) != -1) {
-      event = document.createEvent("MouseEvent");
-      event.initMouseEvent(
-        name, true, true, window, 0,
-        options["screenX"] || 0, options["screenY"] || 0,
-        options["clientX"] || 0, options["clientY"] || 0,
-        options["ctrlKey"] || false,
-        options["altKey"] || false,
-        options["shiftKey"] || false,
-        options["metaKey"] || false,
-        options["button"] || 0, null
-      )
-    } else if (EVENTS.FOCUS.indexOf(name) != -1) {
-      event = new FocusEvent(name, { bubbles: true, cancelable: true });
-    } else if (EVENTS.FORM.indexOf(name) != -1) {
-      event = this.obtainEvent(name);
-    } else {
-      throw "Unknown event";
-    }
-
-    node.dispatchEvent(event);
-  }
+    trigger(node, name, options = {}) {
+      let event;
+
+      if (EVENTS.MOUSE.indexOf(name) != -1) {
+        event = document.createEvent("MouseEvent");
+        event.initMouseEvent(
+          name, true, true, window, 0,
+          options["screenX"] || 0, options["screenY"] || 0,
+          options["clientX"] || 0, options["clientY"] || 0,
+          options["ctrlKey"] || false,
+          options["altKey"] || false,
+          options["shiftKey"] || false,
+          options["metaKey"] || false,
+          options["button"] || 0, null
+        )
+      } else if (EVENTS.FOCUS.indexOf(name) != -1) {
+        event = new FocusEvent(name, { bubbles: true, cancelable: true });
+      } else if (EVENTS.FORM.indexOf(name) != -1) {
+        event = this.obtainEvent(name);
+      } else if (name == "input") {
+        event = new InputEvent(name, { inputType: "insertText", bubbles: true, composed: true });
+      } else {
+        event = new Event(name, { bubbles: true, cancelable: true });
+      }
 
-  obtainEvent(name) {
-    let event = document.createEvent("HTMLEvents");
-    event.initEvent(name, true, true);
-    return event;
-  }
+      node.dispatchEvent(event);
+    }
 
-  getAttributes(node) {
-    let attrs = {};
-    for (let i = 0, len = node.attributes.length; i < len; i++) {
-      let attr = node.attributes[i];
-      attrs[attr.name] = attr.value.replace("\n", "\\n");
+    obtainEvent(name) {
+      let event = document.createEvent("HTMLEvents");
+      event.initEvent(name, true, true);
+      return event;
     }
 
-    return this._json.stringify(attrs);
-  }
+    getAttributes(node) {
+      let attrs = {};
+      for (let i = 0, len = node.attributes.length; i < len; i++) {
+        let attr = node.attributes[i];
+        attrs[attr.name] = attr.value.replace("\n", "\\n");
+      }
 
-  getAttribute(node, name) {
-    if (name == "checked" || name == "selected") {
-      return node[name];
-    } else {
-      return node.getAttribute(name);
+      return this._json.stringify(attrs);
+    }
+
+    getAttribute(node, name) {
+      if (name == "checked" || name == "selected") {
+        return node[name];
+      } else {
+        return node.getAttribute(name);
+      }
     }
-  }
 
-  value(node) {
-    if (node.tagName == "SELECT" && node.multiple) {
-      let result = []
+    value(node) {
+      if (node.tagName == "SELECT" && node.multiple) {
+        let result = []
 
-      for (let i = 0, len = node.children.length; i < len; i++) {
-        let option = node.children[i];
-        if (option.selected) {
-          result.push(option.value);
+        for (let i = 0, len = node.children.length; i < len; i++) {
+          let option = node.children[i];
+          if (option.selected) {
+            result.push(option.value);
+          }
         }
+
+        return result;
+      } else {
+        return node.value;
       }
+    }
 
-      return result;
-    } else {
-      return node.value;
+    deleteText(node) {
+      let range = document.createRange();
+      range.selectNodeContents(node);
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+      window.getSelection().deleteFromDocument();
     }
-  }
 
-  deleteText(node) {
-    let range = document.createRange();
-    range.selectNodeContents(node);
-    window.getSelection().removeAllRanges();
-    window.getSelection().addRange(range);
-    window.getSelection().deleteFromDocument();
-  }
+    hasFocus(node) {
+      return document.activeElement === node;
+    }
 
-  containsSelection(node) {
-    let selectedNode = document.getSelection().focusNode;
+    containsSelection(node) {
+      let selectedNode = document.getSelection().focusNode;
 
-    if (!selectedNode) {
-      return false;
-    }
+      if (!selectedNode) {
+        return false;
+      }
+
+      if (selectedNode.nodeType == 3) {
+        selectedNode = selectedNode.parentNode;
+      }
 
-    if (selectedNode.nodeType == 3) {
-      selectedNode = selectedNode.parentNode;
+      return node.contains(selectedNode);
     }
 
-    return node.contains(selectedNode);
-  }
+    dragMousedownTracker() {
+      window._cupriteMousedownPrevented = null;
+      document.addEventListener('mousedown', ev => {
+        window._cupriteMousedownPrevented = ev.defaultPrevented;
+      }, { once: true, passive: true });
+    }
 
-  dragMousedownTracker() {
-    window._cupriteMousedownPrevented = null;
-    document.addEventListener('mousedown', ev => {
-      window._cupriteMousedownPrevented = ev.defaultPrevented;
-    }, { once: true, passive: true });
-  }
+    legacyDragCheck(node) {
+      if ([true, null].indexOf(window._cupriteMousedownPrevented) >= 0) {
+        return true;
+      }
 
-  legacyDragCheck(node) {
-    if ([true, null].indexOf(window._cupriteMousedownPrevented) >= 0) {
+      let el = node;
+      do {
+        if (el.draggable) return false;
+      } while (el = el.parentElement);
       return true;
     }
 
-    let el = node;
-    do {
-      if (el.draggable) return false;
-    } while (el = el.parentElement);
-    return true;
-  }
-
-  // Ported from Capybara's Selenium html5_drag.rb (DROP_STRING).
-  dropString(strings, target) {
-    let dt = new DataTransfer();
-    let opts = { cancelable: true, bubbles: true, dataTransfer: dt };
-    for (let i = 0; i < strings.length; i++) {
-      if (dt.items) {
-        dt.items.add(strings[i]["data"], strings[i]["type"]);
-      } else {
-        dt.setData(strings[i]["type"], strings[i]["data"]);
+    // Ported from Capybara's Selenium html5_drag.rb (DROP_STRING).
+    dropString(strings, target) {
+      let dt = new DataTransfer();
+      let opts = { cancelable: true, bubbles: true, dataTransfer: dt };
+      for (let i = 0; i < strings.length; i++) {
+        if (dt.items) {
+          dt.items.add(strings[i]["data"], strings[i]["type"]);
+        } else {
+          dt.setData(strings[i]["type"], strings[i]["data"]);
+        }
       }
+      target.dispatchEvent(new DragEvent("drop", opts));
     }
-    target.dispatchEvent(new DragEvent("drop", opts));
-  }
 
-  // Ported from Capybara's Selenium html5_drag.rb (ATTACH_FILE).
-  attachDropInput() {
-    document.getElementById("_cuprite_drop_file")?.remove();
-    let input = document.createElement("INPUT");
-    input.type = "file";
-    input.id = "_cuprite_drop_file";
-    input.multiple = true;
-    document.body.appendChild(input);
-  }
+    // Ported from Capybara's Selenium html5_drag.rb (ATTACH_FILE).
+    attachDropInput() {
+      document.getElementById("_cuprite_drop_file")?.remove();
+      let input = document.createElement("INPUT");
+      input.type = "file";
+      input.id = "_cuprite_drop_file";
+      input.multiple = true;
+      document.body.appendChild(input);
+    }
 
-  // Ported from Capybara's Selenium html5_drag.rb (DROP_FILE).
-  dropFile(target) {
-    let input = document.getElementById("_cuprite_drop_file");
-    let files = input.files;
-    let dt = new DataTransfer();
-    let opts = { cancelable: true, bubbles: true, dataTransfer: dt };
-    input.parentElement.removeChild(input);
-    if (dt.items) {
-      for (let i = 0; i < files.length; i++) {
-        dt.items.add(files[i]);
+    // Ported from Capybara's Selenium html5_drag.rb (DROP_FILE).
+    dropFile(target) {
+      let input = document.getElementById("_cuprite_drop_file");
+      let files = input.files;
+      let dt = new DataTransfer();
+      let opts = { cancelable: true, bubbles: true, dataTransfer: dt };
+      input.parentElement.removeChild(input);
+      if (dt.items) {
+        for (let i = 0; i < files.length; i++) {
+          dt.items.add(files[i]);
+        }
+      } else {
+        Object.defineProperty(dt, "files", { value: files, writable: false });
       }
-    } else {
-      Object.defineProperty(dt, "files", { value: files, writable: false });
+      target.dispatchEvent(new DragEvent("drop", opts));
     }
-    target.dispatchEvent(new DragEvent("drop", opts));
-  }
-
-  // This command is purely for testing error handling
-  browserError() {
-    throw new Error("zomg");
   }
-}
 
-window._cuprite = new Cuprite;
+  window._cuprite = new Cuprite;
+})();