Add support for new Image

Author: arv

build.json

@@ -1,29 +1,30 @@
 [
-    "../observe-js/src/observe.js",
-    "../WeakMap/weakmap.js",
-    "src/wrappers.js",
-    "src/wrappers/events.js",
-    "src/wrappers/NodeList.js",
-    "src/wrappers/Node.js",
-    "src/querySelector.js",
-    "src/wrappers/node-interfaces.js",
-    "src/wrappers/CharacterData.js",
-    "src/wrappers/Element.js",
-    "src/wrappers/HTMLElement.js",
-    "src/wrappers/HTMLCanvasElement.js",
-    "src/wrappers/HTMLContentElement.js",
-    "src/wrappers/HTMLShadowElement.js",
-    "src/wrappers/HTMLTemplateElement.js",
-    "src/wrappers/HTMLUnknownElement.js",
-    "src/wrappers/CanvasRenderingContext2D.js",
-    "src/wrappers/WebGLRenderingContext.js",
-    "src/wrappers/generic.js",
-    "src/wrappers/ShadowRoot.js",
-    "src/ShadowRenderer.js",
-    "src/wrappers/elements-with-form-property.js",
-    "src/wrappers/Document.js",
-    "src/wrappers/Window.js",
-    "src/wrappers/MutationObserver.js",
-    "src/wrappers/Range.js",
-    "src/wrappers/override-constructors.js"
+  "../observe-js/src/observe.js",
+  "../WeakMap/weakmap.js",
+  "src/wrappers.js",
+  "src/wrappers/events.js",
+  "src/wrappers/NodeList.js",
+  "src/wrappers/Node.js",
+  "src/querySelector.js",
+  "src/wrappers/node-interfaces.js",
+  "src/wrappers/CharacterData.js",
+  "src/wrappers/Element.js",
+  "src/wrappers/HTMLElement.js",
+  "src/wrappers/HTMLCanvasElement.js",
+  "src/wrappers/HTMLContentElement.js",
+  "src/wrappers/HTMLImageElement.js",
+  "src/wrappers/HTMLShadowElement.js",
+  "src/wrappers/HTMLTemplateElement.js",
+  "src/wrappers/HTMLUnknownElement.js",
+  "src/wrappers/CanvasRenderingContext2D.js",
+  "src/wrappers/WebGLRenderingContext.js",
+  "src/wrappers/generic.js",
+  "src/wrappers/ShadowRoot.js",
+  "src/ShadowRenderer.js",
+  "src/wrappers/elements-with-form-property.js",
+  "src/wrappers/Document.js",
+  "src/wrappers/Window.js",
+  "src/wrappers/MutationObserver.js",
+  "src/wrappers/Range.js",
+  "src/wrappers/override-constructors.js"
 ]

shadowdom.js

@@ -28,6 +28,7 @@
     'src/wrappers/HTMLElement.js',
     'src/wrappers/HTMLCanvasElement.js',
     'src/wrappers/HTMLContentElement.js',
+    'src/wrappers/HTMLImageElement.js',
     'src/wrappers/HTMLShadowElement.js',
     'src/wrappers/HTMLTemplateElement.js',
     'src/wrappers/HTMLUnknownElement.js',

src/wrappers/HTMLCanvasElement.js

@@ -24,7 +24,8 @@
     }
   });
 
-  registerWrapper(OriginalHTMLCanvasElement, HTMLCanvasElement);
+  registerWrapper(OriginalHTMLCanvasElement, HTMLCanvasElement,
+                  document.createElement('canvas'));
 
   scope.wrappers.HTMLCanvasElement = HTMLCanvasElement;
 })(this.ShadowDOMPolyfill);

src/wrappers/HTMLImageElement.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 HTMLElement = scope.wrappers.HTMLElement;
+  var registerWrapper = scope.registerWrapper;
+  var unwrap = scope.unwrap;
+  var rewrap = scope.rewrap;
+
+  var OriginalHTMLImageElement = window.HTMLImageElement;
+
+  function HTMLImageElement(node) {
+    HTMLElement.call(this, node);
+  }
+  HTMLImageElement.prototype = Object.create(HTMLElement.prototype);
+
+  registerWrapper(OriginalHTMLImageElement, HTMLImageElement,
+                  document.createElement('img'));
+
+  function Image(width, height) {
+    if (!(this instanceof Image)) {
+      throw new TypeError(
+          'DOM object constructor cannot be called as a function.');
+    }
+
+    var node = unwrap(document.createElement('img'));
+    if (width !== undefined)
+      node.width = width;
+    if (height !== undefined)
+      node.height = height;
+    HTMLElement.call(this, node);
+    rewrap(node, this);
+  }
+
+  Image.prototype = HTMLImageElement.prototype;
+
+  scope.wrappers.HTMLImageElement = HTMLImageElement;
+  scope.wrappers.Image = Image;
+})(this.ShadowDOMPolyfill);

src/wrappers/override-constructors.js

@@ -18,10 +18,10 @@
     'base': 'HTMLBaseElement',
     'body': 'HTMLBodyElement',
     'button': 'HTMLButtonElement',
-    'canvas': 'HTMLCanvasElement',
     // 'command': 'HTMLCommandElement',  // Not fully implemented in Gecko.
     'dl': 'HTMLDListElement',
     'datalist': 'HTMLDataListElement',
+    'data': 'HTMLDataElement',
     'dir': 'HTMLDirectoryElement',
     'div': 'HTMLDivElement',
     'embed': 'HTMLEmbedElement',
@@ -35,17 +35,13 @@
     'h1': 'HTMLHeadingElement',
     'html': 'HTMLHtmlElement',
     'iframe': 'HTMLIFrameElement',
-
-    // Uses HTMLSpanElement in Firefox.
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=843881
-    // 'image',
-
     'input': 'HTMLInputElement',
     'li': 'HTMLLIElement',
     'label': 'HTMLLabelElement',
     'legend': 'HTMLLegendElement',
     'link': 'HTMLLinkElement',
     'map': 'HTMLMapElement',
+    'marquee': 'HTMLMarqueeElement',
     // 'media', Covered by audio and video
     'menu': 'HTMLMenuElement',
     'menuitem': 'HTMLMenuItemElement',
@@ -67,6 +63,7 @@
     'source': 'HTMLSourceElement',
     'span': 'HTMLSpanElement',
     'style': 'HTMLStyleElement',
+    'time': 'HTMLTimeElement',
     'caption': 'HTMLTableCaptionElement',
     // WebKit and Moz are wrong:
     // https://bugs.webkit.org/show_bug.cgi?id=111469
@@ -78,6 +75,7 @@
     'thead': 'HTMLTableSectionElement',
     'tbody': 'HTMLTableSectionElement',
     'textarea': 'HTMLTextAreaElement',
+    'track': 'HTMLTrackElement',
     'title': 'HTMLTitleElement',
     'ul': 'HTMLUListElement',
     'video': 'HTMLVideoElement',

test/js/HTMLCanvasElement.js

@@ -41,6 +41,20 @@ suite('HTMLCanvasElement', function() {
       assert.equal(context.canvas, canvas);
   });
 
+  test('2d drawImage using new Image', function(done) {
+    var canvas = document.createElement('canvas');
+    var context = canvas.getContext('2d');
+
+    // var img = new Image();
+    var img = document.createElement('img');
+    img.width = img.height = 32;
+    img.onload = function() {
+      context.drawImage(img, 0, 0);
+      done();
+    };
+    img.src = iconUrl;
+  });
+
   test('2d drawImage', function(done) {
     var canvas = document.createElement('canvas');
     var context = canvas.getContext('2d');
@@ -114,4 +128,14 @@ suite('HTMLCanvasElement', function() {
     img.src = iconUrl;
   });
 
+  test('width', function() {
+    var canvas = document.createElement('canvas');
+    assert.isNumber(canvas.width);
+  });
+
+  test('height', function() {
+    var canvas = document.createElement('canvas');
+    assert.isNumber(canvas.height);
+  });
+
 });

test/js/HTMLImageElement.js

@@ -0,0 +1,61 @@
+/*
+ * 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('HTMLImageElement', function() {
+
+  var iconUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2Nk+A+EFADGUQMYRsOAYTQMgHloGKQDAJXkH/HZpKBrAAAAAElFTkSuQmCC';
+
+  test('instanceof', function() {
+    var img = document.createElement('img');
+    assert.instanceOf(img, HTMLImageElement);
+    assert.instanceOf(img, Image);
+    assert.instanceOf(img, HTMLElement);
+  });
+
+  test('Image', function() {
+    var img = new Image();
+    assert.instanceOf(img, HTMLImageElement);
+    assert.instanceOf(img, Image);
+    assert.instanceOf(img, HTMLElement);
+  });
+
+  test('Image arguments', function() {
+    var img = new Image(32);
+    assert.equal(img.width, 32);
+    assert.equal(img.height, 0);
+
+    var img = new Image(undefined, 32);
+    assert.equal(img.width, 0);
+    assert.equal(img.height, 32);
+  });
+
+  test('Image called as function', function() {
+    assert.throws(Image, TypeError);
+  });
+
+  test('Image basics', function() {
+    var img = new Image();
+    assert.equal('img', img.localName);
+
+    var div = document.createElement('div');
+    div.appendChild(img);
+
+    assert.equal(div.firstChild, img);
+    assert.equal('<div><img></div>', div.outerHTML);
+
+    assert.equal(img.width, 0);
+    assert.equal(img.height, 0);
+  });
+
+  test('Image load', function(done) {
+    var img = new Image();
+    img.addEventListener('load', function() {
+      done();
+    });
+    img.src = iconUrl;
+  });
+
+});

test/test.main.js

@@ -62,6 +62,7 @@ var modules = [
   'HTMLFieldSetElement.js',
   'HTMLHeadElement.js',
   'HTMLHtmlElement.js',
+  'HTMLImageElement.js',
   'HTMLInputElement.js',
   'HTMLKeygenElement.js',
   'HTMLLabelElement.js',