mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 07:30:19 +00:00
LibWeb/CSS: Serialize transform scale percentage values as numbers
This commit is contained in:
Bastiaan van der Plaat
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
58
Tests/LibWeb/Text/expected/css/transform-serialization.txt
Normal file
58
Tests/LibWeb/Text/expected/css/transform-serialization.txt
Normal 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
73
Tests/LibWeb/Text/input/css/transform-serialization.html
Normal 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>
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
|
|
||||||
#include "TransformationStyleValue.h"
|
#include "TransformationStyleValue.h"
|
||||||
#include <AK/StringBuilder.h>
|
#include <AK/StringBuilder.h>
|
||||||
|
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
|
||||||
|
|
||||||
namespace Web::CSS {
|
namespace Web::CSS {
|
||||||
|
|
||||||
|
|
@ -18,7 +19,22 @@ String TransformationStyleValue::to_string() const
|
||||||
builder.append(CSS::to_string(m_properties.transform_function));
|
builder.append(CSS::to_string(m_properties.transform_function));
|
||||||
builder.append('(');
|
builder.append('(');
|
||||||
for (size_t i = 0; i < m_properties.values.size(); ++i) {
|
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)
|
if (i != m_properties.values.size() - 1)
|
||||||
builder.append(", "sv);
|
builder.append(", "sv);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue