third_party/WebKit/LayoutTests/fast/forms/form-associated-element.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <script type="text/javascript">
   6 var formOwner;
   7 function hasFormOwner(shouldHaveOwner, haveIt, event)
   8 {
   9     formOwner = haveIt || "not defined";
  10     debug("Testing " + event.target.tagName);
  11     if (shouldHaveOwner)
  12         shouldBeEqualToString("formOwner", "defined");
  13     else
  14         shouldBeEqualToString("formOwner", "not defined");
  15 }
  16 </script>
  17 </head>
  18 <body>
  19 <div style="display: none;">
  20 <form id=topForm>
  21 <label form=topForm onerror="" onclick="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"><input type="button"/></label>
  22 <!-- Form-associated elements per http://whatwg.org/specs/web-apps/current-work/#form-associated-element -->
  23 <button onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></button>
  24 <fieldset onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></fieldset>
  25 <input type=radio onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"/>
  26 <input type=number onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"/>
  27 <keygen keytype=rsa onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></keygen>
  28 <label onerror="" onclick="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"><input type="button"/></label>
  29 <object onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></object>
  30 <select onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></select>
  31 <textarea onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></textarea>
  32 <img onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></img>
  33
  34 <!-- Elements that aren't associated. -->
  35 <option onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></option>
  36 <div onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></div>
  37 <a onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></a>
  38 <p onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></p>
  39 </form>
  40
  41 <!-- Elements that associated by 'form' reference rather than ancestor. -->
  42 <input form=topForm type="number" onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"/>
  43 <keygen form=topForm keytype=rsa onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></keygen>
  44 <object form=topForm onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></object>
  45 <select form=topForm onerror="hasFormOwner(true, typeof canary !== 'undefined' && canary, event);"></select>
  46 <pre form=topForm onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></pre>
  47 <span form=topForm onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></span>
  48 <img form=topForm onerror="hasFormOwner(false, typeof canary !== 'undefined' && canary, event);"></img>
  49
  50 <!-- Elements associated to a unclosed <form> by the HTML parser -->
  51 <div id="willBeRemoved">
  52 <div><form id="form2"></div>
  53 <input name="input1">
  54 <img name="image1">
  55 </div>
  56 <input name="input-in-document">
  57 <select name="select-in-document"></select>
  58 <img name="image-in-document">
  59
  60 </div>
  61 <script>
  62 description("Verify that only elements that are 'form associatable' get a form owner.");
  63
  64 var elements;
  65 function testFormAssociation()
  66 {
  67    document.forms[0].canary = "defined";
  68    elements = document.querySelectorAll("*[onerror]");
  69    shouldBeTrue("elements.length > 0");
  70    for (var i = 0; i < elements.length; ++i) {
  71         // <label/> won't handle 'error', use 'click'.
  72         var eventType = (elements[i] instanceof HTMLLabelElement) ? "click" : "error";
  73         elements[i].dispatchEvent(new Event(eventType));
  74    }
  75 }
  76 testFormAssociation();
  77
  78 debug("");
  79 debug("Tests for association-by-parser:");
  80 var form2 = document.querySelector("#form2");
  81 shouldBeDefined("form2['input1']");
  82 shouldBeDefined("form2['image1']");
  83 shouldBeDefined("form2['input-in-document']");
  84 shouldBeDefined("form2['image-in-document']");
  85 var removed = document.querySelector("#willBeRemoved");
  86 removed.parentNode.removeChild(removed);
  87 debug("Detach a form, input1 and image1 from the document");
  88 shouldBeDefined("form2['input1']");
  89 shouldBeDefined("form2['image1']");
  90 shouldBeUndefined("form2['input-in-document']");
  91 shouldBeUndefined("form2['image-in-document']");
  92
  93 debug("Association-by-parser should not work for non-Document trees");
  94 removed.innerHTML = "<table><form><tr><td><input><object></object><img name='image4'></td></tr></form>";
  95 shouldBeUndefined("removed.querySelector('form')['image4']");
  96 shouldBeNull("removed.querySelector('input').form");
  97 shouldBeNull("removed.querySelector('object').form");
  98
  99 </script>
 100 </body>
 101 </html>