registered-custom-property-anchor.html (1795B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: anchor() and anchor-size() not valid in registered custom properties</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @property --length { 8 syntax: "<length>"; 9 inherits: false; 10 initial-value: 0px; 11 } 12 @property --length-percentage { 13 syntax: "<length-percentage>"; 14 inherits: false; 15 initial-value: 0px; 16 } 17 @property --number { 18 syntax: "<number>"; 19 inherits: false; 20 initial-value: 0; 21 } 22 #anchor { 23 --length: anchor(--foo bottom, 5px); 24 --length-percentage: anchor(--foo bottom, 10%); 25 --number: sign(anchor(--foo bottom, 100px)); 26 } 27 #anchor-size { 28 --length: anchor-size(--foo block, 7px); 29 --length-percentage: anchor-size(--foo block, 20%); 30 --number: sign(anchor-size(--foo block, 100px)); 31 } 32 </style> 33 <div id="anchor"></div> 34 <div id="anchor_size"></div> 35 <script> 36 test(() => { 37 const style = getComputedStyle(anchor); 38 assert_equals(style.getPropertyValue("--length"), "0px"); 39 assert_equals(style.getPropertyValue("--length-percentage"), "0px"); 40 assert_equals(style.getPropertyValue("--number"), "0"); 41 }, "anchor() functions are not allowed in registered custom properties accepting <length> or <length-percentage>"); 42 43 test(() => { 44 const style = getComputedStyle(anchor_size); 45 assert_equals(style.getPropertyValue("--length"), "0px"); 46 assert_equals(style.getPropertyValue("--length-percentage"), "0px"); 47 assert_equals(style.getPropertyValue("--number"), "0"); 48 }, "anchor-size() using fallback value for registered custom properties accepting <length> or <length-percentage>"); 49 </script>