Port custom element layout tests to Dart

tests/html/custom_element_document_register_test.dart

+// 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 custom_element_document_register_test;
+import '../../pkg/unittest/lib/unittest.dart';
+import '../../pkg/unittest/lib/html_individual_config.dart';
+import 'dart:html';
+
+class CustomFoo extends HtmlElement {
+  static final tag = 'x-foo';
+  factory CustomFoo() => new Element.tag(tag);
+
+  get thisIsACustomClass => true;
+}
+
+class CustomBar extends HtmlElement {
+  static final tag = 'x-bar';
+  factory CustomBar() => new Element.tag(tag);
+
+  get thisIsACustomClass => true;
+}
+
+class CustomBaz extends CustomFoo {
+  static final tag = 'x-baz';
+  factory CustomBaz() => new Element.tag(tag);
+
+  get thisIsAlsoACustomClass => true;
+}
+
+class CustomBadB {
+}
+
+class CustomBadE implements HtmlElement {
+  static final tag = 'x-tag-e';
+  factory CustomBadE() => new Element.tag(tag);
+}
+
+class CustomBar2 extends InputElement {
+  static final tag = 'x-bar';
+  factory CustomBar2() => document.$dom_createElement('input', tag);
+}
+
+class CustomQux extends CustomBar2 {
+  static final tag = 'x-qux';
+  factory CustomQux() => document.$dom_createElement('input', tag); 
+}
+
+class CustomFooBad extends DivElement {
+  static final tag = 'x-foo';
+  factory CustomFooBad() => document.$dom_createElement('div', tag); 
+}
+
+main() {
+  useHtmlIndividualConfiguration();
+
+  // Adapted from Blink's fast/dom/custom/document-register-basic test.
+  group('basic', () {
+    test('Testing document.register() basic behaviors', () {
+      document.register(CustomFoo.tag, CustomFoo);
+
+      // Cannot register an existing dart:html type.
+      expect(() => document.register('x-bad-a', HtmlElement), throws);
+
+      // Invalid user type.  Doesn't inherit from HtmlElement.
+      expect(() => document.register('x-bad-b', CustomBadB), throws);
+
+      // Not a type.
+      expect(() => document.register('x-bad-c', null), throws);
+
+      // Cannot register system type.
+      expect(() => document.register('x-bad-d', Object), throws);
+
+      // Must extend HtmlElement, not just implement it.
+      expect(() => document.register(CustomBadE.tag, CustomBadE), throws);
+
+      // Constructor initiated instantiation
+      var createdFoo = new CustomFoo();
+      expect(createdFoo.thisIsACustomClass, isTrue);
+
+      // Dart type correctness
+      expect(createdFoo is HtmlElement, isTrue);
+      expect(createdFoo is CustomFoo, isTrue);
+      expect(createdFoo.runtimeType, CustomFoo);
+
+      // Native getter
+      expect(createdFoo.tagName, "X-FOO");
+
+      // Native setter
+      createdFoo.innerHtml = "Hello";
+      expect(createdFoo.text, "Hello");
+
+      // Native method
+      var childDiv = new DivElement();
+      createdFoo.append(childDiv);
+      expect(createdFoo.lastChild, childDiv);
+
+      // Parser initiated instantiation
+      var container = new DivElement()..id = "container";
+      document.body.append(container);
+      container.innerHtml = "<x-foo></x-foo>";
+      var parsedFoo = container.firstChild;
+
+      expect(parsedFoo is CustomFoo, isTrue);
+      expect(parsedFoo.tagName, "X-FOO");
+
+      // Ensuring the wrapper is retained
+      var someProperty = new Expando();
+      someProperty[parsedFoo] = "hello";
+      // TODO(vsm): Fix this in Dartium.
+      // expect(someProperty[container.firstChild], someProperty[parsedFoo]);
+      // expect(container.firstChild, parsedFoo);
+
+      // Having another constructor
+      document.register(CustomBar.tag, CustomBar);
+      var createdBar = new CustomBar();
+      expect(createdBar is CustomBar, isTrue);
+      expect(createdBar is CustomFoo, isFalse);
+      expect(createdBar.tagName, "X-BAR");
+
+      // Having a subclass
+      document.register(CustomBaz.tag, CustomBaz);
+      var createdBaz = new CustomBaz();
+      expect(createdBaz.tagName, "X-BAZ");
+      expect(createdBaz.thisIsACustomClass, isTrue);
+      expect(createdBaz.thisIsAlsoACustomClass, isTrue);
+
+      // With irregular cases
+      var createdUpperBar = new Element.tag("X-BAR");
+      var createdMixedBar = new Element.tag("X-Bar");
+      expect(createdUpperBar is CustomBar, isTrue);
+      expect(createdUpperBar.tagName, "X-BAR");
+      expect(createdMixedBar is CustomBar, isTrue);
+      expect(createdMixedBar.tagName, "X-BAR");
+
+      container.innerHtml = "<X-BAR></X-BAR><X-Bar></X-Bar>";
+      expect(container.firstChild is CustomBar, isTrue);
+      expect(container.firstChild.tagName, "X-BAR");
+      expect(container.lastChild is CustomBar, isTrue);
+      expect(container.lastChild.tagName, "X-BAR");
+
+      // Constructors shouldn't interfere with each other
+      expect((new CustomFoo()).tagName, "X-FOO");
+      expect((new CustomBar()).tagName, "X-BAR");
+      expect((new CustomBaz()).tagName, "X-BAZ");
+    });
+  });
+
+  // Adapted from Blink's fast/dom/custom/document-register-type-extension test.
+  group('type_extensions', () {
+    var testForm = new FormElement()..id = 'testForm';
+    document.body.append(testForm);
+
+    bool isFormElement(element) {
+      testForm.append(element);
+      return element.form == testForm;
+    }
+
+    test('construction', () {
+      document.register(CustomFoo.tag, CustomFoo);
+      document.register(CustomBar2.tag, CustomBar2);
+      document.register(CustomBaz.tag, CustomBaz);
+      document.register(CustomQux.tag, CustomQux);
+
+      expect(() => document.register(CustomFooBad.tag, CustomFoo), throws);
+
+      // Constructors
+
+      var fooNewed = new CustomFoo();
+      var fooOuterHtml = "<x-foo></x-foo>";
+      expect(fooNewed.outerHtml, fooOuterHtml);
+      expect(fooNewed is CustomFoo, isTrue);
+      expect(fooNewed is HtmlElement, isTrue);
+      expect(fooNewed is UnknownElement, isFalse);
+
+      var barNewed = new CustomBar2();
+      var barOuterHtml = '<input is="x-bar"></input>';
+      expect(barNewed.outerHtml, barOuterHtml);
+      expect(barNewed is CustomBar, isTrue);
+      expect(barNewed is InputElement, isTrue);
+      expect(isFormElement(barNewed), isTrue);
+
+      var bazNewed = new CustomBaz();
+      var bazOuterHtml = "<x-baz></x-baz>";
+      expect(bazNewed.outerHtml, bazOuterHtml);
+      expect(bazNewed is CustomBaz, isTrue);
+      expect(bazNewed is HtmlElement, isTrue);
+      expect(bazNewed is UnknownElement, isFalse);
+
+      var quxNewed = new CustomQux();
+      var quxOuterHtml = '<input is="x-qux"></input>';
+      expect(quxNewed.outerHtml, quxOuterHtml);
+      expect(quxNewed is CustomQux, isTrue);
+      expect(quxNewed is InputElement, isTrue);
+      expect(isFormElement(quxNewed), isTrue);
+
+      // new Element.tag
+
+      var fooCreated = new Element.tag('x-foo');
+      expect(fooCreated.outerHtml, fooOuterHtml);
+      expect(fooCreated is CustomFoo, isTrue);
+
+      var barCreated = new Element.tag('x-bar');
+      expect(barCreated.outerHtml, "<x-bar></x-bar>");
+      expect(barCreated is CustomBar2, isFalse);
+      expect(barCreated is UnknownElement, isFalse);
+      expect(barCreated is HtmlElement, isTrue);
+
+      var bazCreated = new Element.tag('x-baz');
+      expect(bazCreated.outerHtml, bazOuterHtml);
+      expect(bazCreated is CustomBaz, isTrue);
+      expect(bazCreated is UnknownElement, isFalse);
+
+      var quxCreated = new Element.tag('x-qux');
+      expect(quxCreated.outerHtml, "<x-qux></x-qux>");
+      expect(quxCreated is CustomQux, isFalse);
+      expect(quxCreated is UnknownElement, isFalse);
+      expect(quxCreated is HtmlElement, isTrue);
+
+      // create with type extensions
+      // TODO(vsm): How should we expose this?
+
+      var divFooCreated = document.$dom_createElement("div", CustomFoo.tag);
+      expect(divFooCreated.outerHtml, '<div is="x-foo"></div>');
+      expect(divFooCreated is CustomFoo, isFalse);
+      expect(divFooCreated is DivElement, isTrue);
+
+      var inputBarCreated =
+        document.$dom_createElement("input", CustomBar2.tag);
+      expect(inputBarCreated.outerHtml, barOuterHtml);
+      expect(inputBarCreated is CustomBar2, isTrue);
+      expect(inputBarCreated is UnknownElement, isFalse);
+      expect(isFormControl(inputBarCreated), isTrue);
+
+      var divBarCreated = document.$dom_createElement("div", CustomBar2.tag);
+      expect(divBarCreated.outerHtml, '<div is="x-bar"></div>');
+      expect(divBarCreated is CustomBar2, isFalse);
+      expect(divBarCreated is DivElement, isTrue);
+
+      var fooBarCreated =
+        document.$dom_createElement(CustomFoo.tag, CustomBar2.tag);
+      expect(fooBasedCreated.outerHtml, '<x-foo is="x-bar"></x-foo>');
+      expect(fooBarCreated is CustomFoo, isTrue);
+
+      var barFooCreated = document.$dom_createElement(CustomBar2.tag, CustomFoo.tag);

[Siggi Cherem (dart-lang), 2013/08/16 23:02:19]

long line

[vsm, 2013/08/19 17:00:10]

Done.

+      expect(barFooCreated.outerHtml, '<x-bar is="x-foo"></x-bar>');
+      expect(barFooCreated is UnknownElement, isFalse);
+      expect(barFooCreated is HtmlElement, isTrue);
+
+      var fooCreatedNull = document.$dom_createElement(CustomFoo.tag, null);
+      expect(fooCreatedNull.outerHtml, fooOuterHtml);
+      expect(fooCreatedNull is CustomFoo, isTrue);
+
+      var fooCreatedEmpty = document.$dom_createElement(CustomFoo.tag, "");
+      expect(fooCreatedEmpty.outerHtml, fooOuterHtml);
+      expect(fooCreatedEmpty is CustomFoo, isTrue);
+
+      expect(() => document.$dom_createElement('@invalid', 'x-bar'), throws);
+
+      // Create NS with type extensions
+
+      var fooCreatedNS =
+        document.$dom_createElementNS("http://www.w3.org/1999/xhtml",
+                                      CustomFoo.tag, null);
+      expect(fooCreatedNS.outerHtml, fooOuterHtml);
+      expect(fooCreatedNS is CustomFoo, isTrue);
+
+      var barCreatedNS =
+        document.$dom_createElementNS("http://www.w3.org/1999/xhtml", "input",
+                                      CustomBar2.tag);
+      expect(barCreatedNS.outerHtml, barOuterHtml);
+      expect(barCreatedNS is CustomBar2, isTrue);
+      expect(isFormControl(barCreatedNS), isTrue);
+
+      expect(() => 
+             document.$dom_createElementNS('http://example.com/2013/no-such-namespace',

[Siggi Cherem (dart-lang), 2013/08/16 23:02:19]

here too?

[vsm, 2013/08/19 17:00:10]

Done.

+                                           'xml:lang', 'x-bar'), throws);
+
+      // Parser
+
+      createElementFromHtml(html) {
+        var container = new DivElement()..innerHtml = html;
+        return container.firstChild;
+      }
+
+      var fooParsed = createElementFromHtml('<x-foo>');
+      expect(fooParsed is CustomFoo, isTrue);
+
+      var barParsed = createElementFromHtml('<input is=x-bar>');
+      expect(barParsed is CustomBar2, isTrue);
+      expect(isFormControl(barParsed), isTrue);
+
+      var divFooParsed = createElementFromHtml('<div is=x-foo>');
+      expect(divFooParsed is CustomFoo, isFalse);
+      expect(divFooParsed is DivElement, isTrue);
+
+      var namedBarParsed = createElementFromHtml('<x-bar>');
+      expect(namedBarParsed is CustomBar2, isFalse);
+      expect(namedBarParsed is UnknownElement, isFalse);
+      expect(namedBarParsed is HtmlElement, isTrue);
+
+      var divBarParsed = createElementFromHtml('<div is=x-bar>');
+      expect(divBarParsed is CustomBar2, isFalse);
+      expect(divBarParsed is DivElement, isTrue);
+    });
+  });
+}