Bug 1482942 [wpt PR 12431] - [css-properties-values-api] Reify values from attributeStyleMap.get., a=testonly

Automatic update from web-platform-tests[css-properties-values-api] Reify values from attributeStyleMap.get.

When retrieving values via attributeStyleMap.get/getAll, produce the
correct CSSStyleValue subclass according to the registration of the custom
property.

R=futhark@chromium.org

Bug: 641877
Change-Id: If564fb039506a22162ad2521479fcb1c3de9336c
Reviewed-on: https://chromium-review.googlesource.com/1172291
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582569}

--

wpt-commits: 816706b1fa03ffbc7b1f98a560f8ac7db80bc481
wpt-pr: 12431

testing/web-platform/meta/MANIFEST.json

@@ -539094,7 +539094,7 @@
    "support"
   ],
   "css/css-properties-values-api/typedom.tentative.html": [
-   "9fff08004cbea052754a18ddccc5c889b1f29cf4",
+   "065280614cca9fa52b79c28e253c30ada188a1b9",
    "testharness"
   ],
   "css/css-properties-values-api/unit-cycles.html": [

testing/web-platform/tests/css/css-properties-values-api/typedom.tentative.html

@@ -13,16 +13,22 @@
 // Properties are generated on demand, as `--prop-${g_counter}`.
 let g_counter = 1;
 
+// Generate a new property name.
+function gen_name() {
+    let name = `--prop-${g_counter}`;
+    g_counter++;
+    return name;
+}
+
 // Generate a property and return its name.
 function gen_prop(syntax, initialValue) {
-    let name = `--prop-${g_counter}`;
+    let name = gen_name();
     CSS.registerProperty({
         name: name,
         syntax: syntax,
         initialValue: initialValue,
         inherits: false
     });
-    g_counter++;
     return name;
 }
 
@@ -50,6 +56,28 @@ function assert_computed_type(name, value, expected) {
     }
 }
 
+function assert_attribute_get_type(syntax, value, expected) {
+    let name = gen_name();
+    target.style = `${name}: ${value}`;
+
+    assert_true(target.attributeStyleMap.get(name) instanceof CSSUnparsedValue);
+
+    CSS.registerProperty({
+        name: name,
+        syntax: syntax,
+        initialValue: value,
+        inherits: false
+    });
+
+    if (expected == CSSStyleValue) {
+        assert_false(target.attributeStyleMap.get(name) instanceof CSSUnparsedValue);
+    }
+
+    assert_true(target.attributeStyleMap.get(name) instanceof expected);
+}
+
+// computedStyleMap
+
 test(function(){
     let name = gen_prop('*', 'if(){}');
     assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);
@@ -164,4 +192,110 @@ test(function(){
     assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
 }, 'All computed values correctly reified in comma-separated list');
 
+// attributeStyleMap.get
+
+test(function(){
+    let name1 = gen_prop('<length>', '100px');
+    let name2 = gen_prop('<length>', '0px');
+    target.style = `${name2}: var(${name1})`;
+    assert_true(target.attributeStyleMap.get(name2) instanceof CSSUnparsedValue);
+}, 'attributeStyleMap.get returns CSSUnparsedValue for value with var references');
+
+test(function(){
+    let name1 = gen_prop('<length>', '100px');
+    let name2 = gen_prop('<length>#', '0px');
+    target.style = `${name2}: 1px, var(${name1}), 3px`;
+    assert_true(target.attributeStyleMap.get(name2) instanceof CSSUnparsedValue);
+}, 'attributeStyleMap.get returns CSSUnparsedValue for value with var reference in list');
+
+test(function(){
+    assert_attribute_get_type('*', 'if(){}', CSSUnparsedValue);
+}, 'attributeStyleMap.get returns CSSUnparsedValue for *');
+
+test(function(){
+    assert_attribute_get_type('<angle>', '42deg', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <angle>');
+
+test(function(){
+    assert_attribute_get_type('<color>', '#fefefe', CSSStyleValue);
+}, 'attributeStyleMap.get returns CSSStyleValue for <color>');
+
+test(function(){
+    assert_attribute_get_type('<custom-ident>', 'none', CSSKeywordValue);
+}, 'attributeStyleMap.get returns CSSKeywordValue for <custom-ident>');
+
+test(function(){
+    assert_attribute_get_type('<image>', 'url(thing.png)', CSSImageValue);
+}, 'attributeStyleMap.get returns CSSImageValue for <image>');
+
+test(function(){
+    assert_attribute_get_type('<integer>', '100', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <integer>');
+
+test(function(){
+    assert_attribute_get_type('<length-percentage>', '10%', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <length-percentage> [10%]');
+
+test(function(){
+    assert_attribute_get_type('<length-percentage>', '10px', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <length-percentage> [10px]');
+
+test(function(){
+    assert_attribute_get_type('<length-percentage>', 'calc(10px + 10%)', CSSMathSum);
+}, 'attributeStyleMap.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)]');
+
+test(function(){
+    assert_attribute_get_type('<length>', '10px', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <length>');
+
+test(function(){
+    assert_attribute_get_type('<number>', '42', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <number>');
+
+test(function(){
+    assert_attribute_get_type('<percentage>', '10%', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <percentage>');
+
+test(function(){
+    assert_attribute_get_type('<resolution>', '300dpi', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <resolution>');
+
+test(function(){
+    assert_attribute_get_type('<time>', '42s', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <time>');
+
+test(function(){
+    assert_attribute_get_type('<url>', 'url(a)', CSSStyleValue);
+}, 'attributeStyleMap.get returns CSSStyleValue for <url>');
+
+test(function(){
+    assert_attribute_get_type('thing1 | THING2', 'thing1', CSSKeywordValue);
+}, 'attributeStyleMap.get returns CSSKeywordValue for thing1 | THING2');
+
+test(function(){
+    assert_attribute_get_type('<length>+', '10px 20px', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <length>+');
+
+test(function(){
+    assert_attribute_get_type('<length>#', '10px 20px', CSSUnitValue);
+}, 'attributeStyleMap.get returns CSSUnitValue for <length>#');
+
+// attributeStyleMap.getAll
+
+test(function(){
+    let name = gen_prop('<length>+', '0px');
+    target.attributeStyleMap.clear();
+    target.attributeStyleMap.set(name, '10px 20px 30px');
+    assert_equals(target.attributeStyleMap.getAll(name).length, 3);
+    assert_true(target.attributeStyleMap.getAll(name).every(x => x instanceof CSSUnitValue));
+}, 'attributeStyleMap.getAll returns a list of CSSUnitValues for <length>+');
+
+test(function(){
+    let name = gen_prop('<length>#', '0px');
+    target.attributeStyleMap.clear();
+    target.attributeStyleMap.set(name, '10px, 20px, 30px');
+    assert_equals(target.attributeStyleMap.getAll(name).length, 3);
+    assert_true(target.attributeStyleMap.getAll(name).every(x => x instanceof CSSUnitValue));
+}, 'attributeStyleMap.getAll returns a list of CSSUnitValues for <length>#');
+
 </script>