Implement the HTML DOM APIs

build.json

@@ -6,6 +6,7 @@
   "src/MutationObserver.js",
   "src/wrappers/events.js",
   "src/wrappers/NodeList.js",
+  "src/wrappers/HTMLCollection.js",
   "src/wrappers/Node.js",
   "src/querySelector.js",
   "src/wrappers/node-interfaces.js",
@@ -22,6 +23,9 @@
   "src/wrappers/HTMLAudioElement.js",
   "src/wrappers/HTMLOptionElement.js",
   "src/wrappers/HTMLSelectElement.js",
+  "src/wrappers/HTMLTableElement.js",
+  "src/wrappers/HTMLTableSectionElement.js",
+  "src/wrappers/HTMLTableRowElement.js",
   "src/wrappers/HTMLUnknownElement.js",
   "src/wrappers/SVGElement.js",
   "src/wrappers/SVGUseElement.js",

shadowdom.js

@@ -22,6 +22,7 @@
     'src/MutationObserver.js',
     'src/wrappers/events.js',
     'src/wrappers/NodeList.js',
+    'src/wrappers/HTMLCollection.js',
     'src/wrappers/Node.js',
     'src/querySelector.js',
     'src/wrappers/node-interfaces.js',
@@ -38,6 +39,9 @@
     'src/wrappers/HTMLAudioElement.js',
     'src/wrappers/HTMLOptionElement.js',
     'src/wrappers/HTMLSelectElement.js',
+    'src/wrappers/HTMLTableElement.js',
+    'src/wrappers/HTMLTableSectionElement.js',
+    'src/wrappers/HTMLTableRowElement.js',
     'src/wrappers/HTMLUnknownElement.js',
     'src/wrappers/SVGElement.js',
     'src/wrappers/SVGUseElement.js',

src/wrappers/HTMLCollection.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2014 The Polymer Authors. All rights reserved.
+ * Use of this source code is goverened by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+(function(scope) {
+  'use strict';
+
+  // TODO(arv): Implement.
+
+  scope.wrapHTMLCollection = scope.wrapNodeList;
+  scope.wrappers.HTMLCollection = scope.wrappers.NodeList;
+
+})(window.ShadowDOMPolyfill);

src/wrappers/HTMLTableElement.js

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2014 The Polymer Authors. All rights reserved.
+ * Use of this source code is goverened by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+(function(scope) {
+  'use strict';
+
+  var HTMLElement = scope.wrappers.HTMLElement;
+  var mixin = scope.mixin;
+  var registerWrapper = scope.registerWrapper;
+  var unwrap = scope.unwrap;
+  var wrap = scope.wrap;
+  var wrapHTMLCollection = scope.wrapHTMLCollection;
+
+  var OriginalHTMLTableElement = window.HTMLTableElement;
+
+  function HTMLTableElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLTableElement.prototype = Object.create(HTMLElement.prototype);
+  mixin(HTMLTableElement.prototype, {
+    get caption() {
+      return wrap(unwrap(this).caption);
+    },
+    createCaption: function() {
+      return wrap(unwrap(this).createCaption());
+    },
+
+    get tHead() {
+      return wrap(unwrap(this).tHead);
+    },
+    createTHead: function() {
+      return wrap(unwrap(this).createTHead());
+    },
+
+    createTFoot: function() {
+      return wrap(unwrap(this).createTFoot());
+    },
+    get tFoot() {
+      return wrap(unwrap(this).tFoot);
+    },
+
+    get tBodies() {
+      return wrapHTMLCollection(unwrap(this).tBodies);
+    },
+    createTBody: function() {
+      return wrap(unwrap(this).createTBody());
+    },
+
+    get rows() {
+      return wrapHTMLCollection(unwrap(this).rows);
+    },
+    insertRow: function(index) {
+      return wrap(unwrap(this).insertRow(index));
+    }
+  });
+
+  registerWrapper(OriginalHTMLTableElement, HTMLTableElement,
+                  document.createElement('table'));
+
+  scope.wrappers.HTMLTableElement = HTMLTableElement;
+})(window.ShadowDOMPolyfill);

src/wrappers/HTMLTableRowElement.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2014 The Polymer Authors. All rights reserved.
+ * Use of this source code is goverened by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+(function(scope) {
+  'use strict';
+
+  var HTMLElement = scope.wrappers.HTMLElement;
+  var mixin = scope.mixin;
+  var registerWrapper = scope.registerWrapper;
+  var wrapHTMLCollection = scope.wrapHTMLCollection;
+  var unwrap = scope.unwrap;
+  var wrap = scope.wrap;
+
+  var OriginalHTMLTableRowElement = window.HTMLTableRowElement;
+
+  function HTMLTableRowElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLTableRowElement.prototype = Object.create(HTMLElement.prototype);
+  mixin(HTMLTableRowElement.prototype, {
+    get cells() {
+      return wrapHTMLCollection(unwrap(this).cells);
+    },
+
+    insertCell: function(index) {
+      return wrap(unwrap(this).insertCell(index));
+    }
+  });
+
+  registerWrapper(OriginalHTMLTableRowElement, HTMLTableRowElement,
+                  document.createElement('tr'));
+
+  scope.wrappers.HTMLTableRowElement = HTMLTableRowElement;
+})(window.ShadowDOMPolyfill);

src/wrappers/HTMLTableSectionElement.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2014 The Polymer Authors. All rights reserved.
+ * Use of this source code is goverened by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+(function(scope) {
+  'use strict';
+
+  var HTMLElement = scope.wrappers.HTMLElement;
+  var mixin = scope.mixin;
+  var registerWrapper = scope.registerWrapper;
+  var wrapHTMLCollection = scope.wrapHTMLCollection;
+  var unwrap = scope.unwrap;
+  var wrap = scope.wrap;
+
+  var OriginalHTMLTableSectionElement = window.HTMLTableSectionElement;
+
+  function HTMLTableSectionElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLTableSectionElement.prototype = Object.create(HTMLElement.prototype);
+  mixin(HTMLTableSectionElement.prototype, {
+    get rows() {
+      return wrapHTMLCollection(unwrap(this).rows);
+    },
+    insertRow: function(index) {
+      return wrap(unwrap(this).insertRow(index));
+    }
+  });
+
+  registerWrapper(OriginalHTMLTableSectionElement, HTMLTableSectionElement,
+                  document.createElement('thead'));
+
+  scope.wrappers.HTMLTableSectionElement = HTMLTableSectionElement;
+})(window.ShadowDOMPolyfill);

test/js/HTMLTableElement.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2014 The Polymer Authors. All rights reserved.
+ * Use of this source code is goverened by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('HTMLTableElement', function() {
+
+  test('instanceof', function() {
+    var table = createTable();
+    assert.instanceOf(table, HTMLTableElement);
+  });
+
+  test('caption', function() {
+    var table = createTable();
+    assert.equal(table.caption.localName, 'caption');
+  });
+
+  test('createCaption', function() {
+    var table = createTable();
+    var caption = table.createCaption();
+    assert.equal(caption.localName, 'caption');
+    assert.instanceOf(caption, HTMLElement);
+  });
+
+  test('tHead', function() {
+    var table = createTable();
+    assert.equal(table.tHead.localName, 'thead');
+    assert.instanceOf(table.tHead, HTMLTableSectionElement);
+  });
+
+  test('createTHead', function() {
+    var table = createTable();
+    var thead = table.createTHead();
+    assert.equal(thead.localName, 'thead');
+    assert.instanceOf(thead, HTMLTableSectionElement);
+  });
+
+  test('tFoot', function() {
+    var table = createTable();
+    assert.equal(table.tFoot.localName, 'tfoot');
+    assert.instanceOf(table.tFoot, HTMLTableSectionElement);
+  });
+
+  test('createTFoot', function() {
+    var table = createTable();
+    var tfoot = table.createTFoot();
+    assert.equal(tfoot.localName, 'tfoot');
+    assert.instanceOf(tfoot, HTMLTableSectionElement);
+  });
+
+  test('tBodies', function() {
+    var table = createTable();
+    assert.instanceOf(table.tBodies, HTMLCollection);
+    assert.equal(table.tBodies.length, 2);
+
+    assert.equal(table.tBodies[0], table.querySelector('tbody'));
+  });
+
+  test('createTBody', function() {
+    var table = createTable();
+    var tbody = table.createTBody();
+    assert.equal(tbody.localName, 'tbody');
+    assert.instanceOf(tbody, HTMLTableSectionElement);
+  });
+
+  test('rows', function() {
+    var table = createTable();
+    assert.instanceOf(table.rows, HTMLCollection);
+    assert.equal(table.rows.length, 8);
+  });
+
+  test('insertRow', function() {
+    var table = createTable();
+    var tr = table.insertRow(1);
+    assert.instanceOf(tr, HTMLTableRowElement);
+    assert.equal(tr.localName, 'tr');
+  });
+
+});

test/js/HTMLTableRowElement.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2014 The Polymer Authors. All rights reserved.
+ * Use of this source code is goverened by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('HTMLTableRowElement', function() {
+
+  test('instanceof', function() {
+    var table = createTable();
+    var row = table.querySelector('tr');
+    assert.instanceOf(row, HTMLTableRowElement);
+  });
+
+  test('cells', function() {
+    var table = createTable();
+    var row = table.querySelector('tr');
+    assert.instanceOf(row.cells, HTMLCollection);
+    assert.equal(row.cells.length, 3);
+  });
+
+  test('insertCell', function() {
+    var table = createTable();
+    var row = table.querySelector('tr');
+    var newCell = row.insertCell(0);
+    assert.equal(newCell.localName, 'td');
+  });
+
+});

test/js/HTMLTableSectionElement.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2014 The Polymer Authors. All rights reserved.
+ * Use of this source code is goverened by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+suite('HTMLTableSectionElement', function() {
+
+  test('instanceof', function() {
+    var table = createTable();
+    var thead = table.querySelector('thead');
+    assert.instanceOf(thead, HTMLTableSectionElement);
+    var tfoot = table.querySelector('tfoot');
+    assert.instanceOf(tfoot, HTMLTableSectionElement);
+  });
+
+  test('rows', function() {
+    var table = createTable();
+    var thead = table.querySelector('thead');
+    assert.instanceOf(thead.rows, HTMLCollection);
+    assert.equal(thead.rows.length, 2);
+
+    var tbody = table.querySelector('tbody');
+    assert.instanceOf(tbody.rows, HTMLCollection);
+    assert.equal(tbody.rows.length, 2);
+
+    var tfoot = table.querySelector('tfoot');
+    assert.instanceOf(tfoot.rows, HTMLCollection);
+    assert.equal(tfoot.rows.length, 2);
+  });
+
+  test('insertRow', function() {
+    var table = createTable();
+    var thead = table.querySelector('thead');
+    var tr = thead.insertRow(1);
+    assert.instanceOf(tr, HTMLTableRowElement);
+    assert.equal(tr.localName, 'tr');
+
+    var tbody = table.querySelector('tbody');
+    tr = thead.insertRow(1);
+    assert.instanceOf(tr, HTMLTableRowElement);
+    assert.equal(tr.localName, 'tr');
+
+    var tfoot = table.querySelector('tfoot');
+    tr = thead.insertRow(1);
+    assert.instanceOf(tr, HTMLTableRowElement);
+    assert.equal(tr.localName, 'tr');
+  });
+
+});