mirrors/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-20 11:36:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Fix CSS transform invalidation when transitioning to none

Browse source 
Fixes https://github.com/LadybirdBrowser/ladybird/issues/2707
This commit is contained in:
Aliaksandr Kalenik 2025-03-15 04:36:50 +01:00 • committed by Alexander Kalenik
parent a9e20cb6c3
commit 9e287465b9
Notes: github-actions[bot] 2025-03-15 12:31:38 +00:00
3 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -1300,18 +1300,16 @@ void PaintableBox::resolve_paint_properties()
auto const& translate = computed_values.translate();
auto const& rotate = computed_values.rotate();
auto const& scale = computed_values.scale();
if (!transformations.is_empty() || translate.has_value() || rotate.has_value() || scale.has_value()) {
auto matrix = Gfx::FloatMatrix4x4::identity();
if (translate.has_value())
matrix = matrix * translate->to_matrix(*this).release_value();
if (rotate.has_value())
matrix = matrix * rotate->to_matrix(*this).release_value();
if (scale.has_value())
matrix = matrix * scale->to_matrix(*this).release_value();
for (auto const& transform : transformations)
matrix = matrix * transform.to_matrix(*this).release_value();
set_transform(matrix);
}
auto matrix = Gfx::FloatMatrix4x4::identity();
if (translate.has_value())
matrix = matrix * translate->to_matrix(*this).release_value();
if (rotate.has_value())
matrix = matrix * rotate->to_matrix(*this).release_value();
if (scale.has_value())
matrix = matrix * scale->to_matrix(*this).release_value();
for (auto const& transform : transformations)
matrix = matrix * transform.to_matrix(*this).release_value();
set_transform(matrix);
auto const& transform_origin = computed_values.transform_origin();
auto reference_box = transform_box_rect();

2
Tests/LibWeb/Text/expected/css-transform-transition-to-none-invalidation.txt Normal file
View file

@ -0,0 +1,2 @@
before x=108, y=80, width=100, height=100
after x=58, y=50, width=100, height=100

22
Tests/LibWeb/Text/input/css-transform-transition-to-none-invalidation.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<style>
#box {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 50px;
}
</style>
<script src="include.js"></script>
<div id="box"></div>
<script>
test(() => {
const box = document.getElementById('box');
box.style.transform = 'translate(50px, 30px)';
const before = box.getBoundingClientRect();
println(`before x=${before.x}, y=${before.y}, width=${before.width}, height=${before.height}`);
box.style.transform = 'none';
const after = box.getBoundingClientRect();
println(`after x=${after.x}, y=${after.y}, width=${after.width}, height=${after.height}`);
});
</script>