github/less.js
1
1
Fork 0
mirror of https://github.com/less/less.js.git synced 2026-05-01 03:00:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

browser support for rootpath and relative urls, with test

Browse Source
This commit is contained in:
Luke Page
2012-12-28 20:32:26 +00:00
parent 75a92bdc44
commit 5b3851720a
14 changed files with 304 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
lib/less/browser.js
View File

@@ -157,6 +157,30 @@ function loadStyleSheets(callback, reload) {
}
}
function pathDiff(url, baseUrl) {
// diff between two paths to create a relative path
var urlParts = extractUrlParts(url),
baseUrlParts = extractUrlParts(baseUrl),
i, max, urlDirectories, baseUrlDirectories, diff = "";
if (urlParts.hostPart !== baseUrlParts.hostPart) {
return "";
}
max = Math.max(baseUrlParts.directories.length, urlParts.directories.length);
for(i = 0; i < max; i++) {
if (baseUrlParts.directories[i] !== urlParts.directories[i]) { break; }
}
baseUrlDirectories = baseUrlParts.directories.slice(i);
urlDirectories = urlParts.directories.slice(i);
for(i = 0; i < baseUrlDirectories.length-1; i++) {
diff += "../";
}
for(i = 0; i < urlDirectories.length-1; i++) {
diff += urlDirectories[i] + "/";
}
return diff;
}
function extractUrlParts(url, baseUrl) {
// urlParts[1] = protocol&hostname || /
// urlParts[2] = / if path relative to host base
@@ -195,6 +219,8 @@ function extractUrlParts(url, baseUrl) {
}
}
returner.hostPart = urlParts[1];
returner.directories = directories;
returner.path = urlParts[1] + directories.join("/");
returner.fileUrl = returner.path + (urlParts[4] || "");
returner.url = returner.fileUrl + (urlParts[5] || "");
@@ -211,13 +237,29 @@ function loadStyleSheet(sheet, callback, reload, remaining) {
var css = cache && cache.getItem(href);
var timestamp = cache && cache.getItem(href + ':timestamp');
var styles = { css: css, timestamp: timestamp };
//TODO - sheet.rootpath might be a unique path that needs using
// or it might be the url of the last sheet
// hrefParts.path is the full url path in the current sheet
// we need to take sheet.rootpath and if that is set, combine it
// somehow with the relative part of the href?
// also need to take into account sheet.relativeUrls
var rootpath = hrefParts.path;
var rootpath;
if (less.relativeUrls) {
if (less.rootpath) {
if (sheet.entryPath) {
rootpath = extractUrlParts(less.rootpath + pathDiff(hrefParts.path, sheet.entryPath)).path;
} else {
rootpath = less.rootpath;
}
} else {
rootpath = hrefParts.path;
}
} else {
if (less.rootpath) {
rootpath = less.rootpath;
} else {
if (sheet.entryPath) {
rootpath = sheet.entryPath;
} else {
rootpath = hrefParts.path;
}
}
}
xhr(href, sheet.type, function (data, lastModified) {
// Store data this session
@@ -236,6 +278,7 @@ function loadStyleSheet(sheet, callback, reload, remaining) {
new(less.Parser)({
optimization: less.optimization,
paths: [hrefParts.path],
entryPath: sheet.entryPath || hrefParts.path,
mime: sheet.type,
filename: href,
rootpath: rootpath,

3
lib/less/parser.js
View File

@@ -1506,7 +1506,8 @@ if (less.mode === 'browser' || less.mode === 'rhino') {
type: env.mime,
contents: env.contents,
files: env.files,
rootpath: env.rootpath,
rootpath: env.rootpath,
entryPath: env.entryPath,
relativeUrls: env.relativeUrls },
function (e, root, data, sheet, _, path) {
if (e && typeof(env.errback) === "function") {

16
test/browser-test-prepare.js
View File

@@ -2,18 +2,19 @@ var path = require('path'),
fs = require('fs'),
sys = require('util');
var createTestRunnerPage = function(dir, exclude, testSuiteName) {
var createTestRunnerPage = function(dir, exclude, testSuiteName, dir2) {
var output = '<html><head>\n';
fs.readdirSync(path.join("test", dir, 'less')).forEach(function (file) {
fs.readdirSync(path.join("test", dir, 'less', dir2 || "")).forEach(function (file) {
if (! /\.less/.test(file)) { return; }
var name = path.basename(file, '.less');
var name = path.basename(file, '.less'),
id = (dir ? dir + '-' : "") + 'less-' + (dir2 ? dir2 + "-" : "") + name;
if (exclude && name.match(exclude)) { return; }
output += '<link id="original-less:' + (dir ? dir+'-' : "") +'less-'+name+'" rel="stylesheet/less" type="text/css" href="http://localhost:8081/' + path.join(dir, 'less', name) + '.less' +'">\n';
output += '<link id="expected-less:' + (dir ? dir+'-' : "") +'less-'+name+'" rel="stylesheet" type="text/css" href="http://localhost:8081/' + path.join(dir, 'css', name) + '.css' + '">\n';
output += '<link id="original-less:' + id + '" rel="stylesheet/less" type="text/css" href="http://localhost:8081/' + path.join(dir, 'less', dir2 || "", name) + '.less' +'">\n';
output += '<link id="expected-less:' + id + '" rel="stylesheet" type="text/css" href="http://localhost:8081/' + path.join(dir, 'css', dir2 || "", name) + '.css' + '">\n';
});
output += String(fs.readFileSync(path.join('test/browser', 'template.htm'))).replace("{runner-name}", testSuiteName);
@@ -22,4 +23,7 @@ var createTestRunnerPage = function(dir, exclude, testSuiteName) {
};
createTestRunnerPage("", /javascript|urls/, "main");
createTestRunnerPage("browser", null, "browser");
createTestRunnerPage("browser", null, "browser");
createTestRunnerPage("browser", null, "relative-urls", "relative-urls");
createTestRunnerPage("browser", null, "rootpath", "rootpath");
createTestRunnerPage("browser", null, "rootpath-relative", "rootpath-relative");

36
test/browser/css/relative-urls/urls.css Normal file
View File

@@ -0,0 +1,36 @@
@import "http://localhost:8081/browser/less/imports/modify-this.css";
@import "http://localhost:8081/browser/less/imports/modify-again.css";
.modify {
my-url: url("http://localhost:8081/browser/less/imports/a.png");
}
.modify {
my-url: url("http://localhost:8081/browser/less/imports/b.png");
}
@font-face {
src: url("/fonts/garamond-pro.ttf");
src: local(Futura-Medium), url(http://localhost:8081/browser/less/relative-urls/fonts.svg#MyGeometricModern) format("svg");
}
#shorthands {
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
}
#misc {
background-image: url(http://localhost:8081/browser/less/relative-urls/images/image.jpg);
}
#data-uri {
background: url(data:image/png;charset=utf-8;base64,
kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
}
#svg-data-uri {
background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
}
.comma-delimited {
background: url(http://localhost:8081/browser/less/relative-urls/bg.jpg) no-repeat, url(http://localhost:8081/browser/less/relative-urls/bg.png) repeat-x top left, url(http://localhost:8081/browser/less/relative-urls/bg);
}
.values {
url: url('http://localhost:8081/browser/less/relative-urls/Trebuchet');
}

36
test/browser/css/rootpath-relative/urls.css Normal file
View File

@@ -0,0 +1,36 @@
@import "https://www.github.com/cloudhead/imports/modify-this.css";
@import "https://www.github.com/cloudhead/imports/modify-again.css";
.modify {
my-url: url("https://www.github.com/cloudhead/imports/a.png");
}
.modify {
my-url: url("https://www.github.com/cloudhead/imports/b.png");
}
@font-face {
src: url("/fonts/garamond-pro.ttf");
src: local(Futura-Medium), url(https://www.github.com/cloudhead/less.js/fonts.svg#MyGeometricModern) format("svg");
}
#shorthands {
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
}
#misc {
background-image: url(https://www.github.com/cloudhead/less.js/images/image.jpg);
}
#data-uri {
background: url(data:image/png;charset=utf-8;base64,
kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
}
#svg-data-uri {
background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
}
.comma-delimited {
background: url(https://www.github.com/cloudhead/less.js/bg.jpg) no-repeat, url(https://www.github.com/cloudhead/less.js/bg.png) repeat-x top left, url(https://www.github.com/cloudhead/less.js/bg);
}
.values {
url: url('https://www.github.com/cloudhead/less.js/Trebuchet');
}

36
test/browser/css/rootpath/urls.css Normal file
View File

@@ -0,0 +1,36 @@
@import "https://www.github.com/modify-this.css";
@import "https://www.github.com/modify-again.css";
.modify {
my-url: url("https://www.github.com/a.png");
}
.modify {
my-url: url("https://www.github.com/b.png");
}
@font-face {
src: url("/fonts/garamond-pro.ttf");
src: local(Futura-Medium), url(https://www.github.com/fonts.svg#MyGeometricModern) format("svg");
}
#shorthands {
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
}
#misc {
background-image: url(https://www.github.com/images/image.jpg);
}
#data-uri {
background: url(data:image/png;charset=utf-8;base64,
kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
}
#svg-data-uri {
background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
}
.comma-delimited {
background: url(https://www.github.com/bg.jpg) no-repeat, url(https://www.github.com/bg.png) repeat-x top left, url(https://www.github.com/bg);
}
.values {
url: url('https://www.github.com/Trebuchet');
}

8
test/browser/css/urls.css
View File

@@ -1,11 +1,11 @@
@import "http://localhost:8081/browser/less/imports/modify-this.css";
@import "http://localhost:8081/browser/less/modify-this.css";
@import "http://localhost:8081/browser/less/imports/modify-again.css";
@import "http://localhost:8081/browser/less/modify-again.css";
.modify {
my-url: url("http://localhost:8081/browser/less/imports/a.png");
my-url: url("http://localhost:8081/browser/less/a.png");
}
.modify {
my-url: url("http://localhost:8081/browser/less/imports/b.png");
my-url: url("http://localhost:8081/browser/less/b.png");
}
@font-face {
src: url("/fonts/garamond-pro.ttf");

33
test/browser/less/relative-urls/urls.less Normal file
View File

@@ -0,0 +1,33 @@
@import "../imports/urls.less";
@import "http://localhost:8081/browser/less/imports/urls2.less";
@font-face {
src: url("/fonts/garamond-pro.ttf");
src: local(Futura-Medium),
url(fonts.svg#MyGeometricModern) format("svg");
}
#shorthands {
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
}
#misc {
background-image: url(images/image.jpg);
}
#data-uri {
background: url(data:image/png;charset=utf-8;base64,
kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
}
#svg-data-uri {
background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
}
.comma-delimited {
background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
}
.values {
@a: 'Trebuchet';
url: url(@a);
}

33
test/browser/less/rootpath-relative/urls.less Normal file
View File

@@ -0,0 +1,33 @@
@import "../imports/urls.less";
@import "http://localhost:8081/browser/less/imports/urls2.less";
@font-face {
src: url("/fonts/garamond-pro.ttf");
src: local(Futura-Medium),
url(fonts.svg#MyGeometricModern) format("svg");
}
#shorthands {
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
}
#misc {
background-image: url(images/image.jpg);
}
#data-uri {
background: url(data:image/png;charset=utf-8;base64,
kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
}
#svg-data-uri {
background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
}
.comma-delimited {
background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
}
.values {
@a: 'Trebuchet';
url: url(@a);
}

33
test/browser/less/rootpath/urls.less Normal file
View File

@@ -0,0 +1,33 @@
@import "../imports/urls.less";
@import "http://localhost:8081/browser/less/imports/urls2.less";
@font-face {
src: url("/fonts/garamond-pro.ttf");
src: local(Futura-Medium),
url(fonts.svg#MyGeometricModern) format("svg");
}
#shorthands {
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;
}
#misc {
background-image: url(images/image.jpg);
}
#data-uri {
background: url(data:image/png;charset=utf-8;base64,
kiVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
k//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
kg9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC);
background-image: url(data:image/x-png,f9difSSFIIGFIFJD1f982FSDKAA9==);
background-image: url(http://fonts.googleapis.com/css?family=\"Rokkitt\":\(400\),700);
}
#svg-data-uri {
background: transparent url('data:image/svg+xml, <svg version="1.1"><g></g></svg>');
}
.comma-delimited {
background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
}
.values {
@a: 'Trebuchet';
url: url(@a);
}

22
test/browser/phantom-runner.js
View File

@@ -73,7 +73,8 @@ function testPage(url) {
} else {
waitFor(function(){
return page.evaluate(function(){
return document.body.querySelector('.symbolSummary .pending') === null &&
return document.body && document.body.querySelector &&
document.body.querySelector('.symbolSummary .pending') === null &&
document.body.querySelector('.results') !== null;
});
}, function(){
@@ -108,6 +109,16 @@ function testPage(url) {
});
}
function scanDirectory(path, regex) {
var files = [];
fs.list(path).forEach(function (file) {
if (file.match(regex)) {
files.push(file);
}
});
return files;
};
var totalTests = 0,
totalFailed = 0,
totalDone = 0;
@@ -119,7 +130,10 @@ function testFinished(failed) {
}
if (system.args.length != 2 && system.args[1] != "--no-tests") {
totalTests = 2;
testPage("http://localhost:8081/browser/test-runner-main.htm");
testPage("http://localhost:8081/browser/test-runner-browser.htm");
var files = scanDirectory("test/browser/", /^test-runner-.+\.htm$/);
totalTests = files.length;
console.log("found " + files.length + " tests");
files.forEach(function(file) {
testPage("http://localhost:8081/browser/" + file);
});
}

4
test/browser/runner-relative-urls.js Normal file
View File

@@ -0,0 +1,4 @@
less.relativeUrls = true;
describe("less.js browser test - relative url's", function() {
testLessEqualsInDocument();
});

5
test/browser/runner-rootpath-relative.js Normal file
View File

@@ -0,0 +1,5 @@
less.rootpath = "https://www.github.com/cloudhead/less.js/";
less.relativeUrls = true;
describe("less.js browser test - rootpath and relative url's", function() {
testLessEqualsInDocument();
});

4
test/browser/runner-rootpath.js Normal file
View File

@@ -0,0 +1,4 @@
less.rootpath = "https://www.github.com/";
describe("less.js browser test - rootpath url's", function() {
testLessEqualsInDocument();
});