| <!DOCTYPE html> |
| <html> |
| <body> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <style type="text/css"> |
| input:enabled { color: #000; } |
| input:disabled { color: #666; } |
| </style> |
| <div id="container"> |
| <input id="randomInput"> |
| <fieldset disabled><input id="inputOutsideLegend"></fieldset> |
| <fieldset disabled><legend><input id="inputInsideFirstLegend"></legend></fieldset> |
| <fieldset disabled><legend></legend><legend><input id="inputInsideSecondLegend"></legend></fieldset> |
| <fieldset disabled><legend><legend><input id="inputInsideNestedFirstLegend"></legend></legend></fieldset> |
| <fieldset disabled><fieldset><legend><input id="inputInsideFirstLegendWithDisabledOuterFieldset"></legend></fieldset></fieldset> |
| </div> |
| <script> |
| |
| description("Additional tests for fieldset element disabling descendent input elements"); |
| |
| function isInputDisabled(input) { |
| return getComputedStyle(input).color == 'rgb(102, 102, 102)'; |
| } |
| |
| function isInputDisabledById(id) { |
| return isInputDisabled(document.getElementById(id)); |
| } |
| |
| shouldBeTrue('isInputDisabledById("inputOutsideLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideFirstLegend")'); |
| shouldBeTrue('isInputDisabledById("inputInsideSecondLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideNestedFirstLegend")'); |
| shouldBeTrue('isInputDisabledById("inputInsideFirstLegendWithDisabledOuterFieldset")'); |
| |
| function setDisabledOnAllFieldsets(value) { |
| var fieldsets = document.querySelectorAll('#container > fieldset, body > fieldset'); |
| for (var i = 0; i < fieldsets.length; i++) |
| fieldsets[i].disabled = value; |
| } |
| |
| debug(''); |
| evalAndLog('setDisabledOnAllFieldsets(false)'); |
| shouldBeFalse('isInputDisabledById("inputOutsideLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideFirstLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideSecondLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideNestedFirstLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideFirstLegendWithDisabledOuterFieldset")'); |
| |
| function createIframe() { |
| var iframe = document.createElement("iframe"); |
| document.getElementById('container').appendChild(iframe); |
| iframe.contentDocument.head.appendChild(document.querySelector('body style').cloneNode(true)); |
| return iframe.contentDocument; |
| } |
| |
| function insertNewFieldsetIntoBody(contentDocument) { |
| fieldset = contentDocument.createElement("fieldset"); |
| contentDocument.body.appendChild(fieldset); |
| return fieldset; |
| } |
| |
| debug(''); |
| evalAndLog('contentDocument = createIframe();'); |
| evalAndLog('fieldset = contentDocument.createElement("fieldset"); contentDocument.body.appendChild(fieldset);'); |
| shouldBeFalse('input = contentDocument.createElement("input"); fieldset.appendChild(input); isInputDisabled(input)'); |
| shouldBeTrue('fieldset.disabled = true; isInputDisabled(input)'); |
| shouldBeFalse('contentDocument.body.appendChild(input); isInputDisabled(input)'); |
| shouldBeFalse('document.body.appendChild(input); isInputDisabled(input)'); |
| shouldBeTrue('fieldset.appendChild(input); isInputDisabled(input)'); |
| evalAndLog('fieldset2 = document.createElement("fieldset"); fieldset2.disabled = true'); |
| evalAndLog('input2 = document.createElement("input"); fieldset2.appendChild(input2)'); |
| shouldBeTrue('contentDocument.body.appendChild(fieldset2); isInputDisabled(input2)'); |
| shouldBeTrue('document.body.appendChild(fieldset); isInputDisabled(input)'); |
| |
| debug(''); |
| evalAndLog('setDisabledOnAllFieldsets(true)'); |
| shouldBeTrue('isInputDisabledById("inputOutsideLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideFirstLegend")'); |
| shouldBeTrue('isInputDisabledById("inputInsideSecondLegend")'); |
| shouldBeFalse('isInputDisabledById("inputInsideNestedFirstLegend")'); |
| shouldBeTrue('isInputDisabledById("inputInsideFirstLegendWithDisabledOuterFieldset")'); |
| |
| document.getElementById('container').style.display = 'none'; |
| |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
