styleMatchTester.js

index.html

<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>

style-match-tester.js

(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;
})();