+ Measures morph time for elements with inline styles.
+ Run on master (setAttribute) and on fix/csp-safe-style-sync (syncStyle) to compare.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/morphAttrs.js b/src/morphAttrs.js
index b07d709..985e05f 100644
--- a/src/morphAttrs.js
+++ b/src/morphAttrs.js
@@ -1,63 +1,80 @@
var DOCUMENT_FRAGMENT_NODE = 11;
export default function morphAttrs(fromNode, toNode) {
- var toNodeAttrs = toNode.attributes;
- var attr;
- var attrName;
- var attrNamespaceURI;
- var attrValue;
- var fromValue;
-
- // document-fragments dont have attributes so lets not do anything
- if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) {
- return;
- }
+ var toNodeAttrs = toNode.attributes;
+ var attr;
+ var attrName;
+ var attrNamespaceURI;
+ var attrValue;
+ var fromValue;
+
+ // document-fragments dont have attributes so lets not do anything
+ if (
+ toNode.nodeType === DOCUMENT_FRAGMENT_NODE ||
+ fromNode.nodeType === DOCUMENT_FRAGMENT_NODE
+ ) {
+ return;
+ }
+
+ // update attributes on original DOM element
+ for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
+ attr = toNodeAttrs[i];
+ attrName = attr.name;
+ attrNamespaceURI = attr.namespaceURI;
+ attrValue = attr.value;
- // update attributes on original DOM element
- for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
- attr = toNodeAttrs[i];
- attrName = attr.name;
- attrNamespaceURI = attr.namespaceURI;
- attrValue = attr.value;
-
- if (attrNamespaceURI) {
- attrName = attr.localName || attrName;
- fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);
-
- if (fromValue !== attrValue) {
- if (attr.prefix === 'xmlns'){
- attrName = attr.name; // It's not allowed to set an attribute with the XMLNS namespace without specifying the `xmlns` prefix
- }
- fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
- }
- } else {
- fromValue = fromNode.getAttribute(attrName);
-
- if (fromValue !== attrValue) {
- fromNode.setAttribute(attrName, attrValue);
- }
+ if (attrNamespaceURI) {
+ attrName = attr.localName || attrName;
+ fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);
+
+ if (fromValue !== attrValue) {
+ if (attr.prefix === "xmlns") {
+ attrName = attr.name; // It's not allowed to set an attribute with the XMLNS namespace without specifying the `xmlns` prefix
}
- }
+ fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
+ }
+ } else {
+ if (attrName === "style") {
+ // Use style.cssText instead of setAttribute("style") to comply
+ // with Content Security Policy (CSP) style-src directives.
+ // setAttribute("style") is blocked by CSP without 'unsafe-inline',
+ // but the CSSOM API (style.cssText) is never blocked.
+ // We compare via getAttribute (cheap string read) and write via
+ // style.cssText (CSP-safe CSSOM setter).
+ fromValue = fromNode.getAttribute(attrName);
+
+ if (fromValue !== attrValue) {
+ fromNode.style.cssText = attrValue;
+ }
+ } else {
+ fromValue = fromNode.getAttribute(attrName);
- // Remove any extra attributes found on the original DOM element that
- // weren't found on the target element.
- var fromNodeAttrs = fromNode.attributes;
-
- for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {
- attr = fromNodeAttrs[d];
- attrName = attr.name;
- attrNamespaceURI = attr.namespaceURI;
-
- if (attrNamespaceURI) {
- attrName = attr.localName || attrName;
-
- if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {
- fromNode.removeAttributeNS(attrNamespaceURI, attrName);
- }
- } else {
- if (!toNode.hasAttribute(attrName)) {
- fromNode.removeAttribute(attrName);
- }
+ if (fromValue !== attrValue) {
+ fromNode.setAttribute(attrName, attrValue);
}
+ }
+ }
+ }
+
+ // Remove any extra attributes found on the original DOM element that
+ // weren't found on the target element.
+ var fromNodeAttrs = fromNode.attributes;
+
+ for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {
+ attr = fromNodeAttrs[d];
+ attrName = attr.name;
+ attrNamespaceURI = attr.namespaceURI;
+
+ if (attrNamespaceURI) {
+ attrName = attr.localName || attrName;
+
+ if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {
+ fromNode.removeAttributeNS(attrNamespaceURI, attrName);
+ }
+ } else {
+ if (!toNode.hasAttribute(attrName)) {
+ fromNode.removeAttribute(attrName);
+ }
}
+ }
}
diff --git a/test/browser/test.js b/test/browser/test.js
index 1569886..13765ce 100644
--- a/test/browser/test.js
+++ b/test/browser/test.js
@@ -1692,4 +1692,161 @@ describe('morphdom' , function() {
expect(div1).to.equal(div1_2);
});
+
+ // =========================================================================
+ // CSP-safe style synchronization
+ // =========================================================================
+
+ describe('CSP-safe style handling', function() {
+ it('should sync styles without calling setAttribute("style")', function() {
+ var el1 = document.createElement('div');
+ el1.style.color = 'red';
+ el1.style.padding = '10px';
+
+ var el2 = document.createElement('div');
+ el2.style.color = 'blue';
+ el2.style.margin = '5px';
+
+ // Spy on setAttribute to verify it is NOT called with "style"
+ var origSetAttribute = el1.setAttribute;
+ var styleSetAttrCalled = false;
+ el1.setAttribute = function(name, value) {
+ if (name === 'style') {
+ styleSetAttrCalled = true;
+ }
+ return origSetAttribute.call(this, name, value);
+ };
+
+ morphdom(el1, el2);
+
+ expect(styleSetAttrCalled).to.equal(false);
+ expect(el1.style.color).to.equal('blue');
+ expect(el1.style.margin).to.equal('5px');
+ expect(el1.style.padding).to.equal('');
+ });
+
+ it('should add style to an element that had none', function() {
+ var el1 = document.createElement('div');
+
+ var el2 = document.createElement('div');
+ el2.style.color = 'red';
+ el2.style.fontWeight = 'bold';
+
+ morphdom(el1, el2);
+
+ expect(el1.style.color).to.equal('red');
+ expect(el1.style.fontWeight).to.equal('bold');
+ });
+
+ it('should remove style attribute entirely', function() {
+ var el1 = document.createElement('div');
+ el1.style.color = 'red';
+ el1.style.padding = '10px';
+
+ var el2 = document.createElement('div');
+
+ morphdom(el1, el2);
+
+ expect(el1.hasAttribute('style')).to.equal(false);
+ });
+
+ it('should handle !important priority', function() {
+ var el1 = document.createElement('div');
+ el1.style.setProperty('color', 'red', '');
+
+ var el2 = document.createElement('div');
+ el2.style.setProperty('color', 'blue', 'important');
+
+ morphdom(el1, el2);
+
+ expect(el1.style.getPropertyValue('color')).to.equal('blue');
+ expect(el1.style.getPropertyPriority('color')).to.equal('important');
+ });
+
+ it('should handle CSS custom properties (variables)', function() {
+ var el1 = document.createElement('div');
+ el1.style.setProperty('--value', '0');
+ el1.style.setProperty('--size', '4rem');
+
+ var el2 = document.createElement('div');
+ el2.style.setProperty('--value', '75');
+ el2.style.setProperty('--size', '6rem');
+
+ morphdom(el1, el2);
+
+ expect(el1.style.getPropertyValue('--value').trim()).to.equal('75');
+ expect(el1.style.getPropertyValue('--size').trim()).to.equal('6rem');
+ });
+
+ it('should be idempotent — second morph with same style is a no-op', function() {
+ var el1 = document.createElement('div');
+ el1.style.color = 'red';
+ el1.style.padding = '10px';
+
+ var el2 = document.createElement('div');
+ el2.style.color = 'blue';
+
+ morphdom(el1, el2);
+
+ expect(el1.style.color).to.equal('blue');
+ expect(el1.style.padding).to.equal('');
+
+ // Morph again with same target — cssText setter should not be called
+ // because getAttribute("style") returns the same value
+ var el3 = document.createElement('div');
+ el3.style.color = 'blue';
+
+ var cssTextSet = false;
+ var origDescriptor = Object.getOwnPropertyDescriptor(CSSStyleDeclaration.prototype, 'cssText');
+ Object.defineProperty(el1.style, 'cssText', {
+ get: function() { return origDescriptor.get.call(this); },
+ set: function(v) { cssTextSet = true; return origDescriptor.set.call(this, v); },
+ configurable: true
+ });
+
+ morphdom(el1, el3);
+
+ expect(cssTextSet).to.equal(false);
+ expect(el1.style.color).to.equal('blue');
+ });
+
+ it('should handle style morph from HTML string', function() {
+ var el1 = document.createElement('div');
+ el1.id = 'test';
+ el1.style.color = 'red';
+
+ morphdom(el1, '');
+
+ expect(el1.style.color).to.equal('blue');
+ expect(el1.style.fontSize).to.equal('14px');
+ expect(el1.style.getPropertyValue('color')).to.equal('blue');
+ });
+
+ it('should handle shorthand properties', function() {
+ var el1 = document.createElement('div');
+ el1.style.margin = '10px';
+
+ var el2 = document.createElement('div');
+ el2.style.margin = '20px';
+
+ morphdom(el1, el2);
+
+ expect(el1.style.margin).to.equal('20px');
+ });
+
+ it('should handle mixed style and other attribute changes', function() {
+ var el1 = document.createElement('div');
+ el1.className = 'foo';
+ el1.style.color = 'red';
+
+ var el2 = document.createElement('div');
+ el2.className = 'bar';
+ el2.style.color = 'blue';
+
+ morphdom(el1, el2);
+
+ expect(el1.className).to.equal('bar');
+ expect(el1.style.color).to.equal('blue');
+ });
+ });
});
diff --git a/test/fixtures/autotest/style-add/from.html b/test/fixtures/autotest/style-add/from.html
new file mode 100644
index 0000000..85be96f
--- /dev/null
+++ b/test/fixtures/autotest/style-add/from.html
@@ -0,0 +1 @@
+
Hello
\ No newline at end of file
diff --git a/test/fixtures/autotest/style-add/to.html b/test/fixtures/autotest/style-add/to.html
new file mode 100644
index 0000000..3f65977
--- /dev/null
+++ b/test/fixtures/autotest/style-add/to.html
@@ -0,0 +1 @@
+
Hello
\ No newline at end of file
diff --git a/test/fixtures/autotest/style-change/from.html b/test/fixtures/autotest/style-change/from.html
new file mode 100644
index 0000000..dd149b5
--- /dev/null
+++ b/test/fixtures/autotest/style-change/from.html
@@ -0,0 +1 @@
+
Hello
\ No newline at end of file
diff --git a/test/fixtures/autotest/style-change/to.html b/test/fixtures/autotest/style-change/to.html
new file mode 100644
index 0000000..f18469e
--- /dev/null
+++ b/test/fixtures/autotest/style-change/to.html
@@ -0,0 +1 @@
+
Hello
\ No newline at end of file
diff --git a/test/fixtures/autotest/style-css-variable/from.html b/test/fixtures/autotest/style-css-variable/from.html
new file mode 100644
index 0000000..7c70bf9
--- /dev/null
+++ b/test/fixtures/autotest/style-css-variable/from.html
@@ -0,0 +1 @@
+
Counter
\ No newline at end of file
diff --git a/test/fixtures/autotest/style-css-variable/to.html b/test/fixtures/autotest/style-css-variable/to.html
new file mode 100644
index 0000000..d987f77
--- /dev/null
+++ b/test/fixtures/autotest/style-css-variable/to.html
@@ -0,0 +1 @@
+
Counter
\ No newline at end of file
diff --git a/test/fixtures/autotest/style-remove/from.html b/test/fixtures/autotest/style-remove/from.html
new file mode 100644
index 0000000..dd149b5
--- /dev/null
+++ b/test/fixtures/autotest/style-remove/from.html
@@ -0,0 +1 @@
+
Hello
\ No newline at end of file
diff --git a/test/fixtures/autotest/style-remove/to.html b/test/fixtures/autotest/style-remove/to.html
new file mode 100644
index 0000000..85be96f
--- /dev/null
+++ b/test/fixtures/autotest/style-remove/to.html
@@ -0,0 +1 @@
+