Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/form-submission-0/constructing-form-data-set.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/targetted-form.js"></script>
<iframe name="frame1" id="frame1"></iframe>
<form accept-charset="iso-8859-1" target="frame1" action="/common/blank.html" id="form1">
<input type="hidden" name="_charset_">
</form>
<iframe name="frame2" id="frame2"></iframe>
<form target="frame2" action="/common/blank.html" id="form2">
<input type="text" name="foo">
<button type="close" name="close" value="true">close</button>
<button type="button" name="button" value="true">button</button>
<button type="reset" name="reset" value="true">reset</button>
<button type="submit" name="submit" value="true">submit</button>
</form>
<script>
const form1 = document.getElementById('form1'),
form2 = document.getElementById('form2'),
frame1 = document.getElementById('frame1'),
frame2 = document.getElementById('frame2');
test(() => {
const formData = new FormData(form1);
assert_equals(formData.get('_charset_'), 'UTF-8');
}, 'FormData constructor always produces UTF-8 _charset_ value.');
async_test(t => {
frame1.onload = t.step_func(() => {
if (frame1.contentWindow.location.href == "about:blank") { return; }
assert_not_equals(frame1.contentDocument.URL.indexOf('_charset_=windows-1252'), -1,"should see _charset_=windows-1252 in "+frame1.contentDocument.URL);
t.done();
});
form1.submit();
},'_charset_ control sets the expected encoding name.');
async_test(t => {
frame2.onload = t.step_func_done(() => {
assert_equals(frame2.contentDocument.URL.split("?")[1], 'foo=&submit=true');
});
form2.submit.click();
}, 'The button cannot be setted if it is not a submitter.');
test(() => {
let didCallHandler = false;
let wasBubbles = false;
let wasCancelable = true;
let form = populateForm();
document.addEventListener('formdata', e => {
didCallHandler = true;
wasBubbles = e.bubbles;
wasCancelable = e.cancelable;
});
new FormData(form);
assert_true(didCallHandler);
assert_true(wasBubbles);
assert_false(wasCancelable);
}, '"formdata" event bubbles, and is not cancelable.');
test(() => {
let didCallHandler = false;
let form = populateForm();
let orphanRoot = document.createElement('div');
orphanRoot.appendChild(form);
orphanRoot.addEventListener('formdata', e => {
didCallHandler = true;
});
new FormData(form);
assert_true(didCallHandler);
}, '"formdata" event bubbles in an orphan tree.');
for (const enctype of ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]) {
test((t) => {
let form = populateForm('<input name=file type=file><input name=empty type=file>');
form.enctype = enctype;
const file = new File([], "filename");
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
form.querySelector('input[name=file]').files = dataTransfer.files;
form.addEventListener('formdata', t.step_func(e => {
assert_true(e.formData.has('file'));
assert_equals(e.formData.get('file'), file);
assert_true(e.formData.has('empty'));
assert_true(e.formData.get('empty') instanceof File);
}));
form.submit();
}, `Files in a ${enctype} form show up as File objects in the "formData" IDL attribute`);
}
test(() => {
let listener1ok = false;
let listeern2ok = false;
let form = populateForm('<input name=n1 value=v1>');
form.addEventListener('formdata', e => {
listener1ok = e.formData.get('n1') == 'v1';
e.formData.append('h1', 'vh1');
e.formData.append('h2', 'vh2');
});
form.addEventListener('formdata', e => {
if (e.formData.get('h1') == 'vh1' && e.formData.get('h2') == 'vh2')
listener2ok = true;
});
form.submit();
assert_true(listener1ok);
assert_true(listener2ok);
}, '"formData" IDL attribute should have entries for form-associated elements' +
' in the first event handler, and the second handler can read entries ' +
'set by the first handler.');
let t1 = async_test('Entries added to "formData" IDL attribute should be submitted.');
t1.step(() => {
let form = populateForm('<input name=n1 value=v1>');
form.addEventListener('formdata', e => {
e.formData.append('h1', 'vh1');
});
let iframe = form.previousSibling;
iframe.onload = t1.step_func(() => {
// The initial about:blank load event can be fired before the form navigation occurs.
if (iframe.contentWindow.location.href == "about:blank") { return; }
assert_true(iframe.contentWindow.location.search.indexOf('n1=v1&h1=vh1') != -1);
t1.done();
});
form.submit();
});
test(() => {
const form = populateForm('');
form.addEventListener('formdata', e => {
e.formData.append('a\nb', 'c\rd');
});
const formData = new FormData(form);
const [name, value] = [...formData][0];
assert_equals(name, 'a\nb');
assert_equals(value, 'c\rd');
}, 'Entries added to the "formdata" IDL attribute shouldn\'t be newline normalized in the resulting FormData');
test(() => {
let form = populateForm('<input name=n1 value=v1><button type=submit name=n2 value=v2></button>');
let formDataInEvent = null;
let submitter = form.querySelector('button[type=submit]');
form.addEventListener('submit', e => {
e.preventDefault();
formDataInEvent = new FormData(e.target);
});
submitter.click();
assert_equals(formDataInEvent.get('n1'), 'v1');
assert_false(formDataInEvent.has('n2'));
}, 'The constructed FormData object should not contain an entry for the submit button that was used to submit the form.');
test(() => {
let form = populateForm('<input name=n1 value=v1><input type=image name=n2>');
let formDataInEvent = null;
let submitter = form.querySelector('input[type=image]');
form.addEventListener('submit', e => {
e.preventDefault();
formDataInEvent = new FormData(e.target);
});
submitter.click();
assert_equals(formDataInEvent.get('n1'), 'v1');
assert_false(formDataInEvent.has('n2.x'));
assert_false(formDataInEvent.has('n2.y'));
}, 'The constructed FormData object should not contain an entry for the image submit button that was used to submit the form.');
</script>