| <!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> |
| @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-weight: calc((1.5 + sign(1em - 10px)) * 100); |
| } |
| to { |
| scale: 1; |
| rotate: 1deg; |
| text-size-adjust: 1%; |
| font-weight: 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).fontWeight, "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).fontWeight, "175"); |
| }, "Changing the font-size of #target changes the start point, so the result should be 1.75"); |
| </script> |
