Bug 1824120 [wpt PR 39162] - [scroll-animations] Reset animation-range-* in animation shorthand, a=testonly

Automatic update from web-platform-tests
[scroll-animations] Reset animation-range-* in animation shorthand

Fixed: 1408680
Change-Id: Ib2c076be38f1ef7d6396f3f5a339c45ae1bc9149
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4363802
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1122309}

--

wpt-commits: d2a103e01ea2a2a0b7b4a7678789038f6ee37270
wpt-pr: 39162

testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html

@@ -20,7 +20,9 @@ test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezie
   'animation-fill-mode': 'both',
   'animation-play-state': 'paused',
   'animation-name': 'anim',
-  'animation-timeline': 'auto'
+  'animation-timeline': 'auto',
+  'animation-range-start': 'normal',
+  'animation-range-end': 'normal',
 });
 
 test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)', {
@@ -32,7 +34,9 @@ test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezi
   'animation-fill-mode': 'both, none',
   'animation-play-state': 'paused, running',
   'animation-name': 'anim, none',
-  'animation-timeline': 'auto, auto'
+  'animation-timeline': 'auto, auto',
+  'animation-range-start': 'normal, normal',
+  'animation-range-end': 'normal, normal',
 });
 
 test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse', {
@@ -44,7 +48,9 @@ test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paus
   'animation-fill-mode': 'none, both',
   'animation-play-state': 'running, paused',
   'animation-name': 'none, anim',
-  'animation-timeline': 'auto, auto'
+  'animation-timeline': 'auto, auto',
+  'animation-range-start': 'normal, normal',
+  'animation-range-end': 'normal, normal',
 });
 </script>
 </body>

testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.tentative.html

@@ -18,6 +18,8 @@ test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezie
   'animation-fill-mode': 'both',
   'animation-play-state': 'paused',
   'animation-name': 'anim',
-  'animation-timeline': 'auto'
+  'animation-timeline': 'auto',
+  'animation-range-start': 'normal',
+  'animation-range-end': 'normal',
 });
 </script>

testing/web-platform/tests/scroll-animations/css/animation-shorthand.html

@@ -38,7 +38,9 @@ test_shorthand_value('animation',
   'animation-fill-mode': 'forwards, forwards, forwards',
   'animation-play-state': 'paused, paused, paused',
   'animation-name': 'anim1, anim2, anim3',
-  'animation-timeline': 'auto, auto, auto'
+  'animation-timeline': 'auto, auto, auto',
+  'animation-range-start': 'normal, normal, normal',
+  'animation-range-end': 'normal, normal, normal',
 });
 
 test((t) => {
@@ -89,4 +91,52 @@ test((t) => {
   assert_equals(getComputedStyle(target).animationDuration, '1s');
 }, 'Animation shorthand can not represent non-initial animation-delay-end (computed)');
 
+test((t) => {
+  t.add_cleanup(() => {
+    target.style = '';
+  });
+
+  target.style.animation = 'anim 1s';
+  target.style.animationRangeStart = 'entry';
+  assert_equals(target.style.animation, '');
+  assert_equals(target.style.animationName, 'anim');
+  assert_equals(target.style.animationDuration, '1s');
+}, 'Animation shorthand can not represent non-initial animation-range-start (specified)');
+
+test((t) => {
+  t.add_cleanup(() => {
+    target.style = '';
+  });
+
+  target.style.animation = 'anim 1s';
+  target.style.animationRangeStart = 'entry';
+  assert_equals(getComputedStyle(target).animation, '');
+  assert_equals(getComputedStyle(target).animationName, 'anim');
+  assert_equals(getComputedStyle(target).animationDuration, '1s');
+}, 'Animation shorthand can not represent non-initial animation-range-start (computed)');
+
+test((t) => {
+  t.add_cleanup(() => {
+    target.style = '';
+  });
+
+  target.style.animation = 'anim 1s';
+  target.style.animationRangeEnd = 'entry';
+  assert_equals(target.style.animation, '');
+  assert_equals(target.style.animationName, 'anim');
+  assert_equals(target.style.animationDuration, '1s');
+}, 'Animation shorthand can not represent non-initial animation-range-end (specified)');
+
+test((t) => {
+  t.add_cleanup(() => {
+    target.style = '';
+  });
+
+  target.style.animation = 'anim 1s';
+  target.style.animationRangeEnd = 'entry';
+  assert_equals(getComputedStyle(target).animation, '');
+  assert_equals(getComputedStyle(target).animationName, 'anim');
+  assert_equals(getComputedStyle(target).animationDuration, '1s');
+}, 'Animation shorthand can not represent non-initial animation-range-end (computed)');
+
 </script>

testing/web-platform/tests/scroll-animations/css/view-timeline-animation-range-update.tentative.html

@@ -19,7 +19,8 @@
     width: 200px;
     height: 200px;
   }
-  #target {
+  /* Reset specificity to allow animation-range-* from .restrict-range to win. */
+  :where(#target) {
     margin: 800px 0px;
     width: 100px;
     height: 100px;