From d9742289aad63dffc13bf3073b84670c797357de Mon Sep 17 00:00:00 2001 From: Marcel Gerber Date: Tue, 23 Aug 2016 00:45:21 +0200 Subject: [PATCH 1/3] Live Dev MultiBrowser: Convert url()s so they reference the correct file Replace all occurrences of url() where the URL is relative to the CSS file with an absolute URL so it is relative to the CSS file, not the HTML file --- .../documents/LiveCSSDocument.js | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js index 8782be90f2a..f98431bffe7 100644 --- a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js +++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js @@ -21,6 +21,8 @@ * */ +/*jslint regexp: true */ + /** * LiveCSSDocument manages a single CSS source document * @@ -45,7 +47,8 @@ define(function LiveCSSDocumentModule(require, exports, module) { var _ = require("thirdparty/lodash"), CSSUtils = require("language/CSSUtils"), EventDispatcher = require("utils/EventDispatcher"), - LiveDocument = require("LiveDevelopment/MultiBrowserImpl/documents/LiveDocument"); + LiveDocument = require("LiveDevelopment/MultiBrowserImpl/documents/LiveDocument"), + PathUtils = require("thirdparty/path-utils/path-utils"); /** * @constructor @@ -93,14 +96,31 @@ define(function LiveCSSDocumentModule(require, exports, module) { * When the user edits the file, update the stylesheet in the browser and redraw highlights. */ LiveCSSDocument.prototype._updateBrowser = function () { - var i; + var i, + docUrl = this.doc.url; + + // Determines whether an url() line contains a relative or absolute URL, and makes + // the URL absolute to the CSS file if it is relative + function makeUrlsRelativeToCss(match, quotationMark, url) { + if (PathUtils.isRelativeUrl(url)) { + var absUrl = PathUtils.makeUrlAbsolute(url, docUrl); + return "url(" + quotationMark + absUrl + quotationMark + ")"; + } + return match; + } + for (i = 0; i < this.roots.length; i++) { - if (this.doc.url !== this.roots[i].toString()) { + if (docUrl !== this.roots[i].toString()) { // if it's not directly included through , // reload the original doc this.trigger("updateDoc", this.roots[i]); } else { - this.protocol.setStylesheetText(this.doc.url, this.doc.getText()); + var docText = this.doc.getText(); + + // Replace all occurrences of url() where the URL is relative to the CSS file with + // an absolute URL so it is relative to the CSS file, not the HTML file (see #11936) + docText = docText.replace(/\burl\(\s*(["']?)([^)\n]+)\1\s*\)/ig, makeUrlsRelativeToCss); + this.protocol.setStylesheetText(docUrl, docText); } } this.redrawHighlights(); From 5502d2ea038d6bd9c0867beb6b8e4e7769feabc3 Mon Sep 17 00:00:00 2001 From: Marcel Gerber Date: Tue, 23 Aug 2016 01:04:49 +0200 Subject: [PATCH 2/3] Fix failing test --- test/spec/LiveDevelopmentMultiBrowser-test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/spec/LiveDevelopmentMultiBrowser-test.js b/test/spec/LiveDevelopmentMultiBrowser-test.js index 673bbccd677..be85d5f83a5 100644 --- a/test/spec/LiveDevelopmentMultiBrowser-test.js +++ b/test/spec/LiveDevelopmentMultiBrowser-test.js @@ -269,6 +269,9 @@ define(function (require, exports, module) { runs(function () { liveDoc.getSourceFromBrowser().done(function (text) { browserText = text; + // In LiveDocument._updateBrowser, we replace relative url()s with an absolute equivalent + // Strip the leading http://127.0.0.1:port part so we can compare browser and editor text + browserText = browserText.replace(/url\('http:\/\/127\.0\.0\.1:\d+\/import1\.css'\);/, "url('import1.css');"); }).always(function () { doneSyncing = true; }); From 7976f33e3dbe3d957adb9c03a76c807e29fdfa81 Mon Sep 17 00:00:00 2001 From: Marcel Gerber Date: Tue, 23 Aug 2016 01:36:25 +0200 Subject: [PATCH 3/3] Add test case --- .../index.html | 6 ++- .../sub/icon_chevron.png | Bin 0 -> 460 bytes .../sub/test.css | 4 ++ test/spec/LiveDevelopmentMultiBrowser-test.js | 45 ++++++++++++++++++ 4 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 test/spec/LiveDevelopment-MultiBrowser-test-files/sub/icon_chevron.png diff --git a/test/spec/LiveDevelopment-MultiBrowser-test-files/index.html b/test/spec/LiveDevelopment-MultiBrowser-test-files/index.html index c4ca4e2a501..e0155ba13ac 100644 --- a/test/spec/LiveDevelopment-MultiBrowser-test-files/index.html +++ b/test/spec/LiveDevelopment-MultiBrowser-test-files/index.html @@ -4,6 +4,10 @@ -

Hello

+
+

Hello

+
+
+
diff --git a/test/spec/LiveDevelopment-MultiBrowser-test-files/sub/icon_chevron.png b/test/spec/LiveDevelopment-MultiBrowser-test-files/sub/icon_chevron.png new file mode 100644 index 0000000000000000000000000000000000000000..04d5dd2f88b5b12ba63e955ba1ba2708e58cd38d GIT binary patch literal 460 zcmV;-0W%xKL7v#9CSrkbW?9;ba!ELWdK2BZ(?O2Mrm?o zcW-iQb09-gHF34$HUIzs6?8>dbVG7wVRUJ4ZXi@?ZDjy7FETbSF)*u;JEQ;r0VPR9 zK~yM_tHj?GNqUzA>1}Bi5A;f z*oBaOK(rANLK=%e1PKI55iRy@c&zUgLQXZzoO92)_YU{O1IRhQMBppdBjQ_|pi?_f z;W>sm=U$tj3#F8kl+t%BV-fw7(orepyfM-kIp-DZVFo|&8W9oKO_4;zA)ZyeJi-p% zv^vzB=J6gcs;dK|VO(^Z1f`U#QpzBuG>4~nf~8W*$4--=hJF00lFZ)eVItNl26%{H zc-7cL&UqT!*sREBSc`~bM$4MSTlA}9U$7Aor{l+e4msxqyffPN4L%`9#P52wPDSov zSdsr?w~1Vj^cj!w6I&7Sp=}sr!KKl^>Q~$Tf4BueOI4QRMRUXe0000