CSSTransitionDiscrete: implement transition-animation-type (#40551)

This is being discussed here:
w3c/csswg-drafts#8857
The name and values of the property are still under discussion.

This patch does not implement the transition shorthand integration, I'm
going to do that next.

Fixed: 1450870
Bug: 1453112
Change-Id: I808cf6bc090ca0f99229eb4a9d9c3c28ccf22afc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4616155
Commit-Queue: Robert Flack <flackr@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Auto-Submit: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1168211}

Co-authored-by: Joey Arhar <jarhar@chromium.org>

css/css-animations/display-interpolation.html

@@ -26,10 +26,9 @@
 
 test_interpolation({
   property: 'display',
+  animationType: 'discrete',
   from: 'block',
   to: 'none',
-  // transition:all is not supposed to allow display to be transitioned.
-  'CSS Transitions with transition: all': alwaysNone
 }, [
   {at: -1, expect: 'block'},
   {at: 0, expect: 'block'},
@@ -39,11 +38,12 @@
   {at: 1.5, expect: 'none'},
 ]);
 
-// This transitions tests expect 'block' at every point because transitioning
+// This transitions test expect 'block' at every point because transitioning
 // from display:none does not provide an initial style. This is expected and
 // can be worked around by using @initial.
 test_interpolation({
   property: 'display',
+  animationType: 'discrete',
   from: 'none',
   to: 'block',
   'CSS Transitions with transition: all': alwaysBlock,
@@ -65,12 +65,14 @@
 
 test_interpolation({
   property: 'display',
+  animationType: 'discrete',
   from: 'block',
   to: 'block'
 }, alwaysBlock);
 
 test_interpolation({
   property: 'display',
+  animationType: 'discrete',
   from: 'none',
   to: 'none'
 }, alwaysNone);

css/css-contain/content-visibility/content-visibility-interpolation.html

@@ -26,10 +26,9 @@
 
 test_interpolation({
   property: 'content-visibility',
+  animationType: 'discrete',
   from: 'visible',
   to: 'hidden',
-  // transition:all is not supposed to allow content-visibility to be transitioned.
-  'CSS Transitions with transition: all': alwaysHidden,
 }, [
   {at: -1, expect: 'visible'},
   {at: 0, expect: 'visible'},
@@ -41,10 +40,9 @@
 
 test_interpolation({
   property: 'content-visibility',
+  animationType: 'discrete',
   from: 'hidden',
   to: 'visible',
-  // transition:all is not supposed to allow content-visibility to be transitioned.
-  'CSS Transitions with transition: all': alwaysVisible,
 }, [
   {at: -1, expect: 'hidden'},
   {at: 0, expect: 'hidden'},

css/css-position/overlay/overlay-transition-backdrop-entry.html

@@ -13,6 +13,7 @@
     transition-delay: 2s;
     transition-property: overlay;
     transition-duration: 2s;
+    transition-animation-type: discrete;
   }
   [popover]::backdrop {
     background-color: blue;

css/css-position/overlay/overlay-transition-backdrop.html

@@ -8,6 +8,7 @@
     display: block;
     visibility: hidden;
     transition: overlay 60s step-end;
+    transition-animation-type: discrete;
   }
   [popover]::backdrop {
     background-color: green;

css/css-position/overlay/overlay-transition-finished.html

@@ -20,6 +20,7 @@
   }
   #transition-in {
     transition: overlay 0.1s step-end;
+    transition-animation-type: discrete;
     background-color: green;
   }
 </style>

css/css-position/overlay/overlay-transition-in-rendering.html

@@ -17,6 +17,7 @@
   }
   #transition-in {
     transition: overlay 60s step-end;
+    transition-animation-type: discrete;
     background-color: red;
   }
 </style>

css/css-position/overlay/overlay-transition-out-rendering.html

@@ -20,6 +20,7 @@
   }
   #green.transition-enabled {
     transition: overlay 60s step-end;
+    transition-animation-type: discrete;
   }
 </style>
 <div id="red" popover="manual"></div>

css/css-position/overlay/overlay-transition.html

@@ -12,6 +12,7 @@
   }
   .enable-transitions :is(#transition-in, #transition-out) {
     transition: overlay 60s step-end;
+    transition-animation-type: discrete;
   }
 </style>
 <div id="container">

css/css-properties-values-api/animation/custom-property-transition-custom-ident.html

@@ -11,6 +11,7 @@
   from: "from",
   to: "to",
   expected: "to",
+  animationType: "discrete",
 }, 'A custom property of type <custom-ident> can yield a discrete CSS Transition');
 
-</script>
+</script>

css/css-properties-values-api/animation/custom-property-transition-image.html

@@ -11,6 +11,7 @@
   from: 'url("https://example.com/from")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
+  animationType: 'discrete',
 }, 'A custom property of type <image> can yield a CSS Transition');
 
-</script>
+</script>

css/css-properties-values-api/animation/custom-property-transition-mismatched-list.html

@@ -11,20 +11,23 @@
   from: '100deg, 200deg',
   to: '300deg',
   expected: '300deg',
+  animationType: 'discrete',
 }, 'A custom property of type <angle># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<angle>+",
   from: '100deg 200deg',
   to: '300deg',
   expected: '300deg',
+  animationType: 'discrete',
 }, 'A custom property of type <angle>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
   syntax: "<color>#",
   from: 'rgb(100, 100, 100), rgb(150, 150, 150)',
   to: 'rgb(200, 200, 200)',
   expected: 'rgb(200, 200, 200)',
+  animationType: 'discrete',
 }, 'A custom property of type <color># yields a discrete CSS Transition if the lists do not contain the same number of values');
 
 transition_test({
@@ -174,4 +177,4 @@
   expected: 'url("https://example.com/to")',
 }, 'A custom property of type <url>+ yields a discrete CSS Transition if the lists do not contain the same number of values');
 
-</script>
+</script>

css/css-properties-values-api/animation/custom-property-transition-transform-function.html

@@ -10,7 +10,8 @@
   syntax: "<transform-function>",
   from: "translateX(100px)",
   to: "translateX(200px)",
-  expected: "translateX(150px)"
+  expected: "translateX(150px)",
+  animationType: 'discrete',
 }, 'A custom property of type <transform-function> can yield a CSS Transition');
 
-</script>
+</script>

css/css-properties-values-api/animation/custom-property-transition-transform-list.html

@@ -10,7 +10,8 @@
   syntax: "<transform-list>",
   from: "translateX(100px) scale(2)",
   to: "translateX(200px) scale(4)",
-  expected: "translateX(150px) scale(3)"
+  expected: "translateX(150px) scale(3)",
+  animationType: 'discrete',
 }, 'A custom property of type <transform-list> can yield a CSS Transition');
 
-</script>
+</script>

css/css-properties-values-api/animation/custom-property-transition-url.html

@@ -11,6 +11,7 @@
   from: 'url("https://example.com/from")',
   to: 'url("https://example.com/to")',
   expected: 'url("https://example.com/to")',
+  animationType: 'discrete',
 }, 'A custom property of type <url> can yield a discrete CSS Transition');
 
-</script>
+</script>

css/css-properties-values-api/resources/utils.js

@@ -204,6 +204,9 @@ function transition_test(options, description) {
     });
 
     target.style.transition = `${options.transitionProperty} 1s -500ms linear`;
+    if (options.animationType) {
+      target.style.transitionAnimationType = options.animationType;
+    }
     target.style.setProperty(customProperty, options.to);
 
     const animations = target.getAnimations();

css/css-transitions/all-with-discrete.tentative.html

@@ -5,48 +5,30 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/css-animations/support/testcommon.js"></script>
 
-<div id=target1 class=target>hello</div>
-<div id=target2 class=target>hello</div>
+<div id=target>hello</div>
 
 <style>
-.target {
+#target {
   float: left;
   width: 100px;
   height: 100px;
+  transition-animation-type: discrete;
+  transition: all 1s;
 }
-.target.animated {
+#target.animated {
   float: right;
 }
-
-#target1 {
-  transition: all 1s, float 1s;
-}
-
-#target2 {
-  transition: all 1s;
-}
 </style>
 
 <script>
 promise_test(async () => {
   let transitionstartFired = false;
-  target1.addEventListener('transitionstart', () => {
+  target.addEventListener('transitionstart', () => {
     transitionstartFired = true;
   });
   await waitForAnimationFrames(2);
-  target1.classList.add('animated');
+  target.classList.add('animated');
   await waitForAnimationFrames(1);
   assert_true(transitionstartFired);
-}, 'all with an explicit discrete property should animate.');
-
-promise_test(async () => {
-  let transitionstartFired = false;
-  target2.addEventListener('transitionstart', () => {
-    transitionstartFired = true;
-  });
-  await waitForAnimationFrames(2);
-  target2.classList.add('animated');
-  await waitForAnimationFrames(1);
-  assert_false(transitionstartFired);
-}, 'all without an explicit discrete property should not animate.');
+}, 'transition:all with transition-animation-type:discrete should animate discrete properties.');
 </script>

css/motion/animation/offset-interpolation.html

@@ -15,9 +15,9 @@
         to: 'path("M0 300H 700 Z") 600px 900deg',
         method: 'CSS Transitions',
       }, [
-        {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'},
-        {at: 0, expect: 'path("M0 200H 700") 500px 800deg'},
-        {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'},
+        {at: -0.3, expect: 'path("M0 300H 700 Z") 470px 770deg'},
+        {at: 0, expect: 'path("M0 300H 700 Z") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 300H 700 Z") 530px 830deg'},
         {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
         {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
         {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
@@ -29,9 +29,9 @@
         to: 'path("M0 0H 300") 600px 0deg',
         method: 'CSS Transitions',
       }, [
-        {at: -0.3, expect: 'path("M0 0H 170") 470px auto 0deg'},
-        {at: 0, expect: 'path("M0 0H 200") 500px auto 0deg'},
-        {at: 0.3, expect: 'path("M0 0H 230") 530px auto 0deg'},
+        {at: -0.3, expect: 'path("M0 0H 170") 470px 0deg'},
+        {at: 0, expect: 'path("M0 0H 200") 500px 0deg'},
+        {at: 0.3, expect: 'path("M0 0H 230") 530px 0deg'},
         {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'},
         {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
         {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'},

css/support/interpolation-testcommon.js

@@ -61,13 +61,16 @@
     notAnimatableExpectations: function(from, to, underlying) {
       return expectFlip(from, to, -Infinity);
     },
-    interpolate: function(property, from, to, at, target) {
+    interpolate: function(property, from, to, at, target, animationType) {
       // Force a style recalc on target to set the 'from' value.
       getComputedStyle(target).getPropertyValue(property);
       target.style.transitionDuration = '100s';
       target.style.transitionDelay = '-50s';
       target.style.transitionTimingFunction = createEasing(at);
       target.style.transitionProperty = property;
+      if (animationType) {
+        target.style.transitionAnimationType = animationType;
+      }
       target.style.setProperty(property, isNeutralKeyframe(to) ? '' : to);
     },
   };
@@ -87,13 +90,16 @@
     notAnimatableExpectations: function(from, to, underlying) {
       return expectFlip(from, to, -Infinity);
     },
-    interpolate: function(property, from, to, at, target) {
+    interpolate: function(property, from, to, at, target, animationType) {
       // Force a style recalc on target to set the 'from' value.
       getComputedStyle(target).getPropertyValue(property);
       target.style.transitionDuration = '100s';
       target.style.transitionDelay = '-50s';
       target.style.transitionTimingFunction = createEasing(at);
       target.style.transitionProperty = 'all';
+      if (animationType) {
+        target.style.transitionAnimationType = animationType;
+      }
       target.style.setProperty(property, isNeutralKeyframe(to) ? '' : to);
     },
   };
@@ -256,6 +262,7 @@
     var from = interpolationTest.options.from;
     var to = interpolationTest.options.to;
     var comparisonFunction = interpolationTest.options.comparisonFunction;
+    var animationType = interpolationTest.options.animationType;
 
     if ((interpolationTest.options.method && interpolationTest.options.method != interpolationMethod.name)
       || !interpolationMethod.supportsProperty(property)
@@ -301,7 +308,7 @@
       }
       interpolationMethod.setup(property, from, target);
       target.interpolate = function() {
-        interpolationMethod.interpolate(property, from, to, expectation.at, target);
+        interpolationMethod.interpolate(property, from, to, expectation.at, target, animationType);
       };
       target.measure = function() {
         for (var [expectedProp, expectedStr] of Object.entries(expectedProperties)) {