var-ident-function.html (1916B)
1 <!DOCTYPE html> 2 <title>The ident() function in var()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#ident"> 4 <link rel="help" href="https://drafts.csswg.org/css-variables-1/#using-variables"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/computed-testcommon.js"></script> 8 <div id=target></div> 9 10 <style> 11 #target { 12 --myprop3:PASS; 13 --var-with-ident-fn: FAIL1; 14 --var-with-ident-fn: var(ident("--myprop" calc(3 * sign(1em - 1px))), FAIL2); 15 } 16 </style> 17 <script> 18 test(() => { 19 assert_equals(getComputedStyle(target).getPropertyValue('--var-with-ident-fn'), 'PASS'); 20 }, 'Referencing a custom property with ident()'); 21 </script> 22 23 <style> 24 #target { 25 --unparsed: ident("x"); 26 } 27 </style> 28 <script> 29 test(() => { 30 assert_equals(getComputedStyle(target).getPropertyValue('--unparsed'), 'ident("x")'); 31 }, 'ident() remains unresolved on custom properties'); 32 </script> 33 34 <style> 35 #target { 36 --nodash: var(ident("nodash")); 37 } 38 </style> 39 <script> 40 test(() => { 41 assert_equals(getComputedStyle(target).getPropertyValue('--nodash'), ''); 42 }, 'ident() causing lookup of invalid custom property'); 43 </script> 44 45 <style> 46 #target { 47 --nodash-fallback: var(ident("nodash"), PASS); 48 } 49 </style> 50 <script> 51 test(() => { 52 assert_equals(getComputedStyle(target).getPropertyValue('--nodash-fallback'), 'PASS'); 53 }, 'ident() causing lookup of invalid custom property, fallback'); 54 </script> 55 56 <style> 57 :root { 58 --nodash-fallback-inherit: PASS; 59 } 60 #target { 61 --nodash-fallback-inherit: FAIL; 62 --nodash-fallback-inherit: var(ident("nodash"), inherit); 63 } 64 </style> 65 <script> 66 test(() => { 67 assert_equals(getComputedStyle(target).getPropertyValue('--nodash-fallback-inherit'), 'PASS'); 68 }, 'ident() causing lookup of invalid custom property, fallback, CSS-wide keyword'); 69 </script>