<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style type="text/css">
input {
background:rgb(255,255,100);
}
input:disabled {
background:rgb(255,0,0);
}
</style>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<form>
<fieldset>
<legend><input type="text" id="parserGeneratedInput1"></legend>
<legend><input type="text" id="parserGeneratedInput2"></legend>
<input type="text" id="parserGeneratedInput3">
<input type="text" id="parserGeneratedInput4" disabled>
</fieldset>
<fieldset disabled>
<legend><input type="text" id="parserGeneratedInput5"></legend>
<legend><input type="text" id="parserGeneratedInput6"></legend>
<input type="text" id="parserGeneratedInput7">
<input type="text" id="parserGeneratedInput8" disabled>
</fieldset>
<fieldset disabled>
<input type="text" id="parserGeneratedInput9">
</fieldset>
</form>
<fieldset tabindex=0 disabled id="fieldset-tabindex"></fieldset>
<script>
test(() => {
// Verifying parser generated fieldsets.
var parserGeneratedInput1 = document.getElementById("parserGeneratedInput1");
var parserGeneratedInput2 = document.getElementById("parserGeneratedInput2");
var parserGeneratedInput3 = document.getElementById("parserGeneratedInput3");
var parserGeneratedInput4 = document.getElementById("parserGeneratedInput4");
var parserGeneratedInput5 = document.getElementById("parserGeneratedInput5");
var parserGeneratedInput6 = document.getElementById("parserGeneratedInput6");
var parserGeneratedInput7 = document.getElementById("parserGeneratedInput7");
var parserGeneratedInput8 = document.getElementById("parserGeneratedInput8");
var parserGeneratedInput9 = document.getElementById("parserGeneratedInput9");
parserGeneratedInput1.focus();
document.execCommand('insertText', false, 'L');
parserGeneratedInput2.focus();
document.execCommand('insertText', false, 'M');
parserGeneratedInput3.focus();
document.execCommand('insertText', false, 'N');
parserGeneratedInput4.focus();
document.execCommand('insertText', false, 'O');
parserGeneratedInput5.focus();
document.execCommand('insertText', false, 'P');
parserGeneratedInput6.focus();
document.execCommand('insertText', false, 'Q');
parserGeneratedInput7.focus();
document.execCommand('insertText', false, 'R');
parserGeneratedInput8.focus();
document.execCommand('insertText', false, 'S');
parserGeneratedInput9.focus();
document.execCommand('insertText', false, 'T');
assert_equals(parserGeneratedInput1.value, 'L');
assert_equals(parserGeneratedInput2.value, 'M');
assert_equals(parserGeneratedInput3.value, 'NO');
assert_equals(parserGeneratedInput4.value, '');
assert_equals(parserGeneratedInput5.value, 'PQRST');
assert_equals(parserGeneratedInput6.value, '');
assert_equals(parserGeneratedInput7.value, '');
assert_equals(parserGeneratedInput8.value, '');
assert_equals(parserGeneratedInput9.value, '');
// Testing a single fieldset element.
var fieldSet = document.createElement('fieldset');
document.body.appendChild(fieldSet);
var textInput = document.createElement('input');
textInput.type = "text";
fieldSet.appendChild(textInput);
// Verifying HTMLFormControl can be disabled regardless of enclosing fieldset.
textInput.disabled = true;
assert_true(textInput.disabled);
textInput.focus();
document.execCommand('insertText', false, 'A');
assert_equals(textInput.value, '');
assert_false(fieldSet.disabled);
textInput.disabled = false;
// Fieldset is enabled by default. A user can insertText into the text input field.
textInput.focus();
document.execCommand('insertText', false, 'A');
assert_equals(textInput.value, 'A');
// Disable fieldset.
fieldSet.disabled = true;
assert_true(fieldSet.disabled);
// Once the fieldset is disabled, text cannot be inserted.
textInput.focus();
document.execCommand('insertText', false, 'B');
assert_equals(textInput.value, 'A');
// Check if the style of the text element changed.
assert_equals(getComputedStyle(textInput).backgroundColor, 'rgb(255, 0, 0)');
// Enable fieldset.
fieldSet.disabled = false;
assert_false(fieldSet.disabled);
assert_equals(getComputedStyle(textInput).backgroundColor, 'rgb(255, 255, 100)');
textInput.focus();
document.execCommand('insertText', false, 'B');
assert_equals(textInput.value, 'AB');
// Move the textinput element out of the fieldset.
fieldSet.removeChild(textInput);
document.body.appendChild(textInput);
// Disable the fieldset.
fieldSet.disabled = true;
assert_true(fieldSet.disabled);
// Text can be inserted, because the textinput element is outside of the disabled fieldset.
textInput.focus();
document.execCommand('insertText', false, 'C');
assert_equals(textInput.value, 'ABC');
// Enable the fieldset.
fieldSet.disabled = false;
assert_false(fieldSet.disabled);
// Insert a table into the fieldset.
var table = document.createElement('table');
fieldSet.appendChild(table);
var tr = document.createElement('tr');
table.appendChild(tr);
var td = document.createElement('td');
tr.appendChild(td);
// Move the textinput field into the table.
document.body.removeChild(textInput);
td.appendChild(textInput);
textInput.focus();
document.execCommand('insertText', false, 'D');
assert_equals(textInput.value, 'ABCD');
// Disable the fieldset.
fieldSet.disabled = true;
assert_true(fieldSet.disabled);
// Inserting text should fail.
textInput.focus();
document.execCommand('insertText', false, 'E');
assert_equals(textInput.value, 'ABCD');
// Enable the fieldset.
fieldSet.disabled = false;
assert_false(fieldSet.disabled);
textInput.focus();
document.execCommand('insertText', false, 'E');
assert_equals(textInput.value, 'ABCDE');
// Testing nested fieldset elements.
var outerFieldSet = document.createElement('fieldset');
document.body.appendChild(outerFieldSet);
var innerFieldSet = document.createElement('fieldset');
outerFieldSet.appendChild(innerFieldSet);
var outerTextInput = document.createElement('input');
outerTextInput.type = "text";
outerFieldSet.appendChild(outerTextInput);
var innerTextInput = document.createElement('input');
innerTextInput.type = "text";
innerFieldSet.appendChild(innerTextInput);
// Verifying that subordinates of both fieldsets are enabled.
outerTextInput.focus();
document.execCommand('insertText', false, 'F');
innerTextInput.focus();
document.execCommand('insertText', false, 'F');
assert_equals(outerTextInput.value, 'F');
assert_equals(innerTextInput.value, 'F');
// Disabling the inner fieldset only.
innerFieldSet.disabled = true;
assert_true(innerFieldSet.disabled);
outerTextInput.focus();
document.execCommand('insertText', false, 'G');
innerTextInput.focus();
document.execCommand('insertText', false, 'G');
assert_equals(outerTextInput.value, 'FGG');
assert_equals(innerTextInput.value, 'F');
// Enabling the inner and disabling the outer fieldset.
outerFieldSet.disabled = true;
innerFieldSet.disabled = false;
assert_true(outerFieldSet.disabled);
assert_false(innerFieldSet.disabled);
outerTextInput.focus();
document.execCommand('insertText', false, 'H');
innerTextInput.focus();
document.execCommand('insertText', false, 'H');
assert_equals(outerTextInput.value, 'FGG');
assert_equals(innerTextInput.value, 'F');
// Disabling both fieldset elements.
outerFieldSet.disabled = true;
innerFieldSet.disabled = true;
assert_true(outerFieldSet.disabled);
assert_true(innerFieldSet.disabled);
outerTextInput.focus();
document.execCommand('insertText', false, 'H');
innerTextInput.focus();
document.execCommand('insertText', false, 'H');
assert_equals(outerTextInput.value, 'FGG');
assert_equals(innerTextInput.value, 'F');
// Enabling both fieldset elements.
outerFieldSet.disabled = false;
innerFieldSet.disabled = false;
assert_false(outerFieldSet.disabled);
assert_false(innerFieldSet.disabled);
outerTextInput.focus();
document.execCommand('insertText', false, 'H');
innerTextInput.focus();
document.execCommand('insertText', false, 'H');
assert_equals(outerTextInput.value, 'FGGH');
assert_equals(innerTextInput.value, 'FH');
// Test behavior of the first legend element in a fieldset elements.
var legendFieldSet = document.createElement('fieldset');
document.body.appendChild(legendFieldSet);
var firstLegend = document.createElement('legend');
legendFieldSet.appendChild(firstLegend);
var secondLegend = document.createElement('legend');
legendFieldSet.appendChild(secondLegend);
var firstLegendTextInput = document.createElement('input');
firstLegendTextInput.type = "text";
firstLegend.appendChild(firstLegendTextInput);
var secondLegendTextInput = document.createElement('input');
secondLegendTextInput.type = "text";
secondLegend.appendChild(secondLegendTextInput);
// Children of the first legend element in a fieldset should not get disabled with the fieldset.
legendFieldSet.disabled = true;
assert_true(legendFieldSet.disabled);
firstLegendTextInput.focus();
document.execCommand('insertText', false, 'I');
secondLegendTextInput.focus()
document.execCommand('insertText', false, 'I');
assert_equals(firstLegendTextInput.value, 'II');
assert_equals(secondLegendTextInput.value, '');
// Insert another legend element before the currently first one, and check again.
var insertedLegend = document.createElement('legend');
legendFieldSet.insertBefore(insertedLegend, firstLegend);
var insertedLegendTextInput = document.createElement('input');
insertedLegend.appendChild(insertedLegendTextInput);
insertedLegendTextInput.focus();
document.execCommand('insertText', false, 'J');
firstLegendTextInput.focus();
document.execCommand('insertText', false, 'J');
secondLegendTextInput.focus()
document.execCommand('insertText', false, 'J');
assert_equals(insertedLegendTextInput.value, 'JJJ');
assert_equals(firstLegendTextInput.value, 'II');
assert_equals(secondLegendTextInput.value, '');
// Enable the fieldset again and check for sanity.
legendFieldSet.disabled = false;
assert_false(legendFieldSet.disabled);
insertedLegendTextInput.focus();
document.execCommand('insertText', false, 'K');
firstLegendTextInput.focus();
document.execCommand('insertText', false, 'K');
secondLegendTextInput.focus()
document.execCommand('insertText', false, 'K');
assert_equals(insertedLegendTextInput.value, 'JJJK');
assert_equals(firstLegendTextInput.value, 'IIK');
assert_equals(secondLegendTextInput.value, 'K');
var disabledFieldsetWithTabindex = document.getElementById('fieldset-tabindex');
document.activeElement.blur();
disabledFieldsetWithTabindex.focus();
assert_equals(document.activeElement, disabledFieldsetWithTabindex);
document.body.removeChild(document.getElementsByTagName('form')[0]);
document.body.removeChild(fieldSet);
document.body.removeChild(outerFieldSet);
document.body.removeChild(legendFieldSet);
document.body.removeChild(disabledFieldsetWithTabindex);
var successfullyParsed = true;
}, 'Tests for HTMLFieldSetElement.disabled behavior.');
</script>
</body>
</html>
Codebase Browser
chromium