Add Event constructor polyfill

build-system/dep-check-config.js

@@ -208,6 +208,7 @@ exports.rules = [
       'src/polyfills.js->src/polyfills/object-assign.js',
       'src/polyfills.js->src/polyfills/promise.js',
       'src/polyfills.js->src/polyfills/array-includes.js',
+      'src/polyfills.js->src/polyfills/event.js',
       'src/service/extensions-impl.js->src/polyfills/document-contains.js',
       'src/service/extensions-impl.js->src/polyfills/domtokenlist-toggle.js',
     ],

extensions/amp-access/0.1/test/test-amp-access.js

@@ -1030,14 +1030,10 @@ describes.fakeWin('AccessService pingback', {
     service.reportViewToServer_ = sandbox.spy();
     const p = service.reportWhenViewed_(/* timeToView */ 2000);
     return Promise.resolve().then(() => {
-      let clickEvent;
-      if (document.createEvent) {
-        clickEvent = document.createEvent('MouseEvent');
-        clickEvent.initMouseEvent('click', true, true, window, 1);
-      } else {
-        clickEvent = document.createEventObject();
-        clickEvent.type = 'click';
-      }
+      const clickEvent = new MouseEvent(
+        'click',
+        {bubbles: true, cancelable: true, view: window, detail: 1}
+      );
       document.documentElement.dispatchEvent(clickEvent);
       return p;
     }).then(() => {}, () => {}).then(() => {

extensions/amp-bind/0.1/bind-impl.js

@@ -959,13 +959,7 @@ export class Bind {
    */
   dispatchEventForTesting_(name) {
     if (getMode().test) {
-      let event;
-      if (typeof this.localWin_.Event === 'function') {
-        event = new Event(name, {bubbles: true, cancelable: true});
-      } else {
-        event = this.localWin_.document.createEvent('Event');
-        event.initEvent(name, /* bubbles */ true, /* cancelable */ true);
-      }
+      const event = new Event(name, {bubbles: true, cancelable: true});
       this.localWin_.dispatchEvent(event);
     }
   }

extensions/amp-live-list/0.1/amp-live-list.js

@@ -866,8 +866,10 @@ export class AmpLiveList extends AMP.BaseElement {
   }
 
   sendAmpDomUpdateEvent_() {
-    const event = this.win.document.createEvent('Event');
-    event.initEvent(AmpEvents.DOM_UPDATE, true, true);
+    const event = new Event(
+      AmpEvents.DOM_UPDATE,
+      {bubbles: true, cancelable: true}
+    );
     this.win.document.dispatchEvent(event);
   }
 }

extensions/amp-sidebar/0.1/test/test-amp-sidebar.js

@@ -293,16 +293,14 @@ describes.realWin('amp-sidebar 0.1 version', {
         impl.open_();
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-        const eventObj = document.createEventObject ?
-            document.createEventObject() : document.createEvent('Events');
-        if (eventObj.initEvent) {
-          eventObj.initEvent('keydown', true, true);
-        }
+        const eventObj = new Event(
+          'keydown',
+          {bubbles: true, cancelable: true}
+        );
         eventObj.keyCode = KeyCodes.ESCAPE;
         eventObj.which = KeyCodes.ESCAPE;
         const el = iframe.doc.documentElement;
-        el.dispatchEvent ?
-            el.dispatchEvent(eventObj) : el.fireEvent('onkeydown', eventObj);
+        el.dispatchEvent(eventObj);
         expect(sidebarElement.hasAttribute('open')).to.be.false;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
         expect(sidebarElement.style.display).to.equal('none');
@@ -410,11 +408,7 @@ describes.realWin('amp-sidebar 0.1 version', {
         impl.open_();
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-        const eventObj = document.createEventObject ?
-            document.createEventObject() : document.createEvent('Events');
-        if (eventObj.initEvent) {
-          eventObj.initEvent('click', true, true);
-        }
+        const eventObj = new Event('click', {bubbles: true, cancelable: true});
         sandbox.stub(sidebarElement, 'getAmpDoc', () => {
           return {
             win: {
@@ -424,9 +418,7 @@ describes.realWin('amp-sidebar 0.1 version', {
             },
           };
         });
-        anchor.dispatchEvent ?
-            anchor.dispatchEvent(eventObj) :
-            anchor.fireEvent('onkeydown', eventObj);
+        anchor.dispatchEvent(eventObj);
         expect(sidebarElement.hasAttribute('open')).to.be.false;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
         expect(sidebarElement.style.display).to.equal('none');
@@ -453,11 +445,7 @@ describes.realWin('amp-sidebar 0.1 version', {
         impl.open_();
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-        const eventObj = document.createEventObject ?
-            document.createEventObject() : document.createEvent('Events');
-        if (eventObj.initEvent) {
-          eventObj.initEvent('click', true, true);
-        }
+        const eventObj = new Event('click', {bubbles: true, cancelable: true});
         sandbox.stub(sidebarElement, 'getAmpDoc', () => {
           return {
             win: {
@@ -468,9 +456,7 @@ describes.realWin('amp-sidebar 0.1 version', {
             },
           };
         });
-        anchor.dispatchEvent ?
-            anchor.dispatchEvent(eventObj) :
-            anchor.fireEvent('onkeydown', eventObj);
+        anchor.dispatchEvent(eventObj);
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
         expect(sidebarElement.style.display).to.equal('');
@@ -497,11 +483,7 @@ describes.realWin('amp-sidebar 0.1 version', {
         impl.open_();
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-        const eventObj = document.createEventObject ?
-            document.createEventObject() : document.createEvent('Events');
-        if (eventObj.initEvent) {
-          eventObj.initEvent('click', true, true);
-        }
+        const eventObj = new Event('click', {bubbles: true, cancelable: true});
         sandbox.stub(sidebarElement, 'getAmpDoc', () => {
           return {
             win: {
@@ -513,9 +495,7 @@ describes.realWin('amp-sidebar 0.1 version', {
             },
           };
         });
-        anchor.dispatchEvent ?
-            anchor.dispatchEvent(eventObj) :
-            anchor.fireEvent('onkeydown', eventObj);
+        anchor.dispatchEvent(eventObj);
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
         expect(sidebarElement.style.display).to.equal('');
@@ -541,14 +521,8 @@ describes.realWin('amp-sidebar 0.1 version', {
         impl.open_();
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-        const eventObj = document.createEventObject ?
-            document.createEventObject() : document.createEvent('Events');
-        if (eventObj.initEvent) {
-          eventObj.initEvent('click', true, true);
-        }
-        li.dispatchEvent ?
-            li.dispatchEvent(eventObj) :
-            li.fireEvent('onkeydown', eventObj);
+        const eventObj = new Event('click', {bubbles: true, cancelable: true});
+        li.dispatchEvent(eventObj);
         expect(sidebarElement.hasAttribute('open')).to.be.true;
         expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
         expect(sidebarElement.style.display).to.equal('');

extensions/amp-sidebar/1.0/test/test-amp-sidebar.js

@@ -331,16 +331,14 @@
          impl.open_();
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-         const eventObj = document.createEventObject ?
-             document.createEventObject() : document.createEvent('Events');
-         if (eventObj.initEvent) {
-           eventObj.initEvent('keydown', true, true);
-         }
+         const eventObj = new Event(
+           'keydown',
+           {bubbles: true, cancelable: true}
+         );
          eventObj.keyCode = KeyCodes.ESCAPE;
          eventObj.which = KeyCodes.ESCAPE;
          const el = iframe.doc.documentElement;
-         el.dispatchEvent ?
-             el.dispatchEvent(eventObj) : el.fireEvent('onkeydown', eventObj);
+         el.dispatchEvent(eventObj);
          expect(sidebarElement.hasAttribute('open')).to.be.false;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
          expect(sidebarElement.style.display).to.equal('none');
@@ -448,11 +446,7 @@
          impl.open_();
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-         const eventObj = document.createEventObject ?
-             document.createEventObject() : document.createEvent('Events');
-         if (eventObj.initEvent) {
-           eventObj.initEvent('click', true, true);
-         }
+         const eventObj = new Event('click', {bubbles: true, cancelable: true});
          sandbox.stub(sidebarElement, 'getAmpDoc', () => {
            return {
              win: {
@@ -462,9 +456,7 @@
              },
            };
          });
-         anchor.dispatchEvent ?
-             anchor.dispatchEvent(eventObj) :
-             anchor.fireEvent('onkeydown', eventObj);
+         anchor.dispatchEvent(eventObj);
          expect(sidebarElement.hasAttribute('open')).to.be.false;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
          expect(sidebarElement.style.display).to.equal('none');
@@ -492,11 +484,7 @@
          impl.open_();
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-         const eventObj = document.createEventObject ?
-             document.createEventObject() : document.createEvent('Events');
-         if (eventObj.initEvent) {
-           eventObj.initEvent('click', true, true);
-         }
+         const eventObj = new Event('click', {bubbles: true, cancelable: true});
          sandbox.stub(sidebarElement, 'getAmpDoc', () => {
            return {
              win: {
@@ -507,9 +495,7 @@
              },
            };
          });
-         anchor.dispatchEvent ?
-             anchor.dispatchEvent(eventObj) :
-             anchor.fireEvent('onkeydown', eventObj);
+         anchor.dispatchEvent(eventObj);
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
          expect(sidebarElement.style.display).to.equal('');
@@ -536,11 +522,7 @@
          impl.open_();
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-         const eventObj = document.createEventObject ?
-             document.createEventObject() : document.createEvent('Events');
-         if (eventObj.initEvent) {
-           eventObj.initEvent('click', true, true);
-         }
+         const eventObj = new Event('click', {bubbles: true, cancelable: true});
          sandbox.stub(sidebarElement, 'getAmpDoc', () => {
            return {
              win: {
@@ -552,9 +534,7 @@
              },
            };
          });
-         anchor.dispatchEvent ?
-             anchor.dispatchEvent(eventObj) :
-             anchor.fireEvent('onkeydown', eventObj);
+         anchor.dispatchEvent(eventObj);
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
          expect(sidebarElement.style.display).to.equal('');
@@ -580,14 +560,11 @@
          impl.open_();
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
-         const eventObj = document.createEventObject ?
-             document.createEventObject() : document.createEvent('Events');
-         if (eventObj.initEvent) {
-           eventObj.initEvent('click', true, true);
-         }
-         li.dispatchEvent ?
-             li.dispatchEvent(eventObj) :
-             li.fireEvent('onkeydown', eventObj);
+         const eventObj = new Event(
+           'click',
+           {bubbles: true, cancelable: true}
+         );
+         li.dispatchEvent(eventObj);
          expect(sidebarElement.hasAttribute('open')).to.be.true;
          expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
          expect(sidebarElement.style.display).to.equal('');

src/custom-element.js

@@ -1109,11 +1109,8 @@ function createBaseCustomElementClass(win) {
      */
     dispatchCustomEvent(name, opt_data) {
       const data = opt_data || {};
-      // Constructors of events need to come from the correct window. Sigh.
-      const win = this.ownerDocument.defaultView;
-      const event = win.document.createEvent('Event');
+      const event = new Event(name, {bubbles: true, cancelable: true});
       event.data = data;
-      event.initEvent(name, /* bubbles */ true, /* cancelable */ true);
       this.dispatchEvent(event);
     }
 

src/polyfills.js

@@ -16,17 +16,17 @@
 
 // Importing the document-register-element module has the side effect
 // of installing the custom elements polyfill if necessary.
-import installCustomElements from
-    'document-register-element/build/document-register-element.node';
-import {
-  install as installDOMTokenListToggle,
-} from './polyfills/domtokenlist-toggle';
+import installCustomElements
+    from 'document-register-element/build/document-register-element.node';
+import {getMode} from './mode';
+import {install as installArrayIncludes} from './polyfills/array-includes';
 import {install as installDocContains} from './polyfills/document-contains';
+import {install as installDOMTokenListToggle}
+    from './polyfills/domtokenlist-toggle';
+import {install as installEvent} from './polyfills/event';
 import {install as installMathSign} from './polyfills/math-sign';
 import {install as installObjectAssign} from './polyfills/object-assign';
 import {install as installPromise} from './polyfills/promise';
-import {install as installArrayIncludes} from './polyfills/array-includes';
-import {getMode} from './mode';
 
 /**
   Only install in closure binary and not in babel/browserify binary, since in
@@ -44,3 +44,4 @@ installObjectAssign(self);
 installPromise(self);
 installDocContains(self);
 installArrayIncludes(self);
+installEvent(self);

src/polyfills/event.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2017 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @constructor
+ */
+function Event(name, params) {
+  if (!name) {
+    throw new TypeError(
+      "Failed to construct 'Event': 1 argument required but only 0 present",
+      'event.js',
+      20
+    );
+  }
+  params = params || {bubbles: false, cancelable: false};
+  const evt = self.document.createEvent('Event');
+  evt.initEvent(
+      name,
+      params.bubbles,
+      params.cancelable
+  );
+  return evt;
+}
+
+/**
+ * Sets the Event polyfill if it does not exist.
+ * @param {!Window} win
+ */
+export function install(win) {
+  // win.Event is a function on Edge, Chrome, FF, Safari but
+  // is an object on IE 11.
+  if (typeof win.Event !== 'function') {
+
+    // supports >= IE 9. Below IE 9, window.Event.prototype is undefined
+    Event.prototype = win.Event.prototype;
+
+    win.Object.defineProperty(win, 'Event', {
+      configurable: false,
+      enumerable: false,
+      value: Event,
+      writable: false,
+    });
+  }
+}

test/functional/test-base-element.js

@@ -177,11 +177,9 @@ describe('BaseElement', () => {
       const timer = timerFor(element.win);
       target = document.createElement('div');
 
-      event1 = document.createEvent('Event');
-      event1.initEvent('event1', false, true);
+      event1 = new Event('event1', {bubbles: false, cancelable: true});
 
-      event2 = document.createEvent('Event');
-      event2.initEvent('event2', false, true);
+      event2 = new Event('event2', {bubbles: false, cancelable: true});
 
       event1Promise = listenOncePromise(element.element, 'event1');
       event1Promise = timer.timeoutPromise(TIMEOUT, event1Promise);