<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>
Codebase Browser
chromium