expanding textareas scrolling test case

HTML

<script src="https://raw.github.com/bgrins/ExpandingTextareas/master/expanding.js"></script>
<div id="works"><textarea class="expanding" style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius enim sit amet nisl consectetur mattis. Mauris cursus volutpat tincidunt. Morbi mi purus, interdum ut tempus vel, auctor consectetur enim. In non nibh orci. Nunc tempus rutrum lectus, id bibendum justo porta sed. Etiam vitae diam orci. Aliquam eu erat urna, ac bibendum felis. Vivamus pellentesque nibh eu lacus semper placerat. Donec molestie tellus non est rhoncus rhoncus. Sed sit amet mi at est elementum posuere non ac leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ut nibh nec felis aliquam fermentum. Nunc sit amet nunc ligula. Cras blandit suscipit enim.

Nam adipiscing arcu a elit tincidunt ac venenatis risus aliquet. Nam sed felis tellus, at dignissim eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In tempus neque nec purus aliquam tincidunt. Donec orci nunc, pharetra suscipit luctus consequat, fringilla porta urna. Aliquam nisl dui, dapibus feugiat accumsan quis, suscipit vel libero. Nam nisl lectus, interdum sit amet blandit vitae, eleifend nec felis. Vestibulum porttitor tempor porta. Fusce sed felis et dui scelerisque molestie nec ac purus. Phasellus consectetur nibh ornare lorem facilisis id tincidunt nisl malesuada.
    </textarea></div>

<hr/>

<div id="hasbars"><textarea class="expanding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius enim sit amet nisl consectetur mattis. Mauris cursus volutpat tincidunt. Morbi mi purus, interdum ut tempus vel, auctor consectetur enim. In non nibh orci. Nunc tempus rutrum lectus, id bibendum justo porta sed. Etiam vitae diam orci. Aliquam eu erat urna, ac bibendum felis. Vivamus pellentesque nibh eu lacus semper placerat. Donec molestie tellus non est rhoncus...

CSS

#works textarea, #works .textareaClone {
    width: 320px;
}

#hasbars textarea, #hasbars .textareaClone {
    width: 360px;
}

textarea { z-index:-1; }
pre { z-index: 10; color: red; }
#i {
   padding: 1em;
   margin: 1em; 
}

JavaScript

function show_dims(ta) {
    var container = ta.parent(), 
       pre = container.find("pre"),
       div = $("#i");
    
    div.append("Dimensions (pixels): <br/>"
             + "pre: "
                + pre.width()
                + " x "
                + pre.height()
             + "<br/>"
             + "container: "
               + container.width()
               + " x "
               + container.height()
             + "<br/>"
             + "textarea: "
               + ta.width()
               + " x "
               + ta.height()
             + "<br/>"
            );  
}

$(function () {
    $("#i").append("<u>Working textarea</u><br/>");
    show_dims($("#works textarea"));
    $("#i").append("<br/><u>Textarea with scrollbars</u><br/>");
    show_dims($("#hasbars textarea"));
    
    $("pre").css("visibility", "visible");
});

$("#hasbars textarea").click(function () {
    // What might we need to do to text for scrollbars or fix this?
    var textarea = $(this),
        container = textarea.parent(),
        pre = container.find("pre");

    // this doesn't actually do anything useful :)
    container.width(container.width() + 1);
    $("#i").append("<br/><u>FIXED textarea w/ scrollbars</u><br/>");
    show_dims($("#hasbars textarea"));
});