Skip to content

Instantly share code, notes, and snippets.

@matori
Created March 31, 2016 03:54
Show Gist options
  • Save matori/c9d3599108668ad53927618dad5e5f4d to your computer and use it in GitHub Desktop.
Save matori/c9d3599108668ad53927618dad5e5f4d to your computer and use it in GitHub Desktop.
styleMatchTester.js
<script src="path/to/style-match-tester.js"></script>
<script>
var config = {
"html": {
pseudo: "::before",
prop: {
"display": "block",
"border-top-width": "0",
"font-size": "",
"content": ""
}
},
"body": {
prop: {
"background-color": "transparent"
}
}
};
styleMatchTester(config);
</script>
(function () {
var container = document.createElement("div");
var child = document.createElement("div");
var heading = document.createElement("h2");
var ol = document.createElement("ol");
var li = document.createElement("li");
var p = document.createElement("p");
container.className = "styleMatchTesterResult";
child.className = "styleMatchTesterResult-content";
heading.className = "styleMatchTesterResult-heading";
ol.className = "styleMatchTesterResult-list";
li.className = "styleMatchTesterResult-item";
p.className = "styleMatchTesterResult-warn";
function check(config) {
var selectors = Object.keys(config);
selectors.forEach(function (selector, idx) {
var node = document.querySelector(selector);
var result = child.cloneNode(false);
var resultTitle = heading.cloneNode(false);
var data = config[selector];
var pseudo = data.pseudo || "";
var titleText = document.createTextNode(selector + pseudo);
var warn;
var warnText;
var list;
var propObj;
var currentStyle;
resultTitle.appendChild(titleText);
result.appendChild(resultTitle);
if (!node) {
warn = p.cloneNode(false);
warnText = document.createTextNode("NOT FOUND");
warn.appendChild(warnText);
result.appendChild(warn);
} else {
list = ol.cloneNode(false);
propObj = data.prop;
currentStyle = getComputedStyle(node, pseudo);
Object.keys(propObj).forEach(function (prop, idx) {
var item = li.cloneNode(false);
var val = propObj[prop];
var currentVal = currentStyle.getPropertyValue(prop);
var resultText;
var text;
if(val === currentVal) {
item.className += " passed";
item.style.color = "limegreen";
} else {
item.className += " failed";
item.style.color = "tomato";
}
resultText = prop + ": \"" + val + "\" === \"" + currentVal + "\"";
text = document.createTextNode(resultText);
item.appendChild(text);
list.appendChild(item);
});
result.appendChild(list);
}
container.appendChild(result);
});
document.body.appendChild(container);
}
window.styleMatchTester = check;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment