Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'gh-pages' of https://github.com/NV/CSSOM into cssText

* 'gh-pages' of https://github.com/NV/CSSOM:
  Version bump
  Add test for CSSStyleDeclaration#cssText. Speed up a bit. Closes #29. @papandreou, thanks!
  Implemented CSSStyleDeclaration.cssText setter (hackingly). Closes #29.
  Fix: npm WARN cssom@0.2.0 package.json: bugs['web'] should probably be bugs['url']
  Fix demo page. JSON.stringify caused an error since I added circular references (i.e. parentRule). Replace JSON.stringify with custom made object stringifier.

Conflicts:
	lib/CSSStyleDeclaration.js
  • Loading branch information...
commit f1e0a62df8b89a7e11aaf0d680a6fc90856fac8f 2 parents 52a343c + fea04d9
@fgnass authored
View
114 docs/parse.html
@@ -77,6 +77,9 @@
#content td + td {
padding-left: 1%;
}
+ #output span {
+ color: #666;
+ }
.style-cell textarea {
width: 99%;
height: 100%;
@@ -117,6 +120,115 @@
</table>
<div id="message"></div>
<script defer>
+/**
+ * @param {number} depth
+ * @return {string}
+ */
+function makeIndent(depth) {
+ var INDENT = ' ';
+ if (depth == 1) {
+ return INDENT;
+ } else if (depth < 1) {
+ return '';
+ }
+
+ if (depth in makeIndent.cache) {
+ return makeIndent.cache[depth];
+ } else {
+ var result = INDENT;
+ for (var i = depth; --i;) {
+ result += INDENT;
+ }
+ makeIndent.cache[depth] = result;
+ return result;
+ }
+}
+makeIndent.cache = {};
+
+
+/**
+ * buildPath(2) -> '../..'
+ * @param {number} level
+ * @return {string}
+ */
+function buildPath(level) {
+ if (level == 0) {
+ return '.';
+ } else {
+ var result = '..';
+ for (var i = 1; i < level; i++) {
+ result += '/..';
+ }
+ return result;
+ }
+}
+
+
+/**
+ * stringifyObjectKey('color') -> 'color'
+ * stringifyObjectKey('background-color') -> '"background-color"'
+ * @param {string} key
+ * @return {string}
+ */
+function stringifyObjectKey(key) {
+ return /^[a-zA-Z_$][A-Za-z0-9_$]*$/.test(key) ?
+ key :
+ '"' + escapeDoubleQuotes(key) + '"';
+}
+
+
+/**
+ * @param {string} string
+ * @return {string}
+ * @see http://stackoverflow.com/questions/7382115/escape-quotes-in-a-string-with-backslash
+ */
+function escapeDoubleQuotes(string) {
+ return string.replace(/(\\*)(")/g, function(all, backslashes, quote) {
+ return backslashes.length % 2 ?
+ all :
+ backslashes + '\\' + quote;
+ });
+}
+
+
+/**
+ * @param {Object} object
+ * @param {number} [depth]
+ * @param {Array} [stack]
+ * @return {string}
+ */
+function inspect(object, depth, stack) {
+ depth ? depth++ : (depth = 1);
+ stack = stack || (stack = []);
+
+ switch (typeof object) {
+ case 'object':
+ var level = stack.indexOf(object);
+ if (level != -1) {
+ return buildPath(level);
+ }
+ stack = [object].concat(stack);
+
+ var properties = [];
+ var indent = makeIndent(depth);
+ for (var key in object) {
+ if (object.hasOwnProperty(key)) {
+ properties.push(indent + stringifyObjectKey(key) + '<span>: </span>' + inspect(object[key], depth, stack));
+ }
+ }
+ var indentInside = makeIndent(depth - 1);
+ return '<span>{</span>\n' + properties.join('<span>,</span>\n') + '\n' + indentInside + '<span>}</span>';
+
+ case 'string':
+ return '"' + object + '"';
+
+ default:
+ return object.toString();
+ }
+}
+
+
+
var errors = [];
if (!("__defineGetter__" in {})) {
errors.push("Object.prototype.__defineGetter__ isn’t supported");
@@ -135,7 +247,7 @@
var value = style.value;
if (value != style.prevValue) {
var css = CSSOM.parse(value);
- output.innerHTML = JSON.stringify(css, null, 2);
+ output.innerHTML = inspect(css);
serialized.innerHTML = css.toString();
style.prevValue = value;
}
View
22 lib/CSSStyleDeclaration.js
@@ -23,7 +23,7 @@ CSSOM.CSSStyleDeclaration.prototype = {
*
* @param {string} name
* @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-getPropertyValue
- * @return {string} the value of the property if it has been explicitly set for this declaration block.
+ * @return {string} the value of the property if it has been explicitly set for this declaration block.
* Returns the empty string if the property has not been set.
*/
getPropertyValue: function(name) {
@@ -123,12 +123,28 @@ CSSOM.CSSStyleDeclaration.prototype = {
}
}
}
- return properties.join(" ");
- }
+ return properties.join(" ")
+ },
+ set cssText(cssText){
+ var i, name;
+ for (i = this.length; i--;) {
+ name = this[i];
+ this[name] = "";
+ }
+ Array.prototype.splice.call(this, 0, this.length);
+
+ var dummyRule = CSSOM.parse('#bogus{' + cssText + '}').cssRules[0].style;
+ var length = dummyRule.length;
+ for (i = 0; i < length; ++i) {
+ name = dummyRule[i];
+ this.setProperty(dummyRule[i], dummyRule.getPropertyValue(name), dummyRule.getPropertyPriority(name));
+ }
+ }
};
//.CommonJS
exports.CSSStyleDeclaration = CSSOM.CSSStyleDeclaration;
+CSSOM.parse = require('./parse').parse; // Cannot be included sooner due to the mutual dependency between parse.js and CSSStyleDeclaration.js
///CommonJS
View
4 package.json
@@ -2,7 +2,7 @@
"name": "cssom",
"description": "CSS Object Model implementation and CSS parser",
"keywords": ["CSS", "CSSOM", "parser", "styleSheet"],
- "version": "0.2.0",
+ "version": "0.2.1",
"homepage": "https://github.com/NV/CSSOM",
"author": "Nikita Vasilyev <me@elv1s.ru>",
"repository": {
@@ -10,7 +10,7 @@
"url": "git://github.com/NV/CSSOM.git"
},
"bugs": {
- "web": "https://github.com/NV/CSSOM/issues"
+ "url": "https://github.com/NV/CSSOM/issues"
},
"directories": {
"doc": "./doc",
View
13 test/CSSStyleDeclaration.test.js
@@ -22,17 +22,24 @@ test("CSSStyleDeclaration", function(){
equal(d.getPropertyValue("color"), "purple");
equal(d.getPropertyValue("width"), "128px");
equal(d.getPropertyValue("position"), "");
-
+
strictEqual(d.getPropertyPriority("color"), "");
strictEqual(d.getPropertyPriority("width"), "important");
strictEqual(d.getPropertyPriority("position"), "");
-
+
d.setProperty("color", "green");
d.removeProperty("width");
-
+
equal(d.cssText, "color: green;");
d.color = "papayawhip";
d.width = "100%";
equal(d.cssText, "color: papayawhip; width: 100%;");
});
+
+test("CSSStyleDeclaration#cssText", function(){
+ var d = new CSSOM.CSSStyleDeclaration;
+ var cssText = "color: pink; outline: 2px solid red;";
+ d.cssText = cssText;
+ strictEqual(d.cssText, cssText);
+});
Please sign in to comment.
Something went wrong with that request. Please try again.