[ember 3.1.0-beta.1] viewBox attribute on SVG component has incorrect capitalization

[mlwilkerson]

Summary

When rendering a component with tagName of svg and a bound viewBox attribute, the resulting DOM element has attribute viewbox (without the capital B).

Impact: the SVG will have the wrong size. (Observed in Chrome).

Here is a reproduction of the issue.
(I couldn't figure out how to JSBin or Ember-Twiddle it).

This problem does not exist in ember 3.0.0.

Similar past issue: #10303

[st-h]

looks like this also applies to the 3.1.0 release

possibly #16311 is related

[rwjblue]

Yes, I agree I believe #16311 is related.

[st-h]

Copied over from #16311 as it seems this apply to this issue only

st-h:
I tried to create a test first, however my efforts to write something that matches the current implementations only showed that the current test setup happily accepts any diffs in case sensitive bindings (both in glimmer.vm and ember.js). Probably the test helpers should be refined... However, there are too many internals involved and I don't know the codebase well enough to make a substantial decision here.
So, I continued to find out what is actually going wrong and I believe to have found the offending commit / code. This essentially changed using the lower case name of the attribute when setting it within the install method
Yet again, being very new to the ember/glimmer internals, I don't feel comfortable deciding what is the best way to fix this. I am happy to help getting this done with a little support though.

rwjblue:
Hmm. That change definitely does odd. Do Ember's own tests pass if you remove that .toLowerCase()? I'm unsure how this could be the cause of <button onClick=(action 'foo')></button)> not working because it seems like it would only be related to component's attribute bindings right?

st-h:
@rwjblue maybe I should have posted that to the svg related issue, as I am not totally sure if both issues really do have the same cause. However, I was specifically looking why an attributeBinding like viewBox would end up as viewbox.
If I do make requested change there is one test which fails, which specifically tests for case insensitivity. Honestly this seems a little odd to me, since I am not used to js being case insensitive.

[rwjblue]

Thank you for all that sleuthing @st-h, it is very helpful!

[st-h]

@rwjblue happy that this was helpful. I tried to fix that issue yesterday, but came along way too many questions regarding which direction things should actually go and what has been intended and what not. Tried to get some help on slack, but I guess everybody was busy. Happy to see that this is fixed now.

[rwjblue]

FYI - The fix for this has been pulled into release (for 3.1.x release) and beta (for 3.2.0-beta.x release). The latest builds (in 10-15 minutes) to the release, beta, and canary channels should include the fix (you can get the latest tarball URL via ember-source-channel-url).