This gist documents the setup I used to run visual diffs on the MDC Web demo pages for testing Currently it does nothing beyond take screenshots of the pages as they appear initially (i.e. it's probably not very useful for e.g. drawer demos). It should be feasible to do more on a per-case basis if we want.

This process currently doesn't directly access files from a material-components-web checkout at all, so really this should be usable for testing other front-end projects as well (just change urls.txt).

View test.html
<!DOCTYPE html>
var dojoConfig = {
async: true,
baseUrl: "",
tlmSiblingOfDojo: false
View forDocument.ts
function forDocument(ownerDocument: Document) {
return lang.partial(this, ownerDocument);
var byId:{
(ownerDocument: Document, id: string);
forDocument: (ownerDocument: Document) => (id: string) => Node;
} = <any> function (ownerDocument, id) {
return ownerDocument.getElementById(id);
View store.css
/* Discovery Queue should DIAFplzkthx */
.discovery_queue_ctn {
display: none !important;
View spot-bookmarklet.txt{function a(a,b){for(var d,c=document.styleSheets,e=0,f=c.length;f>e;e++)if((!b||c[e].href&&-1!==c[e].href.indexOf(b))&&(d=c[e].cssRules,d&&d.length))for(var g=d.length;g--;)d[g].selectorText&&a(d[g].selectorText)}function b(a,c){c||a(document.documentElement);for(var d=(c||document.documentElement).children,e=0,f=d.length;f>e;e++)a(d[e]),b(a,d[e])}function c(a){var b={},c=getComputedStyle(a);for(var d in c)isNaN(d)&&"function"!=typeof c[d]&&(b[d]=c[d]);return b}function d(a,b){var c=Object.keys(a);if(c.length!==Object.keys(b).length)return!1;for(var d=c.length;d--;)if(a[c[d]]!==b[c[d]])return!1;return!0}return{unusedClasses:function(){var a=Array.prototype.slice,e={},f=[];b(function(b){if(b.className){var g,h,;g=c(b);for(var i=f.length;i--;)h=f[i],e[h]||(b.classList.remove(h),e[h]=!d(g,c(b)),b.classList.add(h))}});for(var g in e)e[g]===!1&&f.push(g);return f},unusedSelectors:function(b){var c={};return a(function(a){document.querySelector(a)||(c[a]=!0)},b
View metalsmith-symbolset.js
View MoreMixin.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="../../dojo/resources/dojo.css">
<link rel="stylesheet" href="../../dgrid/css/skins/claro.css">
#list {
border: none;
height: auto;
View enterUp.js
function enterUp(node, listener) {
return on(node, "keyup", function(evt) {
if (evt.keyCode === 13) {, evt);
// Usage with dojo/on: on(element, enterUp, ...)
// Usage with dgrid editor: editor({ editOn: enterUp, ... })
View findDep.js
function findDep(depid) {
return Object.keys(require.modules).map(function(mid) {
return require.modules[mid];
}).filter(function(m) {
return m.deps && {
return dep.mid;
}).indexOf(depid) > -1;
}).map(function(m) {
return m.mid;
View test.html
<!DOCTYPE html>
#hierarchyTree {
height: 200px;
#hierarchyTree .dgrid-cell {
width: 100px;