| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <title>width: calc-size() animations</title> |
| <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> |
| <meta name="timeout" content="long"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../../support/interpolation-testcommon.js"></script> |
| |
| <style> |
| .parent { |
| display: block; |
| width: 200px; |
| } |
| .target { |
| display: block; |
| } |
| .target::before { |
| display: block; |
| content: ""; |
| width: 100px; |
| } |
| </style> |
| |
| <body> |
| |
| <script> |
| test_interpolation({ |
| property: 'width', |
| from: 'calc-size(auto, size)', |
| to: 'calc-size(auto, size * 2)', |
| }, [ |
| { at: -0.25, expect: '150px' }, |
| { at: 0, expect: '200px' }, |
| { at: 0.25, expect: '250px' }, |
| { at: 0.5, expect: '300px' }, |
| { at: 0.75, expect: '350px' }, |
| { at: 1, expect: '400px' }, |
| { at: 1.25, expect: '450px' }, |
| ]); |
| |
| test_interpolation({ |
| property: 'width', |
| from: neutralKeyframe, |
| to: 'calc-size(auto, size * 2)', |
| }, [ |
| { at: -0.25, expect: '150px' }, |
| { at: 0, expect: '200px' }, |
| { at: 0.25, expect: '250px' }, |
| { at: 0.5, expect: '300px' }, |
| { at: 0.75, expect: '350px' }, |
| { at: 1, expect: '400px' }, |
| { at: 1.25, expect: '450px' }, |
| ]); |
| |
| test_interpolation({ |
| property: 'width', |
| from: 'calc-size(min-content, 0px)', |
| to: 'calc-size(min-content, size)', |
| }, [ |
| { at: -0.25, expect: '0' }, |
| { at: 0, expect: '0' }, |
| { at: 0.25, expect: '25px' }, |
| { at: 0.5, expect: '50px' }, |
| { at: 0.75, expect: '75px' }, |
| { at: 1, expect: '100px' }, |
| { at: 1.25, expect: '125px' }, |
| ]); |
| |
| const KEYWORDS = { |
| "auto": 200, |
| "min-content": 100, |
| "fit-content": 100, |
| "max-content": 100, |
| "stretch": 200, |
| }; |
| |
| for (const keyword in KEYWORDS) { |
| let expected = KEYWORDS[keyword]; |
| test_interpolation({ |
| property: 'width', |
| from: keyword, |
| to: `calc-size(${keyword}, size * 2)`, |
| }, [ |
| { at: -0.25, expect: `${expected * 0.75}px` }, |
| { at: 0, expect: `${expected}px` }, |
| { at: 0.75, expect: `${expected * 1.75}px` }, |
| { at: 1, expect: `${expected * 2}px` }, |
| { at: 1.25, expect: `${expected * 2.25}px` }, |
| ]); |
| |
| test_interpolation({ |
| property: 'width', |
| from: keyword, |
| to: 'calc-size(any, 50px)', |
| }, [ |
| { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` }, |
| { at: 0, expect: `${expected}px` }, |
| { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` }, |
| { at: 1, expect: `50px` }, |
| { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` }, |
| ]); |
| |
| test_interpolation({ |
| property: 'width', |
| from: 'calc-size(any, 50px)', |
| to: `calc-size(${keyword}, size * 2)`, |
| }, [ |
| { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` }, |
| { at: 0, expect: "50px" }, |
| { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` }, |
| { at: 1, expect: `${expected * 2}px` }, |
| { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` }, |
| ]); |
| |
| test_no_interpolation({ |
| property: 'width', |
| from: keyword, |
| to: 'calc-size(50px, size)', |
| }); |
| } |
| |
| const KEYWORD_PAIRS = [ |
| [ "auto", "fit-content" ], |
| [ "fit-content", "min-content" ], |
| [ "stretch", "auto" ], |
| [ "max-content", "stretch" ], |
| ]; |
| |
| for (const pair of KEYWORD_PAIRS) { |
| test_no_interpolation({ |
| property: 'width', |
| from: pair[0], |
| to: `calc-size(${pair[1]}, size)`, |
| }); |
| } |
| |
| test_no_interpolation({ |
| property: 'width', |
| from: 'calc-size(20px, size)', |
| to: 'calc-size(50px, size)', |
| }); |
| |
| test_no_interpolation({ |
| property: 'width', |
| from: 'calc-size(50%, size)', |
| to: 'calc-size(50px, size)', |
| }); |
| |
| test_interpolation({ |
| property: 'width', |
| from: 'calc-size(37px, 200px)', |
| to: `calc-size(37px, size * 2 + 7% + 12px)`, /* adds to 100px */ |
| }, [ |
| { at: -0.25, expect: '225px' }, |
| { at: 0, expect: '200px' }, |
| { at: 0.75, expect: '125px' }, |
| { at: 1, expect: '100px' }, |
| { at: 1.25, expect: '75px' }, |
| ]); |
| |
| </script> |
