Apply styles to SVG text elements directly as allowed by strict CSPs

[martian111]

This addresses another part of the Plotly code that uses inline CSS (should be related to #2355). This case is less severe than the situation fixed by PR #7109 because it only affects some "advanced" configurations, such as those using "pseudo-HTML" in data set names or in hovertemplate settings. Plots that did not utilize "pseudo-HTML" were not impacted. Even if it did use "pseudo-HTML", depending on how much text formatting was done, the impact of strict CSPs may not be too noticeable. For example, bolded text would have rendered, but without the bold font.

Strict Content Security Policies (those without 'unsafe-inline' keyword) does not permit inline styles (setting the 'style' attribute in code). However, setting individual style properties on an element object is allowed.

Therefore, this fixes the "svg_text_utils.js" by changing the code that retrieves, manipulates, and applies the style attribute strings of the "pseudo-HTML" configuration to instead parse and/or apply styles directly on the element. In other words, instead of using d3.select(node).attr("style", "some string value"), use d3.select(node).style(name, value) as shown in the D3JS docs: https://d3js.org/d3-selection/selecting#select

With this method, in addition to it being allowed by string CSPs, the D3 JS library and/or the browser seems to do some level of input validation and normalization. As such, unit test cases were updated to account for this differences, which includes:

• Order and format of the attributes were changed. For example, there will be a space after the colon of the CSS style when read back from the browser.
• Invalid style attributes would not be applied. Thus, fixed test cases with actual valid styles.
• Setting the "color" style attribute in SVG text spans actually normalizes to setting the "fill" color attribute.
• Using "Times New Roman" font will cause "make-baseline" test to fail due to "error 525: plotly.js error" when run by the Kaleido Python library. Root cause of that is probably too deep to get into and removing it does not change the substance of that test case (using "Times, serif" achieves the same result).

Testing

I tested using the plotly-basic.js build before and after the fix and configured a basic scatter chart with a hovertemplate configuration containing a lot of formatting using the "pseudo-HTML" allowed by this library. When hovering on the data points, it's very obvious when styles are properly applied.

• Before fix: https://fqr9yv.csb.app/
• After fix: https://kh7h56.csb.app/

Note: The "before fix" CSB uses the plotly-basic.js built from master that is the base of this branch since it needs PR #7109 to work properly.

[martian111]

Hi @archmoj and @birkskyum, this new PR also relates to strict CSPs. I mentioned "another issue" in PR #7109 since this is unrelated to fixes discussed in that PR and its history. Instead, it relates to "pseudo-HTML" configurations that convert to SVG text elements/spans, such as those generated by formatted hovertemplate configurations. Please let me know if you think this is also helpful and if there is anything else I need to change or consider. I haven't used Plotly too extensively and only have basic experience with scatter plots, so hope this does cause issues elsewhere. Thanks!