markup-generator.html | Explore in Territory

<!doctype html>
<link rel="stylesheet" href="../support/base.css" />
<aside style="position:absolute"><!-- THIS IS WHERE WE RUN THE EXPERIMENTS --></aside>
<main><textarea style="display: none; width: 100%"></textarea><script>

    var textarea = document.querySelector('textarea');
    var testingBorderAttributes = true;
    var seed = 0;

    // This is not meant to be a good random number generator; I literally don't care
    function XorshiftMath(seed) {
        var x = 1;
        var y = 2;
        var z = 3;
        var w = seed|0;
        this.random = function random() {
            var t = x;
            t ^= t << 11;
            t ^= t >> 8;
            x = y; y = z; z = w;
            w ^= w >> 19;
            w ^= t;
            return (w%1024)/1024;
        }
    }

    var rndGen = new XorshiftMath(seed);
    function rnd(x) {
        return x > rndGen.random();
    }
    function pickInList(list) {
        var i = list.length; while(i>1 && rnd(1/i)) { i--; }
        return list[i-1];
    }

    function generateMarkup(root) {
        if(rnd(0.99)) {

            //
            // the table has a <table> element
            //
            var table = document.createElement('table');

            //
            if(testingBorderAttributes) {
                if(rnd(0.3)) { table.setAttribute('border',pickInList(['0','10','yes'])); }
                if(rnd(0.3)) { table.setAttribute('frame',pickInList(['box','vsides','none'])); }
                if(rnd(0.3)) { table.setAttribute('rules',pickInList(['all','rows','groups'])); }
                table.setAttribute("cellspacing","0");
            }


            generateRowGroups(table);
            root.appendChild(table);

        } else {

            //
            // the table has no <table> element
            //

            generateRowGroup(root);

        }
    }

    function generateRowGroups(root) {
        if(rnd(0.5)) {

            generateRowGroup(root);
            while(rnd(0.25)) {
                generateRowGroup(root);
            }

        } else {

            generateRows(root);

        }
    }

    function generateRowGroup(root) {

        var tbody; if(rnd(0.7)) {
            tbody = document.createElement('tbody');
        } else if (rnd(0.5)) {
            tbody = document.createElement('thead');
        } else {
            tbody = document.createElement('tfoot');
        }

        generateRows(tbody);
        root.appendChild(tbody);

    }

    function generateRows(root) {

        while(rnd(0.9)) {
            if(rnd(0.9)) {
                generateRow(root);
            } else {
                generateCells(root);
            }
        }

    }

    function generateRow(root) {

        var tr = document.createElement('tr');
        generateCells(tr);
        root.appendChild(tr);

    }

    function generateCells(root) {

        while(rnd(0.9)) {
            if(rnd(0.9)) {
                generateCell(root);
            } else {
                generateCellContent(root);
            }
        }

    }

    function generateCell(root) {

        var td = document.createElement( rnd(0.9) ? 'td' : 'th' );
        generateCellContent(td);
        root.appendChild(td);

    }

    function generateCellContent() {
        // for now, do nothing
    }

    for(var i = 10; i--;) {
        //document.write("<textarea style='width: 100%; display: none'>");
        var div = document.createElement('div');
        generateMarkup(div);
        appendReportFor(div);
        //document.write(div.innerHTML);
        //document.write("</textarea>");
    }

    if(navigator.userAgent.indexOf("Edge") == -1) {
        var downloadLink = document.createElement('a');
        downloadLink.setAttribute("download","report.txt");
        downloadLink.href = "data:," + escape(textarea.value);
        downloadLink.textContent = "download";
        document.body.appendChild(downloadLink);
    }

    function appendReportFor(markup) {
        var report = markup.innerHTML + '\r\n\r\n';

        //
        // append markup to the dom
        //
        var root = document.querySelector('aside');
        root.innerHTML = '';
        root.appendChild(markup);

        //
        // output box stats
        //
        var boxes = markup.getElementsByTagName("*");
        for(var i = 0; i<boxes.length; i++) {

            var box = boxes[i];
            report += '' + i + ': ' + box.tagName + '\r\n';
            report += 'offsetWidth: ' + box.offsetWidth + '\r\n';
            report += 'offsetHeight: ' + box.offsetHeight + '\r\n';
            report += 'offsetLeft: ' + box.offsetLeft + '\r\n';
            report += 'offsetTop: ' + box.offsetTop + '\r\n';
            report += 'borderTopWidth: ' + getComputedStyle(box).borderTopWidth + '\r\n';
            report += 'borderTopStyle: ' + getComputedStyle(box).borderTopStyle + '\r\n';
            report += 'borderTopColor: ' + getComputedStyle(box).borderTopColor + '\r\n';
            report += 'borderLeftWidth: ' + getComputedStyle(box).borderLeftWidth + '\r\n';
            report += 'borderLeftStyle: ' + getComputedStyle(box).borderLeftStyle + '\r\n';
            report += 'borderLeftColor: ' + getComputedStyle(box).borderLeftColor + '\r\n';
            report += '\r\n';

        }

        report += '\r\n';
        report += '=====================================================================\r\n';
        report += '\r\n';

        textarea.value += report;

        root.innerHTML = '';

    }

</script></main>
chromium/third_party/blink/web_tests/external/wpt/css/css-tables/tools/markup-generator.html
