mirror of
https://github.com/lightpanda-io/browser.git
synced 2026-04-01 18:06:46 +00:00
535 lines
16 KiB
HTML
535 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../../testing.js"></script>
|
|
|
|
<input id="text1" type="text" value="initial">
|
|
<input id="text2" type="text">
|
|
|
|
<input id="check1" type="checkbox" checked>
|
|
<input id="check2" type="checkbox">
|
|
|
|
<input id="radio1" type="radio" name="group1" checked>
|
|
<input id="radio2" type="radio" name="group1">
|
|
<input id="radio3" type="radio" name="group1">
|
|
|
|
<input id="radio4" type="radio" name="group2">
|
|
|
|
<input id="disabled1" type="text" disabled>
|
|
<input id="disabled2" type="checkbox">
|
|
|
|
<script id="type">
|
|
testing.expectEqual('text', $('#text1').type)
|
|
testing.expectEqual('text', $('#text2').type)
|
|
testing.expectEqual('checkbox', $('#check1').type)
|
|
testing.expectEqual('radio', $('#radio1').type)
|
|
</script>
|
|
|
|
<script id=attributes>
|
|
{
|
|
const input = $('#text1');
|
|
|
|
testing.expectEqual('', input.accept);
|
|
input.accept = 'anything';
|
|
testing.expectEqual('anything', input.accept);
|
|
|
|
testing.expectEqual('', input.alt);
|
|
input.alt = 'x1';
|
|
testing.expectEqual('x1', input.alt);
|
|
|
|
testing.expectEqual(false, input.readOnly);
|
|
input.readOnly = true;
|
|
testing.expectEqual(true, input.readOnly);
|
|
input.readOnly = false;
|
|
testing.expectEqual(false, input.readOnly);
|
|
|
|
testing.expectEqual(-1, input.maxLength);
|
|
input.maxLength = 5;
|
|
testing.expectEqual(5, input.maxLength);
|
|
input.maxLength = 'banana';
|
|
testing.expectEqual(0, input.maxLength);
|
|
testing.expectError('IndexSizeError: Index or size is negative or greater than the allowed amount', () => { input.maxLength = -45;});
|
|
|
|
testing.expectEqual(20, input.size);
|
|
input.size = 5;
|
|
testing.expectEqual(5, input.size);
|
|
input.size = -449;
|
|
testing.expectEqual(20, input.size);
|
|
testing.expectError('Error: ZeroNotAllowed', () => { input.size = 0; });
|
|
|
|
testing.expectEqual('', input.src);
|
|
input.src = 'foo'
|
|
testing.expectEqual(testing.BASE_URL + 'element/html/foo', input.src);
|
|
input.src = '-3'
|
|
testing.expectEqual(testing.BASE_URL + 'element/html/-3', input.src);
|
|
input.src = ''
|
|
}
|
|
</script>
|
|
|
|
<script id="type_case_insensitive">
|
|
{
|
|
const input = document.createElement('input')
|
|
input.setAttribute('type', 'TEXT')
|
|
testing.expectEqual('text', input.type)
|
|
|
|
input.setAttribute('type', 'ChEcKbOx')
|
|
testing.expectEqual('checkbox', input.type)
|
|
|
|
input.setAttribute('type', 'EMAIL')
|
|
testing.expectEqual('email', input.type)
|
|
}
|
|
</script>
|
|
|
|
<script id="type_attribute_name_case_insensitive">
|
|
{
|
|
const input = document.createElement('input')
|
|
input.setAttribute('TYPE', 'checkbox')
|
|
testing.expectEqual('checkbox', input.type)
|
|
testing.expectEqual('checkbox', input.getAttribute('type'))
|
|
|
|
input.setAttribute('TyPe', 'radio')
|
|
testing.expectEqual('radio', input.type)
|
|
testing.expectEqual('radio', input.getAttribute('type'))
|
|
}
|
|
</script>
|
|
|
|
<script id="type_invalid_defaults_to_text">
|
|
{
|
|
const input = document.createElement('input')
|
|
input.setAttribute('type', 'invalid')
|
|
testing.expectEqual('text', input.type)
|
|
|
|
input.setAttribute('type', 'notavalidtype')
|
|
testing.expectEqual('text', input.type)
|
|
|
|
input.setAttribute('type', 'x'.repeat(50))
|
|
testing.expectEqual('text', input.type)
|
|
}
|
|
</script>
|
|
|
|
<script id="type_set">
|
|
const input = document.createElement('input')
|
|
testing.expectEqual('text', input.type)
|
|
|
|
input.type = 'password'
|
|
testing.expectEqual('password', input.type)
|
|
|
|
input.type = 'EMAIL'
|
|
testing.expectEqual('email', input.type)
|
|
|
|
input.type = 'invalid'
|
|
testing.expectEqual('text', input.type)
|
|
|
|
input.type = 'ChEcKbOx'
|
|
testing.expectEqual('checkbox', input.type)
|
|
</script>
|
|
|
|
<script id="value_initial">
|
|
testing.expectEqual('initial', $('#text1').value)
|
|
testing.expectEqual('', $('#text2').value)
|
|
</script>
|
|
|
|
<script id="value_set">
|
|
$('#text1').value = 'changed'
|
|
testing.expectEqual('changed', $('#text1').value)
|
|
|
|
$('#text2').value = 'new value'
|
|
testing.expectEqual('new value', $('#text2').value)
|
|
</script>
|
|
|
|
<script id="checked_initial">
|
|
testing.expectEqual(true, $('#check1').checked)
|
|
testing.expectEqual(false, $('#check2').checked)
|
|
testing.expectEqual(true, $('#radio1').checked)
|
|
testing.expectEqual(false, $('#radio2').checked)
|
|
</script>
|
|
|
|
<script id="checked_set">
|
|
$('#check1').checked = false
|
|
testing.expectEqual(false, $('#check1').checked)
|
|
|
|
$('#check2').checked = true
|
|
testing.expectEqual(true, $('#check2').checked)
|
|
|
|
$('#radio2').checked = true
|
|
testing.expectEqual(true, $('#radio2').checked)
|
|
</script>
|
|
|
|
<script id="defaultValue">
|
|
testing.expectEqual('initial', $('#text1').defaultValue)
|
|
testing.expectEqual('', $('#text2').defaultValue)
|
|
|
|
$('#text1').value = 'changed'
|
|
testing.expectEqual('initial', $('#text1').defaultValue)
|
|
</script>
|
|
|
|
<script id="defaultValue_set">
|
|
{
|
|
const input = document.createElement('input')
|
|
testing.expectEqual('', input.defaultValue)
|
|
testing.expectEqual(null, input.getAttribute('value'))
|
|
|
|
input.defaultValue = 'new default'
|
|
testing.expectEqual('new default', input.defaultValue)
|
|
testing.expectEqual('new default', input.getAttribute('value'))
|
|
testing.expectEqual('new default', input.value)
|
|
|
|
input.value = 'changed by user'
|
|
testing.expectEqual('changed by user', input.value)
|
|
testing.expectEqual('new default', input.defaultValue)
|
|
|
|
input.defaultValue = 'another default'
|
|
testing.expectEqual('another default', input.defaultValue)
|
|
testing.expectEqual('another default', input.getAttribute('value'))
|
|
testing.expectEqual('changed by user', input.value)
|
|
}
|
|
</script>
|
|
|
|
<script id="selectionchange_event">
|
|
{
|
|
const input = document.createElement('input');
|
|
input.value = 'Hello World';
|
|
document.body.appendChild(input);
|
|
|
|
let eventCount = 0;
|
|
let lastEvent = null;
|
|
|
|
input.addEventListener('selectionchange', (e) => {
|
|
eventCount++;
|
|
lastEvent = e;
|
|
});
|
|
|
|
testing.expectEqual(0, eventCount);
|
|
|
|
input.setSelectionRange(0, 5);
|
|
input.select();
|
|
input.selectionStart = 3;
|
|
input.selectionEnd = 8;
|
|
|
|
let bubbledToBody = false;
|
|
document.body.addEventListener('selectionchange', () => {
|
|
bubbledToBody = true;
|
|
});
|
|
input.setSelectionRange(1, 4);
|
|
|
|
testing.onload(() => {
|
|
testing.expectEqual(5, eventCount);
|
|
testing.expectEqual('selectionchange', lastEvent.type);
|
|
testing.expectEqual(input, lastEvent.target);
|
|
testing.expectEqual(true, lastEvent.bubbles);
|
|
testing.expectEqual(false, lastEvent.cancelable);
|
|
testing.expectEqual(true, bubbledToBody);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script id="select_event">
|
|
{
|
|
const input = document.createElement('input');
|
|
input.value = 'Hello World';
|
|
document.body.appendChild(input);
|
|
|
|
let eventCount = 0;
|
|
let lastEvent = null;
|
|
|
|
input.addEventListener('select', (e) => {
|
|
eventCount++;
|
|
lastEvent = e;
|
|
});
|
|
|
|
let onselectFired = false;
|
|
input.onselect = () => { onselectFired = true; };
|
|
|
|
let bubbledToBody = false;
|
|
document.body.addEventListener('select', () => {
|
|
bubbledToBody = true;
|
|
});
|
|
|
|
testing.expectEqual(0, eventCount);
|
|
|
|
input.select();
|
|
|
|
testing.onload(() => {
|
|
testing.expectEqual(1, eventCount);
|
|
testing.expectEqual('select', lastEvent.type);
|
|
testing.expectEqual(input, lastEvent.target);
|
|
testing.expectEqual(true, lastEvent.bubbles);
|
|
testing.expectEqual(false, lastEvent.cancelable);
|
|
testing.expectEqual(true, bubbledToBody);
|
|
testing.expectEqual(true, onselectFired);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script id="defaultChecked">
|
|
testing.expectEqual(true, $('#check1').defaultChecked)
|
|
testing.expectEqual(false, $('#check2').defaultChecked)
|
|
testing.expectEqual(true, $('#radio1').defaultChecked)
|
|
testing.expectEqual(false, $('#radio2').defaultChecked)
|
|
|
|
$('#check1').checked = false
|
|
testing.expectEqual(true, $('#check1').defaultChecked)
|
|
</script>
|
|
|
|
<script id="defaultChecked_set">
|
|
{
|
|
const input = document.createElement('input')
|
|
input.type = 'checkbox'
|
|
testing.expectEqual(false, input.defaultChecked)
|
|
testing.expectEqual(null, input.getAttribute('checked'))
|
|
|
|
input.defaultChecked = true
|
|
testing.expectEqual(true, input.defaultChecked)
|
|
testing.expectEqual('', input.getAttribute('checked'))
|
|
testing.expectEqual(true, input.checked)
|
|
|
|
input.checked = false
|
|
testing.expectEqual(false, input.checked)
|
|
testing.expectEqual(true, input.defaultChecked)
|
|
|
|
input.defaultChecked = false
|
|
testing.expectEqual(false, input.defaultChecked)
|
|
testing.expectEqual(null, input.getAttribute('checked'))
|
|
testing.expectEqual(false, input.checked)
|
|
}
|
|
</script>
|
|
|
|
<script id="disabled_initial">
|
|
testing.expectEqual(true, $('#disabled1').disabled)
|
|
testing.expectEqual(false, $('#disabled2').disabled)
|
|
</script>
|
|
|
|
<script id="disabled_set">
|
|
$('#disabled1').disabled = false
|
|
testing.expectEqual(false, $('#disabled1').disabled)
|
|
|
|
$('#disabled2').disabled = true
|
|
testing.expectEqual(true, $('#disabled2').disabled)
|
|
</script>
|
|
|
|
<form id="form1">
|
|
<input id="input_in_form" type="text">
|
|
</form>
|
|
|
|
<form id="form2"></form>
|
|
<input id="input_with_form_attr" type="text" form="form2">
|
|
|
|
<input id="input_no_form" type="text">
|
|
|
|
<form id="form3">
|
|
<input id="input_invalid_form_attr" type="text" form="nonexistent">
|
|
</form>
|
|
|
|
<script id="form_ancestor">
|
|
const inputInForm = $('#input_in_form')
|
|
testing.expectEqual('FORM', inputInForm.form.tagName)
|
|
testing.expectEqual('form1', inputInForm.form.id)
|
|
</script>
|
|
|
|
<script id="form_attribute">
|
|
const inputWithFormAttr = $('#input_with_form_attr')
|
|
testing.expectEqual('FORM', inputWithFormAttr.form.tagName)
|
|
testing.expectEqual('form2', inputWithFormAttr.form.id)
|
|
</script>
|
|
|
|
<script id="form_null">
|
|
const inputNoForm = $('#input_no_form')
|
|
testing.expectEqual(null, inputNoForm.form)
|
|
</script>
|
|
|
|
<script id="form_invalid_attribute">
|
|
const inputInvalidFormAttr = $('#input_invalid_form_attr')
|
|
testing.expectEqual(null, inputInvalidFormAttr.form)
|
|
</script>
|
|
|
|
<script id="input_clone">
|
|
{
|
|
const input = document.createElement('input');
|
|
input.type = 'image';
|
|
const clone = input.cloneNode();
|
|
testing.expectEqual('image', clone.type);
|
|
}
|
|
</script>
|
|
|
|
<script id="type_reflects_to_attribute">
|
|
{
|
|
const input = document.createElement('input')
|
|
input.type = 'checkbox'
|
|
testing.expectEqual('checkbox', input.getAttribute('type'))
|
|
testing.expectTrue(input.outerHTML.includes('type="checkbox"'))
|
|
|
|
input.type = 'radio'
|
|
testing.expectEqual('radio', input.getAttribute('type'))
|
|
testing.expectTrue(input.outerHTML.includes('type="radio"'))
|
|
}
|
|
</script>
|
|
|
|
<script id="disabled_reflects_to_attribute">
|
|
{
|
|
const input = document.createElement('input')
|
|
testing.expectEqual(null, input.getAttribute('disabled'))
|
|
testing.expectFalse(input.outerHTML.includes('disabled'))
|
|
|
|
input.disabled = true
|
|
testing.expectEqual('', input.getAttribute('disabled'))
|
|
testing.expectTrue(input.outerHTML.includes('disabled'))
|
|
|
|
input.disabled = false
|
|
testing.expectEqual(null, input.getAttribute('disabled'))
|
|
testing.expectFalse(input.outerHTML.includes('disabled'))
|
|
}
|
|
</script>
|
|
|
|
<script id="value_does_not_reflect_to_attribute">
|
|
{
|
|
const input = document.createElement('input')
|
|
input.setAttribute('value', 'initial')
|
|
testing.expectEqual('initial', input.getAttribute('value'))
|
|
|
|
input.value = 'changed'
|
|
testing.expectEqual('changed', input.value)
|
|
testing.expectEqual('initial', input.getAttribute('value'))
|
|
testing.expectTrue(input.outerHTML.includes('value="initial"'))
|
|
testing.expectFalse(input.outerHTML.includes('value="changed"'))
|
|
}
|
|
</script>
|
|
|
|
<script id="checked_does_not_reflect_to_attribute">
|
|
{
|
|
const input = document.createElement('input')
|
|
input.type = 'checkbox'
|
|
input.setAttribute('checked', '')
|
|
testing.expectEqual('', input.getAttribute('checked'))
|
|
testing.expectTrue(input.outerHTML.includes('checked'))
|
|
|
|
input.checked = false
|
|
testing.expectEqual(false, input.checked)
|
|
testing.expectEqual('', input.getAttribute('checked'))
|
|
testing.expectTrue(input.outerHTML.includes('checked'))
|
|
}
|
|
</script>
|
|
|
|
<input id="named1" type="text" name="username">
|
|
<input id="named2" type="text">
|
|
|
|
<input id="required1" type="text" required>
|
|
<input id="required2" type="text">
|
|
|
|
<script id="name_initial">
|
|
testing.expectEqual('username', $('#named1').name)
|
|
testing.expectEqual('', $('#named2').name)
|
|
</script>
|
|
|
|
<script id="name_set">
|
|
{
|
|
const input = document.createElement('input')
|
|
testing.expectEqual('', input.name)
|
|
|
|
input.name = 'email'
|
|
testing.expectEqual('email', input.name)
|
|
testing.expectEqual('email', input.getAttribute('name'))
|
|
|
|
input.name = 'password'
|
|
testing.expectEqual('password', input.name)
|
|
testing.expectEqual('password', input.getAttribute('name'))
|
|
}
|
|
</script>
|
|
|
|
<script id="name_reflects_to_attribute">
|
|
{
|
|
const input = document.createElement('input')
|
|
testing.expectEqual(null, input.getAttribute('name'))
|
|
|
|
input.name = 'fieldname'
|
|
testing.expectEqual('fieldname', input.getAttribute('name'))
|
|
testing.expectTrue(input.outerHTML.includes('name="fieldname"'))
|
|
}
|
|
</script>
|
|
|
|
<script id="required_initial">
|
|
testing.expectEqual(true, $('#required1').required)
|
|
testing.expectEqual(false, $('#required2').required)
|
|
</script>
|
|
|
|
<script id="required_set">
|
|
{
|
|
const input = document.createElement('input')
|
|
testing.expectEqual(false, input.required)
|
|
|
|
input.required = true
|
|
testing.expectEqual(true, input.required)
|
|
testing.expectEqual('', input.getAttribute('required'))
|
|
|
|
input.required = false
|
|
testing.expectEqual(false, input.required)
|
|
testing.expectEqual(null, input.getAttribute('required'))
|
|
}
|
|
</script>
|
|
|
|
<script id="required_reflects_to_attribute">
|
|
{
|
|
const input = document.createElement('input')
|
|
testing.expectEqual(null, input.getAttribute('required'))
|
|
testing.expectFalse(input.outerHTML.includes('required'))
|
|
|
|
input.required = true
|
|
testing.expectEqual('', input.getAttribute('required'))
|
|
testing.expectTrue(input.outerHTML.includes('required'))
|
|
|
|
input.required = false
|
|
testing.expectEqual(null, input.getAttribute('required'))
|
|
testing.expectFalse(input.outerHTML.includes('required'))
|
|
}
|
|
</script>
|
|
|
|
<script id="checked_pseudoclass">
|
|
// At this point, check1 is unchecked, check2 is checked (from checked_set test)
|
|
// radio2 is checked (from checked_set test)
|
|
|
|
// querySelector should find the first checked input
|
|
testing.expectEqual($('#check2'), document.querySelector('input:checked'))
|
|
testing.expectEqual(null, document.querySelector('#check1:checked'))
|
|
testing.expectEqual($('#check2'), document.querySelector('#check2:checked'))
|
|
|
|
{
|
|
const checkedInputs = document.querySelectorAll('input:checked')
|
|
testing.expectEqual(2, checkedInputs.length)
|
|
testing.expectEqual($('#check2'), checkedInputs[0])
|
|
testing.expectEqual($('#radio2'), checkedInputs[1])
|
|
}
|
|
|
|
// Text inputs should never match :checked
|
|
testing.expectEqual(null, document.querySelector('#text1:checked'))
|
|
testing.expectEqual(null, document.querySelector('#text2:checked'))
|
|
|
|
// Compound selectors
|
|
testing.expectEqual($('#check2'), document.querySelector('input[type="checkbox"]:checked'))
|
|
testing.expectEqual($('#radio2'), document.querySelector('input[type="radio"]:checked'))
|
|
testing.expectEqual($('#radio2'), document.querySelector('input[type="radio"][name="group1"]:checked'))
|
|
|
|
// Change state and verify selector updates dynamically
|
|
$('#check2').checked = false
|
|
$('#radio3').checked = true
|
|
|
|
testing.expectEqual(null, document.querySelector('input[type="checkbox"]:checked'))
|
|
testing.expectEqual($('#radio3'), document.querySelector('input[type="radio"]:checked'))
|
|
testing.expectEqual($('#radio3'), document.querySelector('input[type="radio"][name="group1"]:checked'))
|
|
</script>
|
|
|
|
<script id=related>
|
|
{
|
|
let input_checked = document.createElement('input')
|
|
testing.expectEqual(false, input_checked.defaultChecked);
|
|
testing.expectEqual(false, input_checked.checked);
|
|
|
|
input_checked.defaultChecked = true;
|
|
testing.expectEqual(true, input_checked.defaultChecked);
|
|
testing.expectEqual(true, input_checked.checked);
|
|
|
|
input_checked.checked = false;
|
|
testing.expectEqual(true, input_checked.defaultChecked);
|
|
testing.expectEqual(false, input_checked.checked);
|
|
|
|
input_checked.defaultChecked = true;
|
|
testing.expectEqual(false, input_checked.checked);
|
|
}
|
|
</script>
|