markup-generator.html (5529B)
1 <!doctype html> 2 <link rel="stylesheet" href="../support/base.css" /> 3 <aside style="position:absolute"><!-- THIS IS WHERE WE RUN THE EXPERIMENTS --></aside> 4 <main><textarea style="display: none; width: 100%"></textarea><script> 5 6 var textarea = document.querySelector('textarea'); 7 var testingBorderAttributes = true; 8 var seed = 0; 9 10 // This is not meant to be a good random number generator; I literally don't care 11 function XorshiftMath(seed) { 12 var x = 1; 13 var y = 2; 14 var z = 3; 15 var w = seed|0; 16 this.random = function random() { 17 var t = x; 18 t ^= t << 11; 19 t ^= t >> 8; 20 x = y; y = z; z = w; 21 w ^= w >> 19; 22 w ^= t; 23 return (w%1024)/1024; 24 } 25 } 26 27 var rndGen = new XorshiftMath(seed); 28 function rnd(x) { 29 return x > rndGen.random(); 30 } 31 function pickInList(list) { 32 var i = list.length; while(i>1 && rnd(1/i)) { i--; } 33 return list[i-1]; 34 } 35 36 function generateMarkup(root) { 37 if(rnd(0.99)) { 38 39 // 40 // the table has a <table> element 41 // 42 var table = document.createElement('table'); 43 44 // 45 if(testingBorderAttributes) { 46 if(rnd(0.3)) { table.setAttribute('border',pickInList(['0','10','yes'])); } 47 if(rnd(0.3)) { table.setAttribute('frame',pickInList(['box','vsides','none'])); } 48 if(rnd(0.3)) { table.setAttribute('rules',pickInList(['all','rows','groups'])); } 49 table.setAttribute("cellspacing","0"); 50 } 51 52 53 generateRowGroups(table); 54 root.appendChild(table); 55 56 } else { 57 58 // 59 // the table has no <table> element 60 // 61 62 generateRowGroup(root); 63 64 } 65 } 66 67 function generateRowGroups(root) { 68 if(rnd(0.5)) { 69 70 generateRowGroup(root); 71 while(rnd(0.25)) { 72 generateRowGroup(root); 73 } 74 75 } else { 76 77 generateRows(root); 78 79 } 80 } 81 82 function generateRowGroup(root) { 83 84 var tbody; if(rnd(0.7)) { 85 tbody = document.createElement('tbody'); 86 } else if (rnd(0.5)) { 87 tbody = document.createElement('thead'); 88 } else { 89 tbody = document.createElement('tfoot'); 90 } 91 92 generateRows(tbody); 93 root.appendChild(tbody); 94 95 } 96 97 function generateRows(root) { 98 99 while(rnd(0.9)) { 100 if(rnd(0.9)) { 101 generateRow(root); 102 } else { 103 generateCells(root); 104 } 105 } 106 107 } 108 109 function generateRow(root) { 110 111 var tr = document.createElement('tr'); 112 generateCells(tr); 113 root.appendChild(tr); 114 115 } 116 117 function generateCells(root) { 118 119 while(rnd(0.9)) { 120 if(rnd(0.9)) { 121 generateCell(root); 122 } else { 123 generateCellContent(root); 124 } 125 } 126 127 } 128 129 function generateCell(root) { 130 131 var td = document.createElement( rnd(0.9) ? 'td' : 'th' ); 132 generateCellContent(td); 133 root.appendChild(td); 134 135 } 136 137 function generateCellContent() { 138 // for now, do nothing 139 } 140 141 for(var i = 10; i--;) { 142 //document.write("<textarea style='width: 100%; display: none'>"); 143 var div = document.createElement('div'); 144 generateMarkup(div); 145 appendReportFor(div); 146 //document.write(div.innerHTML); 147 //document.write("</textarea>"); 148 } 149 150 if(navigator.userAgent.indexOf("Edge") == -1) { 151 var downloadLink = document.createElement('a'); 152 downloadLink.setAttribute("download","report.txt"); 153 downloadLink.href = "data:," + escape(textarea.value); 154 downloadLink.textContent = "download"; 155 document.body.appendChild(downloadLink); 156 } 157 158 function appendReportFor(markup) { 159 var report = markup.innerHTML + '\r\n\r\n'; 160 161 // 162 // append markup to the dom 163 // 164 var root = document.querySelector('aside'); 165 root.innerHTML = ''; 166 root.appendChild(markup); 167 168 // 169 // output box stats 170 // 171 var boxes = markup.getElementsByTagName("*"); 172 for(var i = 0; i<boxes.length; i++) { 173 174 var box = boxes[i]; 175 report += '' + i + ': ' + box.tagName + '\r\n'; 176 report += 'offsetWidth: ' + box.offsetWidth + '\r\n'; 177 report += 'offsetHeight: ' + box.offsetHeight + '\r\n'; 178 report += 'offsetLeft: ' + box.offsetLeft + '\r\n'; 179 report += 'offsetTop: ' + box.offsetTop + '\r\n'; 180 report += 'borderTopWidth: ' + getComputedStyle(box).borderTopWidth + '\r\n'; 181 report += 'borderTopStyle: ' + getComputedStyle(box).borderTopStyle + '\r\n'; 182 report += 'borderTopColor: ' + getComputedStyle(box).borderTopColor + '\r\n'; 183 report += 'borderLeftWidth: ' + getComputedStyle(box).borderLeftWidth + '\r\n'; 184 report += 'borderLeftStyle: ' + getComputedStyle(box).borderLeftStyle + '\r\n'; 185 report += 'borderLeftColor: ' + getComputedStyle(box).borderLeftColor + '\r\n'; 186 report += '\r\n'; 187 188 } 189 190 report += '\r\n'; 191 report += '=====================================================================\r\n'; 192 report += '\r\n'; 193 194 textarea.value += report; 195 196 root.innerHTML = ''; 197 198 } 199 200 </script></main>