CSS Properties and Values API: Support more syntax strings

third_party/WebKit/LayoutTests/custom-properties/unregister-property.html

Index: third_party/WebKit/LayoutTests/custom-properties/unregister-property.html
diff --git a/third_party/WebKit/LayoutTests/custom-properties/unregister-property.html b/third_party/WebKit/LayoutTests/custom-properties/unregister-property.html
index 9419bc9312805d63601a02521f2f72d716dd077d..2a9bfb5858458a11240c58e1e6397e420326a0dd 100644
--- a/third_party/WebKit/LayoutTests/custom-properties/unregister-property.html
+++ b/third_party/WebKit/LayoutTests/custom-properties/unregister-property.html
@@ -2,6 +2,20 @@
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 
+<style>
+#div1 {
+    --length: 5px;
+    --color: notacolor;
+}
+#div2 {
+    --color: pink;
+}
+</style>
+
+<div id=div1></div>
+<div id=div2></div>
+<div id=div3></div>
+
 <script>
 test(function() {
     var reregisterError = {name: 'InvalidModificationError'};
@@ -23,4 +37,42 @@ test(function() {
     CSS.unregisterProperty('--property2');
     assert_throws(unregisterError, () => CSS.unregisterProperty({name: '--property2'}));
 }, "Registration state is correctly managed and correct errors are thrown");
+
+test(function() {
+    computedStyle1 = getComputedStyle(div1);
+    computedStyle2 = getComputedStyle(div2);
+    assert_equals(computedStyle1.getPropertyValue('--length'), ' 5px');
+    assert_equals(computedStyle1.getPropertyValue('--color'), ' notacolor');
+    assert_equals(computedStyle2.getPropertyValue('--length'), '');
+    assert_equals(computedStyle2.getPropertyValue('--color'), ' pink');
+
+    CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '10px'});
+    CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'red'});
+    assert_equals(computedStyle1.getPropertyValue('--length'), '5px');
+    assert_equals(computedStyle1.getPropertyValue('--color'), 'red');
+    assert_equals(computedStyle2.getPropertyValue('--length'), '10px');
+    assert_equals(computedStyle2.getPropertyValue('--color'), 'pink');
+
+    CSS.unregisterProperty('--length');
+    CSS.unregisterProperty('--color');
+    assert_equals(computedStyle1.getPropertyValue('--length'), ' 5px');
+    assert_equals(computedStyle1.getPropertyValue('--color'), ' notacolor');
+    assert_equals(computedStyle2.getPropertyValue('--length'), '');
+    assert_equals(computedStyle2.getPropertyValue('--color'), ' pink');
+}, "Unregistration correctly updates computed style");
+
+test(function() {
+    computedStyle = getComputedStyle(div3);
+    assert_equals(computedStyle.getPropertyValue('--x'), '');
+
+    CSS.registerProperty({name: '--x', syntax: '<length>', initialValue: '10px'});
+    assert_equals(computedStyle.getPropertyValue('--x'), '10px');
+
+    CSS.unregisterProperty('--x');
+    assert_equals(computedStyle.getPropertyValue('--x'), '');
+
+    CSS.registerProperty({name: '--x', syntax: '<color>', initialValue: 'purple'});
+    div3.style.setProperty('--x', '5px');
+    assert_equals(computedStyle.getPropertyValue('--x'), 'purple');
+}, "Property can be re-registered with different type");
 </script>