diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /layout/style/test/test_animations_styles_on_event.html | |
parent | Initial commit. (diff) | |
download | thunderbird-upstream.tar.xz thunderbird-upstream.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/style/test/test_animations_styles_on_event.html')
-rw-r--r-- | layout/style/test/test_animations_styles_on_event.html | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/layout/style/test/test_animations_styles_on_event.html b/layout/style/test/test_animations_styles_on_event.html new file mode 100644 index 0000000000..0e96711530 --- /dev/null +++ b/layout/style/test/test_animations_styles_on_event.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Test that mouse movement immediately after finish() should involve + restyling for finished state (Bug 1228137) + </title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="/tests/SimpleTest/EventUtils.js"></script> + <script src="/tests/SimpleTest/paint_listener.js"></script> + <script type="application/javascript" + src="animation_utils.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> + <style type="text/css"> + @keyframes anim { + 0% { transform: translateX(0px) } + 100% { transform: translateX(100px) } + } + .target { + /* The animation target needs geometry in order to qualify for OMTA */ + width: 100px; + height: 100px; + background-color: white; + } + </style> +</head> +<body> +<div id="display"></div> +<script type="application/javascript"> +SimpleTest.waitForExplicitFinish(); + +window.onload = function () { + // To avoid the effect that newly created element's styles are + // not updated immediately, we need to add an element without + // animation properties first. + var [ div ] = new_div(""); + div.setAttribute("id", "bug1228137"); + + waitForPaints().then(function() { + var initialRect = div.getBoundingClientRect(); + + // Now we can set animation properties. + div.style.animation = "anim 100s linear forwards"; + + div.addEventListener("mousemove", function(event) { + is(event.target.id, "bug1228137", + "The target of the animation should receive the mouse move event " + + "on the position of the animation's effect end."); + done_div(); + SimpleTest.finish(); + }); + + var animation = div.getAnimations()[0]; + animation.finish(); + + // Mouse over where the animation is positioned at finished state. + // We can't use synthesizeMouse here since synthesizeMouse causes + // layout flush. We need to check the position without explicit flushes. + synthesizeMouseAtPoint(initialRect.left + initialRect.width / 2 + 100, + initialRect.top + initialRect.height / 2, + { type: "mousemove" }, window); + }); +}; +</script> +</body> +</html> |