<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<!-- The default document base color is white. -->
<div id="default">Document base color.</div>

<div style="background-color: blue">
    <p id="transparent" style="background-color: transparent">Transparent color.</p>
</div>

<div style="background-color: blue">
    <div style="background-color: green">
        <p id="obscuring-background" style="background-color: transparent">Obscuring background.</p>
    </div>
</div>

<p id="blended-default" style="background-color: rgba(50%, 50%, 50%, 0.5)">
    Blended with document base color.
</p>

<div style="background-color: rgba(50%, 50%, 50%, 0.5)">
    <p id="blended-background" style="background-color: rgba(50%, 50%, 50%, 0.5)">
        Blended with background color.
    </p>
</div>

<script>
test(function()
{
    var axDefault = accessibilityController.accessibleElementById('default');
    assert_equals(axDefault.backgroundColor, 0xffffffff);  // White
    document.getElementById('default').style.display = 'none';
}, 'Ensures that the document base color is exposed.');

test(function()
{
    var axTransparent = accessibilityController.accessibleElementById('transparent');
    assert_equals(axTransparent.backgroundColor, 0xff0000ff);  // Blue
    document.getElementById('transparent').style.display = 'none';
}, 'Ensures that the color of the parent is exposed if the text background is transparent.');

test(function()
{
    var axObscuring = accessibilityController.accessibleElementById('obscuring-background');
    assert_equals(axObscuring.backgroundColor, 0xff008000);  // Green
    document.getElementById('obscuring-background').style.display = 'none';
}, 'Ensures that the color of the parent is the only one exposed if it is not transparent.');

test(function()
{
    var axBlended = accessibilityController.accessibleElementById('blended-default');
    assert_equals(axBlended.backgroundColor, 0xffbfbfbf);  // Lite gray
    document.getElementById('blended-default').style.display = 'none';
}, 'Ensures that semi-transparent text background color is blended with document base color.');

test(function()
{
    var axBlended = accessibilityController.accessibleElementById('blended-background');
    assert_equals(axBlended.backgroundColor, 0xff9f9f9f);  // Medium gray
    document.getElementById('blended-background').style.display = 'none';
}, 'Ensures that background colors of overlapping objects are blended.');
</script>