<!doctype html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script type="text/javascript">
var formOwner;
function hasFormOwner(shouldHaveOwner, haveIt, event)
{
formOwner = haveIt || "not defined";
debug("Testing " + event.target.tagName);
if (shouldHaveOwner)
shouldBeEqualToString("formOwner", "defined");
else
shouldBeEqualToString("formOwner", "not defined");
}
</script>
</head>
<body>
<div style="display: none;">
<form id=topForm>
<label form=topForm onerror="" onclick="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"><input type="button"/></label>
<!-- Form-associated elements per http://whatwg.org/specs/web-apps/current-work/#form-associated-element -->
<button onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></button>
<fieldset onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></fieldset>
<input type=radio onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"/>
<input type=number onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"/>
<label onerror="" onclick="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"><input type="button"/></label>
<object onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></object>
<select onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></select>
<textarea onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></textarea>
<img onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></img>
<!-- Elements that aren't associated. -->
<option onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></option>
<div onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></div>
<a onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></a>
<p onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></p>
</form>
<!-- Elements that associated by 'form' reference rather than ancestor. -->
<input form=topForm type="number" onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"/>
<object form=topForm onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></object>
<select form=topForm onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></select>
<pre form=topForm onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></pre>
<span form=topForm onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></span>
<img form=topForm onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></img>
<!-- Elements associated to a unclosed <form> by the HTML parser -->
<div id="willBeRemoved">
<div><form id="form2"></div>
<input name="input1">
<img name="image1">
</div>
<input name="input-in-document">
<select name="select-in-document"></select>
<img name="image-in-document">
</div>
<script>
description("Verify that only elements that are 'form associatable' get a form owner.");
var elements;
function testFormAssociation()
{
document.forms[0].canary = "defined";
elements = document.querySelectorAll("*[onerror]");
shouldBeTrue("elements.length > 0");
for (var i = 0; i < elements.length; ++i) {
// <label/> won't handle 'error', use 'click'.
var eventType = (elements[i] instanceof HTMLLabelElement) ? "click" : "error";
elements[i].dispatchEvent(new MouseEvent(eventType));
}
}
testFormAssociation();
debug("");
debug("Tests for association-by-parser:");
var form2 = document.querySelector("#form2");
shouldBeDefined("form2['input1']");
shouldBeDefined("form2['image1']");
shouldBeDefined("form2['input-in-document']");
shouldBeDefined("form2['image-in-document']");
var removed = document.querySelector("#willBeRemoved");
removed.parentNode.removeChild(removed);
debug("Detach a form, input1 and image1 from the document");
shouldBeDefined("form2['input1']");
shouldBeDefined("form2['image1']");
shouldBeUndefined("form2['input-in-document']");
shouldBeUndefined("form2['image-in-document']");
debug("Association-by-parser should not work for non-Document trees");
removed.innerHTML = "<table><form><tr><td><input><object></object><img name='image4'></td></tr></form>";
shouldBeUndefined("removed.querySelector('form')['image4']");
shouldBeNull("removed.querySelector('input').form");
shouldBeNull("removed.querySelector('object').form");
</script>
</body>
</html>
Codebase Browser
chromium