Codepen for Responsive Tests

responsiveTests.js

//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;
}