variables-animation-math-functions.html (1486B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>angle custom properties interpolation with css math functions</title> 6 <link rel="author" title="Daniil Sakhapov" href="mailto:sakhapov@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-values/#sign-funcs"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 </head> 12 <style> 13 :root { 14 font-size: 10px; 15 } 16 @property --my-angle { 17 syntax: "<angle>"; 18 initial-value: 0deg; 19 inherits: false; 20 } 21 </style> 22 <body> 23 <script> 24 test_interpolation({ 25 property: '--my-angle', 26 from: '100deg', 27 to: 'calc(sign(20rem - 20px) * 180deg)', 28 }, [ 29 {at: -1, expect: '20deg'}, 30 {at: 0, expect: '100deg'}, 31 {at: 0.125, expect: '110deg'}, 32 {at: 0.875, expect: '170deg'}, 33 {at: 1, expect: '180deg'}, 34 {at: 2, expect: '260deg'} 35 ]); 36 37 test_interpolation({ 38 property: '--my-angle', 39 from: 'calc(sign(20rem - 20px) * 100deg)', 40 to: 'calc(sign(20rem - 20px) * 180deg)', 41 }, [ 42 {at: -1, expect: '20deg'}, 43 {at: 0, expect: '100deg'}, 44 {at: 0.125, expect: '110deg'}, 45 {at: 0.875, expect: '170deg'}, 46 {at: 1, expect: '180deg'}, 47 {at: 2, expect: '260deg'} 48 ]); 49 </script> 50 </body> 51 </html>