custom-properties-in-object-model.html

<!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>
chromium/third_party/blink/web_tests/fast/css/variables/custom-properties-in-object-model.html
