Auto merge of #27032 - mrobinson:fractional-iteration, r=jdm

animations: Finish support for fractional iteration counts

This change also improves support for creating animations with negative
delays, as that is necessary to test support for fractional iteration
lengths.

Fixes: #14858

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #14858
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

tests/wpt/metadata-layout-2020/css/css-animations/animation-delay-011.html.ini

@@ -1,2 +0,0 @@
-[animation-delay-011.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-blur.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-blur.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-brightness.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-brightness.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-combined-001.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-combined-001.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-contrast.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-contrast.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-grayscale.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-grayscale.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-invert.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-invert.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-opacity.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-opacity.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-saturate.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-saturate.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/filter-effects/css-filters-animation-sepia.html.ini

@@ -1,2 +0,0 @@
-[css-filters-animation-sepia.html]
-  expected: FAIL

tests/wpt/metadata/MANIFEST.json

@@ -386051,6 +386051,13 @@
        {}
       ]
      ],
+     "animation-iteration-count-009.html": [
+      "da86c81b9337a99841977acd8e2ffe8b8e858190",
+      [
+       null,
+       {}
+      ]
+     ],
      "animation-iteration-count-calc.html": [
       "44e1e96a589a4e1c5b98e919e7246d05097b0604",
       [

tests/wpt/metadata/css/css-ui/outline-017.html.ini

@@ -1,10 +0,0 @@
-[outline-017.html]
-  [outline-color is animated as a color]
-    expected: FAIL
-
-  [outline-width is animated as a length]
-    expected: FAIL
-
-  [outline-offset is animated as a length]
-    expected: FAIL
-

tests/wpt/metadata/css/css-ui/outline-018.html.ini

@@ -1,4 +0,0 @@
-[outline-018.html]
-  [outline-style is animated as a discrete type]
-    expected: FAIL
-

tests/wpt/mozilla/meta/MANIFEST.json

@@ -12871,7 +12871,7 @@
    "css": {
     "animations": {
      "animation-delay.html": [
-      "0d2053a9134d8ff0ade7b5dc37ecfce305557c44",
+      "f54cf2b9bca93e82b177243b9d754e4ae3bf15fa",
       [
        null,
        {}
@@ -12887,7 +12887,7 @@
       ]
      ],
      "animation-fill-mode.html": [
-      "9602ec9f0e0eb1f6efcc2e7bd95181ef65339bae",
+      "ac3062879af9836768890d653f4b29b6165b6a45",
       [
        null,
        {}

tests/wpt/mozilla/tests/css/animations/animation-delay.html

@@ -31,6 +31,7 @@ test(function() {
   element.style.animationIterationCount = 1;
   element.style.animationName = "width-animation";
   element.style.animationTimingFunction = "linear";
+  element.style.animationFillMode = "forwards";
 
   document.body.appendChild(element);
   assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
@@ -48,7 +49,7 @@ test(function() {
   assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
 
   testBinding.advanceClock(500);
-  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
 }, "animation-delay should function correctly");
 
 test(function() {
@@ -61,6 +62,7 @@ test(function() {
   element.style.animationIterationCount = 2;
   element.style.animationName = "width-animation";
   element.style.animationTimingFunction = "linear";
+  element.style.animationFillMode = "forwards";
 
   document.body.appendChild(element);
   assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
@@ -85,7 +87,7 @@ test(function() {
   assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
 
   testBinding.advanceClock(500);
-  assert_equals(getComputedStyle(element).getPropertyValue("width"), "50px");
+  assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
 }, "animation-delay should function correctly with multiple iterations");
 
 </script>

tests/wpt/mozilla/tests/css/animations/animation-fill-mode.html

@@ -48,8 +48,9 @@ function runThroughAnimation(testBinding, element, waitForDelay = true) {
   testBinding.advanceClock(500);
   assert_equals(getComputedStyle(element).getPropertyValue("width"), "250px");
 
+  // After advancing another 500 milliseconds the animation should finished and
+  // width value will depend on the value of `animation-fill-mode`.
   testBinding.advanceClock(500);
-  assert_equals(getComputedStyle(element).getPropertyValue("width"), "500px");
 }
 
 test(function() {

tests/wpt/web-platform-tests/css/css-animations/animation-iteration-count-009.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Animation Test: fractional animation-iteration-count</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#animation-iteration-count">
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+@keyframes margin-animation {
+  from {
+    margin-left: 0px;
+  }
+  to {
+    margin-left: 100px;
+  }
+}
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+promise_test(async t => {
+  const div = addDiv(t);
+  div.style.animation = 'margin-animation 1s -10s linear 1.5 normal forwards paused';
+  assert_equals(getComputedStyle(div).marginLeft, '50px');
+}, 'Basic floating point iteration count');
+
+promise_test(async t => {
+  const div = addDiv(t);
+  div.style.animation = 'margin-animation 1s -10s linear 3.25 normal forwards paused';
+  assert_equals(getComputedStyle(div).marginLeft, '25px');
+}, 'Floating point iteration count after multiple iterations');
+
+promise_test(async t => {
+  const div = addDiv(t);
+  div.style.animation = 'margin-animation 1s -10s linear 0.75 normal forwards paused';
+  assert_equals(getComputedStyle(div).marginLeft, '75px');
+}, 'Floating point iteration count during first iteration');
+
+promise_test(async t => {
+  const div = addDiv(t);
+  div.style.animation = 'margin-animation 1s -10s linear 1.75 alternate forwards paused';
+  assert_equals(getComputedStyle(div).marginLeft, '25px');
+}, 'Floating point iteration count with alternating directions');
+</script>