[css-properties-values-api] Support string values in StylePropertyMap…

….set.

When producing a CSSStyleValue from a string for a registered custom
property, parse the value according to the syntax instead of always
creating a CSSUnparsedValue.

Note that <color> and <url> are still not supported, because
CSSUnsupportedProperty does not work properly for registered custom
properties (yet).

R=futhark@chromium.org

Bug: 641877
Change-Id: I806eb5b0c5112956e34457808791367423587c76

css/css-properties-values-api/typedom.tentative.html

@@ -341,99 +341,99 @@
 test_style_property_map_set({
     syntax: '<angle>',
     initialValue: '0deg',
-    shouldAccept: [CSS.deg(42), CSS.turn(2)],
-    shouldReject: [unparsed('42deg'), CSS.px(15)],
+    shouldAccept: [CSS.deg(42), CSS.turn(2), '42deg'],
+    shouldReject: [unparsed('42deg'), CSS.px(15), '50px'],
 });
 
 test_style_property_map_set({
     syntax: '<custom-ident>',
     initialValue: 'none',
-    shouldAccept: [keyword('foo')],
-    shouldReject: [unparsed('foo'), CSS.px(15)],
+    shouldAccept: [keyword('foo'), 'foo'],
+    shouldReject: [unparsed('foo'), CSS.px(15), '15px'],
 });
 
 test_style_property_map_set({
     syntax: '<image>',
     initialValue: 'url(a)',
-    shouldAccept: [url_image('url(b)')],
-    shouldReject: [unparsed('url(b)'), CSS.px(100)],
+    shouldAccept: [url_image('url(b)'), 'url(b)'],
+    shouldReject: [unparsed('url(b)'), CSS.px(100), '50px'],
 });
 
 test_style_property_map_set({
     syntax: '<integer>',
     initialValue: '0',
-    shouldAccept: [CSS.number(1), CSS.number(-42)],
-    shouldReject: [unparsed('42'), CSS.px(100)],
+    shouldAccept: [CSS.number(1), CSS.number(-42), '1', '-42'],
+    shouldReject: [unparsed('42'), CSS.px(100), '50px'],
 });
 
 test_style_property_map_set({
     syntax: '<length-percentage>',
     initialValue: '0px',
-    shouldAccept: [CSS.percent(10), CSS.px(1), CSS.em(1)],
-    shouldReject: [unparsed('10%'), unparsed('10px'), CSS.dpi(1)],
+    shouldAccept: [CSS.percent(10), CSS.px(1), CSS.em(1), '10px', '10%'],
+    shouldReject: [unparsed('10%'), unparsed('10px'), CSS.dpi(1), 'url(b)'],
 });
 
 test_style_property_map_set({
     syntax: '<length>',
     initialValue: '0px',
-    shouldAccept: [CSS.px(10), CSS.em(10), CSS.vh(200), sum(CSS.px(10), CSS.em(20))],
-    shouldReject: [unparsed('10px'), CSS.percent(1)],
+    shouldAccept: [CSS.px(10), CSS.em(10), CSS.vh(200), sum(CSS.px(10), CSS.em(20)), '10em', 'calc(10px + 10em)'],
+    shouldReject: [unparsed('10px'), CSS.percent(1), 'url(b)'],
 });
 
 test_style_property_map_set({
     syntax: '<number>',
     initialValue: '0',
-    shouldAccept: [CSS.number(1337), CSS.number(-42.5)],
-    shouldReject: [unparsed('42'), CSS.px(15)],
+    shouldAccept: [CSS.number(1337), CSS.number(-42.5), '1337', '-42.5'],
+    shouldReject: [unparsed('42'), CSS.px(15), '#fef'],
 });
 
 test_style_property_map_set({
     syntax: '<percentage>',
     initialValue: '0%',
-    shouldAccept: [CSS.percent(10)],
-    shouldReject: [unparsed('10%'), CSS.px(1)],
+    shouldAccept: [CSS.percent(10), '10%'],
+    shouldReject: [unparsed('10%'), CSS.px(1), '#fef'],
 });
 
 test_style_property_map_set({
     syntax: '<resolution>',
     initialValue: '0dpi',
-    shouldAccept: [CSS.dpi(100), CSS.dpcm(10), CSS.dppx(50)],
-    shouldReject: [unparsed('42'), CSS.px(15)],
+    shouldAccept: [CSS.dpi(100), CSS.dpcm(10), CSS.dppx(50), '100dpi'],
+    shouldReject: [unparsed('42'), CSS.px(15), '#fef'],
 });
 
 test_style_property_map_set({
     syntax: '<time>',
     initialValue: '0s',
-    shouldAccept: [CSS.s(42), CSS.ms(16)],
-    shouldReject: [unparsed('42s'), CSS.px(15)],
+    shouldAccept: [CSS.s(42), CSS.ms(16), '16ms'],
+    shouldReject: [unparsed('42s'), CSS.px(15), '#fef'],
 });
 
 test_style_property_map_set({
     syntax: '<url>',
     initialValue: 'url(a)',
     shouldAccept: [url_image('url(b)')],
-    shouldReject: [unparsed('url(b)'), CSS.px(100)],
+    shouldReject: [unparsed('url(b)'), CSS.px(100), '#fef'],
 });
 
 test_style_property_map_set({
     syntax: '<transform-list>',
     initialValue: 'translateX(0px)',
     shouldAccept: [CSSStyleValue.parse('transform', 'translateX(10px)')],
-    shouldReject: [unparsed('transformX(10px'), CSS.px(100)],
+    shouldReject: [unparsed('transformX(10px'), CSS.px(100), '#fef'],
 });
 
 test_style_property_map_set({
     syntax: 'none | thing | THING',
     initialValue: 'none',
-    shouldAccept: [keyword('thing'), keyword('THING')],
-    shouldReject: [unparsed('thing'), CSS.px(15), keyword('notathing')],
+    shouldAccept: [keyword('thing'), keyword('THING'), 'thing'],
+    shouldReject: [unparsed('thing'), CSS.px(15), keyword('notathing'), 'notathing'],
 });
 
 test_style_property_map_set({
     syntax: '<angle> | <length>',
     initialValue: '0deg',
-    shouldAccept: [CSS.deg(42), CSS.turn(2), CSS.px(10), CSS.em(10)],
-    shouldReject: [unparsed('42deg'), unparsed('20px'), CSS.s(1)],
+    shouldAccept: [CSS.deg(42), CSS.turn(2), CSS.px(10), CSS.em(10), '10deg', '10px'],
+    shouldReject: [unparsed('42deg'), unparsed('20px'), CSS.s(1), '#fef'],
 });
 
 </script>