| <!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> |
