<!DOCTYPE html> <title>Computed CSSStyleDeclaration includes registered custom properties</title> <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle"> <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1316"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> @property --non-inherited-length { syntax: "<length>"; inherits: false; initial-value: 0px; } @property --inherited-length { syntax: "<length>"; inherits: true; initial-value: 0px; } @property --universal-with-initial { syntax: "*"; inherits: false; initial-value: foo; } @property --universal-without-initial { syntax: "*"; inherits: false; } #outer { --non-registered-outer: 1px; } #inner { --non-registered-inner: 2px; } #sibling { --universal-without-initial: bar; } </style> <div id=outer> <div id=inner></div> <div id=sibling></div> </div> <script> const assert_present = (props, name) => assert_not_equals(props.indexOf(name), -1); const assert_absent = (props, name) => assert_equals(props.indexOf(name), -1); test(function() { let props = Array.from(getComputedStyle(inner)); assert_present(props, '--non-inherited-length'); assert_present(props, '--inherited-length'); assert_present(props, '--non-registered-outer'); assert_present(props, '--non-registered-inner'); assert_present(props, '--universal-with-initial'); assert_absent(props, '--universal-without-initial'); }, 'Registered custom properties are included in CSSComputedStyleDeclaration'); test(function() { let props = Array.from(getComputedStyle(sibling)); assert_present(props, '--non-inherited-length'); assert_present(props, '--inherited-length'); assert_present(props, '--non-registered-outer'); assert_present(props, '--universal-with-initial'); assert_present(props, '--universal-without-initial'); assert_absent(props, '--non-registered-inner'); }, 'Only relevant custom properties are included'); </script>