JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
Before <span id="sample" style="font-family: monospace; -webkit-user-select:none">Test</span> After
</div>
<script>
// svg/dynamic-updates tests set enablePixelTesting=true, as we want to dump text + pixel results
if (self.testRunner)
testRunner.dumpAsText(self.enablePixelTesting);
var description, debug, successfullyParsed, errorMessage;
(function() {
function getOrCreate(id, tagName)
{
var element = document.getElementById(id);
if (element)
return element;
element = document.createElement(tagName);
element.id = id;
var refNode;
var parent = document.body || document.documentElement;
if (id == "description")
refNode = getOrCreate("console", "div");
else
refNode = parent.firstChild;
parent.insertBefore(element, refNode);
return element;
}
description = function description(msg, quiet)
{
// For MSIE 6 compatibility
var span = document.createElement("span");
if (quiet)
span.innerHTML = '<p>' + msg + '</p><p>On success, you will see no "<span class="fail">FAIL</span>" messages, followed by "<span class="pass">TEST COMPLETE</span>".</p>';
else
span.innerHTML = '<p>' + msg + '</p><p>On success, you will see a series of "<span class="pass">PASS</span>" messages, followed by "<span class="pass">TEST COMPLETE</span>".</p>';
var description = getOrCreate("description", "p");
if (description.firstChild)
description.replaceChild(span, description.firstChild);
else
description.appendChild(span);
};
debug = function debug(msg)
{
var span = document.createElement("span");
getOrCreate("console", "div").appendChild(span); // insert it first so XHTML knows the namespace
span.innerHTML = msg + '<br />';
};
var css =
".pass {" +
"font-weight: bold;" +
...