[scroll-animations] Use longhands in high-specificity rule

The selector '#container > div' has higher specificity than a single
#id selector, so in a browser which supports setting the animation-
timeline via the animation shorthand (which we don't support yet but
will soon), the animation-timeline always becomes auto. To fix
this, use longhands instead.

This prepares for animation-timeline-in-shorthand support.

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

third_party/blink/web_tests/external/wpt/scroll-animations/css/at-scroll-timeline-orientation.html

@@ -55,7 +55,9 @@
   }
   #container > div {
     width: 0px;
-    animation: expand 10s linear;
+    animation-name: expand;
+    animation-duration: 10s;
+    animation-timing-function: linear;
   }
   /* Ensure stable expectations if feature is not supported */
   @supports not (animation-timeline:foo) {

third_party/blink/web_tests/external/wpt/scroll-animations/css/at-scroll-timeline-source.html

@@ -64,7 +64,9 @@
   }
   #container > div {
     width: 0px;
-    animation: expand 10s linear;
+    animation-name: expand;
+    animation-duration: 10s;
+    animation-timing-function: linear;
   }
   /* Ensure stable expectations if feature is not supported */
   @supports not (animation-timeline:foo) {

third_party/blink/web_tests/external/wpt/scroll-animations/css/at-scroll-timeline-start-end.html

@@ -61,7 +61,9 @@
   }
   #container > div {
     width: 0px;
-    animation: expand 10s linear;
+    animation-name: expand;
+    animation-duration: 10s;
+    animation-timing-function: linear;
   }
   /* Ensure stable expectations if feature is not supported */
   @supports not (animation-timeline:foo) {

third_party/blink/web_tests/external/wpt/scroll-animations/css/at-scroll-timeline-time-range.html

@@ -37,7 +37,9 @@
   }
   #container > div {
     width: 0px;
-    animation: expand 10s linear;
+    animation-name: expand;
+    animation-duration: 10s;
+    animation-timing-function: linear;
   }
   /* Ensure stable expectations if feature is not supported */
   @supports not (animation-timeline:foo) {