cssom
Version:
CSS Object Model implementation and CSS parser
132 lines (110 loc) • 2.29 kB
HTML
<html>
<head>
<title></title>
<style>
body {
background: #EEE;
}
</style>
<script>
var exports = {};
function require(){
return exports;
}
</script>
<script src="../lib/CSSStyleDeclaration.js"></script>
<script src="../lib/CSSRule.js"></script>
<script src="../lib/CSSStyleRule.js"></script>
<script src="../lib/CSSImportRule.js"></script>
<script src="../lib/MediaList.js"></script>
<script src="../lib/CSSMediaRule.js"></script>
<script src="../lib/StyleSheet.js"></script>
<script src="../lib/CSSStyleSheet.js"></script>
<script src="../lib/parse.js"></script>
<script src="../lib/clone.js"></script>
<script>
window.CSSOM = exports;
</script>
</head>
<body>
<script>
function diffObjects(a, b) {
var diff = {};
for (var key in a) {
if (key in b) {
if (a[key] !== b[key]) {
diff[key] = {
changed: 'changed',
removed: a[key],
added: b[key]
}
}
} else {
diff[key] = {
changed: 'removed',
removed: a[key]
}
}
}
for (key in b) {
if (!(key in a)) {
diff[key] = {
changed: 'added',
added: b[key]
}
}
}
return diff;
}
console.log(diffObjects({a: 1, b: 2, d: 4}, {a: 1, b: 3, c:3}));
function makeSnapshot(styleSheets) {
var snapshot = [];
for (var i = 0; i < styleSheets.length; i++) {
snapshot[i] = CSSOM.clone(styleSheets[i]);
}
return snapshot;
}
var snapshot = makeSnapshot(document.styleSheets);
function diffStyleSheet(a, b) {
var result = new CSSOM.CSSStyleSheet;
var rules = a.cssRules;
// if (!rules) {
// return cloned;
// }
var RULE_TYPES = {
1: CSSOM.CSSStyleRule,
4: CSSOM.CSSMediaRule
//FIXME
//3: CSSOM.CSSImportRule,
//5: CSSOM.CSSFontFaceRule,
//6: CSSOM.CSSPageRule,
};
for (var i=0, rulesLength=rules.length; i < rulesLength; i++) {
var rule = rules[i];
var style = rule.style;
if (rules[i]) {
}
}
}
function diffRules(a, b) {
var RULE_TYPES = {
1: CSSOM.CSSStyleRule,
4: CSSOM.CSSMediaRule
//FIXME
//3: CSSOM.CSSImportRule,
//5: CSSOM.CSSFontFaceRule,
//6: CSSOM.CSSPageRule,
};
}
function diff(snapshot, styleSheets) {
var result = [];
for (var i = 0; i < snapshot.length; i++) {
if (snapshot[i]) {
}
}
}
console.log(diff(snapshot, document.styleSheets));
</script>
</body>
</html>