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