[scroll-animations] Implement CSSScrollTimelineRule.cssText

Bug: 1074052
Change-Id: I04682962935ae10e35d2eeb907428c746380235b
Fixed: 1096420
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2510056Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822807}

third_party/blink/renderer/core/css/css_scroll_timeline_rule.cc

@@ -4,7 +4,9 @@
 
 #include "third_party/blink/renderer/core/css/css_scroll_timeline_rule.h"
 
+#include "third_party/blink/renderer/core/css/css_markup.h"
 #include "third_party/blink/renderer/core/css/style_rule.h"
+#include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
 
 namespace blink {
 
@@ -16,8 +18,37 @@ CSSScrollTimelineRule::CSSScrollTimelineRule(
 CSSScrollTimelineRule::~CSSScrollTimelineRule() = default;
 
 String CSSScrollTimelineRule::cssText() const {
-  // TODO(crbug.com/1096420): Implement
-  return "";
+  StringBuilder builder;
+  builder.Append("@scroll-timeline ");
+  SerializeIdentifier(name(), builder);
+  builder.Append(" { ");
+  if (const CSSValue* source = scroll_timeline_rule_->GetSource()) {
+    builder.Append("source: ");
+    builder.Append(source->CssText());
+    builder.Append("; ");
+  }
+  if (const CSSValue* orientation = scroll_timeline_rule_->GetOrientation()) {
+    builder.Append("orientation: ");
+    builder.Append(orientation->CssText());
+    builder.Append("; ");
+  }
+  if (const CSSValue* start = scroll_timeline_rule_->GetStart()) {
+    builder.Append("start: ");
+    builder.Append(start->CssText());
+    builder.Append("; ");
+  }
+  if (const CSSValue* end = scroll_timeline_rule_->GetEnd()) {
+    builder.Append("end: ");
+    builder.Append(end->CssText());
+    builder.Append("; ");
+  }
+  if (const CSSValue* time_range = scroll_timeline_rule_->GetTimeRange()) {
+    builder.Append("time-range: ");
+    builder.Append(time_range->CssText());
+    builder.Append("; ");
+  }
+  builder.Append("}");
+  return builder.ToString();
 }
 
 void CSSScrollTimelineRule::Reattach(StyleRuleBase* rule) {

third_party/blink/web_tests/external/wpt/scroll-animations/css/scroll-timeline-cssom.tentative.html

@@ -100,6 +100,75 @@ test_name('a\\9 b', 'a\tb'); // U+0009 CHARACTER TABULATION
 test_name('"foo"', 'foo');
 test_name('"none"', 'none');
 
+// CSSScrollTimelineRule.cssText
+
+function test_csstext(description, specified, expected) {
+  if (typeof(expected) == 'undefined')
+    expected = specified;
+  test_stylesheet(specified, (rules) => {
+    assert_equals(rules.length, 1);
+    assert_equals(rules[0].constructor.name, 'CSSScrollTimelineRule');
+    assert_equals(rules[0].cssText, expected);
+  }, `CSSScrollTimelineRule.cssText: ${description}`);
+}
+
+test_csstext(
+  'empty rule',
+  `@scroll-timeline timeline {}`,
+  `@scroll-timeline timeline { }`);
+
+// U+0009 CHARACTER TABULATION
+test_csstext(
+  'escaped name',
+  `@scroll-timeline tab\\9 tab {}`,
+  `@scroll-timeline tab\\9 tab { }`);
+
+test_csstext(
+  'source descriptor',
+  `@scroll-timeline timeline { source: selector(#foo); }`);
+
+test_csstext(
+  'orientation descriptor',
+  `@scroll-timeline timeline { orientation: inline; }`);
+
+test_csstext(
+  'start descriptor (px)',
+  `@scroll-timeline timeline { start: 100px; }`);
+
+test_csstext(
+  'start descriptor (offset)',
+  `@scroll-timeline timeline { start: selector(#bar); }`);
+
+test_csstext(
+  'start descriptor (offset with edge)',
+  `@scroll-timeline timeline { start: selector(#bar) start; }`);
+
+test_csstext(
+  'start descriptor (offset with threshold)',
+  `@scroll-timeline timeline { start: selector(#bar) 1; }`);
+
+test_csstext(
+  'start descriptor (offset with edge and threshold)',
+  `@scroll-timeline timeline { start: selector(#bar) start 1; }`);
+
+test_csstext(
+  'start descriptor (offset with threshold and edge)',
+  `@scroll-timeline timeline { start: selector(#bar) 1 start; }`,
+  `@scroll-timeline timeline { start: selector(#bar) start 1; }`);
+
+test_csstext(
+  'time-range descriptor',
+  `@scroll-timeline timeline { time-range: 10s; }`);
+
+test_csstext(
+  'defaults',
+  `@scroll-timeline timeline { source: none; orientation: auto; start: auto; end: auto; time-range: auto; }`);
+
+test_csstext(
+  'order',
+  `@scroll-timeline timeline { orientation: auto; time-range: auto; source: none; end: auto; start: auto; }`,
+  `@scroll-timeline timeline { source: none; orientation: auto; start: auto; end: auto; time-range: auto; }`);
+
 // CSSScrollTimelineRule.source
 
 function test_source(specified, expected) {