Dart2js support for custom element lifecycle events

tests/html/custom/entered_left_view_test.dart

Index: tests/html/custom/entered_left_view_test.dart
diff --git a/tests/html/custom/entered_left_view_test.dart b/tests/html/custom/entered_left_view_test.dart
new file mode 100644
index 0000000000000000000000000000000000000000..6be25819c4be4fe564804cf483cfafebfada3ab3
--- /dev/null
+++ b/tests/html/custom/entered_left_view_test.dart
@@ -0,0 +1,246 @@
+// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+library entered_left_view_test;
+
+import 'dart:async';
+import 'dart:html';
+import 'dart:js' as js;
+import 'package:unittest/html_individual_config.dart';
+import 'package:unittest/unittest.dart';
+import '../utils.dart';
+
+var invocations = [];
+class Foo extends HtmlElement {
+  factory Foo() => null;
+
+  void created() {
+    invocations.add('created');
+  }
+
+  void enteredView() {
+    invocations.add('entered');
+  }
+
+  void leftView() {
+    invocations.add('left');
+  }
+
+  void attributeChanged() {
+    invocations.add('attribute changed');
+  }
+}
+
+// Pump custom events polyfill events.
+void customElementsTakeRecords() {
+  if (js.context.hasProperty('CustomElements')) {
+    js.context['CustomElements'].callMethod('takeRecords');
+  }
+}
+
+main() {
+  useHtmlIndividualConfiguration();
+
+  // Adapted from Blink's
+  // fast/dom/custom/entered-left-document.html test.
+
+  var docA = document;
+  var docB = document.implementation.createHtmlDocument('');
+
+  var nullSanitizer = new NullTreeSanitizer();
+
+  var registeredTypes = false;
+  setUp(() {
+    return loadPolyfills().then((_) {
+      if (registeredTypes) {
+        return;
+      }
+      registeredTypes = true;
+      document.register('x-a', Foo);
+    });
+  });
+
+  group('Standard events', () {
+    var a = new Element.tag('x-a');
+    setUp(() {
+      invocations = [];
+    });
+
+    test('Created', () {
+      a = new Element.tag('x-a');
+      expect(invocations, ['created']);
+    });
+
+    test('entered', () {
+      document.body.append(a);
+      customElementsTakeRecords();
+      expect(invocations, ['entered']);
+    });
+
+    test('left', () {
+      a.remove();
+      customElementsTakeRecords();
+      expect(invocations, ['left']);
+    });
+
+    var div = new DivElement();
+    test('nesting does not trigger entered', () {
+      div.append(a);
+      customElementsTakeRecords();
+      expect(invocations, []);
+    });
+
+    test('nested entering triggers entered', () {
+      document.body.append(div);
+      customElementsTakeRecords();
+      expect(invocations, ['entered']);
+    });
+
+    test('nested leaving triggers left', () {
+      div.remove();
+      customElementsTakeRecords();
+      expect(invocations, ['left']);
+    });
+  });
+
+  group('viewless_document', () {
+    var a = docB.createElement('x-a');
+    setUp(() {
+      invocations = [];
+    });
+
+    test('Created, owned by a document without a view', () {
+      a = docB.createElement('x-a');
+      expect(a.document, docB,
+          reason:'new instance should be owned by the document the definition '
+          'was registered with');
+      expect(invocations, ['created'],
+          reason: 'calling the constructor should invoke the created callback');
+    });
+
+    test('Entered document without a view', () {
+      docB.body.append(a);
+      expect(invocations, [],
+          reason: 'entered callback should not be invoked when entering a '
+          'document without a view');
+    });
+
+    /*
+    test('Attribute changed in document without a view', () {

[Jennifer Messerly, 2013/09/20 17:58:35]

FYI -- I'm surprised this isn't working? Don't they override
setAttribute/removeAttribute?

I'm porting more of Polymer, and they do need this callback. I implemented it in
the old xtag CustomElements by wrapping .attributes in my own Map that had
change notifications. But if the JS code overrides JS setAttribute, it should
"just work" as long as we also implement something for Dartium.

Alternatively, we could just build this in to _AttributeMap

[blois, 2013/09/20 21:39:38]

The callback signature is different between Polymer and native. It's not
terribly difficult to patch up, just want to do it as a separate CL.

+      a.setAttribute('data-foo', 'bar');
+      expect(invocations, ['attribute changed'],
+          reason: 'changing an attribute should invoke the callback, even in a '
+          'document without a view');
+    });
+    */
+    test('Entered document with a view', () {
+      document.body.append(a);
+      customElementsTakeRecords();
+      expect(invocations, ['entered'],
+          reason: 'entered callback should be invoked when entering a document '
+          'with a view');
+    });
+
+    test('Left document with a view', () {
+      a.remove();
+      customElementsTakeRecords();
+      expect(invocations, ['left'],
+          reason: 'left callback should be invoked when leaving a document '
+          'with a view');
+    });
+
+    test('Created in a document without a view', () {
+      docB.body.setInnerHtml('<x-a></x-a>', treeSanitizer: nullSanitizer);
+      Platform.upgradeCustomElements(docB.body);
+
+      expect(invocations, ['created'],
+          reason: 'only created callback should be invoked when parsing a '
+          'custom element in a document without a view');
+    });
+  });
+
+  group('shadow_dom', () {
+    var div;
+    var s;
+    setUp(() {
+      invocations = [];
+      div = new DivElement();
+      s = div.createShadowRoot();
+    });
+
+    tearDown(() {
+      customElementsTakeRecords();
+    });
+
+    test('Created in Shadow DOM that is not in a document', () {
+      s.setInnerHtml('<x-a></x-a>', treeSanitizer: nullSanitizer);
+      Platform.upgradeCustomElements(s);
+
+      expect(invocations, ['created'],
+          reason: 'the entered callback should not be invoked when entering a '
+          'Shadow DOM subtree not in the document');
+    });
+
+    test('Leaves Shadow DOM that is not in a document', () {
+      s.innerHtml = '';
+      expect(invocations, [],
+          reason: 'the left callback should not be invoked when leaving a '
+          'Shadow DOM subtree not in the document');
+    });
+
+    test('Enters a document with a view as a constituent of Shadow DOM', () {
+      s.setInnerHtml('<x-a></x-a>', treeSanitizer: nullSanitizer);
+      Platform.upgradeCustomElements(s);
+
+      document.body.append(div);
+      customElementsTakeRecords();
+      expect(invocations, ['created', 'entered'],
+            reason: 'the entered callback should be invoked when inserted into a '

[Jennifer Messerly, 2013/09/20 17:58:35]

long line

[blois, 2013/09/20 21:39:38]

Done.

+            'document with a view as part of Shadow DOM');
+
+      div.remove();
+      customElementsTakeRecords();
+
+      expect(invocations, ['created', 'entered', 'left'],
+          reason: 'the left callback should be invoked when removed from a '
+          'document with a view as part of Shadow DOM');
+    });
+  });
+
+
+  group('disconnected_subtree', () {
+    var div = new DivElement();
+
+    setUp(() {
+      invocations = [];
+    });
+
+    test('Enters a disconnected subtree of DOM', () {
+      div.setInnerHtml('<x-a></x-a>', treeSanitizer: nullSanitizer);
+      Platform.upgradeCustomElements(div);
+
+      expect(invocations, ['created'],
+          reason: 'the entered callback should not be invoked when inserted '
+          'into a disconnected subtree');
+    });
+
+    test('Leaves a disconnected subtree of DOM', () {
+      div.innerHtml = '';
+      expect(invocations, [],
+          reason: 'the left callback should not be invoked when removed from a '
+          'disconnected subtree');
+    });
+
+    test('Enters a document with a view as a constituent of a subtree', () {
+      div.setInnerHtml('<x-a></x-a>', treeSanitizer: nullSanitizer);
+      Platform.upgradeCustomElements(div);
+      invocations = [];
+      document.body.append(div);
+      customElementsTakeRecords();
+      expect(invocations, ['entered'],
+          reason: 'the entered callback should be invoked when inserted into a '
+          'document with a view as part of a subtree');
+    });
+  });
+}