Fix issue with multiple :hover/:active selectors per stylesheet

cburgmer · Dec 12, 2013 · 6e3a12a · 6e3a12a
1 parent b01a447
commit 6e3a12a
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 12 deletions.
diff --git a/dist/rasterizeHTML.allinone.js b/dist/rasterizeHTML.allinone.js
diff --git a/dist/rasterizeHTML.js b/dist/rasterizeHTML.js
@@ -1,4 +1,4 @@
-/*! rasterizeHTML.js - v0.6.0 - 2013-12-11
+/*! rasterizeHTML.js - v0.6.0 - 2013-12-12
 * http://www.github.com/cburgmer/rasterizeHTML.js
 * Copyright (c) 2013 Christoph Burgmer; Licensed MIT */
 window.rasterizeHTMLInline = (function (module) {
@@ -1461,16 +1461,16 @@ window.rasterizeHTML = (function (rasterizeHTMLInline, xmlserializer, theWindow)
 
     module.util.rewriteStyleRuleSelector = function (doc, oldSelector, newSelector) {
         // Assume that oldSelector is always prepended with a ':' or '.' for now, so no special handling needed
-        var oldSelectorRegExp = new RegExp(oldSelector + '(?=\\W|$)', 'g');
+        var oldSelectorRegex = oldSelector + '(?=\\W|$)';
 
         Array.prototype.forEach.call(doc.querySelectorAll('style'), function (styleElement) {
             var matchingRules = Array.prototype.filter.call(styleElement.sheet.cssRules, function (rule) {
-                    return rule.selectorText && oldSelectorRegExp.test(rule.selectorText);
+                    return rule.selectorText && new RegExp(oldSelectorRegex).test(rule.selectorText);
                 });
 
             if (matchingRules.length) {
                 matchingRules.forEach(function (rule) {
-                    var selector = rule.selectorText.replace(oldSelectorRegExp, newSelector);
+                    var selector = rule.selectorText.replace(new RegExp(oldSelectorRegex, 'g'), newSelector);
 
                     updateRuleSelector(rule, selector);
                 });

diff --git a/dist/rasterizeHTML.min.js b/dist/rasterizeHTML.min.js
diff --git a/examples/pseudoClasses.html b/examples/pseudoClasses.html
@@ -40,7 +40,7 @@
             a:active {
                 color: green;
             }
-            div:active:after, div:hover:after {
+            div:active::after, div:hover::after {
                 font-size: 8px;
                 color: green;
                 content: "hover or active"

diff --git a/src/rasterizeHTML.js b/src/rasterizeHTML.js
@@ -383,16 +383,16 @@ window.rasterizeHTML = (function (rasterizeHTMLInline, xmlserializer, theWindow)
 
     module.util.rewriteStyleRuleSelector = function (doc, oldSelector, newSelector) {
         // Assume that oldSelector is always prepended with a ':' or '.' for now, so no special handling needed
-        var oldSelectorRegExp = new RegExp(oldSelector + '(?=\\W|$)', 'g');
+        var oldSelectorRegex = oldSelector + '(?=\\W|$)';
 
         Array.prototype.forEach.call(doc.querySelectorAll('style'), function (styleElement) {
             var matchingRules = Array.prototype.filter.call(styleElement.sheet.cssRules, function (rule) {
-                    return rule.selectorText && oldSelectorRegExp.test(rule.selectorText);
+                    return rule.selectorText && new RegExp(oldSelectorRegex).test(rule.selectorText);
                 });
 
             if (matchingRules.length) {
                 matchingRules.forEach(function (rule) {
-                    var selector = rule.selectorText.replace(oldSelectorRegExp, newSelector);
+                    var selector = rule.selectorText.replace(new RegExp(oldSelectorRegex, 'g'), newSelector);
 
                     updateRuleSelector(rule, selector);
                 });

diff --git a/test/UtilSpec.js b/test/UtilSpec.js
@@ -317,6 +317,22 @@ describe("Utilities function", function () {
             expect(doc.querySelector('style').textContent).toMatch(/i.myFakeHover, a.myFakeHover \{\s*color: blue;\s*\}/);
         });
 
+        it("should correctly handle multiple sub-selector", function () {
+            setHtml('<style type="text/css">i:active::after { color: blue; }</style>');
+
+            rasterizeHTML.util.rewriteStyleRuleSelector(doc, ':active', '.myFakeActive');
+
+            expect(doc.querySelector('style').textContent).toMatch(/i.myFakeActive::?after \{\s*color: blue;\s*\}/);
+        });
+
+        it("should correctly handle multiple selector occurrences in different rules", function () {
+            setHtml('<style type="text/css">a:active {color: green;}i:active { color: blue; }</style>');
+
+            rasterizeHTML.util.rewriteStyleRuleSelector(doc, ':active', '.myFakeActive');
+
+            expect(doc.querySelector('style').textContent).toMatch(/i.myFakeActive \{\s*color: blue;\s*\}/);
+        });
+
         it("should cope with non CSSStyleRule", function () {
             setHtml('<head><style type="text/css">@font-face { font-family: "RaphaelIcons"; src: url("raphaelicons-webfont.woff"); }</style></head><body><span></span></body>');