JSFiddle - React, Tailwind, and code Playground

by smnh

HTML

<script src="http://code.jquery.com/qunit/qunit-1.13.0.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="output-header">Log</div>
<div id="output"></div>

CSS

/*!
 * QUnit 1.17.1
 * http://qunitjs.com/
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2015-01-20T19:39Z
 */

/** Font Family and Sizes */

#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}

#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }


/** Resets */

#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
	margin: 0;
	padding: 0;
}


/** Header */

#qunit-header {
	padding: 0.5em 0 0.5em 1em;

	color: #8699A4;
	background-color: #0D3349;

	font-size: 1.5em;
	line-height: 1em;
	font-weight: 400;

	border-radius: 5px 5px 0 0;
}

#qunit-header a {
	text-decoration: none;
	color: #C2CCD1;
}

#qunit-header a:hover,
#qunit-header a:focus {
	color: #FFF;
}

#qunit-testrunner-toolbar label {
	display: inline-block;
	padding: 0 0.5em 0 0.1em;
}

#qunit-banner {
	height: 5px;
}

#qunit-testrunner-toolbar {
	padding: 0.5em 1em 0.5em 1em;
	color: #5E740B;
	background-color: #EEE;
	overflow: hidden;
}

#qunit-userAgent {
	padding: 0.5em 1em 0.5em 1em;
	background-color: #2B81AF;
	color: #FFF;
	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}

#qunit-modulefilter-container {
	float: right;
	padding: 0.2em;
}

.qunit-url-config {
	display: inline-block;
	padding: 0.1em;
}

.qunit-filter {
	display: block;
	float: right;
	margin-left: 1em;
}

/** Tests: Pass/Fail */

#qunit-tests {
	list-style-position: inside;
}

#qunit-tests li {
	padding: 0.4em 1em 0.4em 1em;
	border-bottom: 1px solid #FFF;
	list-style-position: inside;
}

#qunit-tests > li {
	display: none;
}

#qunit-tests li.running,
#qunit-tests li.pass,
#qunit-tests li.fail,
#qunit-tests li.skipped {
	display:...

JavaScript

var output = document.getElementById("output"), startTime = new Date().getTime();

QUnit.config.reorder = false;

function log(msg, cssText) {
    var div = document.createElement("div");
    if (cssText) {
        div.style.cssText = cssText;
    }
    msg = timeDiff() + msg;
    div.innerHTML = msg;
    output.appendChild(div);
}

function timeDiff() {
    var timeDiff = "", sec, ms, diffTimeMs = new Date().getTime() - startTime;
    sec = parseInt(diffTimeMs / 1000);
    ms = diffTimeMs % 1000;
    timeDiff = "[" + sec + ":" + (new Array(4 - ms.toString().length).join("0")) + ms + "] ";
    return timeDiff;
}

function addEvent(elm, event, func) {
    if (elm.addEventListener) {
        log("addEventListener('" + event + "')");
        elm.addEventListener(event, func, false);
    } else if (elm.attachEvent) {
        log("attachEvent('on" + event + "')");
        elm.attachEvent("on" + event, func);
    } else {
        throw new Error("addEvent() was called in a context without event listener support");
    }
}

QUnit.asyncTest("Test 'scroll' event", function() {
    var fixture, wrapper, content, innerWrapper, innerContent, timeout = 200, scrollTimeout = null, wrapperScrollFired = false, innerWrapperScrollFired = false;

    log("Begin 'scroll' event test", "font-weight:bold; text-decoration:underline;");
    QUnit.expect(2);

    innerContent = document.createElement("div");
    innerContent.style.cssText = "height: 200px;";

    innerWrapper = document.createElement("div");
    innerWrapper.style.cssText = "position:absolute; width:100%; height:100%; overflow:hidden;";
    innerWrapper.appendChild(innerContent);

    content = document.createElement("div");
    content.style.cssText = "position:relative; width:100px; height:150px;";
    content.appendChild(innerWrapper);

    wrapper = document.createElement("div");
    wrapper.style.cssText = "position:absolute; top:0; left:0; width:100px; height:100px; overflow:hidden;";
   ...