fix subscript/superscript problem I just created

and test these as well as tag auto-close/open

Author: alexcjohnson

src/lib/svg_text_utils.js

@@ -264,9 +264,11 @@ var SPLIT_TAGS = /(<[^<>]*>)/;
 
 var ONE_TAG = /<(\/?)([^ >]*)(\s+(.*))?>/i;
 
-var QUOTEDATTR = '\\s*=\\s*("([^"]*)"|\'([^\']*)\')';
-var STYLEMATCH = new RegExp('(^|[\\s"\'])style' + QUOTEDATTR, 'i');
-var HREFMATCH = new RegExp('(^|[\\s"\'])href' + QUOTEDATTR, 'i');
+// Style and href: pull them out of either single or double quotes.
+// Because we hack in other attributes with style (sub & sup), drop any trailing
+// semicolon in user-supplied styles so we can consistently append the tag-dependent style
+var STYLEMATCH = /(^|[\s"'])style\s*=\s*("([^"]*);?"|'([^']*);?')/i;
+var HREFMATCH = /(^|[\s"'])href\s*=\s*("([^"]*)"|'([^']*)')/i;
 
 var COLORMATCH = /(^|;)\s*color:/;
 
@@ -362,9 +364,11 @@ function convertToSVG(_str) {
                 // but font color is different (uses fill). Let our users ignore this.
                 var cssMatch = extra && extra.match(STYLEMATCH);
                 var css = cssMatch && (cssMatch[3] || cssMatch[4]);
-                if(css) css = encodeForHTML(css.replace(COLORMATCH, '$1 fill:'));
-
-                if(tagStyle) css = tagStyle + ';' + (css || '');
+                if(css) {
+                    css = encodeForHTML(css.replace(COLORMATCH, '$1 fill:'));
+                    if(tagStyle) css += ';' + tagStyle;
+                }
+                else if(tagStyle) css = tagStyle;
 
                 if(css) return out + ' style="' + css + '">';
 
@@ -376,6 +380,11 @@ function convertToSVG(_str) {
         });
 
     // now deal with line breaks
+    // TODO: this next section attempts to close and reopen tags that
+    // span a line break. But
+    // a) it only closes and reopens one tag, and
+    // b) all tags are treated like equivalent tspans (even <a> which isn't a tspan even now!)
+    // we should really do this in a type-aware way *before* converting to tspans.
     var indices = [];
     for(var index = result.indexOf('<br>'); index > 0; index = result.indexOf('<br>', index + 1)) {
         indices.push(index);

test/jasmine/tests/svg_text_utils_test.js

@@ -45,7 +45,11 @@ describe('svg+text utils', function() {
 
             expect(hasWrongAttr).toBe(false);
 
-            expect(a.attr('style')).toBe('cursor:pointer;' + (style || ''));
+            var fullStyle = style || '';
+            if(style) fullStyle += ';';
+            fullStyle += 'cursor:pointer';
+
+            expect(a.attr('style')).toBe(fullStyle);
         }
 
         function listAttributes(node) {
@@ -226,5 +230,50 @@ describe('svg+text utils', function() {
 
             expect(node.text()).toEqual('100μ & < 10 > 0  100 × 20 ± 0.5 °');
         });
+
+        it('supports superscript by itself', function() {
+            var node = mockTextSVGElement('<sup>123</sup>');
+            expect(node.html()).toBe(
+                '​<tspan style="font-size:70%" dy="-0.6em">123</tspan>' +
+                '<tspan dy="0.42em">​</tspan>');
+        });
+
+        it('supports subscript by itself', function() {
+            var node = mockTextSVGElement('<sub>123</sub>');
+            expect(node.html()).toBe(
+                '​<tspan style="font-size:70%" dy="0.3em">123</tspan>' +
+                '<tspan dy="-0.21em">​</tspan>');
+        });
+
+        it('supports superscript and subscript together with normal text', function() {
+            var node = mockTextSVGElement('SO<sub>4</sub><sup>2-</sup>');
+            expect(node.html()).toBe(
+                'SO​<tspan style="font-size:70%" dy="0.3em">4</tspan>' +
+                '<tspan dy="-0.21em">​</tspan>​' +
+                '<tspan style="font-size:70%" dy="-0.6em">2-</tspan>' +
+                '<tspan dy="0.42em">​</tspan>');
+        });
+
+        it('allows one <b> to span <br>s', function() {
+            var node = mockTextSVGElement('be <b>Bold<br>and<br><i>Strong</i></b>');
+            expect(node.html()).toBe(
+                '<tspan class="line" dy="0em">be ' +
+                    '<tspan style="font-weight:bold">Bold</tspan></tspan>' +
+                '<tspan class="line" dy="1.3em">' +
+                    '<tspan style="font-weight:bold">and</tspan></tspan>' +
+                '<tspan class="line" dy="2.6em">' +
+                    '<tspan style="font-weight:bold">' +
+                        '<tspan style="font-style:italic">Strong</tspan></tspan></tspan>');
+        });
+
+        it('allows one <sub> to span <br>s', function() {
+            var node = mockTextSVGElement('SO<sub>4<br>44</sub>');
+            expect(node.html()).toBe(
+                '<tspan class="line" dy="0em">SO​' +
+                    '<tspan style="font-size:70%" dy="0.3em">4</tspan></tspan>' +
+                '<tspan class="line" dy="1.3em">​' +
+                    '<tspan style="font-size:70%" dy="0.3em">44</tspan>' +
+                    '<tspan dy="-0.21em">​</tspan></tspan>');
+        });
     });
 });