<html>
<head>

<script language="JavaScript">
function setBlock() {
	var el = document.getElementById("block");
	el.style.display="block";
}
function setOutline() {
	var el = document.getElementById("outline");
	el.style.outline="2px solid red";
}
function setSpan() {
	var newChild = document.createElement("span");
	newChild.setAttribute("id", "outline");
	var aSpan = document.createElement("span");
	aSpan.setAttribute("id", "block");
	newChild.appendChild(aSpan);
	var oldChild = document.body.firstChild;
	document.body.replaceChild(newChild, oldChild);
}
</script>

</head>

<body><span id="outline">
	<span id="block">A span-element</span>
</span>

<h4>Instructions</h4>
<p>Click the following buttons.</p>
<ol>
<li>Start with the outmost left one.</id>
<li>Click the middle one.</li>
<li>(The ouline will not be updated correctly.)
<li>Click the right button.</li>
<li>This will crash Safari 1.3 (v176 and v170, no other configurations tested).</li>
<li>The combination 2. 1. 3. will also crash Safari.</li>
<li>1. 3. will not crash Safari. (But the outline should vanish. Shouldn't it?)</li>
<li>2. 3. will not crash Safari either.</li>

<script>
    setOutline();
</script>
<script>
    setBlock();
</script>
<script>
    setSpan();
</script>

<input type="button" value="1. Set outline property" onclick="setOutline()" />
<input type="button" value="2. Set display property" onclick="setBlock()" />
<input type="button" value="3. Replace span-element" onclick="setSpan()" />
</body>

</html>