<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body onload="setTimeout(runTest, 1)">
<p>Test to NOT save state of a detached form control.</p>
<div id="console"></div>

<input id=emptyOnFirstVisit>
<form action="../../resources/back.html" id=form1>
<input name=user id=input2>
</form>

<script>
window.jsTestIsAsync = true;
var i1;

function runTest()
{
    var form1 = document.getElementById('form1');
    var state = document.getElementById('emptyOnFirstVisit');
    if (!state.value) {
        // First visit.
        state.value = 'visited';

        form1.innerHTML = '<input name=user id=input1>';
        i1 = document.getElementById('input1');
        i1.value = 'value1';
        form1.removeChild(i1);
        // Submit form in a timeout to make sure that we create a new back/forward list item.
        setTimeout(function() {document.getElementById('form1').submit();}, 0);
    } else {
        // Second visit.
        shouldBe('document.getElementById("input2").value', '""'); // Not 'value1'.
        finishJSTest();
    }
 }
</script>
</body>
</html>