Use "step-end" animation easing function in two-clip-path-animation-diff-length* WPTs.

Also, increase the length of a fairly-short animation in
two-clip-path-animation-diff-length3.html from 2s to 20s, to avoid intermittent
failures.  The test is assuming that the snapshot will happen while the
animation is playing, but the reftest-snapshot isn't guaranteed to be
instantaneous, and under certain configurations, it might be delayed a little
bit and get taken after the 2-second animation has finished playing.

Depends on D178876

Differential Revision: https://phabricator.services.mozilla.com/D178889

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1834665
gecko-commit: 36068bff405643ea6dc6af08f36a3d697ce52f73
gecko-reviewers: hiro

Author: dholbert

css/css-masking/clip-path/animations/two-clip-path-animation-diff-length1.html

@@ -7,7 +7,7 @@
     width: 100px;
     height: 100px;
     background-color: green;
-    animation: clippath2 10s, clippath1 0.001s;
+    animation: clippath2 10s step-end, clippath1 0.001s;
   }
 
   @keyframes clippath1 {

css/css-masking/clip-path/animations/two-clip-path-animation-diff-length2.html

@@ -7,7 +7,7 @@
     width: 100px;
     height: 100px;
     background-color: green;
-    animation: clippath2 100s, clippath1 20s 30s;
+    animation: clippath2 100s step-end, clippath1 20s 30s;
   }
 
   @keyframes clippath1 {

css/css-masking/clip-path/animations/two-clip-path-animation-diff-length3.html

@@ -7,7 +7,7 @@
     width: 100px;
     height: 100px;
     background-color: green;
-    animation: clippath2 10000s, clippath1 2s 0.001s;
+    animation: clippath2 10000s step-end, clippath1 20s 0.001s;
   }
 
   /* Use un-interpolatable keyframes to force discrete transition */