1 files changed, 91 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/at-property-viewport-units.html b/testing/web-platform/tests/css/css-properties-values-api/at-property-viewport-units.html
new file mode 100644
index 0000000000..51520c2a70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/at-property-viewport-units.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<title>@property: viewport units in initial value</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#initial-value-descriptor" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  iframe {
+    width: 400px;
+    height: 200px;
+  }
+</style>
+<iframe id=iframe srcdoc="
+  <style>
+    @property --10vw { syntax: '<length>'; inherits: true; initial-value: 10vw}
+    @property --10vh { syntax: '<length>'; inherits: true; initial-value: 10vh}
+    @property --10vi { syntax: '<length>'; inherits: true; initial-value: 10vi}
+    @property --10vb { syntax: '<length>'; inherits: true; initial-value: 10vb}
+    @property --10vmin { syntax: '<length>'; inherits: true; initial-value: 10vmin}
+    @property --10vmax { syntax: '<length>'; inherits: true; initial-value: 10vmax}
+
+    @property --10svw { syntax: '<length>'; inherits: true; initial-value: 10svw}
+    @property --10svh { syntax: '<length>'; inherits: true; initial-value: 10svh}
+    @property --10svi { syntax: '<length>'; inherits: true; initial-value: 10svi}
+    @property --10svb { syntax: '<length>'; inherits: true; initial-value: 10svb}
+    @property --10svmin { syntax: '<length>'; inherits: true; initial-value: 10svmin}
+    @property --10svmax { syntax: '<length>'; inherits: true; initial-value: 10svmax}
+
+    @property --10lvw { syntax: '<length>'; inherits: true; initial-value: 10lvw}
+    @property --10lvh { syntax: '<length>'; inherits: true; initial-value: 10lvh}
+    @property --10lvi { syntax: '<length>'; inherits: true; initial-value: 10lvi}
+    @property --10lvb { syntax: '<length>'; inherits: true; initial-value: 10lvb}
+    @property --10lvmin { syntax: '<length>'; inherits: true; initial-value: 10lvmin}
+    @property --10lvmax { syntax: '<length>'; inherits: true; initial-value: 10lvmax}
+
+    @property --10dvw { syntax: '<length>'; inherits: true; initial-value: 10dvw}
+    @property --10dvh { syntax: '<length>'; inherits: true; initial-value: 10dvh}
+    @property --10dvi { syntax: '<length>'; inherits: true; initial-value: 10dvi}
+    @property --10dvb { syntax: '<length>'; inherits: true; initial-value: 10dvb}
+    @property --10dvmin { syntax: '<length>'; inherits: true; initial-value: 10dvmin}
+    @property --10dvmax { syntax: '<length>'; inherits: true; initial-value: 10dvmax}
+  </style>
+  <div></div>
+"></iframe>
+<script>
+  iframe.offsetTop;
+
+  function waitForLoad(w) {
+    return new Promise(resolve => {
+      if (w.document.readyState == 'complete')
+        resolve();
+      else
+        w.addEventListener('load', resolve)
+    });
+  }
+
+  function test_unit(element, actual, expected) {
+    promise_test(async (t) => {
+      await waitForLoad(window);
+      let element = iframe.contentDocument.querySelector('div');
+      assert_equals(getComputedStyle(element).getPropertyValue(`--${actual}`), expected);
+    },`${actual} is ${expected}`);
+  }
+
+  test_unit(iframe, '10vw', '40px');
+  test_unit(iframe, '10vh', '20px');
+  test_unit(iframe, '10vi', '40px');
+  test_unit(iframe, '10vb', '20px');
+  test_unit(iframe, '10vmin', '20px');
+  test_unit(iframe, '10vmax', '40px');
+
+  test_unit(iframe, '10svw', '40px');
+  test_unit(iframe, '10svh', '20px');
+  test_unit(iframe, '10svi', '40px');
+  test_unit(iframe, '10svb', '20px');
+  test_unit(iframe, '10svmin', '20px');
+  test_unit(iframe, '10svmax', '40px');
+
+  test_unit(iframe, '10lvw', '40px');
+  test_unit(iframe, '10lvh', '20px');
+  test_unit(iframe, '10lvi', '40px');
+  test_unit(iframe, '10lvb', '20px');
+  test_unit(iframe, '10lvmin', '20px');
+  test_unit(iframe, '10lvmax', '40px');
+
+  test_unit(iframe, '10dvw', '40px');
+  test_unit(iframe, '10dvh', '20px');
+  test_unit(iframe, '10dvi', '40px');
+  test_unit(iframe, '10dvb', '20px');
+  test_unit(iframe, '10dvmin', '20px');
+  test_unit(iframe, '10dvmax', '40px');
+</script>