Forcibly wrap SVG nodes with <svg> on creation
Forcing wrapping seems necessary here: I compared a <circle> created within a <div> with a <circle> created inside an <svg> and they appear to have exactly the same properties with the exception of .parentNode (and .parentElement), yet the former refuses to show up when appended to an <svg> element. As such, I can't find any useful way to write a unit test (testing getMarkupWrap's output doesn't seem particularly useful to me). Fixes #311. Test Plan: With a component that adds a <circle> after mounting (such as http://jsfiddle.net/spicyj/hxFVe/), verify that the circle appears in both Chrome and IE9.
Ben Alpert committed
Sep 9, 2013 at 19:23 UTC
7909c3e71b299fd100c7af660ab68ae3716b0a25
1 file changed
+40
-11
src/vendor/core/getMarkupWrap.js
+40
-11
@@ -32,23 +32,52 @@ var dummyNode =
32
*
33
* In IE8, certain elements cannot render alone, so wrap all elements ('*').
34
*/
35
-var shouldWrap = {};
35
+var shouldWrap = {
36
+ // Force wrapping for SVG elements because if they get created inside a <div>,
37
+ // they will be initialized in the wrong namespace (and will not display).
38
+ 'circle': true,
39
+ 'g': true,
40
+ 'line': true,
41
+ 'path': true,
42
+ 'polyline': true,
43
+ 'rect': true,
44
+ 'text': true
45
+};
46
+
47
+var selectWrap = [1, '<select multiple="true">', '</select>'];
48
+var tableWrap = [1, '<table>', '</table>'];
49
+var trWrap = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
50
+
51
+var svgWrap = [1, '<svg>', '</svg>'];
52
+
53
var markupWrap = {
54
+ '*': [1, '?<div>', '</div>'],
55
+
56
'area': [1, '<map>', '</map>'],
38
- 'caption': [1, '<table>', '</table>'],
57
'col': [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
40
- 'colgroup': [1, '<table>', '</table>'],
58
'legend': [1, '<fieldset>', '</fieldset>'],
42
- 'optgroup': [1, '<select multiple="true">', '</select>'],
43
- 'option': [1, '<select multiple="true">', '</select>'],
59
'param': [1, '<object>', '</object>'],
45
- 'tbody': [1, '<table>', '</table>'],
46
- 'td': [3, '<table><tbody><tr>', '</tr></tbody></table>'],
47
- 'tfoot': [1, '<table>', '</table>'],
48
- 'th': [3, '<table><tbody><tr>', '</tr></tbody></table>'],
49
- 'thead': [1, '<table>', '</table>'],
60
'tr': [2, '<table><tbody>', '</tbody></table>'],
51
- '*': [1, '?<div>', '</div>']
61
+
62
+ 'optgroup': selectWrap,
63
+ 'option': selectWrap,
64
+
65
+ 'caption': tableWrap,
66
+ 'colgroup': tableWrap,
67
+ 'tbody': tableWrap,
68
+ 'tfoot': tableWrap,
69
+ 'thead': tableWrap,
70
+
71
+ 'td': trWrap,
72
+ 'th': trWrap,
73
+
74
+ 'circle': svgWrap,
75
+ 'g': svgWrap,
76
+ 'line': svgWrap,
77
+ 'path': svgWrap,
78
+ 'polyline': svgWrap,
79
+ 'rect': svgWrap,
80
+ 'text': svgWrap
81
};
82
83
/**