| <!DOCTYPE html> |
| <style> |
| #test { |
| --important:green!important; |
| --not-important:red; |
| color:var(--important); |
| } |
| #test2 { |
| --variable:value; |
| } |
| </style> |
| <div id="test"></div> |
| <script src="../../../resources/js-test.js"></script> |
| <script> |
| var style = document.styleSheets[0].rules[0].style; |
| shouldBeEqualToString('style.getPropertyValue("--important")', "green"); |
| shouldBeEqualToString('style.getPropertyValue("--not-important")', "red"); |
| shouldBeEqualToString('style.getPropertyValue("color")', "var(--important)"); |
| shouldBeEqualToString('style.getPropertyPriority("--important")', "important"); |
| shouldBeEqualToString('style.getPropertyPriority("--not-important")', ""); |
| style.setProperty("--foo", "papayawhip"); |
| style.setProperty("--important-foo", "navajowhite", "important"); |
| shouldBeEqualToString('style.getPropertyValue("--foo")', "papayawhip"); |
| shouldBeEqualToString('style.getPropertyPriority("--foo")', ""); |
| shouldBeEqualToString('style.getPropertyPriority("--important-foo")', "important"); |
| style.setProperty("--important-foo", "") |
| shouldBeEqualToString('style.getPropertyValue("--important-foo")', ""); |
| shouldBeEqualToString('style.removeProperty("--foo")', "papayawhip"); |
| shouldBeEqualToString('style.getPropertyValue("--foo")', ""); |
| |
| var computedStyle = window.getComputedStyle(document.getElementById("test")); |
| shouldThrow('computedStyle.setProperty("--error", "")', |
| '"NoModificationAllowedError: Failed to execute \'setProperty\' on \'CSSStyleDeclaration\': These styles are computed, and therefore the \'--error\' property is read-only."'); |
| |
| var cssText = document.styleSheets[0].rules[1].cssText; |
| shouldBeEqualToString('cssText', '#test2 { --variable:value; }') |
| </script> |
