CSSTransitionDiscrete: implement transition-animation-type

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.

Bug: 1453112
Change-Id: I808cf6bc090ca0f99229eb4a9d9c3c28ccf22afc

css/css-animations/display-interpolation.html

@@ -26,6 +26,7 @@
 
 test_interpolation({
   property: 'display',
+  propertyType: 'discrete',
   from: 'block',
   to: 'none',
   // transition:all is not supposed to allow display to be transitioned.
@@ -44,6 +45,7 @@
 // can be worked around by using @initial.
 test_interpolation({
   property: 'display',
+  propertyType: 'discrete',
   from: 'none',
   to: 'block',
   'CSS Transitions with transition: all': alwaysBlock,
@@ -65,12 +67,14 @@
 
 test_interpolation({
   property: 'display',
+  propertyType: 'discrete',
   from: 'block',
   to: 'block'
 }, alwaysBlock);
 
 test_interpolation({
   property: 'display',
+  propertyType: 'discrete',
   from: 'none',
   to: 'none'
 }, alwaysNone);

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

@@ -26,6 +26,7 @@
 
 test_interpolation({
   property: 'content-visibility',
+  propertyType: 'discrete',
   from: 'visible',
   to: 'hidden',
   // transition:all is not supposed to allow content-visibility to be transitioned.
@@ -41,6 +42,7 @@
 
 test_interpolation({
   property: 'content-visibility',
+  propertyType: 'discrete',
   from: 'hidden',
   to: 'visible',
   // transition:all is not supposed to allow content-visibility to be transitioned.

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",
+  propertyType: "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")',
+  propertyType: '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',
+  propertyType: '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',
+  propertyType: '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)',
+  propertyType: '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)",
+  propertyType: '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)",
+  propertyType: '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")',
+  propertyType: '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.propertyType) {
+      target.style.transitionPropertyType = options.propertyType;
+    }
     target.style.setProperty(customProperty, options.to);
 
     const animations = target.getAnimations();

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

@@ -19,10 +19,12 @@
 }
 
 #target1 {
+  transition-animation-type: discrete;
   transition: all 1s, float 1s;
 }
 
 #target2 {
+  transition-animation-type: discrete;
   transition: all 1s;
 }
 </style>

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

@@ -56,18 +56,21 @@
       target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
     },
     nonInterpolationExpectations: function(from, to) {
-      return expectFlip(from, to, 0.5);
+      return expectFlip(from, to, -Infinity);
     },
     notAnimatableExpectations: function(from, to, underlying) {
       return expectFlip(from, to, -Infinity);
     },
-    interpolate: function(property, from, to, at, target) {
+    interpolate: function(property, from, to, at, target, propertyType) {
       // 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 (propertyType) {
+        target.style.transitionPropertyType = propertyType;
+      }
       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, propertyType) {
       // 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 (propertyType) {
+        target.style.transitionPropertyType = propertyType;
+      }
       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 propertyType = interpolationTest.options.propertyType;
 
     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, propertyType);
       };
       target.measure = function() {
         for (var [expectedProp, expectedStr] of Object.entries(expectedProperties)) {