| <!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> |
