FremyCompany/table-replaced-elements.html Secret

## table-replaced-elements.html
<!doctype html>

<div id=sources style="display: none">
	<input type=file />
	<input type=button />
	<img width=32 height=32 src="http://w3.org/favicon.ico" />
	<input type=text />
</div>

<div style="height: 100px; overflow: hidden; overflow-y: scroll;">
	<div id=test1 style="display: table"></div>
</div>

<script>

	var test1 = document.querySelector("#test1");
	//var test2 = document.querySelector("#test2");

	var sources = document.querySelector('div').children;
	var displayValues = ['table', 'inline-table', 'table-row-group', 'table-row', 'table-column', 'table-cell'].reverse();

	function writeTable(test1) {
		document.write('<table>')
		document.write('<tr>');
		document.write('<th>');
		document.write('/');
		document.write('</th>');
		for(var j = displayValues.length; j--;) {
			var displayValue = displayValues[j];
			document.write('<th>');
			document.write(displayValue);
			document.write('</th>');
		}
		document.write('</tr>');
		for(var i = sources.length; i--;) {
			var source = sources[i];
			document.write('<tr>');
			document.write('<th>');
			document.write(source.nodeName.toLowerCase() + (source.type ? " " + source.type : ''));
			document.write('</th>');
			for(var j = displayValues.length; j--;) {
				var displayValue = displayValues[j];
				var el = source.cloneNode(false);
				el.style.display = displayValue;
				test1.innerHTML='';
				test1.appendChild(el);
				test1.appendChild(el.cloneNode(false));
				document.write('<td onclick="test1.innerHTML = unescape(\''+escape(test1.innerHTML)+'\')">');
				document.write(test1.firstChild.offsetLeft == test1.lastChild.offsetLeft ? 'block' : 'inline');
				document.write('</td>');
			}
			document.write('</tr>');
		}
		document.write('</table>');
	}

	writeTable(test1);
	//writeTable(test2);

</script>
	<!doctype html>

	<div id=sources style="display: none">
	<input type=file />
	<input type=button />
	<img width=32 height=32 src="http://w3.org/favicon.ico" />
	<input type=text />
	</div>

	<div style="height: 100px; overflow: hidden; overflow-y: scroll;">
	<div id=test1 style="display: table"></div>
	</div>

	<script>

	var test1 = document.querySelector("#test1");
	//var test2 = document.querySelector("#test2");

	var sources = document.querySelector('div').children;
	var displayValues = ['table', 'inline-table', 'table-row-group', 'table-row', 'table-column', 'table-cell'].reverse();

	function writeTable(test1) {
	document.write('<table>')
	document.write('<tr>');
	document.write('<th>');
	document.write('/');
	document.write('</th>');
	for(var j = displayValues.length; j--;) {
	var displayValue = displayValues[j];
	document.write('<th>');
	document.write(displayValue);
	document.write('</th>');
	}
	document.write('</tr>');
	for(var i = sources.length; i--;) {
	var source = sources[i];
	document.write('<tr>');
	document.write('<th>');
	document.write(source.nodeName.toLowerCase() + (source.type ? " " + source.type : ''));
	document.write('</th>');
	for(var j = displayValues.length; j--;) {
	var displayValue = displayValues[j];
	var el = source.cloneNode(false);
	el.style.display = displayValue;
	test1.innerHTML='';
	test1.appendChild(el);
	test1.appendChild(el.cloneNode(false));
	document.write('<td onclick="test1.innerHTML = unescape(\''+escape(test1.innerHTML)+'\')">');
	document.write(test1.firstChild.offsetLeft == test1.lastChild.offsetLeft ? 'block' : 'inline');
	document.write('</td>');
	}
	document.write('</tr>');
	}
	document.write('</table>');
	}

	writeTable(test1);
	//writeTable(test2);

	</script>