Add Audio and Option constructors

build.json

@@ -15,6 +15,9 @@
   "src/wrappers/HTMLImageElement.js",
   "src/wrappers/HTMLShadowElement.js",
   "src/wrappers/HTMLTemplateElement.js",
+  "src/wrappers/HTMLMediaElement.js",
+  "src/wrappers/HTMLAudioElement.js",
+  "src/wrappers/HTMLOptionElement.js",
   "src/wrappers/HTMLUnknownElement.js",
   "src/wrappers/CanvasRenderingContext2D.js",
   "src/wrappers/WebGLRenderingContext.js",

shadowdom.js

@@ -31,6 +31,9 @@
     'src/wrappers/HTMLImageElement.js',
     'src/wrappers/HTMLShadowElement.js',
     'src/wrappers/HTMLTemplateElement.js',
+    'src/wrappers/HTMLMediaElement.js',
+    'src/wrappers/HTMLAudioElement.js',
+    'src/wrappers/HTMLOptionElement.js',
     'src/wrappers/HTMLUnknownElement.js',
     'src/wrappers/CanvasRenderingContext2D.js',
     'src/wrappers/WebGLRenderingContext.js',

src/wrappers/HTMLAudioElement.js

@@ -0,0 +1,42 @@
+// Copyright 2013 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 HTMLMediaElement = scope.wrappers.HTMLMediaElement;
+  var registerWrapper = scope.registerWrapper;
+  var unwrap = scope.unwrap;
+  var rewrap = scope.rewrap;
+
+  var OriginalHTMLAudioElement = window.HTMLAudioElement;
+
+  function HTMLAudioElement(node) {
+    HTMLMediaElement.call(this, node);
+  }
+  HTMLAudioElement.prototype = Object.create(HTMLMediaElement.prototype);
+
+  registerWrapper(OriginalHTMLAudioElement, HTMLAudioElement,
+                  document.createElement('audio'));
+
+  function Audio(src) {
+    if (!(this instanceof Audio)) {
+      throw new TypeError(
+          'DOM object constructor cannot be called as a function.');
+    }
+
+    var node = unwrap(document.createElement('audio'));
+    HTMLMediaElement.call(this, node);
+    rewrap(node, this);
+
+    node.setAttribute('preload', 'auto');
+    if (src !== undefined)
+      node.setAttribute('src', src);
+  }
+
+  Audio.prototype = HTMLAudioElement.prototype;
+
+  scope.wrappers.HTMLAudioElement = HTMLAudioElement;
+  scope.wrappers.Audio = Audio;
+})(this.ShadowDOMPolyfill);

src/wrappers/HTMLImageElement.js

@@ -27,12 +27,13 @@
     }
 
     var node = unwrap(document.createElement('img'));
+    HTMLElement.call(this, node);
+    rewrap(node, this);
+
     if (width !== undefined)
       node.width = width;
     if (height !== undefined)
       node.height = height;
-    HTMLElement.call(this, node);
-    rewrap(node, this);
   }
 
   Image.prototype = HTMLImageElement.prototype;

src/wrappers/HTMLMediaElement.js

@@ -0,0 +1,22 @@
+// Copyright 2013 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 registerWrapper = scope.registerWrapper;
+
+  var OriginalHTMLMediaElement = window.HTMLMediaElement;
+
+  function HTMLMediaElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLMediaElement.prototype = Object.create(HTMLElement.prototype);
+
+  registerWrapper(OriginalHTMLMediaElement, HTMLMediaElement,
+                  document.createElement('audio'));
+
+  scope.wrappers.HTMLMediaElement = HTMLMediaElement;
+})(this.ShadowDOMPolyfill);

src/wrappers/HTMLOptionElement.js

@@ -0,0 +1,63 @@
+// Copyright 2013 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 rewrap = scope.rewrap;
+  var unwrap = scope.unwrap;
+  var wrap = scope.wrap;
+
+  var OriginalHTMLOptionElement = window.HTMLOptionElement;
+
+  function trimText(s) {
+    return s.replace(/\s+/g, ' ').trim();
+  }
+
+  function HTMLOptionElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLOptionElement.prototype = Object.create(HTMLElement.prototype);
+  mixin(HTMLOptionElement.prototype, {
+    get text() {
+      return trimText(this.textContent);
+    },
+    set text(value) {
+      this.textContent = trimText(String(value));
+    },
+    get form() {
+      return wrap(unwrap(this).form);
+    }
+  });
+
+  registerWrapper(OriginalHTMLOptionElement, HTMLOptionElement,
+                  document.createElement('option'));
+
+  function Option(text, value, defaultSelected, selected) {
+    if (!(this instanceof Option)) {
+      throw new TypeError(
+          'DOM object constructor cannot be called as a function.');
+    }
+
+    var node = unwrap(document.createElement('option'));
+    HTMLElement.call(this, node);
+    rewrap(node, this);
+
+    if (text !== undefined)
+      node.text = text;
+    if (value !== undefined)
+      node.setAttribute('value', value);
+    if (defaultSelected === true)
+      node.setAttribute('selected', '');
+    node.selected = selected === true;
+  }
+
+  Option.prototype = HTMLOptionElement.prototype;
+
+  scope.wrappers.HTMLOptionElement = HTMLOptionElement;
+  scope.wrappers.Option = Option;
+})(this.ShadowDOMPolyfill);

src/wrappers/elements-with-form-property.js

@@ -20,7 +20,7 @@
     'HTMLLabelElement',
     'HTMLLegendElement',
     'HTMLObjectElement',
-    'HTMLOptionElement',
+    // HTMLOptionElement is handled in HTMLOptionElement.js
     'HTMLOutputElement',
     'HTMLSelectElement',
     'HTMLTextAreaElement',

src/wrappers/override-constructors.js

@@ -13,7 +13,6 @@
     'a': 'HTMLAnchorElement',
     'applet': 'HTMLAppletElement',
     'area': 'HTMLAreaElement',
-    'audio': 'HTMLAudioElement',
     'br': 'HTMLBRElement',
     'base': 'HTMLBaseElement',
     'body': 'HTMLBodyElement',
@@ -42,7 +41,6 @@
     'link': 'HTMLLinkElement',
     'map': 'HTMLMapElement',
     'marquee': 'HTMLMarqueeElement',
-    // 'media', Covered by audio and video
     'menu': 'HTMLMenuElement',
     'menuitem': 'HTMLMenuItemElement',
     'meta': 'HTMLMetaElement',

test/js/HTMLAudioElement.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2013 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('HTMLAudioElement', function() {
+
+  test('instanceof', function() {
+    var audio = document.createElement('audio');
+    assert.instanceOf(audio, HTMLAudioElement);
+    assert.instanceOf(audio, Audio);
+    assert.instanceOf(audio, HTMLMediaElement);
+    assert.instanceOf(audio, HTMLElement);
+  });
+
+  test('Audio', function() {
+    var audio = new Audio();
+    assert.instanceOf(audio, HTMLAudioElement);
+    assert.instanceOf(audio, Audio);
+    assert.instanceOf(audio, HTMLMediaElement);
+    assert.instanceOf(audio, HTMLElement);
+  });
+
+  test('Audio arguments', function() {
+    var audio = new Audio();
+    assert.isFalse(audio.hasAttribute('src'));
+    assert.equal(audio.getAttribute('preload', 'auto'));
+
+    var src = 'foo.wav';
+    var audio = new Audio(src);
+    assert.equal(audio.getAttribute('src', 'foo.wav'));
+  });
+
+  test('Audio called as function', function() {
+    assert.throws(Audio, TypeError);
+  });
+
+  test('Audio basics', function() {
+    var audio = new Audio();
+    assert.equal('audio', audio.localName);
+
+    var div = document.createElement('div');
+    div.appendChild(audio);
+
+    assert.equal(div.firstChild, audio);
+    assert.equal('<div><audio></div>', div.outerHTML);
+  });
+
+});

test/js/HTMLOptionElement.js

@@ -15,4 +15,65 @@ suite('HTMLOptionElement', function() {
     assert.equal(option.form, form);
   });
 
+  test('instanceof', function() {
+    var option = document.createElement('option');
+    assert.instanceOf(option, HTMLOptionElement);
+    assert.instanceOf(option, Option);
+    assert.instanceOf(option, HTMLElement);
+  });
+
+  test('Option', function() {
+    var option = new Option();
+    assert.instanceOf(option, HTMLOptionElement);
+    assert.instanceOf(option, Option);
+    assert.instanceOf(option, HTMLElement);
+  });
+
+  test('Option arguments', function() {
+    var option = new Option();
+    assert.equal(option.text, '');
+    assert.equal(option.value, '');
+    assert.isFalse(option.defaultSelected);
+    assert.isFalse(option.selected);
+
+    var option = new Option(' more  text  ');
+    assert.equal(option.text, 'more text');
+    assert.equal(option.value, 'more text');
+    assert.isFalse(option.defaultSelected);
+    assert.isFalse(option.selected);
+
+    var option = new Option('text', 'value');
+    assert.equal(option.text, 'text');
+    assert.equal(option.value, 'value');
+    assert.isFalse(option.defaultSelected);
+    assert.isFalse(option.selected);
+
+    var option = new Option('text', 'value', true);
+    assert.equal(option.text, 'text');
+    assert.equal(option.value, 'value');
+    assert.isTrue(option.defaultSelected);
+    assert.isFalse(option.selected);
+
+    var option = new Option('text', 'value', true, true);
+    assert.equal(option.text, 'text');
+    assert.equal(option.value, 'value');
+    assert.isTrue(option.defaultSelected);
+    assert.isTrue(option.selected);
+  });
+
+  test('Option called as function', function() {
+    assert.throws(Option, TypeError);
+  });
+
+  test('Option basics', function() {
+    var option = new Option();
+    assert.equal('option', option.localName);
+
+    var select = document.createElement('select');
+    select.appendChild(option);
+
+    assert.equal(select.firstChild, option);
+    assert.equal('<select><option></option></select>', select.outerHTML);
+  });
+
 });

test/test.main.js

@@ -54,6 +54,7 @@ var modules = [
   'Comment.js',
   'Document.js',
   'Element.js',
+  'HTMLAudioElement.js',
   'HTMLBodyElement.js',
   'HTMLButtonElement.js',
   'HTMLCanvasElement.js',