Bug 1881331 [wpt PR 44713] - Reapply "Add allow-discrete to non-inter…

…polable WPTs", a=testonly

Automatic update from web-platform-tests
Reapply "Add allow-discrete to non-interpolable WPTs"

This patch changes the test runner for animation tests in WPT to
additionally test transition-behavior:allow-discrete for any property
that we are running a non-interpolable or non-animatable test on.

Original patch: https://chromium-review.googlesource.com/c/chromium/src/+/4989757
Revert: https://chromium-review.googlesource.com/c/chromium/src/+/5038074

Now that interop2023 has been frozen and interop2024 has started with
support for allow-discrete, we can reapply these WPT changes.

web-platform-tests/interop#580
web-platform-tests/wpt.fyi#3639

Change-Id: Ic5397d2be86e540e82a6f73746d8450f9832e790
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5314252
Commit-Queue: David Baron <[email protected]>
Reviewed-by: David Baron <[email protected]>
Auto-Submit: Joey Arhar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1264380}

--

wpt-commits: b4d3a4ecdd4dbbc8ed1fe3993ba1f510075c6247
wpt-pr: 44713

testing/web-platform/tests/css/support/interpolation-testcommon.js

@@ -104,6 +104,59 @@
     },
   };
 
+  var cssTransitionsInterpolationAllowDiscrete = {
+    name: 'CSS Transitions with transition-behavior:allow-discrete',
+    isSupported: function() {return true;},
+    supportsProperty: function() {return true;},
+    supportsValue: function() {return true;},
+    setup: function(property, from, target) {
+      target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
+    },
+    nonInterpolationExpectations: function(from, to) {
+      return expectFlip(from, to, 0.5);
+    },
+    notAnimatableExpectations: function(from, to, underlying) {
+      return expectFlip(from, to, -Infinity);
+    },
+    interpolate: function(property, from, to, at, target, behavior) {
+      // 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;
+      target.style.transitionBehavior = 'allow-discrete';
+      target.style.setProperty(property, isNeutralKeyframe(to) ? '' : to);
+    },
+  };
+
+  var cssTransitionAllInterpolationAllowDiscrete = {
+    name: 'CSS Transitions with transition-property:all and transition-behavor:allow-discrete',
+    isSupported: function() {return true;},
+    // The 'all' value doesn't cover custom properties.
+    supportsProperty: function(property) {return property.indexOf('--') !== 0;},
+    supportsValue: function() {return true;},
+    setup: function(property, from, target) {
+      target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
+    },
+    nonInterpolationExpectations: function(from, to) {
+      return expectFlip(from, to, 0.5);
+    },
+    notAnimatableExpectations: function(from, to, underlying) {
+      return expectFlip(from, to, -Infinity);
+    },
+    interpolate: function(property, from, to, at, target, behavior) {
+      // 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';
+      target.style.transitionBehavior = 'allow-discrete';
+      target.style.setProperty(property, isNeutralKeyframe(to) ? '' : to);
+    },
+  };
+
   var webAnimationsInterpolation = {
     name: 'Web Animations',
     isSupported: function() {return 'animate' in Element.prototype;},
@@ -435,13 +488,19 @@
   function test_not_animatable(options) {
     test_interpolation(options, expectNotAnimatable);
   }
-  function create_tests() {
+  function create_tests(addAllowDiscreteTests) {
     var interpolationMethods = [
       cssTransitionsInterpolation,
       cssTransitionAllInterpolation,
       cssAnimationsInterpolation,
       webAnimationsInterpolation,
     ];
+    if (addAllowDiscreteTests) {
+      interpolationMethods = [
+        cssTransitionsInterpolationAllowDiscrete,
+        cssTransitionAllInterpolationAllowDiscrete,
+      ].concat(interpolationMethods);
+    }
     var container = createElement(document.body);
     var targets = createTestTargets(interpolationMethods, interpolationTests, compositionTests, container);
     // Separate interpolation and measurement into different phases to avoid O(n^2) of the number of targets.
@@ -456,7 +515,7 @@
 
   function test_interpolation(options, expectations) {
     interpolationTests.push({options, expectations});
-    create_tests();
+    create_tests(expectations === expectNoInterpolation || expectations === expectNotAnimatable);
     interpolationTests = [];
   }
   function test_composition(options, expectations) {