RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-06-01 11:28:11 +00:00
Code Issues Activity Actions

LibWeb: Produce resolved transform value according to spec algorithm

Browse source 
We now produce a `matrix3d()` value when appropriate.

Some sites (such as gsap.com) request the resolved style for `transform`
when there's no viewport paintable, but the element itself does already
have a stacking context. This fixes crashes in that case, because we now
do not access the stacking context at all.

We also do not wrap the result as a StyleValueList any more. The
returned StyleValue is only serialized and exposed to JS, so making it a
StyleValueList has no effect.
This commit is contained in:
Sam Atkins 2023-10-12 12:30:28 +01:00 • committed by Andreas Kling
parent c65d6964ea
commit c9c99b3c42
3 changed files with 122 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt Normal file
View file

@ -0,0 +1,17 @@
none => none
matrix(1, 2, 3, 4, 5, 6) => matrix(1, 2, 3, 4, 5, 6)
matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16) => matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)
translate(1%, 2px) => matrix(1, 0, 0, 1, 7.84375, 2)
translate3d(1%, 2px, 3em) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.84375, 2, 48, 1)
translateX(1px) => matrix(1, 0, 0, 1, 1, 0)
translateY(1%) => matrix(1, 0, 0, 1, 0, 0)
scale(1, 2) => matrix(1, 0, 0, 2, 0, 0)
scaleX(2) => matrix(2, 0, 0, 1, 0, 0)
scaleY(2.5) => matrix(1, 0, 0, 2.5, 0, 0)
rotate(1deg) => matrix(0.999847, 0.017452, -0.017452, 0.999847, 0, 0)
rotateX(1rad) => matrix3d(1, 0, 0, 0, 0, 0.540302, 0.841470, 0, 0, -0.841470, 0.540302, 0, 0, 0, 0, 1)
rotateY(1grad) => matrix3d(0.999876, 0, -0.015707, 0, 0, 1, 0, 0, 0.015707, 0, 0.999876, 0, 0, 0, 0, 1)
rotateZ(1turn) => matrix(1, 0, -0, 1, 0, 0)
skew(1deg, 1rad) => matrix(1, 1.557407, 0.017455, 1, 0, 0)
skewX(1deg) => matrix(1, 0, 0.017455, 1, 0, 0)
skewY(1rad) => matrix(1, 1.557407, 0, 1, 0, 0)

35
Tests/LibWeb/Text/input/css/getComputedStyle-transform.html Normal file
View file

@ -0,0 +1,35 @@
<script src="../include.js"></script>
<script>
test(() => {
const e = document.createElement("div");
document.body.appendChild(e);
function checkTransform(transform) {
e.style.transform = transform;
const computedStyle = getComputedStyle(e);
const serialized = computedStyle.transform;
println(transform + " => " + serialized);
}
for (transform of [
"none",
"matrix(1, 2, 3, 4, 5, 6)",
"matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)",
"translate(1%, 2px)",
"translate3d(1%, 2px, 3em)",
"translateX(1px)",
"translateY(1%)",
"scale(1, 2)",
"scaleX(2)",
"scaleY(2.5)",
"rotate(1deg)",
"rotateX(1rad)",
"rotateY(1grad)",
"rotateZ(1turn)",
"skew(1deg, 1rad)",
"skewX(1deg)",
"skewY(1rad)",
]) {
checkTransform(transform);
}
e.remove();
});
</script>