| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| --a: it was the best of times; |
| --b: it was the worst of times; |
| --c: also the blurst of times; |
| } |
| |
| #b { |
| --c: it was the age of wisdom; |
| } |
| </style> |
| |
| <div id="container"> |
| <div id="a"></div> |
| <div id="b"><div id="c"></div></div> |
| </div> |
| |
| <script> |
| test(function() { |
| assert_equals(getComputedStyle(container).getPropertyValue("--a"), " it was the best of times"); |
| assert_equals(getComputedStyle(container).getPropertyValue("--b"), " it was the worst of times"); |
| assert_equals(getComputedStyle(container).getPropertyValue("--c"), " also the blurst of times"); |
| }, 'Directly declared custom properties appear in computed style.'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(a).getPropertyValue("--a"), " it was the best of times"); |
| assert_equals(getComputedStyle(a).getPropertyValue("--b"), " it was the worst of times"); |
| assert_equals(getComputedStyle(a).getPropertyValue("--c"), " also the blurst of times"); |
| }, 'Inherited custom properties appear in computed style.'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(b).getPropertyValue("--a"), " it was the best of times"); |
| assert_equals(getComputedStyle(b).getPropertyValue("--b"), " it was the worst of times"); |
| assert_equals(getComputedStyle(b).getPropertyValue("--c"), " it was the age of wisdom"); |
| }, 'Inherited custom properties overidden values appear correctly in computed style.'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(c).getPropertyValue("--a"), " it was the best of times"); |
| assert_equals(getComputedStyle(c).getPropertyValue("--b"), " it was the worst of times"); |
| assert_equals(getComputedStyle(c).getPropertyValue("--c"), " it was the age of wisdom"); |
| }, 'Overidden and inherited custom properties appear in computed style.'); |
| </script> |