- change entered/leftDocumentCallback to entered/leftViewCallback to match spec change

 - update tests and make pass with native blink implementation

Author: sorvell

src/Observer.js

@@ -110,7 +110,7 @@ function inserted(element) {
   // TODO(sjmiles): when logging, do work on all custom elements so we can
   // track behavior even when callbacks not defined
   //console.log('inserted: ', element.localName);
-  if (element.enteredDocumentCallback || (element.__upgraded__ && logFlags.dom)) {
+  if (element.enteredViewCallback || (element.__upgraded__ && logFlags.dom)) {
     logFlags.dom && console.group('inserted:', element.localName);
     if (inDocument(element)) {
       element.__inserted = (element.__inserted || 0) + 1;
@@ -122,9 +122,9 @@ function inserted(element) {
       if (element.__inserted > 1) {
         logFlags.dom && console.warn('inserted:', element.localName,
           'insert/remove count:', element.__inserted)
-      } else if (element.enteredDocumentCallback) {
+      } else if (element.enteredViewCallback) {
         logFlags.dom && console.log('inserted:', element.localName);
-        element.enteredDocumentCallback();
+        element.enteredViewCallback();
       }
     }
     logFlags.dom && console.groupEnd();
@@ -141,7 +141,7 @@ function removedNode(node) {
 function removed(element) {
   // TODO(sjmiles): temporary: do work on all custom elements so we can track
   // behavior even when callbacks not defined
-  if (element.leftDocumentCallback || (element.__upgraded__ && logFlags.dom)) {
+  if (element.leftViewCallback || (element.__upgraded__ && logFlags.dom)) {
     logFlags.dom && console.log('removed:', element.localName);
     if (!inDocument(element)) {
       element.__inserted = (element.__inserted || 0) - 1;
@@ -153,8 +153,8 @@ function removed(element) {
       if (element.__inserted < 0) {
         logFlags.dom && console.warn('removed:', element.localName,
             'insert/remove count:', element.__inserted)
-      } else if (element.leftDocumentCallback) {
-        element.leftDocumentCallback();
+      } else if (element.leftViewCallback) {
+        element.leftViewCallback();
       }
     }
   }
@@ -241,16 +241,21 @@ function handler(mutations) {
   logFlags.dom && console.groupEnd();
 };
 
-var observer = new MutationObserver(handler);
-
 function takeRecords() {
   // TODO(sjmiles): ask Raf why we have to call handler ourselves
   handler(observer.takeRecords());
 }
 
 var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
 
+var observer = new MutationObserver(handler);
+
 function observe(inRoot) {
+  // TODO(sorvell): delay creation of mutation observer to help with
+// IE flakiness
+  if (!observer) {
+    observer = new MutationObserver(handler);
+  }
   observer.observe(inRoot, {childList: true, subtree: true});
 }
 

test/js/customElements.js

@@ -102,7 +102,7 @@
     var XBarBarPrototype = Object.create(XBarPrototype);
     var XBarBar = document.register('x-barbar', {
       prototype: XBarBarPrototype,
-      extends: 'x-bar'
+      extends: 'button'
     });
     var xbarbar = new XBarBar();
     work.appendChild(xbarbar).textContent = 'x-barbar';
@@ -113,7 +113,7 @@
     var XBarBarBarPrototype = Object.create(XBarBarPrototype);
     var XBarBarBar = document.register('x-barbarbar', {
       prototype: XBarBarBarPrototype,
-      extends: 'x-barbar'
+      extends: 'button'
     });
     var xbarbarbar = new XBarBarBar();
     work.appendChild(xbarbarbar).textContent = 'x-barbarbar';
@@ -139,25 +139,24 @@
       this.style.fontSize = '32pt';
     };
     var XBooBoo = document.register('x-booboo', {
-      prototype: XBooBooPrototype,
-      extends: 'x-boo'
+      prototype: XBooBooPrototype
     });
     var xbooboo = new XBooBoo();
     assert.equal(xbooboo.style.fontStyle, 'italic');
     assert.equal(xbooboo.style.fontSize, '32pt');
   });
 
 
-  test('document.register [created|enteredDocument|leftDocument]Callbacks in prototype', function(done) {
+  test('document.register [created|enteredView|leftView]Callbacks in prototype', function(done) {
     var ready, inserted, removed;
     var XBooPrototype = Object.create(HTMLElement.prototype);
     XBooPrototype.createdCallback = function() {
       ready = true;
     }
-    XBooPrototype.enteredDocumentCallback = function() {
+    XBooPrototype.enteredViewCallback = function() {
       inserted = true;
     }
-    XBooPrototype.leftDocumentCallback = function() {
+    XBooPrototype.leftViewCallback = function() {
       removed = true;
     }
     var XBoo = document.register('x-boo-ir', {
@@ -169,45 +168,36 @@
     assert(!removed, 'removed must be false [XBoo]');
     work.appendChild(xboo);
     CustomElements.takeRecords();
-    setTimeout(function() {
-      assert(inserted, 'inserted must be true [XBoo]');
-      work.removeChild(xboo);
-      CustomElements.takeRecords();
-      setTimeout(function() {
-        assert(removed, 'removed must be true [XBoo]');
-        //
-        ready = inserted = removed = false;
-        var XBooBooPrototype = Object.create(XBooPrototype);
-        XBooBooPrototype.createdCallback = function() {
-          XBoo.prototype.createdCallback.call(this);
-        };
-        XBooBooPrototype.enteredDocumentCallback = function() {
-          XBoo.prototype.enteredDocumentCallback.call(this);
-        };
-        XBooBooPrototype.leftDocumentCallback = function() {
-          XBoo.prototype.leftDocumentCallback.call(this);
-        };
-        var XBooBoo = document.register('x-booboo-ir', {
-          prototype: XBooBooPrototype,
-          extends: 'x-boo-ir'
-        });
-        var xbooboo = new XBooBoo();
-        assert(ready, 'ready must be true [XBooBoo]');
-        assert(!inserted, 'inserted must be false [XBooBoo]');
-        assert(!removed, 'removed must be false [XBooBoo]');
-        work.appendChild(xbooboo);
-        CustomElements.takeRecords();
-        //setTimeout(function() {
-          assert(inserted, 'inserted must be true [XBooBoo]');
-          work.removeChild(xbooboo);
-          CustomElements.takeRecords();
-          //setTimeout(function() {
-            assert(removed, 'removed must be true [XBooBoo]');
-            done();
-          //}, 1);
-        //}, 1);
-       }, 1);
-     }, 1);
+    assert(inserted, 'inserted must be true [XBoo]');
+    work.removeChild(xboo);
+    CustomElements.takeRecords();
+    assert(removed, 'removed must be true [XBoo]');
+    //
+    ready = inserted = removed = false;
+    var XBooBooPrototype = Object.create(XBooPrototype);
+    XBooBooPrototype.createdCallback = function() {
+      XBoo.prototype.createdCallback.call(this);
+    };
+    XBooBooPrototype.enteredViewCallback = function() {
+      XBoo.prototype.enteredViewCallback.call(this);
+    };
+    XBooBooPrototype.leftViewCallback = function() {
+      XBoo.prototype.leftViewCallback.call(this);
+    };
+    var XBooBoo = document.register('x-booboo-ir', {
+      prototype: XBooBooPrototype
+    });
+    var xbooboo = new XBooBoo();
+    assert(ready, 'ready must be true [XBooBoo]');
+    assert(!inserted, 'inserted must be false [XBooBoo]');
+    assert(!removed, 'removed must be false [XBooBoo]');
+    work.appendChild(xbooboo);
+    CustomElements.takeRecords();
+    assert(inserted, 'inserted must be true [XBooBoo]');
+    work.removeChild(xbooboo);
+    CustomElements.takeRecords();
+    assert(removed, 'removed must be true [XBooBoo]');
+    done();
   });
 
   test('document.register attributeChangedCallback in prototype', function(done) {
@@ -236,11 +226,10 @@
     });
     var xboo = new XBoo();
     work.appendChild(xboo);
-    setTimeout(function() {
-      var xboo2 = xboo.cloneNode(true);
-      assert(xboo2.__ready__, 'clone createdCallback must be called');
-      done();
-    }, 0);
+    CustomElements.takeRecords();
+    var xboo2 = xboo.cloneNode(true);
+    assert(xboo2.__ready__, 'clone createdCallback must be called');
+    done();
   });
 });
 

test/js/upgrade.js

@@ -84,7 +84,7 @@ suite('upgradeElements', function() {
     var XSpecialInputProto = Object.create(XInput.prototype);
     XSpecialInputProto.xSpecialInput = 'xSpecialInput';
     var XSpecialInput = document.register('x-special-input', {
-      extends: 'x-input',
+      extends: 'input',
       prototype: XSpecialInputProto
     });
     work.innerHTML = '<input is="x-special-input">';