custom-properties-serialization.html

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>

<style>
#test1 {
  --camelCase: blue;
  color: var(--camelCase);
}
#test2 {
  --Aå: 100px;
  width: var(--Aå);
}
#test3 {
  --colour: green;
  background: var(--colour);
  color: var(--color);
}
</style>

<script>
test(function() {
  var cssRules = document.styleSheets[0].cssRules;
  assert_equals(cssRules[0].cssText, "#test1 { --camelCase: blue; color: var(--camelCase); }");
  assert_equals(cssRules[1].cssText, "#test2 { --Aå: 100px; width: var(--Aå); }");
  assert_equals(cssRules[0].style.getPropertyValue("--camelCase"), "blue");
  assert_equals(cssRules[0].style.getPropertyValue("color"), "var(--camelCase)");
  assert_equals(cssRules[1].style.getPropertyValue("--Aå"), "100px");
  assert_equals(cssRules[1].style.getPropertyValue("width"), "var(--Aå)");
  assert_equals(cssRules[2].style.getPropertyValue("background"), "var(--colour)");
  assert_equals(cssRules[2].style.getPropertyValue("color"), "var(--color)");
}, "Custom properties serialization");
</script>

chromium/third_party/blink/web_tests/fast/css/variables/custom-properties-serialization.html