local-var-substitution.html (1564B)
1 <!DOCTYPE html> 2 <title>Custom Functions: Local var() substitution</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#locally-substitute-a-var"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/utils.js"></script> 7 8 <div id=target></div> 9 <div id=main></div> 10 11 <!-- To pass, a test must produce matching computed values for --actual and 12 --expected on #target. --> 13 14 <!-- Fallbacks --> 15 16 <template data-name="Fallback directly in result"> 17 <style> 18 @function --f() { 19 result: var(--unknown, PASS); 20 } 21 #target { 22 --actual: --f(); 23 --expected: PASS; 24 } 25 </style> 26 </template> 27 28 <template data-name="Fallback via present, but invalid local"> 29 <style> 30 @function --f() { 31 --x: var(--unknown); 32 result: var(--x, PASS); 33 } 34 #target { 35 --actual: --f(); 36 --expected: PASS; 37 } 38 </style> 39 </template> 40 41 <template data-name="Fallback is locally resolved (result)"> 42 <style> 43 @function --f() { 44 --x: PASS; 45 result: var(--unknown, var(--x)); 46 } 47 #target { 48 --x: FAIL; 49 --actual: --f(); 50 --expected: PASS; 51 } 52 </style> 53 </template> 54 55 <template data-name="Fallback is locally resolved (local var)"> 56 <style> 57 @function --f() { 58 --y: PASS; 59 --x: var(--unknown, var(--y)); 60 result: var(--x); 61 } 62 #target { 63 --x: FAIL1; 64 --Y: FAIL2; 65 --actual: --f(); 66 --expected: PASS; 67 } 68 </style> 69 </template> 70 71 <script> 72 test_all_templates(); 73 </script>