diff --git a/packages/driver-dom/package.json b/packages/driver-dom/package.json index 3172ba1b1e..dca467025d 100644 --- a/packages/driver-dom/package.json +++ b/packages/driver-dom/package.json @@ -1,6 +1,6 @@ { "name": "driver-dom", - "version": "2.1.0", + "version": "2.1.1", "description": "DOM driver for Rax", "license": "BSD-3-Clause", "main": "lib/index.js", diff --git a/packages/driver-dom/src/__tests__/attributes.js b/packages/driver-dom/src/__tests__/attributes.js new file mode 100644 index 0000000000..107886e90c --- /dev/null +++ b/packages/driver-dom/src/__tests__/attributes.js @@ -0,0 +1,105 @@ +import { createElement, render } from 'rax'; +import * as DriverDOM from '../'; + +describe('attributes', () => { + let container; + + beforeEach(() => { + container = document.createElement('div'); + (document.body || document.documentElement).appendChild(container); + }); + + describe('string properties', () => { + it('render string prop with simple numbers', () => { + render(( +
+ ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.getAttribute('width')).toBe('30'); + }); + + it('render string prop with true value', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.getAttribute('href')).toBe('true'); + }); + + it('render string prop with object value', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.getAttribute('data')).toBe('[object Object]'); + }); + }); + + describe('boolean properties', () => { + it('render boolean prop with true value', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.getAttribute('hidden')).toBe(''); + }); + + it('render boolean prop with false value', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.getAttribute('hidden')).toBe(null); + }); + + it('render boolean prop with self value', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.getAttribute('hidden')).toBe(''); + }); + }); + + describe('properties must set with property', () => { + it('render boolean prop with true', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.checked).toBe(true); + }); + + it('render boolean prop with false', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let node = container.children[0]; + expect(node.checked).toBe(false); + }); + }); +}); diff --git a/packages/driver-dom/src/__tests__/svg.js b/packages/driver-dom/src/__tests__/svg.js index 72cb867a7b..869c6d5ba5 100644 --- a/packages/driver-dom/src/__tests__/svg.js +++ b/packages/driver-dom/src/__tests__/svg.js @@ -30,4 +30,22 @@ describe('svg', () => { let tspanNode = textNode.children[0]; expect(tspanNode.namespaceURI).toEqual('http://www.w3.org/2000/svg'); }); + + it('should set transform as attribute', () => { + render(( + + ), container, { + driver: DriverDOM + }); + + let svgNode = container.children[0]; + let textNode = svgNode.children[0]; + + expect(textNode.getAttribute('transform')).toEqual('scale(1 0.5)'); + }); }); diff --git a/packages/driver-dom/src/index.js b/packages/driver-dom/src/index.js index 78536b7b49..cbbc909119 100644 --- a/packages/driver-dom/src/index.js +++ b/packages/driver-dom/src/index.js @@ -298,7 +298,7 @@ export function createElement(type, props, component, __shouldConvertUnitlessToR } else if (isEventProp(prop)) { addEventListener(node, prop.slice(2).toLowerCase(), value, component); } else { - setAttribute(node, prop, value); + setAttribute(node, prop, value, isSVGMode); } } } @@ -368,7 +368,7 @@ export function removeAttribute(node, propKey) { node[REMOVE_ATTRIBUTE](propKey); } -export function setAttribute(node, propKey, propValue) { +export function setAttribute(node, propKey, propValue, isSvg) { // For reduce innerHTML operation to improve performance. if (propKey === DANGEROUSLY_SET_INNER_HTML && node[INNER_HTML] !== propValue[HTML]) { return node[INNER_HTML] = propValue[HTML]; @@ -376,7 +376,8 @@ export function setAttribute(node, propKey, propValue) { if (propKey === CLASS_NAME) propKey = CLASS; - if (propKey in node) { + // Prop for svg can only be set by attribute + if (!isSvg && propKey in node) { try { // Some node property is readonly when in strict mode node[propKey] = propValue;