Missing onLoad and onError events on image tag (#9042)
mdogadailo committed
Feb 23, 2017 at 22:05 UTC
49840f2e6bc62c5b8cdf4306ef6ca74f876c9c09
4 files changed
+38
scripts/fiber/tests-passing.txt
+1
@@ -1055,6 +1055,7 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
1055
* should track textarea values
1056
* should warn for children on void elements
1057
* should support custom elements which extend native elements
1058
+* should work load and error events on <image> element in SVG
1059
* should warn against children for void elements
1060
* should warn against dangerouslySetInnerHTML for void elements
1061
* should validate against multiple children props
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+2
@@ -232,6 +232,7 @@ function trapBubbledEventsLocal(node : Element, tag : string) {
232
);
233
break;
234
case 'img':
235
+ case 'image':
236
ReactBrowserEventEmitter.trapBubbledEvent(
237
'topError',
238
'error',
@@ -521,6 +522,7 @@ var ReactDOMFiberComponent = {
522
case 'form':
523
case 'iframe':
524
case 'img':
525
+ case 'image':
526
case 'link':
527
case 'object':
528
case 'source':
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+32
@@ -1102,6 +1102,38 @@ describe('ReactDOMComponent', () => {
1102
expect(ReactDOMServer.renderToString(<div is="custom-div" />)).toContain('is="custom-div"');
1103
}
1104
});
1105
+
1106
+ it('should work load and error events on <image> element in SVG', () => {
1107
+ spyOn(console, 'log');
1108
+ var container = document.createElement('div');
1109
+ ReactDOM.render(
1110
+ <svg>
1111
+ <image
1112
+ xlinkHref="http://example.org/image"
1113
+ onError={(e) => console.log('onError called')}
1114
+ onLoad={(e) => console.log('onLoad called')}
1115
+ />
1116
+ </svg>,
1117
+ container
1118
+ );
1119
+
1120
+ var loadEvent = document.createEvent('Event');
1121
+ var errorEvent = document.createEvent('Event');
1122
+
1123
+ loadEvent.initEvent('load', false, false);
1124
+ errorEvent.initEvent('error', false, false);
1125
+
1126
+ container.getElementsByTagName('image')[0].dispatchEvent(errorEvent);
1127
+ container.getElementsByTagName('image')[0].dispatchEvent(loadEvent);
1128
+
1129
+ expectDev(console.log.calls.count()).toBe(2);
1130
+ expectDev(console.log.calls.argsFor(0)[0]).toContain(
1131
+ 'onError called'
1132
+ );
1133
+ expectDev(console.log.calls.argsFor(1)[0]).toContain(
1134
+ 'onLoad called'
1135
+ );
1136
+ });
1137
});
1138
1139
describe('updateComponent', () => {
src/renderers/dom/stack/client/ReactDOMComponent.js
+3
@@ -293,6 +293,7 @@ function trapBubbledEventsLocal() {
293
];
294
break;
295
case 'img':
296
+ case 'image':
297
inst._wrapperState.listeners = [
298
ReactBrowserEventEmitter.trapBubbledEvent(
299
'topError',
@@ -470,6 +471,7 @@ ReactDOMComponent.Mixin = {
471
case 'form':
472
case 'iframe':
473
case 'img':
474
+ case 'image':
475
case 'link':
476
case 'object':
477
case 'source':
@@ -1129,6 +1131,7 @@ ReactDOMComponent.Mixin = {
1131
case 'form':
1132
case 'iframe':
1133
case 'img':
1134
+ case 'image':
1135
case 'link':
1136
case 'object':
1137
case 'source':