dirname-only-if-applies.html (3323B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Submitting element directionality: the dirname attribute</title> 6 <link rel="author" title="Vincent Hilla" href="mailto:vhilla@mozilla.com"> 7 <link rel=help href="https://html.spec.whatwg.org/multipage/#submitting-element-directionality:-the-dirname-attribute"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="resources/dirname.js"></script> 11 </head> 12 <body> 13 <div id="log"></div> 14 <form action="resources/dirname-iframe.html" method=get target="iframe"> 15 <textarea name="textarea" dirname="textarea.dir"></textarea> 16 <p><input id="btn-submit" type=submit name=submit dirname=submit.dir value=Submit></p> 17 </form> 18 <iframe name="iframe"></iframe> 19 20 <script> 21 const types_applies = [ 22 "hidden", "text", "search", "tel", "url", "email", "password", "submit" 23 ]; 24 const types_not = [ 25 "date", "month", "week", "time", "datetime-local", "number", "range", "color", "checkbox", 26 "radio", "file", "image", "reset", "button" 27 ]; 28 const types = [...types_applies, ...types_not]; 29 let form = document.querySelector("form"); 30 for (const type of types) { 31 if (type === "submit") { 32 continue; 33 } 34 let p = document.createElement("p"); 35 let lbl = document.createElement("label"); 36 let txt = document.createTextNode(type + ": "); 37 let inp = document.createElement("input"); 38 inp.type = type; 39 inp.name = type; 40 inp.dirName = type + ".dir"; 41 inp.id = "testelement." + type 42 lbl.appendChild(txt); 43 lbl.appendChild(inp); 44 p.appendChild(lbl); 45 form.appendChild(p); 46 } 47 // Avoid continue in https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-form-data-set:attr-fe-dirname 48 document.getElementById("testelement.checkbox").checked = true; 49 document.getElementById("testelement.radio").checked = true; 50 51 function assertInputSubmission(data) { 52 for (const type of types_applies) { 53 assert_equals(data.get(type + ".dir"), "ltr", "Submit ltr for input type=" + type); 54 } 55 for (const type of types_not) { 56 assert_false(data.has(type + ".dir"), "Do not submit dir for input type=" + type); 57 } 58 } 59 60 const submitter = document.getElementById("btn-submit"); 61 const data = new FormData(form, submitter); 62 test(function() { 63 assertInputSubmission(data); 64 }, "Submit input element directionality to FormData, if dirname applies."); 65 test(function() { 66 assert_equals(data.get("textarea.dir"), "ltr", "Submit ltr for textarea"); 67 }, "Submit textarea element directionality to FormData."); 68 69 submitter.click(); 70 const t_inp = async_test("Submit input element directionality, if dirname applies."); 71 onIframeLoadedDone(t_inp, function(params) { 72 assertInputSubmission(params); 73 }); 74 const t_ta = async_test("Submit textarea element directionality."); 75 onIframeLoadedDone(t_ta, function(params) { 76 assert_equals(params.get("textarea.dir"), "ltr", "Submit ltr for textarea"); 77 }); 78 </script> 79 </body> 80 </html>