| <!DOCTYPE html> |
| <title>CSS Values Test: sign() in keyframes with relative units and font-size change</title> |
| <link rel="help" href="https://drafts.csswg.org/css-values/#sign-funcs"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| @font-face { |
| font-family: "COLR-test-font"; |
| src: url("resources/COLR-palettes-test-font.ttf") format("truetype"); |
| } |
| |
| @font-palette-values --MyFirstPalette { |
| font-family: "COLR-test-font"; |
| base-palette: 1; |
| } |
| |
| @font-palette-values --MySecondPalette { |
| font-family: "COLR-test-font"; |
| base-palette: 2; |
| } |
| |
| @keyframes --a { |
| from { |
| scale: calc(1.5 + sign(1em - 10px)); |
| rotate: calc(1.5deg + sign(1em - 10px) * 1deg); |
| text-size-adjust: calc(1.5% + sign(1em - 10px) * 1%); |
| font-style: oblique calc(1.5deg + sign(1em - 10px) * 1deg); |
| font-weight: calc((1.5 + sign(1em - 10px)) * 100); |
| font-palette: palette-mix(in lch, --MyFirstPalette calc(1.5% + 1% * sign(1em - 10px)), --MySecondPalette); |
| font-variation-settings: 'wght' calc((1.5 + sign(1em - 10px)) * 100); |
| } |
| to { |
| scale: 1; |
| rotate: 1deg; |
| text-size-adjust: 1%; |
| font-style: oblique 1deg; |
| font-weight: 100; |
| font-palette: palette-mix(in lch, --MyFirstPalette 1%, --MySecondPalette); |
| font-variation-settings: 'wght' 100; |
| } |
| } |
| #target { |
| animation-name: --a; |
| animation-duration: 1000s; |
| animation-timing-function: steps(2, start); |
| width: 100px; |
| height: 100px; |
| background: teal; |
| font-size: 8px; |
| } |
| </style> |
| <div id="target"></div> |
| <script> |
| test(() => { |
| assert_equals(getComputedStyle(target).scale, "0.75"); |
| assert_equals(getComputedStyle(target).rotate, "0.75deg"); |
| assert_equals(getComputedStyle(target).textSizeAdjust, "0.75%"); |
| assert_equals(getComputedStyle(target).fontStyle, "oblique 0.75deg"); |
| assert_equals(getComputedStyle(target).fontWeight, "75"); |
| assert_equals(getComputedStyle(target).fontPalette, "palette-mix(in oklab, palette-mix(in lch, --MyFirstPalette 0.5%, --MySecondPalette), palette-mix(in lch, --MyFirstPalette 1%, --MySecondPalette))"); |
| assert_equals(getComputedStyle(target).fontVariationSettings, '\"wght\" 75'); |
| }, "Initially, the font-size is 8px for #target, so the result is 0.75"); |
| |
| test(() => { |
| target.style.fontSize = "16px"; |
| assert_equals(getComputedStyle(target).scale, "1.75"); |
| assert_equals(getComputedStyle(target).rotate, "1.75deg"); |
| assert_equals(getComputedStyle(target).textSizeAdjust, "1.75%"); |
| assert_equals(getComputedStyle(target).fontStyle, "oblique 1.75deg"); |
| assert_equals(getComputedStyle(target).fontWeight, "175"); |
| assert_equals(getComputedStyle(target).fontPalette, "palette-mix(in oklab, palette-mix(in lch, --MyFirstPalette 2.5%, --MySecondPalette), palette-mix(in lch, --MyFirstPalette 1%, --MySecondPalette))"); |
| assert_equals(getComputedStyle(target).fontVariationSettings, '\"wght\" 175'); |
| }, "Changing the font-size of #target changes the start point, so the result should be 1.75"); |
| </script> |
