Handle dereferencing relative urls.
MODIFY
src/util/index.js
src/util/index.js
@@ -1053,18 +1053,27 @@ var util = module.exports = {
* dereferencing is complete.
* @param {string} [styleKey] If unset, styleElem is a header element. If
* set, styleElem is a DOM element and the named style will be updated.
+ * @param {string} [baseUrl] If present, this is the base for relative urls.
* @memberof geo.util
*/
- dereferenceCssUrls: function (css, styleElem, styleDefer, styleKey) {
+ dereferenceCssUrls: function (css, styleElem, styleDefer, styleKey, baseUrl) {
var deferList = [],
results = [];
+ if (baseUrl) {
+ var match = /(^[^?#]*)\/[^?#/]*([?#]|$)/g.exec(baseUrl);
+ baseUrl = match && match[1] ? match[1] + '/' : null;
+ }
css.replace(util.dereferenceCssUrlsRegex, function (match, url) {
var idx = deferList.length,
defer = $.Deferred(),
xhr = new XMLHttpRequest();
deferList.push(defer);
results.push('');
+
+ if (/^[^/:][^:]*(\/|$)/g.exec(url) && baseUrl) {
+ url = baseUrl + url;
+ }
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
@@ -1179,8 +1188,9 @@ var util = module.exports = {
var css = $(this).text();
util.dereferenceCssUrls(css, styleElem, styleDefer);
} else {
- $.get($(this).attr('href')).done(function (css) {
- util.dereferenceCssUrls(css, styleElem, styleDefer);
+ var href = $(this).attr('href');
+ $.get(href).done(function (css) {
+ util.dereferenceCssUrls(css, styleElem, styleDefer, undefined, href);
});
}
deferList.push(styleDefer);

MODIFY
tests/cases/map.js
tests/cases/map.js
@@ -830,7 +830,24 @@ describe('geo.core.map', function () {
} else {
done();
}
+ }, 10000);
+ it('layer css background', function (done) {
+ // this test won't work in PhantomJS.
+ if (!isPhantomJS()) {
+ geo.jQuery('head').append('<link rel="stylesheet" href="/testdata/test.css" type="text/css"/>');
+ var layer3 = m.createLayer('ui');
+ layer3.node().addClass('image-background');
+ layer3.opacity(0.5);
+ m.screenshot().then(function (result) {
+ expect(result).not.toEqual(ss.basic);
+ expect(result).not.toEqual(ss.nobackground);
+ m.deleteLayer(layer3);
+ done();
});
+ } else {
+ done();
+ }
+ }, 10000);
it('layers in a different order', function (done) {
m.screenshot([layer2, layer1]).then(function (result) {
// the order doesn't matter

ADD
tests/data/test.css
+.image-background {
+ background-image: url('white.jpg');
+}

Handle dereferencing relative urls.