1 files changed, 46 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/at-property-shadow.html b/testing/web-platform/tests/css/css-properties-values-api/at-property-shadow.html
new file mode 100644
index 0000000000..db282d10b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/at-property-shadow.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
+<style>
+  @property --x {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+  #outside {
+    --x: calc(1px + 1px);
+    --y: calc(1px + 1px);
+  }
+</style>
+<template id=template>
+  <style>
+    /* This rule should have no effect */
+    @property --y {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+    #inside {
+      --x: calc(1px + 1px);
+      --y: calc(1px + 1px);
+    }
+  </style>
+  <div id=inside></div>
+</template>
+<div id=host></div>
+<div id=outside></div>
+<script>
+
+test(() => {
+  let root = host.attachShadow({ mode: 'open' });
+  root.append(template.content.cloneNode(true));
+  let inside = root.querySelector('#inside');
+  assert_equals(getComputedStyle(outside).getPropertyValue('--x'), '2px');
+  assert_equals(getComputedStyle(outside).getPropertyValue('--y'), 'calc(1px + 1px)');
+  assert_equals(getComputedStyle(inside).getPropertyValue('--x'), '2px');
+  assert_equals(getComputedStyle(inside).getPropertyValue('--y'), 'calc(1px + 1px)');
+}, '@property rules in shadow trees should have no effect');
+
+</script>