dashed-function-standard-property.html (1169B)
1 <!DOCTYPE html> 2 <title>Custom Functions: Evaluating a <dashed-function> in standard properties</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#substitute-a-dashed-function"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 @function --ten-px() { 9 result: 10px; 10 } 11 12 @function --ten-px-typed() returns <length> { 13 result: 10px; 14 } 15 16 @function --green() { 17 result: green; 18 } 19 20 #target { 21 width: --ten-px(); 22 height: --ten-px-typed(); 23 color: --green(); 24 padding: --ten-px(); 25 } 26 </style> 27 28 <div id=target></div> 29 30 <script> 31 test(() => { 32 assert_equals(getComputedStyle(target).width, '10px'); 33 }, '<dashed-function> in longhand'); 34 35 test(() => { 36 assert_equals(getComputedStyle(target).height, '10px'); 37 }, '<dashed-function> with typed result in longhand'); 38 39 test(() => { 40 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 41 }, '<dashed-function> with in inherited longhand'); 42 43 test(() => { 44 assert_equals(getComputedStyle(target).padding, '10px'); 45 }, '<dashed-function> with typed result in shorthand'); 46 </script>