sign-in-keyframes-with-relative-units.html (3123B)
1 <!DOCTYPE html> 2 <title>CSS Values Test: sign() in keyframes with relative units and font-size change</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values/#sign-funcs"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @font-face { 8 font-family: "COLR-test-font"; 9 src: url("resources/COLR-palettes-test-font.ttf") format("truetype"); 10 } 11 12 @font-palette-values --MyFirstPalette { 13 font-family: "COLR-test-font"; 14 base-palette: 1; 15 } 16 17 @font-palette-values --MySecondPalette { 18 font-family: "COLR-test-font"; 19 base-palette: 2; 20 } 21 22 @keyframes --a { 23 from { 24 scale: calc(1.5 + sign(1em - 10px)); 25 rotate: calc(1.5deg + sign(1em - 10px) * 1deg); 26 text-size-adjust: calc(1.5% + sign(1em - 10px) * 1%); 27 font-style: oblique calc(1.5deg + sign(1em - 10px) * 1deg); 28 font-weight: calc((1.5 + sign(1em - 10px)) * 100); 29 font-palette: palette-mix(in lch, --MyFirstPalette calc(1.5% + 1% * sign(1em - 10px)), --MySecondPalette); 30 font-variation-settings: 'wght' calc((1.5 + sign(1em - 10px)) * 100); 31 } 32 to { 33 scale: 1; 34 rotate: 1deg; 35 text-size-adjust: 1%; 36 font-style: oblique 1deg; 37 font-weight: 100; 38 font-palette: palette-mix(in lch, --MyFirstPalette 1%, --MySecondPalette); 39 font-variation-settings: 'wght' 100; 40 } 41 } 42 #target { 43 animation-name: --a; 44 animation-duration: 1000s; 45 animation-timing-function: steps(2, start); 46 width: 100px; 47 height: 100px; 48 background: teal; 49 font-size: 8px; 50 } 51 </style> 52 <div id="target"></div> 53 <script> 54 test(() => { 55 assert_equals(getComputedStyle(target).scale, "0.75"); 56 assert_equals(getComputedStyle(target).rotate, "0.75deg"); 57 assert_equals(getComputedStyle(target).textSizeAdjust, "0.75%"); 58 assert_equals(getComputedStyle(target).fontStyle, "oblique 0.75deg"); 59 assert_equals(getComputedStyle(target).fontWeight, "75"); 60 assert_equals(getComputedStyle(target).fontPalette, "palette-mix(in oklab, palette-mix(in lch, --MyFirstPalette 0.5%, --MySecondPalette), palette-mix(in lch, --MyFirstPalette 1%, --MySecondPalette))"); 61 assert_equals(getComputedStyle(target).fontVariationSettings, '\"wght\" 75'); 62 }, "Initially, the font-size is 8px for #target, so the result is 0.75"); 63 64 test(() => { 65 target.style.fontSize = "16px"; 66 assert_equals(getComputedStyle(target).scale, "1.75"); 67 assert_equals(getComputedStyle(target).rotate, "1.75deg"); 68 assert_equals(getComputedStyle(target).textSizeAdjust, "1.75%"); 69 assert_equals(getComputedStyle(target).fontStyle, "oblique 1.75deg"); 70 assert_equals(getComputedStyle(target).fontWeight, "175"); 71 assert_equals(getComputedStyle(target).fontPalette, "palette-mix(in oklab, palette-mix(in lch, --MyFirstPalette 2.5%, --MySecondPalette), palette-mix(in lch, --MyFirstPalette 1%, --MySecondPalette))"); 72 assert_equals(getComputedStyle(target).fontVariationSettings, '\"wght\" 175'); 73 }, "Changing the font-size of #target changes the start point, so the result should be 1.75"); 74 </script>