| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| .test-case { |
| color: rgb(1, 2, 3); |
| } |
| .wrapper { |
| color: rgb(4, 5, 6); |
| } |
| target { |
| border-color: currentcolor; |
| background-color: currentcolor; |
| } |
| </style> |
| <script> |
| jsTestIsAsync = true; |
| function testColor(expectedColor) { |
| var allTargets = document.querySelectorAll(".test-case target"); |
| for (var i = 0; i < allTargets.length; ++i) { |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll(".test-case target")[' + i + ']).borderColor', expectedColor); |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll(".test-case target")[' + i + ']).backgroundColor', expectedColor); |
| } |
| } |
| |
| function runTest() { |
| description('Test that the properties that use the CSS Value "currentcolor" to define the color are updated correctly when the inherited color changes.'); |
| |
| debug(""); |
| debug("Initial state."); |
| testColor("rgb(4, 5, 6)"); |
| |
| debug(""); |
| debug("Let's override the style of the wrapper through their style object."); |
| var allWrappers = document.querySelectorAll(".wrapper"); |
| for (var i = 0; i < allWrappers.length; ++i) { |
| allWrappers[i].style.color = "rgb(7, 8, 9)"; |
| } |
| testColor("rgb(7, 8, 9)"); |
| |
| debug(""); |
| debug("Let's remove the style attribute on the wrapper."); |
| for (var i = 0; i < allWrappers.length; ++i) { |
| allWrappers[i].removeAttribute("style"); |
| } |
| testColor("rgb(4, 5, 6)"); |
| |
| debug(""); |
| debug("Let's remove class on the wrappers."); |
| for (var i = 0; i < allWrappers.length; ++i) { |
| allWrappers[i].classList.remove("wrapper"); |
| } |
| testColor("rgb(1, 2, 3)"); |
| |
| debug(""); |
| debug("Then add it back."); |
| for (var i = 0; i < allWrappers.length; ++i) { |
| allWrappers[i].classList.add("wrapper"); |
| } |
| testColor("rgb(4, 5, 6)"); |
| |
| finishJSTest(); |
| } |
| window.addEventListener("load", runTest); |
| </script> |
| </head> |
| <body> |
| <div class="test-case"> |
| <div class="wrapper"> |
| <target></target> |
| </div> |
| <div class="wrapper"> |
| <target></target> |
| </div> |
| </div> |
| <div class="test-case" style="display:none;"> |
| <div class="wrapper"> |
| <target></target> |
| </div> |
| <div class="wrapper"> |
| <target></target> |
| </div> |
| </div> |
| </body> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
