<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>

<form>
<span id="testSpan">
<img id="1" name="imageElement">
</span>
</form>

<div id="console"></div>
<script>
function debugLog(s) {
    var console = document.getElementById("console");
    console.appendChild(document.createTextNode(s));
    console.appendChild(document.createElement("br"));
}

var form = document.forms[0];
var span = document.getElementsByTagName('span')[0];
shouldBe("form.imageElement.id", "'1'");

span.innerHTML = "<img id='2' name='imageElement'>";
shouldBe("form.imageElement.id", "'2'");
shouldBe("form.imageElement.name = 'foo'; form.foo.id", "'2'");
shouldBe("form.imageElement", "form.foo");

span.innerHTML = "<img id='2' name='newImage'>";
shouldBeFalse("!!form.imageElement");

// This quirk has no bearing on document. access
shouldBeUndefined("document.imageElement");

// Of coruse, the new image should be accessible both ways.
shouldBeTrue("!!document.newImage");
shouldBeTrue("!!form.newImage");

// However, if you never access an image element by name it does not stick around after being removed:
span.innerHTML = "<img id='3' name='thirdImage'>";
span.innerHTML = "<img id='4' name='fourthImage'>";
shouldBeUndefined("form.thirdImage");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>