beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-21 23:20:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb/CSS: Serialize transform scale percentage values as numbers

Browse source
This commit is contained in:
Bastiaan van der Plaat 2024-07-02 21:47:51 +02:00 committed by Andreas Kling
parent 34741d09c6
commit c81a640f3e
Notes: sideshowbarker 2024-07-17 03:30:41 +09:00 
Author: https://github.com/bplaat
Commit: https://github.com/LadybirdBrowser/ladybird/commit/c81a640f3e
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/372
Reviewed-by: https://github.com/AtkinsSJ ✅
3 changed files with 148 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
Tests/LibWeb/Text/expected/css/transform-serialization.txt Normal file
View file

@ -0,0 +1,58 @@
none => none
matrix(1, 0, 0, 1, 0, 0) => matrix(1, 0, 0, 1, 0, 0)
matrix(1, 2, 3, 4, 5, 6) => matrix(1, 2, 3, 4, 5, 6)
matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6) => matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6)
translate(1px) => translate(1px)
translate(1px, 0%) => translate(1px, 0%)
translate(2%, -3%) => translate(2%, -3%)
translateX(-4px) => translateX(-4px)
translateY(5%) => translateY(5%)
scale(2) => scale(2)
scale(3, 4) => scale(3, 4)
scale(-2) => scale(-2)
scale(-5, -6) => scale(-5, -6)
scale(250%) => scale(2.5)
scale(2.5) => scale(2.5)
scale(325%, 475%) => scale(3.25, 4.75)
scale(3.25, 4.75) => scale(3.25, 4.75)
scale(1, 200%) => scale(1, 2)
scale(1, 2) => scale(1, 2)
scale(-250%) => scale(-2.5)
scale(-2.5) => scale(-2.5)
scale(-500%, -620%) => scale(-5, -6.2)
scale(-5, -6.2) => scale(-5, -6.2)
scaleX(7) => scaleX(7)
scaleX(720%) => scaleX(7.2)
scaleX(7.2) => scaleX(7.2)
scaleY(-8) => scaleY(-8)
scaleY(-85%) => scaleY(-0.85)
scaleY(-0.85) => scaleY(-0.85)
scaleZ(4) => scaleZ(4)
scaleZ(25%) => scaleZ(0.25)
scaleZ(0.25) => scaleZ(0.25)
scale3d(0.5, 2.5, 3) => scale3d(0.5, 2.5, 3)
scale3d(50%, 250%, 300%) => scale3d(0.5, 2.5, 3)
scale3d(0.5, 2.5, 3) => scale3d(0.5, 2.5, 3)
scale3d(-0.5, 2.5, -3) => scale3d(-0.5, 2.5, -3)
scale3d(-50%, 250%, -300%) => scale3d(-0.5, 2.5, -3)
scale3d(-0.5, 2.5, -3) => scale3d(-0.5, 2.5, -3)
scale3d(1, 200%, 3) => scale3d(1, 2, 3)
scale3d(1, 2, 3) => scale3d(1, 2, 3)
rotate(0) => rotate(0deg)
rotate(0deg) => rotate(0deg)
rotate(90deg) => rotate(90deg)
skew(0) => skew(0deg)
skew(0deg) => skew(0deg)
skew(90deg) => skew(90deg)
skew(0, -90deg) => skew(0deg, -90deg)
skew(0deg, -90deg) => skew(0deg, -90deg)
skew(90deg, 0) => skew(90deg, 0deg)
skewX(0) => skewX(0deg)
skewX(0deg) => skewX(0deg)
skewX(90deg) => skewX(90deg)
skewY(0) => skewY(0deg)
skewY(0deg) => skewY(0deg)
skewY(-90deg) => skewY(-90deg)
perspective(10px) => perspective(10px)
perspective(none) => perspective(none)
translate(1px, 2%) scale(3, 4) rotate(-90deg) => translate(1px, 2%) scale(3, 4) rotate(-90deg)

73
Tests/LibWeb/Text/input/css/transform-serialization.html Normal file
View file

@ -0,0 +1,73 @@
<script src="../include.js"></script>
<script>
test(() => {
function serialize(input) {
const e = document.createElement("div");
e.style.transform = input;
println(`${input} => ${e.style.transform}`);
}
for (transformOrigin of [
"none",
"matrix(1, 0, 0, 1, 0, 0)",
"matrix(1, 2, 3, 4, 5, 6)",
"matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6)",
"translate(1px)",
"translate(1px, 0%)",
"translate(2%, -3%)",
"translateX(-4px)",
"translateY(5%)",
"scale(2)",
"scale(3, 4)",
"scale(-2)",
"scale(-5, -6)",
"scale(250%)",
"scale(2.5)",
"scale(325%, 475%)",
"scale(3.25, 4.75)",
"scale(1, 200%)",
"scale(1, 2)",
"scale(-250%)",
"scale(-2.5)",
"scale(-500%, -620%)",
"scale(-5, -6.2)",
"scaleX(7)",
"scaleX(720%)",
"scaleX(7.2)",
"scaleY(-8)",
"scaleY(-85%)",
"scaleY(-0.85)",
"scaleZ(4)",
"scaleZ(25%)",
"scaleZ(0.25)",
"scale3d(0.5, 2.5, 3)",
"scale3d(50%, 250%, 300%)",
"scale3d(0.5, 2.5, 3)",
"scale3d(-0.5, 2.5, -3)",
"scale3d(-50%, 250%, -300%)",
"scale3d(-0.5, 2.5, -3)",
"scale3d(1, 200%, 3)",
"scale3d(1, 2, 3)",
"rotate(0)",
"rotate(0deg)",
"rotate(90deg)",
"skew(0)",
"skew(0deg)",
"skew(90deg)",
"skew(0, -90deg)",
"skew(0deg, -90deg)",
"skew(90deg, 0)",
"skewX(0)",
"skewX(0deg)",
"skewX(90deg)",
"skewY(0)",
"skewY(0deg)",
"skewY(-90deg)",
"perspective(10px)",
"perspective(none)",
"translate(1px, 2%) scale(3, 4) rotate(-90deg)",
]) {
serialize(transformOrigin);
}
});
</script>

18
Userland/Libraries/LibWeb/CSS/StyleValues/TransformationStyleValue.cpp
View file

@ -9,6 +9,7 @@
#include "TransformationStyleValue.h"
#include <AK/StringBuilder.h>
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
namespace Web::CSS {
@ -18,7 +19,22 @@ String TransformationStyleValue::to_string() const
builder.append(CSS::to_string(m_properties.transform_function));
builder.append('(');
for (size_t i = 0; i < m_properties.values.size(); ++i) {
builder.append(m_properties.values[i]->to_string());
auto const& value = m_properties.values[i];
// https://www.w3.org/TR/css-transforms-2/#individual-transforms
// A <percentage> is equivalent to a <number>, for example scale: 100% is equivalent to scale: 1.
// Numbers are used during serialization of specified and computed values.
if ((m_properties.transform_function == CSS::TransformFunction::Scale
|| m_properties.transform_function == CSS::TransformFunction::Scale3d
|| m_properties.transform_function == CSS::TransformFunction::ScaleX
|| m_properties.transform_function == CSS::TransformFunction::ScaleY
|| m_properties.transform_function == CSS::TransformFunction::ScaleZ)
&& value->is_percentage()) {
builder.append(MUST(String::number(value->as_percentage().percentage().as_fraction())));
} else {
builder.append(value->to_string());
}
if (i != m_properties.values.size() - 1)
builder.append(", "sv);
}