Angular cloak selector seems to be flagged as invalid

[jrgleason]

I am not sure if this is an issue with ng not conforming to a standard, however, in my project I see...

DOMException: Failed to execute 'querySelector' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)' is not a valid selector.(…)

I think this is becoming invalid thank to the : but I am not sure.

[jrgleason]

Looks to be related to https://github.com/exupero/saveSvgAsPng/issues/11

Not sure why I am seeing it I am on master

[jrgleason]

Both warnings I am seeing

Invalid CSS selector "[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)" DOMException: Failed to execute 'querySelector' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)' is not a valid selector.(…)
VM6321 saveSvgAsPng.js:70 Invalid CSS selector "ng:form" DOMException: Failed to execute 'querySelector' on 'Element': 'ng:form' is not a valid selector.(…)

[exupero]

What browser are you using?

[jrgleason]

Chrome 47.0.2526.111 m

[exupero]

Browsers may be changing how they handle selectors they can't parse. Instead of throwing an error at querySelector, all the browsers I checked (including Chrome 48) omit the rule from cssRules when [ng:cloak] is part of it. Consequently, I can't reproduce this error any more.

[BrokenBits]

I'm having these same warnings using Chrome Version 48.0.2564.116 m

Edit: I fixed my issue, the css had the circles border-radius set to a percentage, changing it to pixels was all that was needed. However, the warnings are still there.

[vinnyb0341]

I am having the same issue, but only on Microsoft Edge. It works fine on Chrome and Firefox, but on Edge I get Invalid CSS selector "[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, :not(.ng-hide-animate).ng-hide" and a separate Invalid CSS selector "ng:form" SyntaxError

[exupero]

What line of the script is it occurring on?

[vinnyb0341]

I am getting it on the saveSvgasPng.js (70,15). As an update to this. The problem occurs when I try to create a PDF of the screen I am on. It was ending with a SCRIPT5: Access denied, that is no longer the case as now it just pops up with a blank page.

[filipeaguiar]

@vinnyb0341 How did you get it to work on Chrome and Firefox? I'm having the same problem that everyone else.

[vinnyb0341]

well i thought it was working by allowing pop-ups, but the SCRIPT5: Access Denied, is back. So I am back at square 1.

[exupero]

@vinnyb0341 I wonder if rule.selectorText is throwing the error. Can you confirm that accessing selectorText causes the error by moving it to its own line, as in,

var text = rule.selectorText;
console.warn('Invalid CSS selector "' + text + '"', err);

Check then which line the error occurs on and let me know.

[vinnyb0341]

I gave it it's own line and I get the same errors as above except the line has number changed to the line where I declare that variable.

[exupero]

@vinnyb0341 Just pushed a change to catch errors thrown by rule.selectorText. Let me know what you see with the latest code.

[vinnyb0341]

I see the same errors but on line 79 now, which is the same line as before.

[exupero]

@vinnyb0341 What happens if you comment out console.warn?

[vinnyb0341]

All the warnings go away and I am left with a SCRIPT5: Acces is denied. Its on a line where my svgAsPngUri function should open a window with the output. So now it fails on window.open(output).

[exupero]

@vinnyb0341 I haven't been able to reproduce this issue myself. Can you create a fiddle that gives you this problem and let me know what browser you're using?

[vinnyb0341]

I will try the fiddle. Maybe the browser is why. I can get this work with no problem on Chrome and Firefox, but the issue occurs on Microsoft Edge browser.

[vinnyb0341]

Just an update...The problem seems to be just between edge and my localhost....I tried connecting to another server hosting the web-app and I get a different result. The browser is still Edge and the CSS warnings come up, but the pdf doesn't generate, I just get an about:blank page.

[filipeaguiar]

I have to try the latest version on my code to see if it works.

[filipeaguiar]

Well, I've tried with the new code and I still cant save the SVG as a PNG image. It keeps showing me the error:

Invalid CSS selector "[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)" DOMException: Failed to execute 'querySelector' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)' is not a valid selector.

And

Invalid CSS selector "ng:form" DOMException: Failed to execute 'querySelector' on 'Element': 'ng:form' is not a valid selector.

Both on line 79.

[exupero]

@filipeaguiar That message is not an error, only a warning. It's notifying you that the script has skipped that particular CSS rule. It shouldn't prevent the PNG from being generated or downloaded; the script catches the error and continues.

Since I haven't been able to reproduce this, please share an example project or fiddle that exhibits the problem and let me know what browser you're seeing it in.

[filipeaguiar]

The project that I'm working on is on Github, you can see it in my profile. It's called AGHUReport.

I'll just need to input a data on the "controllers.js" manually, since you won't have the database to connect.

[exupero]

@filipeaguiar Please supply a minimal example that reproduces the issue. Also, I'm not convinced that this is a problem in all browsers, so I need to know the exact one you're seeing this in.

[filipeaguiar]

I'm having problem with Chrome and firefox... And I'll try to reproduce the issue in a fiddle. But I'm not that good with the tool.

[exupero]

@filipeaguiar A minimal GitHub project or gist is fine too, preferably just an HTML file that doesn't require installing anything.

[filipeaguiar]

I've created a very simple repository, just to reproduce the error: SvgError

This throws the aformentioned warnings in chrome, and doesn't do ANYTHING in firefox. It does't even throw an error.

[exupero]

@filipeaguiar Thanks for the example repo. The warnings are not the reason the script wasn't working. The script was missing some error reporting, which I've added.

The problem, in this case, is that your SVG element already included xmlns and xmlns:xlink attributes. When the script added them during export, the element ended up with two of each, and caused a loading error. I've added a check to prevent duplicating those attributes, and you example repo works with the new script.

@jrgleason Since I can now test the original issue regarding selectors being flagged as invalid, I'm closing this issue. Whether the browser considers a selector valid or not isn't anything I can control, and since I can demonstrate that the script works despite such selectors, there's nothing more I can do.

[filipeaguiar]

Can I say that I love you? Just once and in a manly not homossexual way? You script is awesome and will make my project SO MUCH BETTER!