1 files changed, 64 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/at-property-typedom.html b/testing/web-platform/tests/css/css-properties-values-api/at-property-typedom.html
new file mode 100644
index 0000000000..beee032429
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/at-property-typedom.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#css-style-value-reification">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
+<div id=div></div>
+<script>
+
+test(() => {
+  let name = generate_name();
+  with_style_node(`div { ${name}: 100px; }`, () => {
+    // Before registering the property, ${name} should reify as a
+    // a token sequence.
+    assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue');
+    assert_equals(div.computedStyleMap().get(name).toString(), '100px');
+
+    with_at_property({
+      name: name,
+      syntax: '"<length>"',
+      inherits: false,
+      initialValue: '0px'
+    }, () => {
+      // After registering, it should reify as a <length>.
+      assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
+      assert_equals(div.computedStyleMap().get(name).value, 100);
+      assert_equals(div.computedStyleMap().get(name).unit, 'px');
+    });
+
+    // After @property is removed, the computed value is once again a token
+    // sequence.
+    assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnparsedValue');
+    assert_equals(div.computedStyleMap().get(name).toString(), '100px');
+  });
+}, 'Properties declared with @property reify correctly');
+
+test(() => {
+  let name = generate_name();
+  // 0 is valid as a both <length> and <integer>, which reify differently.
+  with_style_node(`div { ${name}: 0; }`, () => {
+    with_at_property({
+      name: name,
+      syntax: '"<length>"',
+      inherits: false,
+      initialValue: '1000px'
+    }, () => {
+      assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
+      assert_equals(div.computedStyleMap().get(name).value, 0);
+      assert_equals(div.computedStyleMap().get(name).unit, 'px');
+
+      with_at_property({
+        name: name,
+        syntax: '"<integer>"',
+        inherits: false,
+        initialValue: '1000'
+      }, () => {
+        assert_equals(div.computedStyleMap().get(name).constructor.name, 'CSSUnitValue');
+        assert_equals(div.computedStyleMap().get(name).value, 0);
+        assert_equals(div.computedStyleMap().get(name).unit, 'number');
+      });
+    });
+  });
+}, 'Re-declaring a property with a different type affects reification');
+
+</script>