<!doctype html>

<script src="../../resources/js-test-pre.js"></script>

<iframe
    data-test="missing frameborder attribute should inherit it"
    data-assert-frame-width="150">
    <!doctype html>
    <frameset rows="*" cols="*" frameborder="0">
        <frameset rows="*" cols="50,50">
            <frame src="data:text/html,<body bgcolor=red>">
            <frame src="data:text/html,<body bgcolor=blue>">
        </frameset>
    </frameset>
</iframe>

<iframe
    data-test="inherited frameborder=no should inherit border=0"
    data-assert-frame-width="150">
    <!doctype html>
    <frameset rows="*" cols="*" frameborder="0">
        <frameset rows="*" cols="50,50" frameborder="1">
            <frame src="data:text/html,<body bgcolor=green>">
            <frame src="data:text/html,<body bgcolor=yellow>">
        </frameset>
    </frameset>
</iframe>

<iframe
    data-test="frameborder=yes and border should override inherited value"
    data-assert-frame-width="145">
    <!doctype html>
    <frameset rows="*" cols="*" frameborder="0">
        <frameset rows="*" cols="50,50" frameborder="1" border="10">
            <frame src="data:text/html,<body bgcolor=orange>">
            <frame src="data:text/html,<body bgcolor=pink>">
        </frameset>
    </frameset>
</iframe>

<iframe
    data-test="inherited frameborder=0 should have border=0 even if specified differently"
    data-assert-frame-width="150">
    <!doctype html>
    <frameset rows="*" cols="*" frameborder="0" border="10">
        <!--

            This inherits frameborder="0" so the border="20" should be ignored
            and children of it should inherit border="0".
        -->
        <frameset rows="*" cols="*" border="20">
            <frameset rows="*" cols="50,50" frameborder="1">
                <frame src="data:text/html,<body bgcolor=green>">
                <frame src="data:text/html,<body bgcolor=yellow>">
            </frameset>
        </frameset>
    </frameset>
</iframe>

<iframe
    data-test="bordercolor should inherit even if frameborder=0"
    data-assert-frame-width="145"
    data-assert-border-color="rgb(0, 128, 0)">
    <!doctype html>
    <frameset rows="*" cols="*" frameborder="0" bordercolor="green">
        <frameset rows="*" cols="*" frameborder="1">
            <frameset rows="*" cols="50,50" border="10">
                <frame src="data:text/html,<body bgcolor=red>">
                <frame src="data:text/html,<body bgcolor=blue>">
            </frameset>
        </frameset>
    </frameset>
</iframe>

<script>
    description('Check frameset frameborder and border attribute inheritance');

    iframes = [].slice.call(document.querySelectorAll('iframe'));
    iframes.forEach(function(iframe) {
        // Can't use srcdoc since that wouldn't synchronously load the content.
        iframe.contentDocument.write(iframe.textContent);
        iframe.contentDocument.close();

        frameset = iframe.contentDocument.querySelector('frameset');
        expectedWidth = iframe.dataset.assertFrameWidth;
        expectedBorderColor = iframe.dataset.assertBorderColor;
        frames = frameset.querySelectorAll('frame');
        debug(iframe.dataset.test);
        shouldBe('frames[0].offsetWidth', expectedWidth);
        shouldBe('frames[1].offsetWidth', expectedWidth);
        if (expectedBorderColor) {
            // This check won't work in Gecko since they don't expose the border color properly.
            frameset = frames[0].parentNode;
            shouldBeEqualToString('getComputedStyle(frameset).borderColor', expectedBorderColor);
        }
        debug('<br>');
    });
</script>

<script src="../../resources/js-test-post.js"></script>
