fix(DomRegistry): fix svg support

This commit is contained in:
Victor Berchet 2016-05-26 16:17:35 -07:00
parent 0b6967fd74
commit 307d105d2c
3 changed files with 89 additions and 82 deletions

View File

@ -29,7 +29,7 @@ const OBJECT = 'object';
* *
* NOTE: The blank element inherits from root `*` element, the super element of all elements. * 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 * ## Properties
* *
@ -48,23 +48,24 @@ const OBJECT = 'object';
* if a given property exist on a given element. * if a given property exist on a given element.
* *
* NOTE: We don't yet support querying for types or events. * 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[] = const SCHEMA: string[] =
/*@ts2dart_const*/ ([ /*@ts2dart_const*/ ([
'*|%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop', '*|%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', '^*|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', '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:^*|*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:graphics^:svg:|',
'@svg:animation^@svg:|*begin,*end,*repeat', ':svg:animation^:svg:|*begin,*end,*repeat',
'@svg:geometry^@svg:|', ':svg:geometry^:svg:|',
'@svg:componentTransferFunction^@svg:|', ':svg:componentTransferFunction^:svg:|',
'@svg:gradient^@svg:|', ':svg:gradient^:svg:|',
'@svg:textContent^@svg:graphics|', ':svg:textContent^:svg:graphics|',
'@svg:textPositioning^@svg:textContent|', ':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', '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,search,shape,target,username', 'area|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerpolicy,search,shape,target,username',
'audio^media|', 'audio^media|',
'br|clear', 'br|clear',
'base|href,target', 'base|href,target',
@ -88,8 +89,8 @@ const SCHEMA: string[] =
'head|', 'head|',
'h1,h2,h3,h4,h5,h6|align', 'h1,h2,h3,h4,h5,h6|align',
'html|version', 'html|version',
'iframe|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,%sandbox,scrolling,src,srcdoc,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,sizes,src,srcset,useMap,#vspace,#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', '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', 'keygen|!autofocus,challenge,!disabled,keytype,name',
'li|type,#value', 'li|type,#value',
@ -132,71 +133,71 @@ const SCHEMA: string[] =
'ul|!compact,type', 'ul|!compact,type',
'unknown|', 'unknown|',
'video^media|#height,poster,#width', 'video^media|#height,poster,#width',
'@svg:a^@svg:graphics|', ':svg:a^:svg:graphics|',
'@svg:animate^@svg:animation|', ':svg:animate^:svg:animation|',
'@svg:animateMotion^@svg:animation|', ':svg:animateMotion^:svg:animation|',
'@svg:animateTransform^@svg:animation|', ':svg:animateTransform^:svg:animation|',
'@svg:circle^@svg:geometry|', ':svg:circle^:svg:geometry|',
'@svg:clipPath^@svg:graphics|', ':svg:clipPath^:svg:graphics|',
'@svg:cursor^@svg:|', ':svg:cursor^:svg:|',
'@svg:defs^@svg:graphics|', ':svg:defs^:svg:graphics|',
'@svg:desc^@svg:|', ':svg:desc^:svg:|',
'@svg:discard^@svg:|', ':svg:discard^:svg:|',
'@svg:ellipse^@svg:geometry|', ':svg:ellipse^:svg:geometry|',
'@svg:feBlend^@svg:|', ':svg:feBlend^:svg:|',
'@svg:feColorMatrix^@svg:|', ':svg:feColorMatrix^:svg:|',
'@svg:feComponentTransfer^@svg:|', ':svg:feComponentTransfer^:svg:|',
'@svg:feComposite^@svg:|', ':svg:feComposite^:svg:|',
'@svg:feConvolveMatrix^@svg:|', ':svg:feConvolveMatrix^:svg:|',
'@svg:feDiffuseLighting^@svg:|', ':svg:feDiffuseLighting^:svg:|',
'@svg:feDisplacementMap^@svg:|', ':svg:feDisplacementMap^:svg:|',
'@svg:feDistantLight^@svg:|', ':svg:feDistantLight^:svg:|',
'@svg:feDropShadow^@svg:|', ':svg:feDropShadow^:svg:|',
'@svg:feFlood^@svg:|', ':svg:feFlood^:svg:|',
'@svg:feFuncA^@svg:componentTransferFunction|', ':svg:feFuncA^:svg:componentTransferFunction|',
'@svg:feFuncB^@svg:componentTransferFunction|', ':svg:feFuncB^:svg:componentTransferFunction|',
'@svg:feFuncG^@svg:componentTransferFunction|', ':svg:feFuncG^:svg:componentTransferFunction|',
'@svg:feFuncR^@svg:componentTransferFunction|', ':svg:feFuncR^:svg:componentTransferFunction|',
'@svg:feGaussianBlur^@svg:|', ':svg:feGaussianBlur^:svg:|',
'@svg:feImage^@svg:|', ':svg:feImage^:svg:|',
'@svg:feMerge^@svg:|', ':svg:feMerge^:svg:|',
'@svg:feMergeNode^@svg:|', ':svg:feMergeNode^:svg:|',
'@svg:feMorphology^@svg:|', ':svg:feMorphology^:svg:|',
'@svg:feOffset^@svg:|', ':svg:feOffset^:svg:|',
'@svg:fePointLight^@svg:|', ':svg:fePointLight^:svg:|',
'@svg:feSpecularLighting^@svg:|', ':svg:feSpecularLighting^:svg:|',
'@svg:feSpotLight^@svg:|', ':svg:feSpotLight^:svg:|',
'@svg:feTile^@svg:|', ':svg:feTile^:svg:|',
'@svg:feTurbulence^@svg:|', ':svg:feTurbulence^:svg:|',
'@svg:filter^@svg:|', ':svg:filter^:svg:|',
'@svg:foreignObject^@svg:graphics|', ':svg:foreignObject^:svg:graphics|',
'@svg:g^@svg:graphics|', ':svg:g^:svg:graphics|',
'@svg:image^@svg:graphics|', ':svg:image^:svg:graphics|',
'@svg:line^@svg:geometry|', ':svg:line^:svg:geometry|',
'@svg:linearGradient^@svg:gradient|', ':svg:linearGradient^:svg:gradient|',
'@svg:mpath^@svg:|', ':svg:mpath^:svg:|',
'@svg:marker^@svg:|', ':svg:marker^:svg:|',
'@svg:mask^@svg:|', ':svg:mask^:svg:|',
'@svg:metadata^@svg:|', ':svg:metadata^:svg:|',
'@svg:path^@svg:geometry|', ':svg:path^:svg:geometry|',
'@svg:pattern^@svg:|', ':svg:pattern^:svg:|',
'@svg:polygon^@svg:geometry|', ':svg:polygon^:svg:geometry|',
'@svg:polyline^@svg:geometry|', ':svg:polyline^:svg:geometry|',
'@svg:radialGradient^@svg:gradient|', ':svg:radialGradient^:svg:gradient|',
'@svg:rect^@svg:geometry|', ':svg:rect^:svg:geometry|',
'@svg:svg^@svg:graphics|#currentScale,#zoomAndPan', ':svg:svg^:svg:graphics|#currentScale,#zoomAndPan',
'@svg:script^@svg:|type', ':svg:script^:svg:|type',
'@svg:set^@svg:animation|', ':svg:set^:svg:animation|',
'@svg:stop^@svg:|', ':svg:stop^:svg:|',
'@svg:style^@svg:|!disabled,media,title,type', ':svg:style^:svg:|!disabled,media,title,type',
'@svg:switch^@svg:graphics|', ':svg:switch^:svg:graphics|',
'@svg:symbol^@svg:|', ':svg:symbol^:svg:|',
'@svg:tspan^@svg:textPositioning|', ':svg:tspan^:svg:textPositioning|',
'@svg:text^@svg:textPositioning|', ':svg:text^:svg:textPositioning|',
'@svg:textPath^@svg:textContent|', ':svg:textPath^:svg:textContent|',
'@svg:title^@svg:|', ':svg:title^:svg:|',
'@svg:use^@svg:graphics|', ':svg:use^:svg:graphics|',
'@svg:view^@svg:|#zoomAndPan' ':svg:view^:svg:|#zoomAndPan'
]); ]);
var attrToPropMap: {[name: string]: string} = <any>{ var attrToPropMap: {[name: string]: string} = <any>{

View File

@ -10,6 +10,9 @@ import {
xit xit
} from '@angular/core/testing/testing_internal'; } 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 {browserDetection} from '@angular/platform-browser/testing';
import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry'; 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); expect(registry.securityContext('base', 'href')).toBe(SecurityContext.RESOURCE_URL);
}); });
it('should detect properties on namespaced elements', it('should detect properties on namespaced elements', () => {
() => { expect(registry.hasProperty('@svg:g', 'id')).toBeTruthy(); }); let htmlAst = new HtmlParser().parse('<svg:style>', 'TestComp');
let nodeName = (<HtmlElementAst>htmlAst.rootNodes[0]).name;
expect(registry.hasProperty(nodeName, 'type')).toBeTruthy();
});
if (browserDetection.isChromeDesktop) { if (browserDetection.isChromeDesktop) {
it('generate a new schema', () => { it('generate a new schema', () => {

View File

@ -1,6 +1,6 @@
import {isString, isPresent} from '../../src/facade/lang'; import {isString, isPresent} from '../../src/facade/lang';
const SVG_PREFIX = '@svg:'; const SVG_PREFIX = ':svg:';
var document = typeof global['document'] == 'object' ? global['document'] : null; var document = typeof global['document'] == 'object' ? global['document'] : null;