From de9bceacfb50a06e6a798b6d31df36b98c40683f Mon Sep 17 00:00:00 2001
From: Callum Law <callumlaw1709@outlook.com>
Date: Fri, 21 Nov 2025 21:54:38 +1300
Subject: [PATCH] Disallow contraction of {scroll,view}-timeline shorthands
 when longhands have dissimilar cardinality

According to https://drafts.csswg.org/cssom/#serializing-css-values (step
1.2) shorthands should only be contracted if they can exactly represent
the values of all it's longhands - that was not the case for these
tests. Take for example the test which expected

```css
scroll-timeline-name: --a, --b, --c;
scroll-timeline-axis: inline, inline;
```

to be serialized as

```css
scroll-timeline: --a inline, --b inline, --c inline;
```

The serialized value actually represents the longhand value for
`scroll-timeline-axis` of `inline, inline, line` (3 elements instead of
the original 2).

This matches the behavior of Chrome & Firefox.
---
 scroll-animations/css/scroll-timeline-shorthand.html | 4 ++--
 scroll-animations/css/view-timeline-shorthand.html   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/scroll-animations/css/scroll-timeline-shorthand.html b/scroll-animations/css/scroll-timeline-shorthand.html
index 722a8a1f4d7b71..0c8a47ae20d189 100644
--- a/scroll-animations/css/scroll-timeline-shorthand.html
+++ b/scroll-animations/css/scroll-timeline-shorthand.html
@@ -100,10 +100,10 @@
 test_shorthand_contraction('scroll-timeline', {
   'scroll-timeline-name': '--a, --b, --c',
   'scroll-timeline-axis': 'inline, inline',
-}, '--a inline, --b inline, --c inline');
+}, '');
 
 test_shorthand_contraction('scroll-timeline', {
   'scroll-timeline-name': '--a, --b',
   'scroll-timeline-axis': 'inline, inline, inline',
-}, '--a inline, --b inline');
+}, '');
 </script>
diff --git a/scroll-animations/css/view-timeline-shorthand.html b/scroll-animations/css/view-timeline-shorthand.html
index 9027eb0b09dc7d..c14c1c88067810 100644
--- a/scroll-animations/css/view-timeline-shorthand.html
+++ b/scroll-animations/css/view-timeline-shorthand.html
@@ -148,17 +148,17 @@
   'view-timeline-name': '--a, --b, --c',
   'view-timeline-axis': 'inline, inline',
   'view-timeline-inset': 'auto, auto',
-}, '--a inline, --b inline, --c inline');
+}, '');
 
 test_shorthand_contraction('view-timeline', {
   'view-timeline-name': '--a, --b',
   'view-timeline-axis': 'inline, inline, inline',
   'view-timeline-inset': 'auto, auto, auto',
-}, '--a inline, --b inline');
+}, '');
 
 test_shorthand_contraction('view-timeline', {
   'view-timeline-name': '--a, --b',
   'view-timeline-axis': 'inline, inline',
   'view-timeline-inset': 'auto, auto, auto',
-}, '--a inline, --b inline');
+}, '');
 </script>