fix process styles when stylesheets get updated (DevExpress#1919)

* fix process styles when stylesheets get updated * review & fixup * fix test on safari iphone ? * fix tests
LavrovArtem · Feb 11, 2019 · 12fff1a · 12fff1a
1 parent 7157ff3
commit 12fff1a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/src/client/sandbox/native-methods.js b/src/client/sandbox/native-methods.js
@@ -553,6 +553,7 @@ class NativeMethods {
         this.styleGetPropertyValue = win.CSSStyleDeclaration.prototype.getPropertyValue;
         this.styleSetProperty      = win.CSSStyleDeclaration.prototype.setProperty;
         this.styleRemoveProperty   = win.CSSStyleDeclaration.prototype.removeProperty;
+        this.styleSheetInsertRule = win.CSSStyleSheet.prototype.insertRule;
 
         // Console
         this.console = win.console;

diff --git a/src/client/sandbox/style.js b/src/client/sandbox/style.js
@@ -225,6 +225,12 @@ export default class StyleSandbox extends SandboxBase {
             }
         });
 
+        window.CSSStyleSheet.prototype.insertRule = function (rule, index) {
+            const newRule = styleProcessor.process(rule, getProxyUrl);
+
+            return nativeMethods.styleSheetInsertRule.call(this, newRule, index);
+        };
+
         window.CSSStyleDeclaration.prototype.getPropertyValue = function (...args) {
             const value = nativeMethods.styleGetPropertyValue.apply(this, args);
 

diff --git a/test/client/fixtures/sandbox/style-test.js b/test/client/fixtures/sandbox/style-test.js
@@ -55,6 +55,21 @@ test('cssText', function () {
     strictEqual(div.style.cssText.indexOf(proxyUrl), -1);
 });
 
+test('insertRule', function () {
+    var style    = document.createElement('style');
+    var url      = '/image.png';
+    var proxyUrl = urlUtils.getProxyUrl(url);
+
+    document.head.appendChild(style);
+
+    var actualRuleIndex = document.styleSheets[0].insertRule('div { background-image: url("' + url + '"); }');
+    var actualRules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
+    var actualRule = removeDoubleQuotes(actualRules[0].cssText);
+
+    strictEqual(actualRuleIndex, 0);
+    strictEqual(actualRule, removeDoubleQuotes('div { background-image: url("' + proxyUrl + '")' + '; }'));
+});
+
 test('url properties', function () {
     var div      = document.createElement('div');
     var url      = 'http://some.domain.com/image.png';