<html>
<head>
<style>
pre {
    margin: 0.1em;
    text-rendering:optimizeLegibility;
}
</style>
<script>

function setupBlock(description, style)
{
    var descriptionBlock = document.createElement("b");
    descriptionBlock.innerHTML = description;
    document.body.appendChild(descriptionBlock);

    var block = document.createElement("div");
    if (style)
        block.setAttribute("style", style);
    block.innerHTML = document.getElementById("template").innerHTML;
    document.body.appendChild(block);
    return block;
}

function test()
{

    setupBlock("Default tab size (8).", null);
    setupBlock("Tab size = -10, should fall back to the default.", "tab-size: -10;");
    setupBlock("Tab size = 2.", "tab-size: 2;");

    var dynamicBlock = setupBlock("Tab size becomes 2 dynamically.", null);

    if (window.testRunner)
        testRunner.waitUntilDone();
    window.setTimeout(function() {
        dynamicBlock.style.setProperty("tab-size", "2");
        if (window.testRunner)
            testRunner.notifyDone();
    }, 0);
}
</script>
</head>
<body onload="test();">
<div id="template" style="display:none;">
<pre>&Tab;x</pre>
<pre>&Tab;&Tab;x</pre>
<pre>&Tab;x&Tab;x</pre>
<pre>xx&Tab;xx&Tab;x</pre>
<pre>xxxxxxxxx&Tab;xx&Tab;x</pre>
</div>

</body>
</html>