LibWeb: Preserve unit when serializing time values

Previously, when serializing a time value, we would always convert it
to seconds. We now canonicalize the time value only when serializing
its computed value.
This commit is contained in:
Tim Ledbetter 2025-03-19 16:48:33 +00:00 committed by Sam Atkins
commit d0be5a0cdf
Notes: github-actions[bot] 2025-03-20 17:00:33 +00:00
4 changed files with 35 additions and 2 deletions

View file

@ -26,7 +26,12 @@ public:
virtual double value() const override { return m_time.raw_value(); }
virtual StringView unit() const override { return m_time.unit_name(); }
virtual String to_string(SerializationMode) const override { return m_time.to_string(); }
virtual String to_string(SerializationMode serialization_mode) const override
{
if (serialization_mode == SerializationMode::ResolvedValue)
return MUST(String::formatted("{}s", m_time.to_seconds()));
return m_time.to_string();
}
bool equals(CSSStyleValue const& other) const override
{

View file

@ -28,7 +28,7 @@ Time Time::percentage_of(Percentage const& percentage) const
String Time::to_string() const
{
return MUST(String::formatted("{}s", to_seconds()));
return MUST(String::formatted("{}{}", raw_value(), unit_name()));
}
double Time::to_seconds() const

View file

@ -0,0 +1,9 @@
Harness status: OK
Found 3 tests
2 Pass
1 Fail
Pass e.style['transition-duration'] = "0s" should set the property value
Pass e.style['transition-duration'] = "500ms" should set the property value
Fail e.style['transition-duration'] = "1s, 2s" should set the property value

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions: parsing transition-duration with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-duration">
<meta name="assert" content="transition-duration supports the full grammar '<time> #'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("transition-duration", '0s');
test_valid_value("transition-duration", '500ms');
test_valid_value("transition-duration", '1s, 2s');
</script>
</body>
</html>