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.

This change also adjusts existing Servo animation tests which assumed
that advancing to the exact moment of the end of the animation would be
considered "before the end." With this change, this moment is "after the
end."

Fixes: #14858

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

@@ -385595,6 +385595,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

@@ -12867,7 +12867,7 @@
    "css": {
     "animations": {
      "animation-delay.html": [
-      "0d2053a9134d8ff0ade7b5dc37ecfce305557c44",
+      "f54cf2b9bca93e82b177243b9d754e4ae3bf15fa",
       [
        null,
        {}
@@ -12883,7 +12883,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>