From 55db84f3a7b48aceb0c39ac4e199692cefd6de9a Mon Sep 17 00:00:00 2001 From: Erik Arvidsson Date: Wed, 23 Oct 2013 14:38:59 -0400 Subject: [PATCH] Add support for new Image --- build.json | 55 ++++++++++++------------ shadowdom.js | 1 + src/wrappers/HTMLCanvasElement.js | 3 +- src/wrappers/HTMLImageElement.js | 42 ++++++++++++++++++ src/wrappers/override-constructors.js | 10 ++--- test/js/HTMLCanvasElement.js | 24 +++++++++++ test/js/HTMLImageElement.js | 61 +++++++++++++++++++++++++++ test/test.main.js | 1 + 8 files changed, 163 insertions(+), 34 deletions(-) create mode 100644 src/wrappers/HTMLImageElement.js create mode 100644 test/js/HTMLImageElement.js diff --git a/build.json b/build.json index 80217c7..dd98232 100644 --- a/build.json +++ b/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" ] diff --git a/shadowdom.js b/shadowdom.js index e6a4858..3d5785e 100644 --- a/shadowdom.js +++ b/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', diff --git a/src/wrappers/HTMLCanvasElement.js b/src/wrappers/HTMLCanvasElement.js index 8a05495..ca90a4b 100644 --- a/src/wrappers/HTMLCanvasElement.js +++ b/src/wrappers/HTMLCanvasElement.js @@ -24,7 +24,8 @@ } }); - registerWrapper(OriginalHTMLCanvasElement, HTMLCanvasElement); + registerWrapper(OriginalHTMLCanvasElement, HTMLCanvasElement, + document.createElement('canvas')); scope.wrappers.HTMLCanvasElement = HTMLCanvasElement; })(this.ShadowDOMPolyfill); diff --git a/src/wrappers/HTMLImageElement.js b/src/wrappers/HTMLImageElement.js new file mode 100644 index 0000000..8168413 --- /dev/null +++ b/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); diff --git a/src/wrappers/override-constructors.js b/src/wrappers/override-constructors.js index d20aca8..2b0af6d 100644 --- a/src/wrappers/override-constructors.js +++ b/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', diff --git a/test/js/HTMLCanvasElement.js b/test/js/HTMLCanvasElement.js index ab13e51..89f82c3 100644 --- a/test/js/HTMLCanvasElement.js +++ b/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); + }); + }); diff --git a/test/js/HTMLImageElement.js b/test/js/HTMLImageElement.js new file mode 100644 index 0000000..624691c --- /dev/null +++ b/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.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; + }); + +}); diff --git a/test/test.main.js b/test/test.main.js index 8f2f8fe..86b653f 100644 --- a/test/test.main.js +++ b/test/test.main.js @@ -62,6 +62,7 @@ var modules = [ 'HTMLFieldSetElement.js', 'HTMLHeadElement.js', 'HTMLHtmlElement.js', + 'HTMLImageElement.js', 'HTMLInputElement.js', 'HTMLKeygenElement.js', 'HTMLLabelElement.js',