<html>
<body>
<script>
var docToAppendTo;
function addTextarea(properties, opt_innerHTML) {
    var title = docToAppendTo.createTextNode();
    title.nodeValue = ''; 
    var wrapper = docToAppendTo.createElement('div');
    wrapper.style.cssText = 'display:inline-block;border:1px solid blue;font-size:12px;';
    var textarea = docToAppendTo.createElement('textarea');
    for (property in properties) {
        var value = properties[property];
        title.nodeValue += property + ': "' + value + '", ';
        if (property == 'wrap')
            textarea.setAttribute(property, value);
        else if (property == 'style')
            textarea.style.cssText = value;
        else
            textarea[property] = value;
    }
    textarea.innerHTML = opt_innerHTML ||
        'Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv';

    var span = document.createElement('span');
    span.style.cssText = 'display:inline-block;width:80px;';
    span.appendChild(title);
    wrapper.appendChild(span);
    wrapper.appendChild(document.createElement('br'));
    wrapper.appendChild(textarea)
    docToAppendTo.body.appendChild(wrapper);
}

function addAllTextareas(iframe, compatMode) {
    iframe.style.cssText = 'width:100%;border:0;'
    docToAppendTo = iframe.contentWindow.document;
    
    docToAppendTo.body.style.cssText = 'margin:0';

    if (docToAppendTo.compatMode != compatMode)
        testFailed('This document should be in ' + compatMode + ' mode.');

    var compatModeTitle = docToAppendTo.createElement('div');
    compatModeTitle.innerHTML = 'CompatMode: ' + docToAppendTo.compatMode;
    compatModeTitle.style.cssText = 'margin:5px 0;font-weight:bold;';
    docToAppendTo.body.appendChild(compatModeTitle);
    
    addTextarea({}, 'Lorem ipsum dolor');
    addTextarea({disabled: 'true'});
    addTextarea({style: 'padding:10px'});
    addTextarea({style: 'padding:0px'});
    addTextarea({style: 'margin:10px'});
    addTextarea({style: 'margin:0px'});
    addTextarea({style: 'width:60px'});
    addTextarea({style: 'width:60px; padding:20px'});
    addTextarea({style: 'width:60px; padding:0'});
    addTextarea({style: 'height:60px'});
    addTextarea({style: 'width:60px; height:60px'});
    addTextarea({style: 'overflow:hidden'});
    addTextarea({style: 'overflow:scroll'});
    addTextarea({style: 'overflow:hidden; width:60px; height:60px'});
    addTextarea({style: 'overflow:scroll; width:60px; height:60px'});
    addTextarea({cols: 5, style: 'width:60px; height:60px'});
    addTextarea({rows: 4, style: 'width:60px; height:60px'});
    addTextarea({cols: 5, rows: 4, style: 'width:60px; height:60px'});
    addTextarea({cols: 3});
    addTextarea({rows: 3});
    addTextarea({cols: 7});
    addTextarea({rows: 7});
    addTextarea({cols: 5, rows: 4});
    addTextarea({wrap: 'off'});
    addTextarea({wrap: 'hard'});
    addTextarea({wrap: 'soft'});
    
    iframe.style.height = docToAppendTo.body.offsetHeight + 5 + 'px';
}

// Set the domain in the top-level page as well as the iframe.
// So they can communicate despite use of the data url.
document.domain = 'mydummydomain';
document.body.style.margin = 0;

var standardsIframe = document.createElement('iframe');
// Create a page with a doctype so it's standards mode.
standardsIframe.src = 'data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%3E%3Cbody%3E%3Cscript%3Edocument.domain%20%3D%20"mydummydomain"%3B%3C%2Fbody%3E%3C%2Fhtml%3E%0D%0A';
standardsIframe.onload = function(e) {
    addAllTextareas(e.target, 'CSS1Compat');
}
document.body.appendChild(standardsIframe);

var quirksIframe = document.createElement('iframe');
quirksIframe.onload = function(e) {
    addAllTextareas(e.target, 'BackCompat');
}
document.body.appendChild(quirksIframe);
</script>
</body>
</html>