anchor-query-custom-property-registration.html (1673B)
1 <!DOCTYPE html> 2 <title>Tests using anchor queries in custom property initial value</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 4 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#register-a-custom-property"> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <script> 10 setup(() => assert_own_property(CSS, 'registerProperty')); 11 12 // Anchor queries are not computationally independent, so they cannot be used 13 // in the initial value of any typed custom property. 14 15 test(() => assert_throws_dom( 16 'SyntaxError', 17 () => CSS.registerProperty({ 18 name: '--x', 19 syntax: '<length>', 20 inherits: false, 21 initialValue: 'anchor(--foo top)', 22 })), 'anchor() cannot be used as <length> initial value'); 23 24 test(() => assert_throws_dom( 25 'SyntaxError', 26 () => CSS.registerProperty({ 27 name: '--x', 28 syntax: '<length>', 29 inherits: false, 30 initialValue: 'anchor-size(--foo width)', 31 })), 'anchor-size() cannot be used as <length> initial value'); 32 33 test(() => assert_throws_dom( 34 'SyntaxError', 35 () => CSS.registerProperty({ 36 name: '--x', 37 syntax: '<length-percentage>', 38 inherits: false, 39 initialValue: 'anchor(--foo top)', 40 })), 'anchor() cannot be used as <length-percentage> initial value'); 41 42 test(() => assert_throws_dom( 43 'SyntaxError', 44 () => CSS.registerProperty({ 45 name: '--x', 46 syntax: '<length-percentage>', 47 inherits: false, 48 initialValue: 'anchor-size(--foo width)', 49 })), 'anchor-size() cannot be used as <length-percentage> initial value'); 50 </script>