From 307d105d2c7b705546100c84706ab6d62b00fbc7 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Thu, 26 May 2016 16:17:35 -0700 Subject: [PATCH] fix(DomRegistry): fix svg support --- .../src/schema/dom_element_schema_registry.ts | 159 +++++++++--------- .../dom_element_schema_registry_spec.ts | 10 +- .../compiler/test/schema/schema_extractor.ts | 2 +- 3 files changed, 89 insertions(+), 82 deletions(-) diff --git a/modules/@angular/compiler/src/schema/dom_element_schema_registry.ts b/modules/@angular/compiler/src/schema/dom_element_schema_registry.ts index 1588f273ee..9dec97c367 100644 --- a/modules/@angular/compiler/src/schema/dom_element_schema_registry.ts +++ b/modules/@angular/compiler/src/schema/dom_element_schema_registry.ts @@ -29,7 +29,7 @@ const OBJECT = 'object'; * * NOTE: The blank element inherits from root `*` element, the super element of all elements. * - * NOTE an element prefix such as `@svg:` has no special meaning to the schema. + * NOTE an element prefix such as `:svg:` has no special meaning to the schema. * * ## Properties * @@ -48,23 +48,24 @@ const OBJECT = 'object'; * if a given property exist on a given element. * * NOTE: We don't yet support querying for types or events. - * NOTE: This schema is auto extracted from `schema_extractor.ts` located in the test folder. + * NOTE: This schema is auto extracted from `schema_extractor.ts` located in the test folder, + * see dom_element_schema_registry_spec.ts */ const SCHEMA: string[] = /*@ts2dart_const*/ ([ '*|%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop', '^*|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*autocomplete,*autocompleteerror,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate', 'media|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,#volume', - '@svg:^*|*abort,*autocomplete,*autocompleteerror,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex', - '@svg:graphics^@svg:|', - '@svg:animation^@svg:|*begin,*end,*repeat', - '@svg:geometry^@svg:|', - '@svg:componentTransferFunction^@svg:|', - '@svg:gradient^@svg:|', - '@svg:textContent^@svg:graphics|', - '@svg:textPositioning^@svg:textContent|', - 'a|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,rel,rev,search,shape,target,text,type,username', - 'area|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,search,shape,target,username', + ':svg:^*|*abort,*autocomplete,*autocompleteerror,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex', + ':svg:graphics^:svg:|', + ':svg:animation^:svg:|*begin,*end,*repeat', + ':svg:geometry^:svg:|', + ':svg:componentTransferFunction^:svg:|', + ':svg:gradient^:svg:|', + ':svg:textContent^:svg:graphics|', + ':svg:textPositioning^:svg:textContent|', + 'a|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerpolicy,rel,rev,search,shape,target,text,type,username', + 'area|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerpolicy,search,shape,target,username', 'audio^media|', 'br|clear', 'base|href,target', @@ -88,8 +89,8 @@ const SCHEMA: string[] = 'head|', 'h1,h2,h3,h4,h5,h6|align', 'html|version', - 'iframe|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,%sandbox,scrolling,src,srcdoc,width', - 'img|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,sizes,src,srcset,useMap,#vspace,#width', + 'iframe|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerpolicy,%sandbox,scrolling,src,srcdoc,width', + 'img|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerpolicy,sizes,src,srcset,useMap,#vspace,#width', 'input|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width', 'keygen|!autofocus,challenge,!disabled,keytype,name', 'li|type,#value', @@ -132,71 +133,71 @@ const SCHEMA: string[] = 'ul|!compact,type', 'unknown|', 'video^media|#height,poster,#width', - '@svg:a^@svg:graphics|', - '@svg:animate^@svg:animation|', - '@svg:animateMotion^@svg:animation|', - '@svg:animateTransform^@svg:animation|', - '@svg:circle^@svg:geometry|', - '@svg:clipPath^@svg:graphics|', - '@svg:cursor^@svg:|', - '@svg:defs^@svg:graphics|', - '@svg:desc^@svg:|', - '@svg:discard^@svg:|', - '@svg:ellipse^@svg:geometry|', - '@svg:feBlend^@svg:|', - '@svg:feColorMatrix^@svg:|', - '@svg:feComponentTransfer^@svg:|', - '@svg:feComposite^@svg:|', - '@svg:feConvolveMatrix^@svg:|', - '@svg:feDiffuseLighting^@svg:|', - '@svg:feDisplacementMap^@svg:|', - '@svg:feDistantLight^@svg:|', - '@svg:feDropShadow^@svg:|', - '@svg:feFlood^@svg:|', - '@svg:feFuncA^@svg:componentTransferFunction|', - '@svg:feFuncB^@svg:componentTransferFunction|', - '@svg:feFuncG^@svg:componentTransferFunction|', - '@svg:feFuncR^@svg:componentTransferFunction|', - '@svg:feGaussianBlur^@svg:|', - '@svg:feImage^@svg:|', - '@svg:feMerge^@svg:|', - '@svg:feMergeNode^@svg:|', - '@svg:feMorphology^@svg:|', - '@svg:feOffset^@svg:|', - '@svg:fePointLight^@svg:|', - '@svg:feSpecularLighting^@svg:|', - '@svg:feSpotLight^@svg:|', - '@svg:feTile^@svg:|', - '@svg:feTurbulence^@svg:|', - '@svg:filter^@svg:|', - '@svg:foreignObject^@svg:graphics|', - '@svg:g^@svg:graphics|', - '@svg:image^@svg:graphics|', - '@svg:line^@svg:geometry|', - '@svg:linearGradient^@svg:gradient|', - '@svg:mpath^@svg:|', - '@svg:marker^@svg:|', - '@svg:mask^@svg:|', - '@svg:metadata^@svg:|', - '@svg:path^@svg:geometry|', - '@svg:pattern^@svg:|', - '@svg:polygon^@svg:geometry|', - '@svg:polyline^@svg:geometry|', - '@svg:radialGradient^@svg:gradient|', - '@svg:rect^@svg:geometry|', - '@svg:svg^@svg:graphics|#currentScale,#zoomAndPan', - '@svg:script^@svg:|type', - '@svg:set^@svg:animation|', - '@svg:stop^@svg:|', - '@svg:style^@svg:|!disabled,media,title,type', - '@svg:switch^@svg:graphics|', - '@svg:symbol^@svg:|', - '@svg:tspan^@svg:textPositioning|', - '@svg:text^@svg:textPositioning|', - '@svg:textPath^@svg:textContent|', - '@svg:title^@svg:|', - '@svg:use^@svg:graphics|', - '@svg:view^@svg:|#zoomAndPan' + ':svg:a^:svg:graphics|', + ':svg:animate^:svg:animation|', + ':svg:animateMotion^:svg:animation|', + ':svg:animateTransform^:svg:animation|', + ':svg:circle^:svg:geometry|', + ':svg:clipPath^:svg:graphics|', + ':svg:cursor^:svg:|', + ':svg:defs^:svg:graphics|', + ':svg:desc^:svg:|', + ':svg:discard^:svg:|', + ':svg:ellipse^:svg:geometry|', + ':svg:feBlend^:svg:|', + ':svg:feColorMatrix^:svg:|', + ':svg:feComponentTransfer^:svg:|', + ':svg:feComposite^:svg:|', + ':svg:feConvolveMatrix^:svg:|', + ':svg:feDiffuseLighting^:svg:|', + ':svg:feDisplacementMap^:svg:|', + ':svg:feDistantLight^:svg:|', + ':svg:feDropShadow^:svg:|', + ':svg:feFlood^:svg:|', + ':svg:feFuncA^:svg:componentTransferFunction|', + ':svg:feFuncB^:svg:componentTransferFunction|', + ':svg:feFuncG^:svg:componentTransferFunction|', + ':svg:feFuncR^:svg:componentTransferFunction|', + ':svg:feGaussianBlur^:svg:|', + ':svg:feImage^:svg:|', + ':svg:feMerge^:svg:|', + ':svg:feMergeNode^:svg:|', + ':svg:feMorphology^:svg:|', + ':svg:feOffset^:svg:|', + ':svg:fePointLight^:svg:|', + ':svg:feSpecularLighting^:svg:|', + ':svg:feSpotLight^:svg:|', + ':svg:feTile^:svg:|', + ':svg:feTurbulence^:svg:|', + ':svg:filter^:svg:|', + ':svg:foreignObject^:svg:graphics|', + ':svg:g^:svg:graphics|', + ':svg:image^:svg:graphics|', + ':svg:line^:svg:geometry|', + ':svg:linearGradient^:svg:gradient|', + ':svg:mpath^:svg:|', + ':svg:marker^:svg:|', + ':svg:mask^:svg:|', + ':svg:metadata^:svg:|', + ':svg:path^:svg:geometry|', + ':svg:pattern^:svg:|', + ':svg:polygon^:svg:geometry|', + ':svg:polyline^:svg:geometry|', + ':svg:radialGradient^:svg:gradient|', + ':svg:rect^:svg:geometry|', + ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan', + ':svg:script^:svg:|type', + ':svg:set^:svg:animation|', + ':svg:stop^:svg:|', + ':svg:style^:svg:|!disabled,media,title,type', + ':svg:switch^:svg:graphics|', + ':svg:symbol^:svg:|', + ':svg:tspan^:svg:textPositioning|', + ':svg:text^:svg:textPositioning|', + ':svg:textPath^:svg:textContent|', + ':svg:title^:svg:|', + ':svg:use^:svg:graphics|', + ':svg:view^:svg:|#zoomAndPan' ]); var attrToPropMap: {[name: string]: string} = { diff --git a/modules/@angular/compiler/test/schema/dom_element_schema_registry_spec.ts b/modules/@angular/compiler/test/schema/dom_element_schema_registry_spec.ts index 436b480d59..e48e4e8c4a 100644 --- a/modules/@angular/compiler/test/schema/dom_element_schema_registry_spec.ts +++ b/modules/@angular/compiler/test/schema/dom_element_schema_registry_spec.ts @@ -10,6 +10,9 @@ import { xit } from '@angular/core/testing/testing_internal'; +import {HtmlParser} from '@angular/compiler/src/html_parser'; +import {HtmlElementAst} from '@angular/compiler/src/html_ast'; + import {browserDetection} from '@angular/platform-browser/testing'; import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry'; @@ -68,8 +71,11 @@ export function main() { expect(registry.securityContext('base', 'href')).toBe(SecurityContext.RESOURCE_URL); }); - it('should detect properties on namespaced elements', - () => { expect(registry.hasProperty('@svg:g', 'id')).toBeTruthy(); }); + it('should detect properties on namespaced elements', () => { + let htmlAst = new HtmlParser().parse('', 'TestComp'); + let nodeName = (htmlAst.rootNodes[0]).name; + expect(registry.hasProperty(nodeName, 'type')).toBeTruthy(); + }); if (browserDetection.isChromeDesktop) { it('generate a new schema', () => { diff --git a/modules/@angular/compiler/test/schema/schema_extractor.ts b/modules/@angular/compiler/test/schema/schema_extractor.ts index 1f20be9b28..f2314a1804 100644 --- a/modules/@angular/compiler/test/schema/schema_extractor.ts +++ b/modules/@angular/compiler/test/schema/schema_extractor.ts @@ -1,6 +1,6 @@ import {isString, isPresent} from '../../src/facade/lang'; -const SVG_PREFIX = '@svg:'; +const SVG_PREFIX = ':svg:'; var document = typeof global['document'] == 'object' ? global['document'] : null;