mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-02 15:46:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Start transitions when affected properties change

Browse source 
Co-authored-by: Matthew Olsson <matthewcolsson@gmail.com>
This commit is contained in:
Sam Atkins 2024-09-19 14:13:20 +01:00 • committed by Andreas Kling
commit a1fca1a7f3
Notes: github-actions[bot] 2024-09-22 04:42:46 +00:00
8 changed files with 380 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

48
Tests/LibWeb/Text/input/css/transition-basics.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<script src="../include.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
transition: left 1s linear;
}
#box.move {
left: 200px;
}
</style>
<div id="box"></div>
<script>
asyncTest(async done => {
let box = document.getElementById("box");
println(`left starts at: ${getComputedStyle(box).left}`);
box.classList.add("move");
setTimeout(() => {
let left = parseFloat(getComputedStyle(box).left);
println(`shortly after starting, left is >= 0px? ${left >= 0} and < 200px? ${left < 200}`);
}, 1);
setTimeout(() => {
let left = parseFloat(getComputedStyle(box).left);
println(`half-way through, left is > 0px? ${left > 0} and < 200px? ${left < 200}`);
}, 500);
setTimeout(() => {
let left = parseFloat(getComputedStyle(box).left);
println(`near the end, left is > 0px? ${left > 0} and < 200px? ${left < 200}`);
}, 950);
setTimeout(() => {
// FIXME: This is a hack to make it recompute the style, otherwise we get 0px for the left value.
// Figure out why!
box.style.top = "0px";
println(`after the transition, left is: ${getComputedStyle(box).left}`);
done();
}, 1050);
});
</script>
</html>