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