LibWeb: Support interpolation of mixed percentage dimension units

Author: https://github.com/mattco98 Commit: e2cb25e35c Pull-request: https://github.com/SerenityOS/serenity/pull/24444 Issue: https://github.com/SerenityOS/serenity/issues/23543 Reviewed-by: https://github.com/AtkinsSJ
2025-07-31 05:09:12 +00:00 · 2024-05-25 13:24:18 -07:00 · 2024-05-25 13:24:18 -07:00 · e2cb25e35c · 2024-07-16 23:55:09 +09:00
commit e2cb25e35c
parent ef766b0b5f
3 changed files with 109 additions and 1 deletions
--- a/Tests/LibWeb/Text/input/WebAnimations/misc/animate-with-mixed-percentages.html
+++ b/Tests/LibWeb/Text/input/WebAnimations/misc/animate-with-mixed-percentages.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<style>
+    div {
+        position: absolute;
+        animation: moveRight 2s linear;
+    }
+
+    @keyframes moveRight {
+        from {
+            left: 0;
+        }
+        to {
+            left: 100%;
+            transform: translateX(-100%);
+        }
+    }
+</style>
+<body>
+<div id="foo"></div>
+<script src="../../include.js"></script>
+<script>
+    promiseTest(async () => {
+        const foo = document.getElementById("foo");
+        const timeline = internals.createInternalAnimationTimeline();
+        const anim = foo.getAnimations()[0];
+        anim.timeline = timeline;
+        timeline.setTime(1000);
+
+        await animationFrame();
+        const bounds = foo.getBoundingClientRect();
+        println(`box is moving in the correct direction: ${bounds.left > 0}`);
+    });
+</script>
+</body>