This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
fix(md-svg-icon): id mangling on cache destroys xhref references #11315
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
googlebot
added
the
cla: yes
Splaktar
added
type: bug
P4: minor
Splaktar
suggested changes
Jun 19, 2018
src/components/icon/icon.spec.js
Outdated
| @@ -587,6 +588,21 @@ describe('MdIcon service', function() { | |||
|
|
|||
| $scope.$digest(); | |||
| }); | |||
|
|
|||
| it('should suffix duplicated ids and refs', function() { | |||
| // Just request the icon to be stored in the cache. | |||
There was a problem hiding this comment.
Can you please update this code to use 2 space indentation (like the rest of the file) instead of 4 spaces?
| // This is needed because SVG id's are treated as normal DOM ids | ||
| // and should not have a duplicated id. | ||
| if (clone.id) clone.id += cacheSuffix; | ||
| angular.forEach(clone.querySelectorAll('[id]'), function(item) { | ||
| item.id += cacheSuffix; | ||
| angular.forEach(clone.querySelectorAll('[a="url(#'+ item.id +')"], [altGlyph="url(#'+ item.id +')"], [animate="url(#'+ item.id +')"], [animateColor="url(#'+ item.id +')"], [animateMotion="url(#'+ item.id +')"], [animateTransform="url(#'+ item.id +')"], [clip-path="url(#'+ item.id +')"], [color-profile="url(#'+ item.id +')"], [src="url(#'+ item.id +')"], [cursor="url(#'+ item.id +')"], [feImage="url(#'+ item.id +')"], [fill="url(#'+ item.id +')"], [filter="url(#'+ item.id +')"], [image="url(#'+ item.id +')"], [linearGradient="url(#'+ item.id +')"], [marker="url(#'+ item.id +')"], [marker-smart="url(#'+ item.id +')"], [marker-mid="url(#'+ item.id +')"], [marker-end="url(#'+ item.id +')"], [mask="url(#'+ item.id +')"], [pattern="url(#'+ item.id +')"], [radialGradient="url(#'+ item.id +')"], [script="url(#'+ item.id +')"], [stroke="url(#'+ item.id +')"], [textPath="url(#'+ item.id +')"], [tref="url(#'+ item.id +')"], [set="url(#'+ item.id +')"], [use="url(#'+ item.id +')"]'), function(refItem) { |
There was a problem hiding this comment.
Please use 2 space indentation here as well.
Splaktar
added
in progress
…ular#8689) update all kind of reference in svg when clone ids for caching Fixes angular#8689
Splaktar
added
pr: merge ready
Splaktar
changed the title
Splaktar
added
in progress
Splaktar
suggested changes
Jun 26, 2018
There was a problem hiding this comment.
After looking at this again and talking to @jelbourn, we want to make some changes. I've mentioned a few of this in this review.
I'm currently investigating and working on a fix for this. I will let you know the result later today.
| @@ -419,6 +419,7 @@ describe('MdIcon service', function() { | |||
| $scope = $rootScope; | |||
|
|
|||
| $templateCache.put('android.svg' , '<svg><g id="android"></g></svg>'); | |||
| $templateCache.put('angular-logo.svg','<svg><g id="angular"></g><defs><filter id="shadow"></filter></defs><path filter="url(#shadow)"></path></svg>'); | |||
There was a problem hiding this comment.
We need to test a more complex SVG here. Ideally with a couple of different ids.
| // This is needed because SVG id's are treated as normal DOM ids | ||
| // and should not have a duplicated id. | ||
| if (clone.id) clone.id += cacheSuffix; | ||
| angular.forEach(clone.querySelectorAll('[id]'), function(item) { | ||
| angular.forEach(clone.querySelectorAll('[a="url(#'+ item.id +')"], [altGlyph="url(#'+ item.id +')"], [animate="url(#'+ item.id +')"], [animateColor="url(#'+ item.id +')"], [animateMotion="url(#'+ item.id +')"], [animateTransform="url(#'+ item.id +')"], [clip-path="url(#'+ item.id +')"], [color-profile="url(#'+ item.id +')"], [src="url(#'+ item.id +')"], [cursor="url(#'+ item.id +')"], [feImage="url(#'+ item.id +')"], [fill="url(#'+ item.id +')"], [filter="url(#'+ item.id +')"], [image="url(#'+ item.id +')"], [linearGradient="url(#'+ item.id +')"], [marker="url(#'+ item.id +')"], [marker-smart="url(#'+ item.id +')"], [marker-mid="url(#'+ item.id +')"], [marker-end="url(#'+ item.id +')"], [mask="url(#'+ item.id +')"], [pattern="url(#'+ item.id +')"], [radialGradient="url(#'+ item.id +')"], [script="url(#'+ item.id +')"], [stroke="url(#'+ item.id +')"], [textPath="url(#'+ item.id +')"], [tref="url(#'+ item.id +')"], [set="url(#'+ item.id +')"], [use="url(#'+ item.id +')"]'), function(refItem) { |
There was a problem hiding this comment.
We should use RegEx here instead of this large set of strings.
This also doesn't handle the xlink:href case from #8689.
Splaktar
reviewed
Jun 26, 2018
| $mdIcon('angular-logo.svg').then(function(el) { | ||
| expect(el.querySelector('defs').firstChild.id).toMatch(/.+_cache[0-9]+/g); | ||
| expect(el.querySelector('path').attributes.filter.value.split(/url\(#(.*)\)$/g)[1]).toMatch(/.+_cache[0-9]+/g); | ||
| expect(el.querySelector('defs').firstChild.id === el.querySelector('path').attributes.filter.value.split(/url\(#(.*)\)$/g)[1]); |
There was a problem hiding this comment.
This isn't a valid assertion. It needs to use .toEqual().
Splaktar
removed
the
in progress
3 tasks
|
@ystreibel I posted #11342 as a continuation of this as I wasn't able to update your branch. Thank you very much for getting started on this! Can you please post in the new PR that to confirm that it is OK to use your commit in that PR? I've addressed the review feedback in the new PR. |
mmalerba
pushed a commit
that referenced
this pull request
Oct 23, 2018
<!-- Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed. --> ## PR Checklist Please check that your PR fulfills the following requirements: - [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format) - [x] Tests for the changes have been added or this is not a bug fix / enhancement - [x] Docs have been added, updated, or were not required ## PR Type What kind of change does this PR introduce? <!-- Please check the one that applies to this PR using "x". --> ``` [x] Bugfix [ ] Enhancement [x] Documentation content changes [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Infrastructure changes [ ] Other... Please describe: ``` ## What is the current behavior? SVGs with embedded `id`s can be broken when they are read out of the icon cache. <!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. --> Issue Number: Fixes #8689 ## What is the new behavior? SVGs with embedded `id`s can be read out of the icon cache without breaking because the `id` references are now updated in addition to the `id`s themselves. ## Does this PR introduce a breaking change? ``` [ ] Yes [x] No ``` <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. --> <!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. --> ## Other information Thanks to @ystreibel for starting this work in #11315!
6 tasks
marosoft
pushed a commit
to marosoft/material
that referenced
this pull request
Nov 11, 2018
…#11342) <!-- Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed. --> ## PR Checklist Please check that your PR fulfills the following requirements: - [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format) - [x] Tests for the changes have been added or this is not a bug fix / enhancement - [x] Docs have been added, updated, or were not required ## PR Type What kind of change does this PR introduce? <!-- Please check the one that applies to this PR using "x". --> ``` [x] Bugfix [ ] Enhancement [x] Documentation content changes [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Infrastructure changes [ ] Other... Please describe: ``` ## What is the current behavior? SVGs with embedded `id`s can be broken when they are read out of the icon cache. <!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. --> Issue Number: Fixes angular#8689 ## What is the new behavior? SVGs with embedded `id`s can be read out of the icon cache without breaking because the `id` references are now updated in addition to the `id`s themselves. ## Does this PR introduce a breaking change? ``` [ ] Yes [x] No ``` <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. --> <!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. --> ## Other information Thanks to @ystreibel for starting this work in angular#11315!
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
update all kind of reference in svg when clone ids for caching
Fixes #8689
PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #8689
What is the new behavior?
Updates references in svg tree attributes when corresponding to the caching ids.
Does this PR introduce a breaking change?
Other information