[css-animations] re-import css/css-animations WPTs

https://bugs.webkit.org/show_bug.cgi?id=263868 Reviewed by Antti Koivisto. There are a fair few new tests in that suite and we should update it before we start working on implementing some of the newer CSS Animations properties (such as animation-timeline). The matching WPT revision was fb2454bedde399dcc52d9f9e21201a3fbade64e5. * LayoutTests/imported/w3c/resources/resource-files.json: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-composition-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-composition-keyframes-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-composition-keyframes.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-composition.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-play-state-005.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-play-state-005.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/cancel-animation-shadow-slot-invalidation.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/crashtests/replace-keyframes-animating-filter-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/crashtests/w3c-import.log: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-animations/responsive/w3c-import.log. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/display-interpolation-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/display-interpolation.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/display-none-dont-cancel.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/display-none-dont-cancel.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/inheritance-pseudo-element-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/inheritance-pseudo-element-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/inheritance-pseudo-element.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-zero-angle-crash.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/missing-values-first-keyframe-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/missing-values-first-keyframe.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/missing-values-last-keyframe-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/missing-values-last-keyframe.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-end-computed.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-end-invalid.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-end-valid.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-invalid-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-invalid.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-shorthand-computed-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-shorthand-computed.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-shorthand-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-shorthand.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-start-computed.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-start-invalid.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-start-valid.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-duration-computed-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-duration-computed.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-end-computed-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-end-computed.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-end-invalid-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-end-invalid.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-end-valid-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-end-valid.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-shorthand-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-shorthand.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-start-computed-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-start-computed.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-start-invalid-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-start-invalid.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-start-valid-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-range-start-valid.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-shorthand-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-shorthand.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-valid-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/animation-valid.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/parsing/w3c-import.log: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/responsive/w3c-import.log: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/sample-on-last-keyframe-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/sample-on-last-keyframe.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js: (async waitForAnimationReadyToRestyle): Deleted. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/transition-properties-not-animatable-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/transition-properties-not-animatable.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/translation-animation-on-important-property-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log: Canonical link: https://commits.webkit.org/269974@main
WebKit · Oct 30, 2023 · 2ed0a83 · 2ed0a83
1 parent 2d4bed9
commit 2ed0a83
Show file tree

Hide file tree

Showing 73 changed files with 2,183 additions and 42 deletions.
diff --git a/LayoutTests/imported/w3c/resources/resource-files.json b/LayoutTests/imported/w3c/resources/resource-files.json
@@ -761,10 +761,13 @@
         "web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time-ref.html",
         "web-platform-tests/css/css-animations/animation-pseudo-dynamic-001-ref.html",
         "web-platform-tests/css/css-animations/animation-transform-pause-and-set-time-ref.html",
+        "web-platform-tests/css/css-animations/crashtests/replace-keyframes-animating-filter-001.html",
         "web-platform-tests/css/css-animations/flip-running-animation-via-variable-ref.html",
+        "web-platform-tests/css/css-animations/inheritance-pseudo-element-ref.html",
         "web-platform-tests/css/css-animations/nested-scale-animations-ref.html",
         "web-platform-tests/css/css-animations/svg-transform-animation-ref.html",
         "web-platform-tests/css/css-animations/transform-animation-under-large-scale-ref.html",
+        "web-platform-tests/css/css-animations/translation-animation-on-important-property-ref.html",
         "web-platform-tests/css/css-animations/translation-animation-subpixel-offset-ref.html",
         "web-platform-tests/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport-ref.html",
         "web-platform-tests/css/css-backgrounds/animations/background-color-animation-fallback-additive-keyframe-ref.html",

diff --git a/...3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html b/...3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
@@ -271,8 +271,9 @@
   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
   const anim = div.getAnimations()[0];
   anim.currentTime = 5 * MS_PER_SEC;
-  assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
-                'current localTime after setting currentTime');
+  assert_times_equal(anim.effect.getComputedTiming().localTime,
+                     anim.currentTime,
+                     'current localTime after setting currentTime');
 }, 'localTime of an animation is always equal to currentTime');
 
 promise_test(async t => {
@@ -283,13 +284,15 @@
 
   await anim.ready;
 
-  assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
-                'localTime is equal to currentTime');
+  assert_times_equal(anim.effect.getComputedTiming().localTime,
+                     anim.currentTime,
+                     'localTime is equal to currentTime');
 
   await waitForFrame();
 
-  assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
-                'localTime is equal to currentTime');
+  assert_times_equal(anim.effect.getComputedTiming().localTime,
+                     anim.currentTime,
+                     'localTime is equal to currentTime');
 }, 'localTime reflects playbackRate immediately');
 
 test(t => {

diff --git a/...s/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html b/...s/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html
@@ -352,7 +352,7 @@
   assert_equals(animations.length, 1,
                 'Should find only the element even if it has a child');
   assert_equals(animations[0].effect.target, parent,
-                'Effect target shuld be the element');
+                'Effect target should be the element');
 }, '{ subtree: false } on an element with a child returns only the element\'s'
    + ' animations');
 

diff --git a/.../web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt b/.../web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt
@@ -1,5 +1,5 @@
 
-PASS KeyframeEffect.getKeyframes() returns no frames for various kinds of empty enimations
+PASS KeyframeEffect.getKeyframes() returns no frames for various kinds of empty animations
 PASS KeyframeEffect.getKeyframes() returns expected frames for a simple animation
 PASS KeyframeEffect.getKeyframes() returns frames with expected easing values, when the easing comes from animation-timing-function on the element
 PASS KeyframeEffect.getKeyframes() returns frames with expected easing values, when the easing is specified on each keyframe

diff --git a/...rted/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html b/...rted/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
@@ -249,7 +249,7 @@
                 "number of frames when @keyframes only has frames with " +
                 "non-animatable properties");
 }, 'KeyframeEffect.getKeyframes() returns no frames for various kinds'
-   + ' of empty enimations');
+   + ' of empty animations');
 
 test(t => {
   const div = addDiv(t);

diff --git a/...sts/imported/w3c/web-platform-tests/css/css-animations/animation-composition-expected.txt b/...sts/imported/w3c/web-platform-tests/css/css-animations/animation-composition-expected.txt
@@ -0,0 +1,8 @@
+
+PASS animation-composition: replace of property filter
+PASS animation-composition: add of property filter
+PASS animation-composition: accumulate of property filter
+PASS animation-composition: replace of property width
+PASS animation-composition: add of property width
+PASS animation-composition: accumulate of property width
+
diff --git a/...ed/w3c/web-platform-tests/css/css-animations/animation-composition-keyframes-expected.txt b/...ed/w3c/web-platform-tests/css/css-animations/animation-composition-keyframes-expected.txt
@@ -0,0 +1,8 @@
+
+PASS animation-composition: replace of property filter
+PASS animation-composition: add of property filter
+PASS animation-composition: accumulate of property filter
+PASS animation-composition: replace of property width
+PASS animation-composition: add of property width
+PASS animation-composition: accumulate of property width
+
diff --git a/...s/imported/w3c/web-platform-tests/css/css-animations/animation-composition-keyframes.html b/...s/imported/w3c/web-platform-tests/css/css-animations/animation-composition-keyframes.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>animation-composition test in keyframes</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composition">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="support/testcommon.js"></script>
+<style>
+    @keyframes anim {
+        from {
+            animation-composition: add;
+            filter: blur(10px);
+            width: 100px;
+        }
+        50% {
+            animation-composition: accumulate;
+            filter: blur(15px);
+            width: 228px;
+        }
+        to {
+            animation-composition: replace;
+            filter: blur(50px);
+            width: 1337px;
+        }
+    }
+
+    .anim-target {
+        animation: anim 1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: linear;
+        filter: blur(5px);
+        width: 50px;
+    }
+
+    .replace {
+        animation-composition: replace;
+    }
+
+    .add {
+        animation-composition: add;
+    }
+
+    .accumulate {
+        animation-composition: accumulate;
+    }
+</style>
+<div id="log"></div>
+<script>
+    function run_test_case(element, property, composite_type, timing_value_map) {
+        element.classList.add(composite_type);
+        const anim = element.getAnimations()[0];
+        for (const [time, value] of Object.entries(timing_value_map)) {
+            anim.currentTime = time;
+            const property_value = getComputedStyle(element).getPropertyValue(property);
+            assert_equals(property_value, value, "at time " + time);
+        }
+        element.classList.remove(composite_type);
+    }
+
+    const test_cases = [
+        ["filter", {
+            "replace": {
+                0: "blur(5px) blur(10px)",
+                250: "blur(12.5px) blur(5px)",
+                500: "blur(20px)",
+                1000: "blur(50px)"
+            },
+            "add": {
+                0: "blur(5px) blur(10px)",
+                250: "blur(12.5px) blur(5px)",
+                500: "blur(20px)",
+                1000: "blur(50px)"
+            },
+            "accumulate": {
+                0: "blur(5px) blur(10px)",
+                250: "blur(12.5px) blur(5px)",
+                500: "blur(20px)",
+                1000: "blur(50px)"
+            }
+        }],
+        ["width", {
+            "replace": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1337px"
+            },
+            "add": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1337px"
+            },
+            "accumulate": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1337px"
+            }
+        }]
+    ]
+
+    for (const test_case of test_cases) {
+        const property = test_case[0];
+        const test_data = test_case[1];
+        for (const [composite_type, expected_values] of Object.entries(test_data)) {
+            test(t => {
+                let elem = addDiv(t, {"class": "anim-target"});
+                run_test_case(elem, property, composite_type, expected_values);
+            }, "animation-composition: " + composite_type + " of property " + property);
+        }
+    }
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-composition.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-composition.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>animation-composition test</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composition">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="support/testcommon.js"></script>
+<style>
+    @keyframes anim {
+        from {
+            filter: blur(10px);
+            width: 100px;
+        }
+        50% {
+            filter: blur(15px);
+            width: 228px;
+        }
+        to {
+            filter: blur(20px);
+            width: 1337px;
+        }
+    }
+
+    .anim-target {
+        animation: anim 1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: linear;
+        filter: blur(5px);
+        width: 50px;
+    }
+
+    .replace {
+        animation-composition: replace;
+    }
+
+    .add {
+        animation-composition: add;
+    }
+
+    .accumulate {
+        animation-composition: accumulate;
+    }
+</style>
+<div id="log"></div>
+<script>
+    function run_test_case(element, property, composite_type, timing_value_map) {
+        element.classList.add(composite_type);
+        const anim = element.getAnimations()[0];
+        for (const [time, value] of Object.entries(timing_value_map)) {
+            anim.currentTime = time;
+            const property_value = getComputedStyle(element).getPropertyValue(property);
+            assert_equals(property_value, value, "at time " + time);
+        }
+        element.classList.remove(composite_type);
+    }
+
+    const test_cases = [
+        ["filter", {
+            "replace": {
+                0: "blur(10px)",
+                250: "blur(12.5px)",
+                500: "blur(15px)",
+                1000: "blur(20px)"
+            },
+            "add": {
+                0: "blur(5px) blur(10px)",
+                250: "blur(5px) blur(12.5px)",
+                500: "blur(5px) blur(15px)",
+                1000: "blur(5px) blur(20px)"
+            },
+            "accumulate": {
+                0: "blur(15px)",
+                250: "blur(17.5px)",
+                500: "blur(20px)",
+                1000: "blur(25px)"
+            }
+        }],
+        ["width", {
+            "replace": {
+                0: "100px",
+                250: "164px",
+                500: "228px",
+                1000: "1337px"
+            },
+            "add": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1387px"
+            },
+            "accumulate": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1387px"
+            }
+        }]
+    ]
+
+    for (const test_case of test_cases) {
+        const property = test_case[0];
+        const test_data = test_case[1];
+        for (const [composite_type, expected_values] of Object.entries(test_data)) {
+            test(t => {
+                let elem = addDiv(t, {"class": "anim-target"});
+                run_test_case(elem, property, composite_type, expected_values);
+            }, "animation-composition: " + composite_type + " of property " + property);
+        }
+    }
+</script>
diff --git a/...w3c/web-platform-tests/css/css-animations/animation-play-state-005.tentative-expected.txt b/...w3c/web-platform-tests/css/css-animations/animation-play-state-005.tentative-expected.txt
@@ -0,0 +1,3 @@
+
+PASS CSS animation should not restart after resetting its animation-play-state
+
diff --git a/...mported/w3c/web-platform-tests/css/css-animations/animation-play-state-005.tentative.html b/...mported/w3c/web-platform-tests/css/css-animations/animation-play-state-005.tentative.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS animations shouldn't restart after resetting its play state</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-play-state">
+<link rel="help" href="https://drafts.csswg.org/web-animations-1/#playing-an-animation-section">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7145">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+  @keyframes anim {
+    from { transform: translateX(100px); }
+    to { transform: translateX(200px); }
+  }
+</style>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+// Check that the auto-rewind flag is set to false when playing an animation in
+// response to a change in animation-play-state.
+promise_test(async t => {
+  const div = addDiv(t, { style: 'animation: anim 100ms' });
+
+  await new Promise(function (resolve) {
+    div.addEventListener('animationend', () => {
+      // After the animation ends, change animation-play-state to paused, flush,
+      // then change it back to running to trigger the re-start.
+      div.style.animationPlayState = 'paused';
+      getComputedStyle(div).animationPlayState;
+      div.style.animationPlayState = 'running';
+      getComputedStyle(div).animationPlayState;
+      resolve();
+    });
+  });
+
+  // Check the animation has not restarted.
+  assert_equals(div.getAnimations().length, 0);
+  assert_equals(getComputedStyle(div).transform, 'none');
+}, 'CSS animation should not restart after resetting its animation-play-state');
+
+</script>
+</body>
diff --git a/.../w3c/web-platform-tests/css/css-animations/cancel-animation-shadow-slot-invalidation.html b/.../w3c/web-platform-tests/css/css-animations/cancel-animation-shadow-slot-invalidation.html
@@ -18,7 +18,7 @@
 <div id="dirty" class="none">PASS</div>
 <script>
   const root = host.attachShadow({mode:"open"});
-  root.innerHTML = "<slot />";
+  root.innerHTML = "<slot></slot>";
   requestAnimationFrame(() => {
     root.firstChild.name = "skip-slot";
     dirty.className = "";