Skip to content

Instantly share code, notes, and snippets.

@jantimon
Last active November 21, 2018 09:49
Show Gist options
  • Save jantimon/d43adf6b3d1f97dcec7e818d5187bc85 to your computer and use it in GitHub Desktop.
Save jantimon/d43adf6b3d1f97dcec7e818d5187bc85 to your computer and use it in GitHub Desktop.
Codepen for Responsive Tests
//https://codepen.io/anon/pen/XyVQyp
setUpTestEnvironment();
console.log('Test', 500)
setViewportSize(500);
assert.equal(meassureElementWidth('.content'), 500)
console.log('Test', 1400)
setViewportSize(1400);
assert.equal(meassureElementWidth('.content'), 1400)
function setUpTestEnvironment(callback) {
window.assert = window.chai.assert;
const css = Array.prototype.map
.call(document.querySelectorAll("style.cp-pen-styles"), style => {
return style.innerHTML;
})
.join("\n");
const html =
"<style>" +
css +
"</style>" +
Array.prototype.map
.call(document.querySelectorAll("body > *:not(script)"), child => {
return child.outerHTML;
})
.join("\n");
const iframe = document.createElement("iframe");
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.border = "none";
document.documentElement.style.height = "100%";
document.body.style.height = "100%";
document.body.innerHTML = "";
document.body.appendChild(iframe);
iframe.contentWindow.document.body.innerHTML = html
}
function setViewportSize(size) {
document.querySelector("iframe").style.maxWidth = size ? size + "px" : "";
}
function meassureElementWidth(selector) {
const elem = document.querySelector("iframe").contentDocument.querySelector(selector);
return elem ? elem.offsetWidth : 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment