diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-values/animations | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-values/animations')
| -rw-r--r-- | testing/web-platform/tests/css/css-values/animations/calc-interpolation.html | 136 | ||||
| -rw-r--r-- | testing/web-platform/tests/css/css-values/animations/line-height-lh-transition.html | 32 |
2 files changed, 168 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-values/animations/calc-interpolation.html b/testing/web-platform/tests/css/css-values/animations/calc-interpolation.html new file mode 100644 index 0000000000..f2c49a5cb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/animations/calc-interpolation.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>calc interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-values-3/#calc-notation"> +<meta name="assert" content="calc supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.container { + position: relative; + width: 50px; + height: 50px; + border: black solid 2px; + display: inline-block; + margin-left: 10px; + margin-right: 10px; + background-color: white; +} +.target { + position: absolute; + width: 10px; + height: 50px; + background-color: black; +} +.expected { + background-color: green; +} +</style> + +<body> +<template id="target-template"> + <div class="container"> + <div class="target"></div> + </div> +</template> +<div class="target" id="inf-target"></div> +<script> +const APPROX_INFINITY = (function() { + const target = document.getElementById("inf-target"); + target.style.letterSpacing = "calc(1px * infinity)"; + const inf = parseFloat(getComputedStyle(target).letterSpacing); + target.remove(); + return inf; +}()); + +test_interpolation({ + property: 'left', + from: '0px', + to: 'calc(infinity * 1px)', + target_names:['CSS Transitions', 'CSS Transitions with transition: all'] +}, [ + {at: -0.25, expect: `${APPROX_INFINITY * -0.25 }px`}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: `${APPROX_INFINITY * 0.25}px`}, + {at: 0.5, expect: `${APPROX_INFINITY * 0.5}px`}, + {at: 0.75, expect: `${APPROX_INFINITY * 0.75}px`}, + {at: 1, expect: `${APPROX_INFINITY}px`}, + {at: 1.25, expect: `${APPROX_INFINITY * 1.25}px`} +]); + +test_interpolation({ + property: 'left', + from: '0px', + to: 'calc(infinity * 1px)', + target_names:['CSS Animations', 'Web Animations'] +}, [ + {at: -0.25, expect: `${-APPROX_INFINITY}px`}, + {at: 0, expect: `0px`}, + {at: 0.25, expect: `${APPROX_INFINITY}px`}, + {at: 0.5, expect: `${APPROX_INFINITY}px`}, + {at: 0.75, expect: `${APPROX_INFINITY}px`}, + {at: 1, expect: `${APPROX_INFINITY}px`}, + {at: 1.25, expect: `${APPROX_INFINITY}px`} +]); + +test_interpolation({ + property: 'left', + from: 'calc(50% - 25px)', + to: 'calc(100% - 10px)' +}, [ + {at: -0.25, expect: '-10px'}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: '10px'}, + {at: 0.5, expect: '20px'}, + {at: 0.75, expect: '30px'}, + {at: 1, expect: '40px'}, + {at: 1.25, expect: '50px'} +]); + +test_interpolation({ + property: 'text-indent', + from: 'calc(50% - 25px)', + to: 'calc(100% - 10px)' +}, [ + {at: -0.25, expect: 'calc(((50% - 25px) * 1.25) + ((100% - 10px) * -0.25))'}, + {at: 0, expect: 'calc(50% - 25px)'}, + {at: 0.25, expect: 'calc(((50% - 25px) * 0.75) + ((100% - 10px) * 0.25))'}, + {at: 0.5, expect: 'calc(((50% - 25px) * 0.5) + ((100% - 10px) * 0.5))'}, + {at: 0.75, expect: 'calc(((50% - 25px) * 0.25) + ((100% - 10px) * 0.75))'}, + {at: 1, expect: 'calc(100% - 10px)'}, + {at: 1.25, expect: 'calc(((50% - 25px) * -0.25) + ((100% - 10px) * 1.25))'} +]); + +test_interpolation({ + property: 'text-indent', + from: '0em', + to: '100px' +}, [ + {at: -0.25, expect: '-25px'}, + {at: 0, expect: '0em'}, + {at: 0.25, expect: '25px'}, + {at: 0.5, expect: '50px'}, + {at: 0.75, expect: '75px'}, + {at: 1, expect: '100px'}, + {at: 1.25, expect: '125px'} +]); + +test_interpolation({ + property: 'text-indent', + from: '0%', + to: '100px' +}, [ + {at: -0.25, expect: 'calc(0% + -25px)'}, + {at: 0, expect: '0%'}, + {at: 0.25, expect: 'calc(0% + 25px)'}, + {at: 0.5, expect: 'calc(0% + 50px)'}, + {at: 0.75, expect: 'calc(0% + 75px)'}, + {at: 1, expect: 'calc(0% + 100px)'}, + {at: 1.25, expect: 'calc(0% + 125px)'} +]); + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-values/animations/line-height-lh-transition.html b/testing/web-platform/tests/css/css-values/animations/line-height-lh-transition.html new file mode 100644 index 0000000000..08c0187495 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/animations/line-height-lh-transition.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>CSS Values and Units Test: line-height transition affecting lh units</title> +<link rel="help" href="https://www.w3.org/TR/css-values-4/#lh"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #target { + width: 20lh; + line-height: 10px; + transition: line-height 1s; + } + #target.lh { + line-height: 20px; + } +</style> +<div id="target"></div> +<script> + let t = async_test("lh unit length should change with transitioning line-height"); + + t.step(() => { + target.offsetTop; + target.className = "lh"; + }); + + requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(() => { + t.step(() => { + assert_not_equals(getComputedStyle(target).width, "200px"); + assert_not_equals(getComputedStyle(target).width, "400px"); + t.done(); + }, "Transition should be progressing. Not at start/end."); + }))); +</script> |