LibWeb/CSS: Use serialize_a_number() for Length serialization

This changes the maximum number of decimal places from 5 to 6, but 5 was
previously a guess, and not specified behaviour:

> For all of the decimal changes (except color) I couldn't really find a
> spec that mandates any required precision, so I just copied what
> Firefox seems to do, which is limit the output to 5 decimal places.
> https://github.com/SerenityOS/serenity/pull/23449
This commit is contained in:
Sam Atkins 2025-08-18 12:56:29 +01:00
commit dffebee901
Notes: github-actions[bot] 2025-08-18 15:54:28 +00:00
5 changed files with 47 additions and 34 deletions

View file

@ -225,11 +225,24 @@ String Length::to_string(SerializationMode serialization_mode) const
{
if (is_auto())
return "auto"_string;
// https://drafts.csswg.org/cssom/#serialize-a-css-value
// -> <length>
// The <number> component serialized as per <number> followed by the unit in its canonical form as defined in its
// respective specification.
// FIXME: Manually skip this for px so we avoid rounding errors in absolute_length_to_px.
// Maybe provide alternative functions that don't produce CSSPixels?
if (serialization_mode == SerializationMode::ResolvedValue && is_absolute() && m_type != Type::Px)
return MUST(String::formatted("{:.5}px", absolute_length_to_px()));
return MUST(String::formatted("{:.5}{}", m_value, unit_name()));
if (serialization_mode == SerializationMode::ResolvedValue && is_absolute() && m_type != Type::Px) {
StringBuilder builder;
serialize_a_number(builder, absolute_length_to_px().to_double());
builder.append("px"sv);
return builder.to_string_without_validation();
}
StringBuilder builder;
serialize_a_number(builder, m_value);
builder.append(unit_name());
return builder.to_string_without_validation();
}
StringView Length::unit_name() const

View file

@ -95,11 +95,11 @@ line-height: 'calc(2 * var(--n))' -> '64px'
margin-bottom: 'calc(2px)' -> '2px'
margin-bottom: 'calc(2px * var(--n))' -> '4px'
margin-left: 'calc(2%)' -> '15.6875px'
margin-left: 'calc(2% * var(--n))' -> '31.35938px'
margin-left: 'calc(2% * var(--n))' -> '31.359375px'
margin-right: 'calc(2px)' -> '2px'
margin-right: 'calc(2px * var(--n))' -> '4px'
margin-top: 'calc(2%)' -> '15.6875px'
margin-top: 'calc(2% * var(--n))' -> '31.35938px'
margin-top: 'calc(2% * var(--n))' -> '31.359375px'
math-depth: 'calc(2)' -> '2'
math-depth: 'calc(2 * var(--n))' -> '4'
max-height: 'calc(2px)' -> '2px'
@ -121,11 +121,11 @@ outline-width: 'calc(2px * var(--n))' -> '0px'
padding-bottom: 'calc(2px)' -> '2px'
padding-bottom: 'calc(2px * var(--n))' -> '4px'
padding-left: 'calc(2%)' -> '15.6875px'
padding-left: 'calc(2% * var(--n))' -> '31.35938px'
padding-left: 'calc(2% * var(--n))' -> '31.359375px'
padding-right: 'calc(2px)' -> '2px'
padding-right: 'calc(2px * var(--n))' -> '4px'
padding-top: 'calc(2%)' -> '15.6875px'
padding-top: 'calc(2% * var(--n))' -> '31.35938px'
padding-top: 'calc(2% * var(--n))' -> '31.359375px'
r: 'calc(2px)' -> '2px'
r: 'calc(2px * var(--n))' -> '4px'
right: 'calc(2%)' -> '2%'
@ -159,7 +159,7 @@ transition-duration: 'calc(2s * var(--n))' -> '4s'
vertical-align: 'calc(2px)' -> '2px'
vertical-align: 'calc(2px * var(--n))' -> '4px'
width: 'calc(2%)' -> '15.6875px'
width: 'calc(2% * var(--n))' -> '31.35938px'
width: 'calc(2% * var(--n))' -> '31.359375px'
word-spacing: 'calc(2px)' -> '2px'
word-spacing: 'calc(2px * var(--n))' -> '4px'
x: 'calc(2px)' -> '2px'

View file

@ -6,7 +6,7 @@ At time 400:
background-color: rgb(78, 88, 99)
background-repeat: repeat-x
bottom: auto
box-shadow: rgb(153, 0, 102) 40px 80px 126px 0px inset, rgba(0, 0, 102, 0.4) 20px 4px 8px 12px
box-shadow: rgb(153, 0, 102) 40.000001px 80.000001px 126.000002px 0px inset, rgba(0, 0, 102, 0.4) 20px 4px 8px 12px
color: rgb(153, 0, 102)
transform: matrix(1, 0, 0, 1, 40, 40)

View file

@ -1,3 +1,3 @@
18.8125px
36.625px
54.79688px
54.796875px

View file

@ -4,34 +4,34 @@ Found 140 tests
84 Pass
56 Fail
Fail CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-8.50705e+37px]
Fail CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-8.5070575e+37px]
Fail CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (0) should be [0px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [8.50705e+37px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [1.70141e+38px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [2.552115e+38px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.40282e+38px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [4.2535250000000006e+38px]
Fail CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-8.50705e+37px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [8.5070575e+37px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [1.7014115e+38px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [2.55211725e+38px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.402823e+38px]
Pass CSS Transitions: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [4.2535287499999996e+38px]
Fail CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-8.5070575e+37px]
Fail CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (0) should be [0px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [8.50705e+37px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [1.70141e+38px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [2.552115e+38px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.40282e+38px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [4.2535250000000006e+38px]
Fail CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-3.40282e+38px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [8.5070575e+37px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [1.7014115e+38px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [2.55211725e+38px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.402823e+38px]
Pass CSS Transitions with transition: all: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [4.2535287499999996e+38px]
Fail CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-3.402823e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0) should be [0px]
Fail CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [3.40282e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [3.40282e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [3.40282e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.40282e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [3.40282e+38px]
Fail Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-3.40282e+38px]
Fail CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [3.402823e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [3.402823e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [3.402823e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.402823e+38px]
Pass CSS Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [3.402823e+38px]
Fail Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-3.402823e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0) should be [0px]
Fail Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [3.40282e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [3.40282e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [3.40282e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.40282e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [3.40282e+38px]
Fail Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.25) should be [3.402823e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.5) should be [3.402823e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (0.75) should be [3.402823e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1) should be [3.402823e+38px]
Pass Web Animations: property <left> from [0px] to [calc(infinity * 1px)] at (1.25) should be [3.402823e+38px]
Fail CSS Transitions: property <left> from [calc(50% - 25px)] to [calc(100% - 10px)] at (-0.25) should be [-10px]
Fail CSS Transitions: property <left> from [calc(50% - 25px)] to [calc(100% - 10px)] at (0) should be [0px]
Fail CSS Transitions: property <left> from [calc(50% - 25px)] to [calc(100% - 10px)] at (0.25) should be [10px]