Follow-ups for #3718
- Rename NamespaceProperties to DOMAttributeNamespaces - Make tests pass in jest - Remove unnecessary xmlns attributes
Ben Alpert committed
May 5, 2015 at 16:46 UTC
5f32953ac70517085a0b367feb07c1c92b248c08
5 files changed
+43
-90
src/browser/__tests__/ReactDOMSVG-test.js
+11
-60
@@ -13,8 +13,8 @@
13
14
'use strict';
15
16
-var React = require('React');
17
-var ReactTestUtils = require('ReactTestUtils');
16
+var React;
17
+var ReactTestUtils;
18
19
var SVGDOMNamespaces = {
20
xlink: 'http://www.w3.org/1999/xlink',
@@ -23,68 +23,19 @@ var SVGDOMNamespaces = {
23
};
24
25
describe('ReactDOMSVG', function() {
26
- it("allows a SVG element", function() {
27
- var element = React.createElement('svg', {xmlnsXlink: 'http://www.w3.org/1999/xlink'});
28
- var instance = ReactTestUtils.renderIntoDocument(element);
29
- var svg = React.findDOMNode(instance);
30
- expect(svg.tagName).toBe('svg');
31
- var xlink = svg.getAttributeNS(SVGDOMNamespaces.xmlns, 'xlink');
32
- expect(xlink).toBe('http://www.w3.org/1999/xlink');
33
- });
26
35
- it("allows a SVG element with an image node", function() {
36
- var instance = ReactTestUtils.renderIntoDocument(
37
- <svg xmlnsXlink='http://www.w3.org/1999/xlink'>
38
- <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
39
- </svg>
40
- );
41
- var svg = React.findDOMNode(instance);
42
- var image = svg.childNodes[0];
43
- expect(image.tagName).toBe('image');
44
- var href = image.getAttributeNS(SVGDOMNamespaces.xlink, 'href');
45
- expect(href).toBe('http://i.imgur.com/w7GCRPb.png');
27
+ beforeEach(function() {
28
+ React = require('React');
29
+ ReactTestUtils = require('ReactTestUtils');
30
});
31
48
- it("allows a SVG element with a link", function() {
49
- var instance = ReactTestUtils.renderIntoDocument(
50
- <svg xmlnsXlink='http://www.w3.org/1999/xlink'>
51
- <g>
52
- <a
53
- xlinkHref="http://facebook.github.io/react/"
54
- xlinkActuate="onRequest"
55
- xlinkShow="new"
56
- xlinkArcrole="http://example.com/iri-arcrole-reference.svg"
57
- xlinkRole="http://example.com/iri-role-reference.svg"
58
- xlinkTitle="React"
59
- xlinkType="simple"
60
- >
61
- <text xmlLang="en-US" xmlSpace="preserve" x="0" y="15" fill="black">React</text>
62
- </a>
63
- </g>
32
+ it('creates initial namespaced markup', function() {
33
+ var markup = React.renderToString(
34
+ <svg>
35
+ <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />
36
</svg>
37
);
66
- var svg = React.findDOMNode(instance);
67
- var link = svg.childNodes[0].childNodes[0];
68
- expect(link.tagName).toBe('a');
69
- var href = link.getAttributeNS(SVGDOMNamespaces.xlink, 'href');
70
- expect(href).toBe('http://facebook.github.io/react/');
71
- var actuate = link.getAttributeNS(SVGDOMNamespaces.xlink, 'actuate');
72
- expect(actuate).toBe('onRequest');
73
- var show = link.getAttributeNS(SVGDOMNamespaces.xlink, 'show');
74
- expect(show).toBe('new');
75
- var arcrole = link.getAttributeNS(SVGDOMNamespaces.xlink, 'arcrole');
76
- expect(arcrole).toBe('http://example.com/iri-arcrole-reference.svg');
77
- var role = link.getAttributeNS(SVGDOMNamespaces.xlink, 'role');
78
- expect(role).toBe('http://example.com/iri-role-reference.svg');
79
- var title = link.getAttributeNS(SVGDOMNamespaces.xlink, 'title');
80
- expect(title).toBe('React');
81
- var type = link.getAttributeNS(SVGDOMNamespaces.xlink, 'type');
82
- expect(type).toBe('simple');
83
- var text = link.childNodes[0];
84
- var lang = text.getAttributeNS(SVGDOMNamespaces.xml, 'lang');
85
- expect(lang).toBe('en-US');
86
- var space = text.getAttributeNS(SVGDOMNamespaces.xml, 'space');
87
- expect(space).toBe('preserve');
38
+ expect(markup).toContain('xlink:href="http://i.imgur.com/w7GCRPb.png"');
39
});
40
90
-});
\ No newline at end of file
41
+});
src/browser/ui/dom/DOMProperty.js
+8
-3
@@ -50,6 +50,9 @@ var DOMPropertyInjection = {
50
* attribute name. Attribute names not specified use the **lowercase**
51
* normalized name.
52
*
53
+ * DOMAttributeNamespaces: object mapping React attribute name to the DOM
54
+ * attribute namespace URL. (Attribute names not specified use no namespace.)
55
+ *
56
* DOMPropertyNames: similar to DOMAttributeNames but for DOM properties.
57
* Property names not specified use the normalized name.
58
*
@@ -60,7 +63,7 @@ var DOMPropertyInjection = {
63
*/
64
injectDOMPropertyConfig: function(domPropertyConfig) {
65
var Properties = domPropertyConfig.Properties || {};
63
- var PropertyNamespaces = domPropertyConfig.PropertyNamespaces || {};
66
+ var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {};
67
var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
68
var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {};
69
var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {};
@@ -94,9 +97,11 @@ var DOMPropertyInjection = {
97
DOMProperty.getAttributeName[propName] = lowerCased;
98
}
99
97
- if (PropertyNamespaces.hasOwnProperty(propName)) {
100
+ if (DOMAttributeNamespaces.hasOwnProperty(propName)) {
101
DOMProperty.getAttributeNamespace[propName] =
99
- PropertyNamespaces[propName];
102
+ DOMAttributeNamespaces[propName];
103
+ } else {
104
+ DOMProperty.getAttributeNamespace[propName] = null;
105
}
106
107
DOMProperty.getPropertyName[propName] =
src/browser/ui/dom/HTMLDOMPropertyConfig.js
-4
@@ -159,7 +159,6 @@ var HTMLDOMPropertyConfig = {
159
value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS,
160
width: MUST_USE_ATTRIBUTE,
161
wmode: MUST_USE_ATTRIBUTE,
162
- xmlns: MUST_USE_ATTRIBUTE,
162
163
/**
164
* Non-standard Properties
@@ -183,9 +182,6 @@ var HTMLDOMPropertyConfig = {
182
// IE-only attribute that controls focus behavior
183
unselectable: MUST_USE_ATTRIBUTE
184
},
186
- PropertyNamespaces: {
187
- xmlns: 'http://www.w3.org/2000/xmlns/'
188
- },
185
DOMAttributeNames: {
186
acceptCharset: 'accept-charset',
187
className: 'class',
src/browser/ui/dom/SVGDOMPropertyConfig.js
+14
-18
@@ -17,10 +17,9 @@ var DOMProperty = require('DOMProperty');
17
18
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
19
20
-var SVGDOMNamespaces = {
20
+var NS = {
21
xlink: 'http://www.w3.org/1999/xlink',
22
- xml: 'http://www.w3.org/XML/1998/namespace',
23
- xmlns: 'http://www.w3.org/2000/xmlns/'
22
+ xml: 'http://www.w3.org/XML/1998/namespace'
23
};
24
25
var SVGDOMPropertyConfig = {
@@ -76,23 +75,21 @@ var SVGDOMPropertyConfig = {
75
xmlBase: MUST_USE_ATTRIBUTE,
76
xmlLang: MUST_USE_ATTRIBUTE,
77
xmlSpace: MUST_USE_ATTRIBUTE,
79
- xmlnsXlink: MUST_USE_ATTRIBUTE,
78
y1: MUST_USE_ATTRIBUTE,
79
y2: MUST_USE_ATTRIBUTE,
80
y: MUST_USE_ATTRIBUTE
81
},
84
- PropertyNamespaces: {
85
- xlinkActuate: SVGDOMNamespaces.xlink,
86
- xlinkArcrole: SVGDOMNamespaces.xlink,
87
- xlinkHref: SVGDOMNamespaces.xlink,
88
- xlinkRole: SVGDOMNamespaces.xlink,
89
- xlinkShow: SVGDOMNamespaces.xlink,
90
- xlinkTitle: SVGDOMNamespaces.xlink,
91
- xlinkType: SVGDOMNamespaces.xlink,
92
- xmlBase: SVGDOMNamespaces.xml,
93
- xmlLang: SVGDOMNamespaces.xml,
94
- xmlSpace: SVGDOMNamespaces.xml,
95
- xmlnsXlink: SVGDOMNamespaces.xmlns
82
+ DOMAttributeNamespaces: {
83
+ xlinkActuate: NS.xlink,
84
+ xlinkArcrole: NS.xlink,
85
+ xlinkHref: NS.xlink,
86
+ xlinkRole: NS.xlink,
87
+ xlinkShow: NS.xlink,
88
+ xlinkTitle: NS.xlink,
89
+ xlinkType: NS.xlink,
90
+ xmlBase: NS.xml,
91
+ xmlLang: NS.xml,
92
+ xmlSpace: NS.xml
93
},
94
DOMAttributeNames: {
95
clipPath: 'clip-path',
@@ -125,8 +122,7 @@ var SVGDOMPropertyConfig = {
122
xlinkType: 'xlink:type',
123
xmlBase: 'xml:base',
124
xmlLang: 'xml:lang',
128
- xmlSpace: 'xml:space',
129
- xmlnsXlink: 'xmlns:xlink'
125
+ xmlSpace: 'xml:space'
126
}
127
};
128
src/browser/ui/dom/__tests__/DOMPropertyOperations-test.js
+10
-5
@@ -181,11 +181,9 @@ describe('DOMPropertyOperations', function() {
181
182
describe('setValueForProperty', function() {
183
var stubNode;
184
- var stubSVGNode;
184
185
beforeEach(function() {
186
stubNode = document.createElement('div');
188
- stubSVGNode = document.createElement('svg');
187
});
188
189
it('should set values as properties by default', function() {
@@ -198,10 +196,17 @@ describe('DOMPropertyOperations', function() {
196
expect(stubNode.getAttribute('role')).toBe('#');
197
expect(stubNode.role).toBeUndefined();
198
});
201
-
199
+
200
it('should set values as namespace attributes if necessary', function() {
203
- DOMPropertyOperations.setValueForProperty(stubSVGNode, 'xmlnsXlink', 'http://www.w3.org/1999/xlink');
204
- expect(stubSVGNode.getAttribute('xmlns:xlink')).toBe('http://www.w3.org/1999/xlink');
201
+ spyOn(stubNode, 'setAttributeNS');
202
+ DOMPropertyOperations.setValueForProperty(
203
+ stubNode,
204
+ 'xlinkHref',
205
+ 'about:blank'
206
+ );
207
+ expect(stubNode.setAttributeNS.argsForCall.length).toBe(1);
208
+ expect(stubNode.setAttributeNS.argsForCall[0])
209
+ .toEqual(['http://www.w3.org/1999/xlink', 'xlink:href', 'about:blank']);
210
});
211
212
it('should convert attribute values to string first', function() {