Edge's DOMParser.parseFromString converts known SVG attributes to all upper-case

In code review Issue #5579311 • Assigned to Saqib A.

Details

Created
Nov 25, 2015
Privacy
This issue is public.
Reports
Reported by 22 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

Parse a valid SVG DOM like so:

var parser = new DOMParser();
var doc = parser.parseFromString("<svg xmlns=’http://www.w3.org/2000/svg’><path fill=’blue’ wrongfill=’blue’ d=’M 0,0 L 10,10’ stroke=’black’
stroke-width=’1px’/></svg>", “text/xml”);

Note that inspecting the attributes yields all upper-case words like "STROKE", "FILL", “STROKE-WIDTH” for known attributes, but “wrongfill” for invalid/unknown attributes.
If you copy the parsed string to the DOM using a series of createElemetNS and setAttribute calls the resulting SVG DOM does not render correctly since EDGE ignores the all upper-case attributes. The resulting SVG is broken.

Here is a test-case online: http://jsfiddle.net/wcy5q96e/
The test-case imports an SVG text snippet twice - it doesn’t work in the browser without forcing all attribute names to lower case.

This is a regression to the Windows 10 GA release introduced in the 1511 update (“Threshold”). All other browsers respect the casing of the attributes during parsing and do not alter it.

Update from the reporter :

Posted by Daniel McCabe on 12/11/2015 at 12:23 PM

This issue appears to be pretty easy to reproduce. I have the specifics nailed down a little more - it will only occur if you specify the xmlns attribute on the SVG element (required by the spec), and when it happens, it only appears to affect attributes that are unique to SVGs. So for example, fill, stroke, clip-path, font-family, and font-size will all get capitalized, but the width and height attributes won’t.

I can also confirm that this is unrelated to DOMParser.parseFromString. I can see the issue if I just open an SVG inside of Edge, both in the DOM Explorer and if I use the console to fetch the attributes for the elements in question.

Any updates on this would be greatly appreciated, this issue is definitely causing us some headaches right now.

Posted by Sebastian Mueller on 12/3/2015 at 7:09 AM

Turns out this is not a problem with the parser, but a problem (regression) with the “attributes” property of svg elements:

var rect = document.createElementNS("http://www.w3.org/2000/svg", “rect”);
rect.setAttribute("fill", “red”)

In the console “rect” yields: “<rect FILL="red"></rect>”
but
rect.getAttribute(“fill”) == “red”
rect.getAttributeNode(“fill”).value == “red”
rect.getAttributeNodeNS(null, “fill”).value == “red”

and

rect.getAttribute(“FILL”) == null
rect.getAttributeNode(“FILL”) == null
rect.getAttributeNodeNS(null, “FILL”) == null

however:

rect.attributes[0].name == “FILL”

Expected Results:

DOMParser should not convert the case for attributes of elements it nows. Especially if it does not recognize these attributes itself correctly. The DOMParser should keep the casing of the elements in the xml string.

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Mara P.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Status to “Confirmed”

      Changed Steps to Reproduce

    • The “migration” from here did not include the comments and repro counts (6 in this case). Here are some of the more interesting comments from the old page:

      A little more detail the attribute will only be upper cased if you specify a valid value
      e.g. node.setAttributeNS(null, “clip-path", “foo”); will result in clip-path="foo” if you
      then change the value node.setAttributeNS(null, "clip-path", “none”); it results in
      CLIP-PATH="none".

      It does seem to be restricted to presentation attributes which are case sensitive

      This issue appears to be pretty easy to reproduce. I have the specifics nailed down
      a little more - it will only occur if you specify the xmlns attribute on the SVG element (required by the spec), and when it happens, it only appears to affect attributes that are unique to SVGs. So for example, fill, stroke, clip-path, font-family, and font-size will all get capitalized, but the width and height attributes won’t.

      I can also confirm that this is unrelated to DOMParser.parseFromString. I can see the issue if I just open an SVG inside of Edge, both in the DOM Explorer and if I use the console to fetch the attributes for the elements in question.

      Turns out this is not a problem with the parser, but a problem (regression) with the “attributes” property of svg elements:

      var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
      rect.setAttribute("fill", "red")
      

      In the console “rect” yields: "

      "
      

      but

      rect.getAttribute("fill") == "red"
      rect.getAttributeNode("fill").value == "red"
      rect.getAttributeNodeNS(null, "fill").value == "red"
      

      and

      rect.getAttribute("FILL") == null
      rect.getAttributeNode("FILL") == null
      rect.getAttributeNodeNS(null, "FILL") == null
      

      however:

      rect.attributes[0].name == "FILL" 
      
    • Sorry - I cannot delete my comment, but I just saw that in this case the comments have been copied to the description - sorry for the duplication - feel free to remove my two comments. I don’t think I can edit or delete them myself.

    • Still no news on this bug ?

      Any fix release date ?

      thanks

    • Seems that IE11 does not have that problem!

    • Working on IE11 but not on EDGE, even after the Anniversary update…

    • This is breaking transferring SVG data on copy-paste into Edge browsers to our design tool. All shapes come in black. We’ll lowercase for now, but really shouldn’t have to do that.

    • Any status updates to this issue?
      With Edge popularity growing more and more people will find most SVG tools failing.
      Is there an expected fix timeline?

    • I have created a JavaScript work-around for this problem (Daniel’s jsFiddle demos the problem but some SVG attribute names are camelCase, so it is not sufficient to just switch them to lower case). You can see the example code at https://gist.github.com/Karlywarly/b0e153d5ac8924209bd1418dea6b0426
      I hope this is useful, but would prefer to see a proper fix!

    • Microsoft Edge Team

      Changed Assigned To from “Kevin B.” to “Saqib A.”

      Changed Status from “Confirmed” to “In progress”

      Changed Status from “In progress” to “Confirmed”

    • This bug has been investigated but a fix is not planned for the Creators Update due to the complexity involved (stability risk). We will consider for a future update.

    • Lol Charles, thats joke right? There is no possible real workaround for this. I need to walk attributes and then operate above them. But its hard when the nodeValue returns capitals. Do you realy want to push me to parse the SVG DOM by myself? It works in all browsers correctly, except edge. Please reconsider to fix this bug as soon as possible.

    • Microsoft Edge Team

      Changed Status from “Confirmed” to “In progress”

      Changed Status from “In progress” to “In code review”

    You need to sign in to your Microsoft account to add a comment.

    Sign in