Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(compiler): incorrectly inferring namespace for HTML nodes inside SVG #38477

Closed

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Aug 15, 2020

The HTML parser gets an element's namespace either from the tag name (e.g. <svg:rect>) or from its parent element <svg><rect></svg>) which breaks down when an element is inside of an SVG foreignElement, because foreign elements allow nodes from a different namespace to be inserted into an SVG.

These changes add another flag to the tag definitions which tells child nodes whether to try to inherit their namespaces from their parents. It also adds a definition for foreignObject with the new flag, allowing elements placed inside it to infer their namespaces instead.

Fixes #37218.

@crisbeto crisbeto marked this pull request as ready for review August 15, 2020 09:10
@pullapprove pullapprove bot requested a review from alxhub August 15, 2020 09:10
@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer target: patch This PR is targeted for the next patch release type: bug/fix area: compiler Issues related to `ngc`, Angular's template compiler labels Aug 15, 2020
@ngbot ngbot bot added this to the needsTriage milestone Aug 20, 2020
packages/compiler/src/ml_parser/tags.ts Outdated Show resolved Hide resolved
@crisbeto crisbeto force-pushed the 37218/foreign-element-namespace branch 2 times, most recently from da711af to 80eb167 Compare August 23, 2020 08:21
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix @crisbeto, I just came across this PR and left a couple comments.

packages/compiler/src/ml_parser/html_tags.ts Outdated Show resolved Hide resolved
packages/compiler/src/ml_parser/html_tags.ts Outdated Show resolved Hide resolved
@crisbeto crisbeto force-pushed the 37218/foreign-element-namespace branch from 80eb167 to 00489d2 Compare August 25, 2020 10:17
packages/compiler/src/ml_parser/html_tags.ts Outdated Show resolved Hide resolved
packages/compiler/src/ml_parser/html_tags.ts Outdated Show resolved Hide resolved
@alxhub
Copy link
Member

alxhub commented Aug 25, 2020

Presubmit

The HTML parser gets an element's namespace either from the tag name
(e.g. `<svg:rect>`) or from its parent element `<svg><rect></svg>`) which
breaks down when an element is inside of an SVG `foreignElement`,
because foreign elements allow nodes from a different namespace to be
inserted into an SVG.

These changes add another flag to the tag definitions which tells child
nodes whether to try to inherit their namespaces from their parents.
It also adds a definition for `foreignObject` with the new flag,
allowing elements placed inside it to infer their namespaces instead.

Fixes angular#37218.
@crisbeto crisbeto force-pushed the 37218/foreign-element-namespace branch from 00489d2 to 879be69 Compare August 26, 2020 14:22
@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker action: presubmit The PR is in need of a google3 presubmit and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Aug 26, 2020
josephperrott pushed a commit that referenced this pull request Aug 31, 2020
…SVG (#38477)

The HTML parser gets an element's namespace either from the tag name
(e.g. `<svg:rect>`) or from its parent element `<svg><rect></svg>`) which
breaks down when an element is inside of an SVG `foreignElement`,
because foreign elements allow nodes from a different namespace to be
inserted into an SVG.

These changes add another flag to the tag definitions which tells child
nodes whether to try to inherit their namespaces from their parents.
It also adds a definition for `foreignObject` with the new flag,
allowing elements placed inside it to infer their namespaces instead.

Fixes #37218.

PR Close #38477
josephperrott pushed a commit that referenced this pull request Aug 31, 2020
…SVG (#38477)

The HTML parser gets an element's namespace either from the tag name
(e.g. `<svg:rect>`) or from its parent element `<svg><rect></svg>`) which
breaks down when an element is inside of an SVG `foreignElement`,
because foreign elements allow nodes from a different namespace to be
inserted into an SVG.

These changes add another flag to the tag definitions which tells child
nodes whether to try to inherit their namespaces from their parents.
It also adds a definition for `foreignObject` with the new flag,
allowing elements placed inside it to infer their namespaces instead.

Fixes #37218.

PR Close #38477
profanis pushed a commit to profanis/angular that referenced this pull request Sep 5, 2020
…SVG (angular#38477)

The HTML parser gets an element's namespace either from the tag name
(e.g. `<svg:rect>`) or from its parent element `<svg><rect></svg>`) which
breaks down when an element is inside of an SVG `foreignElement`,
because foreign elements allow nodes from a different namespace to be
inserted into an SVG.

These changes add another flag to the tag definitions which tells child
nodes whether to try to inherit their namespaces from their parents.
It also adds a definition for `foreignObject` with the new flag,
allowing elements placed inside it to infer their namespaces instead.

Fixes angular#37218.

PR Close angular#38477
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 1, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker action: presubmit The PR is in need of a google3 presubmit area: compiler Issues related to `ngc`, Angular's template compiler cla: yes target: patch This PR is targeted for the next patch release type: bug/fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

HTML element inside svg:foreignObject throw error
4 participants