Attachment 389795 Details for Bug 207263 – Patch

[patch] Patch

bug-207263-20200205141057.patch (text/plain), 336.50 KB, created by Antoine Quint on 2020-02-05 05:11:00 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Antoine Quint

Created: 2020-02-05 05:11:00 PST

Size: 336.50 KB

patch

obsolete

>Subversion Revision: 255810
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 8470c99f056f8bee7caa7d51ad950ffac7910b99..b92c28c919b6c18a098a9def775626e4056add5d 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,13 @@
>+2020-02-05  Antoine Quint  <graouts@apple.com>
>+
>+        [Web Animations] Update snapshot of Web Animations, CSS Animations and CSS Transitions WPT tests
>+        https://bugs.webkit.org/show_bug.cgi?id=207263
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * TestExpectations:
>+        * tests-options.json:
>+
> 2020-02-05  Antoine Quint  <graouts@apple.com>
> 
>         [Web Animations] Canceling an accelerated animation before it was committed does not prevent it from playing
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 171c07b05b5c536d0d61f61828af35a31d572f43..1a27d1abaf6e04f9bfe8808e1d6c0c209476ae95 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,154 @@
>+2020-02-05  Antoine Quint  <graouts@apple.com>
>+
>+        [Web Animations] Update snapshot of Web Animations, CSS Animations and CSS Transitions WPT tests
>+        https://bugs.webkit.org/show_bug.cgi?id=207263
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * resources/import-expectations.json:
>+        * resources/resource-files.json:
>+        * web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative.html: Added.
>+        * web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-id.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative-expected.txt: Removed.
>+        * web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html: Removed.
>+        * web-platform-tests/css/css-animations/Document-getAnimations.tentative-expected.txt:
>+        * web-platform-tests/css/css-animations/Document-getAnimations.tentative.html:
>+        * web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html:
>+        * web-platform-tests/css/css-animations/Element-getAnimations.tentative-expected.txt:
>+        * web-platform-tests/css/css-animations/Element-getAnimations.tentative.html:
>+        * web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html:
>+        * web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html:
>+        * web-platform-tests/css/css-animations/animation-before-initial-box-construction-001-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/animation-before-initial-box-construction-001.html: Added.
>+        * web-platform-tests/css/css-animations/animationevent-interface.js:
>+        (test):
>+        * web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html:
>+        * web-platform-tests/css/css-animations/support/empty-sheet.css: Added.
>+        * web-platform-tests/css/css-animations/support/w3c-import.log:
>+        * web-platform-tests/css/css-animations/w3c-import.log:
>+        * web-platform-tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html:
>+        * web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative-expected.txt: Removed.
>+        * web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html: Removed.
>+        * web-platform-tests/css/css-transitions/CSSTransition-canceling.tentative.html:
>+        * web-platform-tests/css/css-transitions/CSSTransition-currentTime.tentative.html:
>+        * web-platform-tests/css/css-transitions/CSSTransition-effect.tentative.html:
>+        * web-platform-tests/css/css-transitions/CSSTransition-finished.tentative.html:
>+        * web-platform-tests/css/css-transitions/CSSTransition-ready.tentative.html:
>+        * web-platform-tests/css/css-transitions/CSSTransition-startTime.tentative.html:
>+        * web-platform-tests/css/css-transitions/Document-getAnimations.tentative-expected.txt:
>+        * web-platform-tests/css/css-transitions/Document-getAnimations.tentative.html:
>+        * web-platform-tests/css/css-transitions/Element-getAnimations.tentative.html:
>+        * web-platform-tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html:
>+        * web-platform-tests/css/css-transitions/KeyframeEffect-target.tentative.html:
>+        * web-platform-tests/css/css-transitions/README.md:
>+        * web-platform-tests/css/css-transitions/animations/text-shadow-composition-expected.txt: Added.
>+        * web-platform-tests/css/css-transitions/animations/text-shadow-composition.html: Added.
>+        * web-platform-tests/css/css-transitions/animations/text-shadow-interpolation-expected.txt: Added.
>+        * web-platform-tests/css/css-transitions/animations/text-shadow-interpolation.html: Added.
>+        * web-platform-tests/css/css-transitions/animations/vertical-align-composition-expected.txt: Added.
>+        * web-platform-tests/css/css-transitions/animations/vertical-align-composition.html: Added.
>+        * web-platform-tests/css/css-transitions/animations/vertical-align-interpolation-expected.txt: Added.
>+        * web-platform-tests/css/css-transitions/animations/vertical-align-interpolation.html: Added.
>+        * web-platform-tests/css/css-transitions/animations/w3c-import.log: Copied from LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/w3c-import.log.
>+        * web-platform-tests/css/css-transitions/animations/z-index-interpolation-expected.txt: Added.
>+        * web-platform-tests/css/css-transitions/animations/z-index-interpolation.html: Added.
>+        * web-platform-tests/css/css-transitions/before-load-001.html:
>+        * web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed-expected.txt:
>+        * web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed.html:
>+        * web-platform-tests/css/css-transitions/properties-value-001.html:
>+        * web-platform-tests/css/css-transitions/properties-value-002.html:
>+        * web-platform-tests/css/css-transitions/properties-value-003.html:
>+        * web-platform-tests/css/css-transitions/properties-value-auto-001.html:
>+        * web-platform-tests/css/css-transitions/properties-value-implicit-001.html:
>+        * web-platform-tests/css/css-transitions/properties-value-inherit-001.html:
>+        * web-platform-tests/css/css-transitions/properties-value-inherit-002.html:
>+        * web-platform-tests/css/css-transitions/properties-value-inherit-003.html:
>+        * web-platform-tests/css/css-transitions/pseudo-elements-001.html:
>+        * web-platform-tests/css/css-transitions/transition-001.html:
>+        * web-platform-tests/css/css-transitions/transition-delay-001.html:
>+        * web-platform-tests/css/css-transitions/transition-duration-001.html:
>+        * web-platform-tests/css/css-transitions/transition-property-001.html:
>+        * web-platform-tests/css/css-transitions/transition-property-002.html:
>+        * web-platform-tests/css/css-transitions/transitionevent-interface.html:
>+        * web-platform-tests/css/css-transitions/w3c-import.log:
>+        * web-platform-tests/css/support/interpolation-testcommon.js:
>+        (cssAnimationsInterpolation.isSupported):
>+        (cssTransitionsInterpolation.isSupported):
>+        (cssTransitionAllInterpolation.isSupported):
>+        (webAnimationsInterpolation.isSupported):
>+        (webAnimationsInterpolation.interpolateComposite):
>+        (createInterpolationTestTargets):
>+        (create_tests):
>+        (test_interpolation):
>+        * web-platform-tests/web-animations/README.md:
>+        * web-platform-tests/web-animations/animation-model/animation-types/property-list.js:
>+        (testAnimationSamplesWithAnyOrder):
>+        * web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform-expected.txt: Added.
>+        * web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html: Added.
>+        * web-platform-tests/web-animations/animation-model/combining-effects/w3c-import.log:
>+        * web-platform-tests/web-animations/interfaces/Animatable/animate-expected.txt:
>+        * web-platform-tests/web-animations/interfaces/Animatable/animate.html:
>+        * web-platform-tests/web-animations/interfaces/Animation/commitStyles-expected.txt:
>+        * web-platform-tests/web-animations/interfaces/Animation/commitStyles.html:
>+        * web-platform-tests/web-animations/interfaces/Animation/onremove-expected.txt: Added.
>+        * web-platform-tests/web-animations/interfaces/Animation/onremove.html: Added.
>+        * web-platform-tests/web-animations/interfaces/Animation/pause.html:
>+        * web-platform-tests/web-animations/interfaces/Animation/play.html:
>+        * web-platform-tests/web-animations/interfaces/Animation/w3c-import.log:
>+        * web-platform-tests/web-animations/interfaces/AnimationEffect/updateTiming.html:
>+        * web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/w3c-import.log:
>+        * web-platform-tests/web-animations/interfaces/Document/getAnimations-expected.txt: Removed.
>+        * web-platform-tests/web-animations/interfaces/Document/w3c-import.log:
>+        * web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations-expected.txt: Added.
>+        * web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations.html.
>+        * web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/w3c-import.log: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/w3c-import.log.
>+        * web-platform-tests/web-animations/interfaces/DocumentTimeline/w3c-import.log:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events-expected.txt:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events.html:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/target-expected.txt:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/target.html:
>+        * web-platform-tests/web-animations/interfaces/KeyframeEffect/w3c-import.log:
>+        * web-platform-tests/web-animations/testcommon.js:
>+        (cubicBezier): Deleted.
>+        * web-platform-tests/web-animations/timing-model/animations/finishing-an-animation-expected.txt:
>+        * web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html:
>+        * web-platform-tests/web-animations/timing-model/animations/pausing-an-animation-expected.txt:
>+        * web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html:
>+        * web-platform-tests/web-animations/timing-model/animations/playing-an-animation-expected.txt:
>+        * web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html:
>+        * web-platform-tests/web-animations/timing-model/animations/reverse-running-animation-expected.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html:
>+        * web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation-expected.txt:
>+        * web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation.html:
>+        * web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation-expected.txt:
>+        * web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation.html:
>+        * web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation-expected.txt:
>+        * web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html:
>+        * web-platform-tests/web-animations/timing-model/animations/sync-start-times-expected.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/sync-start-times.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast-expected.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow-expected.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero-expected.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero.html: Added.
>+        * web-platform-tests/web-animations/timing-model/animations/w3c-import.log:
>+        * web-platform-tests/web-animations/w3c-import.log:
>+
> 2020-02-04  Rob Buis  <rbuis@igalia.com>
> 
>         Tighten up stylesheet loading
>diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
>index c868238f228f2ea4229845c0a7739f13a03f6f22..c33097c46094f70475f7b91df1878441b248bc73 100644
>--- a/LayoutTests/TestExpectations
>+++ b/LayoutTests/TestExpectations
>@@ -3501,3 +3501,13 @@ webkit.org/b/206753 imported/w3c/web-platform-tests/css/css-backgrounds/first-le
> webkit.org/b/206578 [ Debug ] imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-width-interpolation.html [ Crash ]
> webkit.org/b/206579 [ Debug ] imported/w3c/web-platform-tests/css/css-backgrounds/background-size/vector/zero-height-ratio-auto-5px.html [ Crash ]
> webkit.org/b/206579 [ Debug ] imported/w3c/web-platform-tests/css/css-backgrounds/background-size/vector/zero-width-ratio-auto-5px.html [ Crash ]
>+
>+webkit.org/b/207260 imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html [ ImageOnlyFailure ]
>+webkit.org/b/207260 imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast.html [ ImageOnlyFailure ]
>+webkit.org/b/207260 imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow.html [ ImageOnlyFailure ]
>+webkit.org/b/207260 imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero.html [ ImageOnlyFailure ]
>+
>+webkit.org/b/207261 [ Debug ] imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition.html [ Crash ]
>+webkit.org/b/207261 [ Debug ] imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation.html [ Crash ]
>+
>+webkit.org/b/207262 imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times.html [ Pass ImageOnlyFailure ]
>diff --git a/LayoutTests/imported/w3c/resources/import-expectations.json b/LayoutTests/imported/w3c/resources/import-expectations.json
>index e7fbc8c58963b96e69613fba6e060a4b96279ee0..a3be37743a38b47907f10729aad01161ff4aabd3 100644
>--- a/LayoutTests/imported/w3c/resources/import-expectations.json
>+++ b/LayoutTests/imported/w3c/resources/import-expectations.json
>@@ -14,6 +14,7 @@
>     "custom-elements": "import", 
>     "shadow-dom": "import", 
>     "tools": "import", 
>+    "web-animations": "import", 
>     "web-platform-tests/2dcontext": "import", 
>     "web-platform-tests/2dcontext/imagebitmap": "import", 
>     "web-platform-tests/2dcontext/transformations/canvas_transformations_reset_001-ref.html": "import", 
>@@ -396,4 +397,4 @@
>     "web-platform-tests/worklets": "skip", 
>     "web-platform-tests/x-frame-options": "skip", 
>     "web-platform-tests/xhr": "import"
>-}
>+}
>\ No newline at end of file
>diff --git a/LayoutTests/imported/w3c/resources/resource-files.json b/LayoutTests/imported/w3c/resources/resource-files.json
>index 6c5da7145f92ddf3d02a6e81d1cd4b8de368c9f9..6e79840bd31c9935a14ad2cfc2c75c37de2b976a 100644
>--- a/LayoutTests/imported/w3c/resources/resource-files.json
>+++ b/LayoutTests/imported/w3c/resources/resource-files.json
>@@ -100,6 +100,7 @@
>         "web-platform-tests/css/WOFF2/support/available-001a.xht",
>         "web-platform-tests/css/WOFF2/support/available-001b.xht",
>         "web-platform-tests/css/WOFF2/testcaseindex.xht",
>+        "web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html",
>         "web-platform-tests/css/css-backgrounds/background-attachment-local-scrolling.htm",
>         "web-platform-tests/css/css-backgrounds/background-clip-content-box.html",
>         "web-platform-tests/css/css-backgrounds/background-clip-padding-box-with-border-radius.html",
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
>index 374a55b95bb84c5745d90cbeb4ee42fefdc2e20b..fd2197fcace453760d8ef7613139a978ab8ba0e6 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>AnimationEffect.getComputedTiming() for CSS animations</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html
>index 77fb133e202dfdf9dc553b5e9b089e58fa689d57..b76af2c24ac636bf3ea73050eb64555d6b0e2100 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>Canceling a CSS animation</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..1b0759b8c1cfe634f4f0c11c311f10d51cf979e3
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative-expected.txt
>@@ -0,0 +1,3 @@
>+
>+PASS Animations are composited by their order in the animation-name property. 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..225efd23addd664d6fb842264bbf04da4990378d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative.html
>@@ -0,0 +1,39 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>Animation composite order</title>
>+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composite-order">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="support/testcommon.js"></script>
>+<style>
>+@keyframes margin50 {
>+  from {
>+    margin-left: 50px;
>+  }
>+  to {
>+    margin-left: 50px;
>+  }
>+}
>+@keyframes margin100 {
>+  from {
>+    margin-left: 100px;
>+  }
>+  to {
>+    margin-left: 100px;
>+  }
>+}
>+</style>
>+<div id="log"</div>
>+<script>
>+'use strict';
>+
>+promise_test(async t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'margin100 100s';
>+  assert_equals(getComputedStyle(div).marginLeft, '100px');
>+  div.style.animation = 'margin50 100s, margin100 100s';
>+  // The margin should be unaffected by margin50 since it is named earlier
>+  // in the animation list.
>+  assert_equals(getComputedStyle(div).marginLeft, '100px');
>+}, "Animations are composited by their order in the animation-name property.");
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html
>index 4f345b6188b434c36401590f46e3fa49f9e7aa49..bbf35d5113a9c3d1e4dba7318f649494c88feb4c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html
>@@ -2,7 +2,7 @@
> <meta charset=utf-8>
> <title>CSSAnimation.effect</title>
> <meta name="timeout" content="long">
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html
>index 8969abdd69e7f199781fa9e8878b55cbf9b4b436..57dd0d5020c9d6a4bc30dbe9570bd3eb8cbba9ae 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSAnimation.finished</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
>index 056a5449c77a277f3bc17b54f342789fdabca17a..e4d1f859fd4d65f51b89de6e23ead724545568a3 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSAnimation.currentTime</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>@@ -56,8 +56,8 @@ promise_test(async t => {
>   const animation = div.getAnimations()[0];
>   await animation.ready;
> 
>-  assert_throws(
>-    new TypeError(),
>+  assert_throws_js(
>+    TypeError,
>     () => {
>       animation.currentTime = null;
>     },
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-id.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-id.tentative.html
>index 71bd2a0051af25a4725df19031ae461f9291e761..623e01d2354aad5dc746558dbc40821d09173472 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-id.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-id.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSAnimation.id</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html
>index 19a1487ee45c5d47f70e386f3a189f6842d072ec..acfdc1348fb0acbcb2670cfb55cace589ac93fd4 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSAnimation.playState</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html
>index 4047fe06d87ff84835ee85938a0d0cd74c9cd41e..f70ebd17003988d641a7ce5645d92b1c968dac3e 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSAnimation.ready</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html
>index 98831a560f1f336534e81d0b8e4abd33790aaf6e..edef3b239e8a6c2f10b82017a448b0a2dfdd8b9d 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSAnimation.startTime</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative-expected.txt
>deleted file mode 100644
>index 84af7e09ed1eebe6a51a53af8a934693888975f6..0000000000000000000000000000000000000000
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative-expected.txt
>+++ /dev/null
>@@ -1,4 +0,0 @@
>-
>-PASS getAnimations returns CSSAnimation objects 
>-PASS getAnimations returns CSS transitions/animations, and script-generated animations in the expected order 
>-
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html
>deleted file mode 100644
>index 9af97f30388cdd726832490578dc5aa2e54c531b..0000000000000000000000000000000000000000
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html
>+++ /dev/null
>@@ -1,75 +0,0 @@
>-<!doctype html>
>-<meta charset=utf-8>
>-<title>CSSPseudoElement.getAnimations() for CSS animations</title>
>-
>-<link rel="help" href="https://drafts.csswg.org/css-animations-2/">
>-<script src="/resources/testharness.js"></script>
>-<script src="/resources/testharnessreport.js"></script>
>-<script src="support/testcommon.js"></script>
>-<style>
>-@keyframes anim1 { }
>-@keyframes anim2 { }
>-.before::before {
>-  animation: anim1 10s;
>-  content: '';
>-}
>-.after-with-mix-anims-trans::after {
>-  content: '';
>-  animation: anim1 10s, anim2 10s;
>-  width: 0px;
>-  height: 0px;
>-  transition: all 100s;
>-}
>-.after-change::after {
>-  width: 100px;
>-  height: 100px;
>-  content: '';
>-}
>-</style>
>-<div id="log"></div>
>-<script>
>-'use strict';
>-
>-test(t => {
>-  const div = addDiv(t, { class: 'before' });
>-  const pseudoTarget = document.getAnimations()[0].effect.target;
>-  assert_equals(pseudoTarget.getAnimations().length, 1,
>-                'Expected number of animations are returned');
>-  assert_equals(pseudoTarget.getAnimations()[0].animationName, 'anim1',
>-                'CSS animation name matches');
>-}, 'getAnimations returns CSSAnimation objects');
>-
>-test(t => {
>-  const div = addDiv(t, { class: 'after-with-mix-anims-trans' });
>-  // Trigger transitions
>-  flushComputedStyle(div);
>-  div.classList.add('after-change');
>-
>-  // Create additional animation on the pseudo-element from script
>-  const pseudoTarget = document.getAnimations()[0].effect.target;
>-  const effect = new KeyframeEffect(pseudoTarget,
>-                                    { background: ["blue", "red"] },
>-                                    3 * MS_PER_SEC);
>-  const newAnimation = new Animation(effect, document.timeline);
>-  newAnimation.id = 'scripted-anim';
>-  newAnimation.play();
>-
>-  // Check order - the script-generated animation should appear later
>-  const anims = pseudoTarget.getAnimations();
>-  assert_equals(anims.length, 5,
>-                'Got expected number of animations/trnasitions running on ' +
>-                '::after pseudo element');
>-  assert_equals(anims[0].transitionProperty, 'height',
>-                '1st animation is the 1st transition sorted by name');
>-  assert_equals(anims[1].transitionProperty, 'width',
>-                '2nd animation is the 2nd transition sorted by name ');
>-  assert_equals(anims[2].animationName, 'anim1',
>-                '3rd animation is the 1st animation in animation-name list');
>-  assert_equals(anims[3].animationName, 'anim2',
>-                '4rd animation is the 2nd animation in animation-name list');
>-  assert_equals(anims[4].id, 'scripted-anim',
>-                'Animation added by script appears last');
>-}, 'getAnimations returns CSS transitions/animations, and script-generated ' +
>-   'animations in the expected order');
>-
>-</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative-expected.txt
>index 9958b5e0d4b311b43776bba5b99b7fd972cc1789..3c62382027fbda6471812453aad70b2b3459a4e4 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative-expected.txt
>@@ -1,6 +1,7 @@
> 
> PASS getAnimations for non-animated content 
> PASS getAnimations for CSS Animations 
>+PASS Order of CSS Animations - within an element unaffected by start time 
> PASS Order of CSS Animations - within an element 
> PASS Order of CSS Animations - across elements 
> PASS Order of CSS Animations - across and within elements 
>@@ -12,5 +13,5 @@ PASS Finished but not filling CSS Animations are not returned
> PASS Yet-to-start CSS Animations are returned 
> PASS CSS Animations canceled via the API are not returned 
> PASS CSS Animations canceled and restarted via the API are returned 
>-FAIL CSS Animations targetting (pseudo-)elements should have correct order after sorting assert_equals: Animation #2 has expected target expected (object) Element node <div id="parent" style="animation: animBottom 100s"><div ... but got (undefined) undefined
>+FAIL CSS Animations targetting (pseudo-)elements should have correct order after sorting assert_equals: Animation #1 has null pseudo type expected (object) null but got (undefined) undefined
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html
>index 175acf8424688c29e2b433226c6c4af11d176eb3..4a9768a8b610e5327cc3497a1ec6f301642468a7 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html
>@@ -48,6 +48,24 @@ test(t => {
>                 'getAnimations returns no running CSS Animations');
> }, 'getAnimations for CSS Animations');
> 
>+test(t => {
>+  const div = addDiv(t);
>+  const animation1 = 'animLeft 100s'
>+  const animation2 = 'animBottom 100s'
>+  div.style.animation = animation1;
>+  const animations1 = document.getAnimations();
>+  assert_equals(animations1.length, 1,
>+                'getAnimations returns all running CSS Animations');
>+  div.style.animation = animation2 + ', ' + animation1;
>+  const animations = document.getAnimations();
>+  assert_equals(animations.length, 2,
>+                'getAnimations returns all running CSS Animations');
>+  assert_equals(animations[0].animationName, 'animBottom',
>+                'Order of first animation returned');
>+  assert_equals(animations[1].animationName, 'animLeft',
>+                'Order of second animation returned');
>+}, 'Order of CSS Animations - within an element unaffected by start time');
>+
> test(t => {
>   const div = addDiv(t);
>   div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
>@@ -298,12 +316,12 @@ test(t => {
> 
>     if (pseudo) {
>       assert_equals(
>-        actual.effect.target.element,
>+        actual.effect.target,
>         element,
>         `Animation #${index + 1} has expected target`
>       );
>       assert_equals(
>-        actual.effect.target.type,
>+        actual.effect.pseudoElement,
>         pseudo,
>         `Animation #${index + 1} has expected pseudo type`
>       );
>@@ -313,6 +331,11 @@ test(t => {
>         element,
>         `Animation #${index + 1} has expected target`
>       );
>+      assert_equals(
>+        actual.effect.pseudoElement,
>+        null,
>+        `Animation #${index + 1} has null pseudo type`
>+      );
>     }
>   }
> }, 'CSS Animations targetting (pseudo-)elements should have correct order '
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
>index 0a4c5d1d054edf947b787f8501392b6daf1d7325..a5e22884271cf301c728c26eec32fe399d08f0d1 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
>@@ -3,7 +3,7 @@
> <title>
> Element.getAnimations() - Dynamic changes to the list of CSS animations
> </title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative-expected.txt
>index 4a1b16715867ce8be6b7276404877a6413598720..a0c9d09c09c4b367c730cf33d59369739a93f88d 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative-expected.txt
>@@ -17,8 +17,8 @@ PASS getAnimations returns objects with the same identity
> PASS getAnimations for CSS Animations that are canceled 
> PASS getAnimations for CSS Animations follows animation-name order 
> PASS { subtree: false } on a leaf element returns the element's animations and ignore pseudo-elements 
>-FAIL { subtree: true } on a leaf element returns the element's animations and its pseudo-elements' animations assert_equals: The animation targeting the ::before pseudo-element should be returned second expected (string) "::before" but got (undefined) undefined
>+FAIL { subtree: true } on a leaf element returns the element's animations and its pseudo-elements' animations assert_equals: The animation targeting the parent element should be returned first expected (object) null but got (undefined) undefined
> PASS { subtree: false } on an element with a child returns only the element's animations 
>-FAIL { subtree: true } on an element with a child returns animations from the element, its pseudo-elements, its child and its child pseudo-elements assert_equals: The animation targeting the ::before pseudo-element should be returned second expected (string) "::before" but got (undefined) undefined
>+FAIL { subtree: true } on an element with a child returns animations from the element, its pseudo-elements, its child and its child pseudo-elements assert_equals: The animation targeting the parent element should be returned first expected (object) null but got (undefined) undefined
> FAIL { subtree: true } on an element with many descendants returns animations from all the descendants assert_equals: The animation targeting the child1 element should be returned second expected Element node <div id="child1" style="animation: anim1 100s;"><div id="... but got Element node <div id="grandchild1" style="animation: anim1 100s;"></div>
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html
>index 5aa7416dcc0c2031d77d286d53a4cd73edb062ee..284b2493403ede6bc0b247aa9786fe77d9b7278b 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>Element.getAnimations() for CSS animations</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>@@ -303,8 +303,8 @@ test(t => {
>                 '#target::before': 'animation: anim1 10s;' });
>   const target = addDiv(t, { 'id': 'target' });
>   target.style.animation = 'anim1 100s';
>-
>   const animations = target.getAnimations({ subtree: false });
>+
>   assert_equals(animations.length, 1,
>                 'Should find only the element');
>   assert_equals(animations[0].effect.target, target,
>@@ -317,18 +317,21 @@ test(t => {
>                 '#target::before': 'animation: anim1 10s;' });
>   const target = addDiv(t, { 'id': 'target' });
>   target.style.animation = 'anim1 100s';
>-
>   const animations = target.getAnimations({ subtree: true });
>+
>   assert_equals(animations.length, 3,
>                 'getAnimations({ subtree: true }) ' +
>                 'should return animations on pseudo-elements');
>   assert_equals(animations[0].effect.target, target,
>                 'The animation targeting the parent element ' +
>                 'should be returned first');
>-  assert_equals(animations[1].effect.target.type, '::before',
>+  assert_equals(animations[0].effect.pseudoElement, null,
>+                'The animation targeting the parent element ' +
>+                'should be returned first')
>+  assert_equals(animations[1].effect.pseudoElement, '::before',
>                 'The animation targeting the ::before pseudo-element ' +
>                 'should be returned second');
>-  assert_equals(animations[2].effect.target.type, '::after',
>+  assert_equals(animations[2].effect.pseudoElement, '::after',
>                 'The animation targeting the ::after pesudo-element ' +
>                 'should be returned last');
> }, '{ subtree: true } on a leaf element returns the element\'s animations'
>@@ -366,34 +369,37 @@ test(t => {
> 
>   const animations = parent.getAnimations({ subtree: true });
>   assert_equals(animations.length, 6,
>-                'Should find all elements, pesudo-elements that parent has');
>+                'Should find all elements, pseudo-elements that parent has');
> 
>   assert_equals(animations[0].effect.target, parent,
>                 'The animation targeting the parent element ' +
>                 'should be returned first');
>-  assert_equals(animations[1].effect.target.type, '::before',
>+  assert_equals(animations[0].effect.pseudoElement, null,
>+                'The animation targeting the parent element ' +
>+                'should be returned first');
>+  assert_equals(animations[1].effect.pseudoElement, '::before',
>                 'The animation targeting the ::before pseudo-element ' +
>                 'should be returned second');
>-  assert_equals(animations[1].effect.target.element, parent,
>+  assert_equals(animations[1].effect.target, parent,
>                 'This ::before element should be child of parent element');
>-  assert_equals(animations[2].effect.target.type, '::after',
>+  assert_equals(animations[2].effect.pseudoElement, '::after',
>                 'The animation targeting the ::after pesudo-element ' +
>                 'should be returned third');
>-  assert_equals(animations[2].effect.target.element, parent,
>+  assert_equals(animations[2].effect.target, parent,
>                 'This ::after element should be child of parent element');
> 
>   assert_equals(animations[3].effect.target, child,
>                 'The animation targeting the child element ' +
>                 'should be returned fourth');
>-  assert_equals(animations[4].effect.target.type, '::before',
>+  assert_equals(animations[4].effect.pseudoElement, '::before',
>                 'The animation targeting the ::before pseudo-element ' +
>                 'should be returned fifth');
>-  assert_equals(animations[4].effect.target.element, child,
>+  assert_equals(animations[4].effect.target, child,
>                 'This ::before element should be child of child element');
>-  assert_equals(animations[5].effect.target.type, '::after',
>+  assert_equals(animations[5].effect.pseudoElement, '::after',
>                 'The animation targeting the ::after pesudo-element ' +
>                 'should be returned last');
>-  assert_equals(animations[5].effect.target.element, child,
>+  assert_equals(animations[5].effect.target, child,
>                 'This ::after element should be child of child element');
> }, '{ subtree: true } on an element with a child returns animations from the'
>    + ' element, its pseudo-elements, its child and its child pseudo-elements');
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
>index 053c7becf34b4ea68349b7ad460c3f3440538ec2..591cc15a7eda8279ec5e9af529f8e6a06b7caa6c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>KeyframeEffect.getKeyframes() for CSS animations</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html
>index 6c8aa66675e519fb95c1c9b3def4f7dab141d43b..4991762099d4fac96f56a8839651bd8368cef11c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSAnimation.effect.target</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-before-initial-box-construction-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-before-initial-box-construction-001-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..c7c8d39cb456839880aaddf26516a4cb5419c4eb
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-before-initial-box-construction-001-expected.txt
>@@ -0,0 +1,4 @@
>+Some content
>+
>+PASS animations started before initial-containing-block creation properly function 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-before-initial-box-construction-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-before-initial-box-construction-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..558c5ea18699f3856c7d34b976f920b1fd7fd5b0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-before-initial-box-construction-001.html
>@@ -0,0 +1,53 @@
>+<!doctype html>
>+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez">
>+<link rel="author" href="mailto:https://mozilla.org" title="Mozilla">
>+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1605610">
>+<link rel="help" href="https://drafts.csswg.org/web-animations/#extensions-to-the-element-interface">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script>
>+let t = async_test("animations started before initial-containing-block creation properly function");
>+let loaded = false;
>+let finished = false;
>+let span;
>+
>+function check() {
>+  if (!loaded || !finished)
>+    return;
>+
>+  assert_equals(getComputedStyle(span).opacity, "1", "Animation should be properly finished");
>+  t.done();
>+}
>+
>+document.addEventListener("DOMContentLoaded", function() {
>+  span = document.createElement("span");
>+  span.id = "myspan";
>+  span.innerHTML = `Some content`;
>+  document.body.appendChild(span);
>+
>+  let anim = span.animate([
>+    {
>+      opacity: "0",
>+    },
>+    {
>+      opacity: "1",
>+    },
>+  ], {
>+    duration: 300,
>+  });
>+
>+  anim.finished.then(t.step_func(function() {
>+    finished = true;
>+    check();
>+  }));
>+});
>+
>+window.addEventListener("load", t.step_func(function() {
>+  loaded = true;
>+  check();
>+}));
>+</script>
>+
>+<link rel="stylesheet" href="empty-sheet.css?pipe=trickle(d2)">
>+<body>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js
>index e35b7fcb0f98656cdeff41d8d7f4a7620fa52eea..fcb7ceba20574691d7d817ee12af3e20f455c20e 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js
>@@ -10,7 +10,7 @@
>   }, "the event inherts from Event");
> 
>   test(function() {
>-    assert_throws(new TypeError(), function() {
>+    assert_throws_js(TypeError, function() {
>       new AnimationEvent();
>     }, 'First argument is required, so was expecting a TypeError.');
>   }, 'Missing type argument');
>@@ -176,37 +176,37 @@
>   }, "elapsedTime set to an object with a valueOf function");
> 
>   test(function() {
>-    assert_throws(new TypeError(), function() {
>+    assert_throws_js(TypeError, function() {
>       new AnimationEvent("test", {elapsedTime: NaN});
>     }, 'elapsedTime cannot be NaN so was expecting a TypeError');
>   }, "elapsedTime cannot be set to NaN");
> 
>   test(function() {
>-    assert_throws(new TypeError(), function() {
>+    assert_throws_js(TypeError, function() {
>       new AnimationEvent("test", {elapsedTime: Infinity});
>     }, 'elapsedTime cannot be Infinity so was expecting a TypeError');
>   }, "elapsedTime cannot be set to Infinity");
> 
>   test(function() {
>-    assert_throws(new TypeError(), function() {
>+    assert_throws_js(TypeError, function() {
>       new AnimationEvent("test", {elapsedTime: -Infinity});
>     }, 'elapsedTime cannot be -Infinity so was expecting a TypeError');
>   }, "elapsedTime cannot be set to -Infinity");
> 
>   test(function() {
>-    assert_throws(new TypeError(), function() {
>+    assert_throws_js(TypeError, function() {
>       new AnimationEvent("test", {elapsedTime: "sample"});
>     }, 'elapsedTime cannot be a string so was expecting a TypeError');
>   }, "elapsedTime cannot be set to 'sample'");
> 
>   test(function() {
>-    assert_throws(new TypeError(), function() {
>+    assert_throws_js(TypeError, function() {
>       new AnimationEvent("test", {elapsedTime: [0.5, 1.0]});
>     }, 'elapsedTime cannot be a multi-element array so was expecting a TypeError');
>   }, "elapsedTime cannot be set to [0.5, 1.0]");
> 
>   test(function() {
>-    assert_throws(new TypeError(), function() {
>+    assert_throws_js(TypeError, function() {
>       new AnimationEvent("test", {elapsedTime: { sample: 0.5}});
>     }, 'elapsedTime cannot be an object so was expecting a TypeError');
>   }, "elapsedTime cannot be set to an object");
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html
>index aba7f9c6edd71d4a2b9446fb6de890866c41da64..9573ce1b0f8d1a413c0fb609207c5d98350053d6 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html
>@@ -1,8 +1,7 @@
> <!doctype html>
>+<html class="test-wait">
> <title>CSS Animations Test: Chrome crash when removing documentElement and @keyframes stylesheet</title>
> <link rel="help" href="https://crbug.com/999522">
>-<script src="/resources/testharness.js"></script>
>-<script src="/resources/testharnessreport.js"></script>
> <style>
>   @keyframes anim {
>     from { color: pink }
>@@ -14,9 +13,16 @@
> </style>
> <div></div>
> <script>
>-  test(() => {
>-    document.body.offsetTop;
>-    document.querySelector("style").remove();
>-    document.documentElement.remove();
>-  }, "Removing documentElement and @keyframes sheet should not crash.");
>+window.addEventListener('load', () => {
>+  document.body.offsetTop;
>+  document.querySelector("style").remove();
>+  // We need the root later to remove the test-wait class.
>+  const root = document.documentElement;
>+  document.documentElement.remove();
>+
>+  // rAF to make sure that style runs.
>+  requestAnimationFrame(() => {
>+    root.classList.remove('test-wait');
>+  });
>+});
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/empty-sheet.css b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/empty-sheet.css
>new file mode 100644
>index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/w3c-import.log
>index 0aec57a87c6501dd7e2508c27cd7bb8f31f41b95..4c43a9e60583639a79ea50904f2a2fdb3441478f 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/w3c-import.log
>@@ -14,4 +14,5 @@ Property values requiring vendor prefixes:
> None
> ------------------------------------------------------------------------
> List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/empty-sheet.css
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log
>index e4423d1413ff334f5f5cfbfa30f0e6eecce5a3a9..eb3db90c0ce7aa3850a52fc2cb597defb924e9b5 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log
>@@ -17,6 +17,7 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-animationName.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
>@@ -25,13 +26,13 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html
>-/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.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.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/META.yml
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-before-initial-box-construction-001.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-008-expected.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-008.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-009-expected.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html
>index 7572801fb75d5d8647a86cec2cfbc53c3f369fb5..32c15f07a96a2a1cf99068e303f17296aa71e96e 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>AnimationEffect.getComputedTiming() for CSS transitions</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative-expected.txt
>deleted file mode 100644
>index d06a9683e47bc7761c56b258d28bbdb9d6eab775..0000000000000000000000000000000000000000
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative-expected.txt
>+++ /dev/null
>@@ -1,3 +0,0 @@
>-
>-FAIL getAnimations sorts simultaneous transitions by name assert_class_string: Got pseudo-element target expected "[object CSSPseudoElement]" but got "[object Element]"
>-
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html
>deleted file mode 100644
>index 5229881e30fa903da8afc76b3664c7c4483add53..0000000000000000000000000000000000000000
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html
>+++ /dev/null
>@@ -1,47 +0,0 @@
>-<!doctype html>
>-<meta charset=utf-8>
>-<title>CSSPseudoElement.getAnimations() for CSS transitions</title>
>-<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
>-<script src="/resources/testharness.js"></script>
>-<script src="/resources/testharnessreport.js"></script>
>-<script src="support/helper.js"></script>
>-<style>
>-.init::before {
>-  content: '';
>-  height: 0px;
>-  width: 0px;
>-  opacity: 0;
>-  transition: all 100s;
>-}
>-.change::before {
>-  height: 100px;
>-  width: 100px;
>-  opacity: 1;
>-}
>-</style>
>-<div id="log"></div>
>-<script>
>-'use strict';
>-
>-test(t => {
>-  const div = addDiv(t, { class: 'init' });
>-  getComputedStyle(div).width;
>-  div.classList.add('change');
>-
>-  // Sanity checks
>-  assert_equals(document.getAnimations().length, 3,
>-                'Got expected number of animations on document');
>-  const pseudoTarget = document.getAnimations()[0].effect.target;
>-  assert_class_string(pseudoTarget, 'CSSPseudoElement',
>-                      'Got pseudo-element target');
>-
>-  // Check animations returned from the pseudo element are in correct order
>-  const anims = pseudoTarget.getAnimations();
>-  assert_equals(anims.length, 3,
>-                'Got expected number of animations on pseudo-element');
>-  assert_equals(anims[0].transitionProperty, 'height');
>-  assert_equals(anims[1].transitionProperty, 'opacity');
>-  assert_equals(anims[2].transitionProperty, 'width');
>-}, 'getAnimations sorts simultaneous transitions by name');
>-
>-</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-canceling.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-canceling.tentative.html
>index b6251b111eb532ddb0313e75b6246ee9ccd7f4b3..72b1dbff436fd12574beece0dd295ca3d779b73c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-canceling.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-canceling.tentative.html
>@@ -2,7 +2,7 @@
> <meta charset=utf-8>
> <title>Canceling a CSS transition</title>
> <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-currentTime.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-currentTime.tentative.html
>index 703b899e5a1a7cd92c22772cee78d513b9f3e850..8ee7215b7414722ec315826b54ceb650006552c5 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-currentTime.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-currentTime.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSTransition.currentTime</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>@@ -98,8 +98,8 @@ promise_test(async t => {
> 
>   await animation.ready;
> 
>-  assert_throws(
>-    new TypeError(),
>+  assert_throws_js(
>+    TypeError,
>     () => {
>       animation.currentTime = null;
>     },
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-effect.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-effect.tentative.html
>index 908ba77ce87a6dd7fe25002c6cdade8a4db25042..a38bc21bde05b95f14963d3a6543cef40f193e5a 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-effect.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-effect.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSTransition.effect</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-finished.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-finished.tentative.html
>index 5bfadf2d079a5889286077f8a562f8f050ee888f..23750e7a98eaf7675386850c711b5b7738fccc01 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-finished.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-finished.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSTransition.finished</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-ready.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-ready.tentative.html
>index 635b052a47caa960067e839d1058bd0b47dc4105..92aaa490591b9eb3e2db55438d955a9811cd7904 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-ready.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-ready.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSTransition.ready</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-startTime.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-startTime.tentative.html
>index c8a7b6fa37ea2552ffcaa9240c523a51dc916c15..4dbe8634192a3e2431aa7c0f542071fec47e2ba7 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-startTime.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-startTime.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSTransition.startTime</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative-expected.txt
>index 30aea79e2afc0842d2c9170debab7cbf3194c8d8..18c1e3165a02ff1520f51fded2be7d2d3563f736 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative-expected.txt
>@@ -1,6 +1,6 @@
> 
> PASS getAnimations for non-animated content 
> PASS getAnimations for CSS Transitions 
>-FAIL CSS Transitions targetting (pseudo-)elements should have correct order after sorting assert_equals: Transition #2 has expected target expected (object) Element node <div style="display: list-item; left: 100px; transition: ... but got (undefined) undefined
>+FAIL CSS Transitions targetting (pseudo-)elements should have correct order after sorting assert_equals: Transition #1 has null pseudo type expected (object) null but got (undefined) undefined
> PASS Transitions are not returned after they have finished 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative.html
>index 98b91e04ee9dde4602da0519f4923712cd6a3fac..cecddfaa401f90ff0226d39f1c7eae9be9b7b10c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Document-getAnimations.tentative.html
>@@ -99,12 +99,12 @@ test(t => {
> 
>     if (pseudo) {
>       assert_equals(
>-        actual.effect.target.element,
>+        actual.effect.target,
>         element,
>         `Transition #${index + 1} has expected target`
>       );
>       assert_equals(
>-        actual.effect.target.type,
>+        actual.effect.pseudoElement,
>         pseudo,
>         `Transition #${index + 1} has expected pseudo type`
>       );
>@@ -114,6 +114,11 @@ test(t => {
>         element,
>         `Transition #${index + 1} has expected target`
>       );
>+      assert_equals(
>+        actual.effect.pseudoElement,
>+        null,
>+        `Transition #${index + 1} has null pseudo type`
>+      );
>     }
>   }
> }, 'CSS Transitions targetting (pseudo-)elements should have correct order '
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Element-getAnimations.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Element-getAnimations.tentative.html
>index 5d465e5f280cad88b0f102d6a42bb7b2a6ad54c1..26e988ffe69759ab3b9216d24af2a28a70e0c08b 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Element-getAnimations.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/Element-getAnimations.tentative.html
>@@ -2,7 +2,7 @@
> <meta charset=utf-8>
> <title>Element.getAnimations() for CSS transitions</title>
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html
>index d1c000358b800f6ce21f3b961b737f29f5dcf9ce..47b769b13a92971ccb02acd6ea61c1bda53f847f 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>KeyframeEffect.getKeyframes() for CSS transitions</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-target.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-target.tentative.html
>index 48814557c35066f091baee262f65b0b2d00f0ab9..dbb2a43f784db98317c4d37b32a376f6c27213ce 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-target.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/KeyframeEffect-target.tentative.html
>@@ -1,7 +1,7 @@
> <!doctype html>
> <meta charset=utf-8>
> <title>CSSTransition.effect.target</title>
>-
>+
> <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/README.md b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/README.md
>index f11374e47b1876d06231854907c3082b5d4774ab..f72f11dccae5e8b63de6148573723f86fbb4c708 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/README.md
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/README.md
>@@ -33,7 +33,7 @@ Using `support/property.js` test suites compile a list of animatable properties.
> }
> ```
> 
>-For each compiled test case the test runner identifies computed initial and target values. If they match, no transition will take place, because the property couldn't be parsed. If after starting the transition the computed style matches the target value, the browser applied that value immedately and no transition will take place. During the transition the computed style may match neither initial nor target value (unless it's a discrete transition), or there was no transition.
>+For each compiled test case the test runner identifies computed initial and target values. If they match, no transition will take place, because the property couldn't be parsed. If after starting the transition the computed style matches the target value, the browser applied that value immediately and no transition will take place. During the transition the computed style may match neither initial nor target value (unless it's a discrete transition), or there was no transition.
> 
> Besides value-assertions, the suites compare received TransitionEnd events. While the values are only matched against computed initial and target values, expected TransitionEnd events are declared explicitly. This can (and will) lead to some test failures that are arguably not a failure (mainly because the specification didn't cover the specific case). Transitioning `color` *may* (or not, depending on browser) also run a transition for `background-color`, as the latter's default value is `currentColor`. This suite considers those implicit transitions a failure. If it truly is a failure or not, should be decided in the specification (and tests updated accordingly).
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-composition-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-composition-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..efb940137b214f19ea0b95005ad757becc08dd71
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-composition-expected.txt
>@@ -0,0 +1,32 @@
>+
>+PASS Compositing: property <text-shadow> underlying [undefined] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (-0.3) should be [rgb(70, 70, 70 ) 7px 14px 21px] 
>+PASS Compositing: property <text-shadow> underlying [undefined] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0) should be [rgb(100, 100, 100) 10px 20px 30px] 
>+PASS Compositing: property <text-shadow> underlying [undefined] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0.5) should be [rgb(150, 150, 150) 15px 30px 45px] 
>+PASS Compositing: property <text-shadow> underlying [undefined] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1) should be [rgb(200, 200, 200) 20px 40px 60px] 
>+PASS Compositing: property <text-shadow> underlying [undefined] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1.5) should be [rgb(250, 250, 250) 25px 50px 75px] 
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (-0.3) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(70, 70, 70) 7px 14px 21px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 70 , 70 , 70 ) 7px 14px 21px " but got "rgb ( 70 , 70 , 70 ) 7px 14px 21px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(100, 100, 100) 10px 20px 30px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 100 , 100 , 100 ) 10px 20px 30px " but got "rgb ( 100 , 100 , 100 ) 10px 20px 30px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0.5) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(150, 150, 150) 15px 30px 45px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 150 , 150 , 150 ) 15px 30px 45px " but got "rgb ( 150 , 150 , 150 ) 15px 30px 45px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(200, 200, 200) 20px 40px 60px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 200 , 200 , 200 ) 20px 40px 60px " but got "rgb ( 200 , 200 , 200 ) 20px 40px 60px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1.5) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(250, 250, 250) 25px 50px 75px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 250 , 250 , 250 ) 25px 50px 75px " but got "rgb ( 250 , 250 , 250 ) 25px 50px 75px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (-0.3) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(70, 70, 70) 7px 14px 21px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 70 , 70 , 70 ) 7px 14px 21px " but got "rgb ( 70 , 70 , 70 ) 7px 14px 21px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 100 , 100 , 100 ) 10px 20px 30px " but got "rgb ( 100 , 100 , 100 ) 10px 20px 30px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0.5) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(150, 150, 150) 15px 30px 45px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 150 , 150 , 150 ) 15px 30px 45px " but got "rgb ( 150 , 150 , 150 ) 15px 30px 45px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 200 , 200 , 200 ) 20px 40px 60px " but got "rgb ( 200 , 200 , 200 ) 20px 40px 60px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1.5) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(250, 250, 250) 25px 50px 75px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 250 , 250 , 250 ) 25px 50px 75px " but got "rgb ( 250 , 250 , 250 ) 25px 50px 75px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (-0.3) should be [rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(130, 130, 130) 13px 26px 39px] assert_equals: expected "rgb ( 0 , 0 , 0 ) - 4.69px - 9.39px 0px , rgb ( 26 , 52 , 78 ) 2.59px 5.19px 7px , rgb ( 130 , 130 , 130 ) 13px 26px 39px " but got "rgb ( 70 , 70 , 70 ) 7px 14px 21px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (0) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 100 , 100 , 100 ) 10px 20px 30px " but got "rgb ( 100 , 100 , 100 ) 10px 20px 30px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (0.5) should be [rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(100, 100, 100, 0.5) 5px 10px 15px] assert_equals: expected "rgb ( 105 , 110 , 115 ) 10.5px 21px 31px , rgba ( 20 , 40 , 60 , 0.5 ) 1px 2px 3px , rgba ( 100 , 100 , 100 , 0.5 ) 5px 10px 15px " but got "rgb ( 150 , 150 , 150 ) 15px 30px 45px "
>+PASS Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (1) should be [rgb(200, 200, 200) 20px 40px 60px] 
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from add [rgb(100, 100, 100) 10px 20px 30px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (1.5) should be [rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -5px -10px 0px] assert_equals: expected "rgb ( 255 , 255 , 255 ) 29.5px 59px 88px , rgba ( 0 , 0 , 0 , 0 ) - 1px - 2px 0px , rgba ( 0 , 0 , 0 , 0 ) - 5px - 10px 0px " but got "rgb ( 250 , 250 , 250 ) 25px 50px 75px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (-0.3) should be [rgb(127, 124, 121) 12.7px 25.4px 38.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px, rgba(0, 0, 0, 0) -6px -12px 0px] assert_equals: expected "rgb ( 127 , 124 , 121 ) 12.69px 25.39px 38px , rgba ( 0 , 0 , 0 , 0 ) - 0.59px - 1.19px 0px , rgba ( 0 , 0 , 0 , 0 ) - 6px - 12px 0px " but got "rgb ( 70 , 70 , 70 ) 7px 14px 21px "
>+PASS Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0) should be [rgb(100, 100, 100) 10px 20px 30px] 
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (0.5) should be [rgb(55, 60, 65) 5.5px 11px 16.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(200, 200, 200, 0.5) 10px 20px 30px] assert_equals: expected "rgb ( 55 , 60 , 65 ) 5.5px 11px 16px , rgba ( 20 , 40 , 60 , 0.5 ) 1px 2px 3px , rgba ( 200 , 200 , 200 , 0.5 ) 10px 20px 30px " but got "rgb ( 150 , 150 , 150 ) 15px 30px 45px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 200 , 200 , 200 ) 20px 40px 60px " but got "rgb ( 200 , 200 , 200 ) 20px 40px 60px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px] from replace [rgb(100, 100, 100) 10px 20px 30px] to add [rgb(200, 200, 200) 20px 40px 60px] at (1.5) should be [rgb(0, 0, 0) -3.5px -7px 0px, rgb(30, 60, 90) 3px 6px 9px, rgb(255, 255, 255) 30px 60px 90px] assert_equals: expected "rgb ( 0 , 0 , 0 ) - 3.5px - 7px 0px , rgb ( 30 , 60 , 90 ) 3px 6px 9px , rgb ( 255 , 255 , 255 ) 30px 60px 90px " but got "rgb ( 250 , 250 , 250 ) 25px 50px 75px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px] from add [rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (-0.3) should be [rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px, rgb(130, 130, 130) 13px 26px 39px, rgb(255, 255, 255) 26px 52px 78px] assert_equals: expected "rgb ( 0 , 0 , 0 ) - 4.69px - 9.39px 0px , rgb ( 26 , 52 , 78 ) 2.59px 5.19px 7px , rgb ( 52 , 104 , 156 ) 5.19px 10.39px 15px , rgb ( 130 , 130 , 130 ) 13px 26px 39px , rgb ( 255 , 255 , 255 ) 26px 52px 78px " but got "rgb ( 70 , 70 , 70 ) 7px 14px 21px , rgb ( 255 , 255 , 255 ) 26px 52px 78px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px] from add [rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (0) should be [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px, rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px] assert_equals: expected "rgb ( 10 , 20 , 30 ) 1px 2px 3px , rgb ( 20 , 40 , 60 ) 2px 4px 6px , rgb ( 40 , 80 , 120 ) 4px 8px 12px , rgb ( 100 , 100 , 100 ) 10px 20px 30px , rgb ( 200 , 200 , 200 ) 20px 40px 60px " but got "rgb ( 100 , 100 , 100 ) 10px 20px 30px , rgb ( 200 , 200 , 200 ) 20px 40px 60px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px] from add [rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (0.5) should be [rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(40, 80, 120, 0.5) 2px 4px 6px, rgba(100, 100, 100, 0.5) 5px 10px 15px, rgba(200, 200, 200, 0.5) 10px 20px 30px] assert_equals: expected "rgb ( 105 , 110 , 115 ) 10.5px 21px 31px , rgba ( 20 , 40 , 60 , 0.5 ) 1px 2px 3px , rgba ( 40 , 80 , 120 , 0.5 ) 2px 4px 6px , rgba ( 100 , 100 , 100 , 0.5 ) 5px 10px 15px , rgba ( 200 , 200 , 200 , 0.5 ) 10px 20px 30px " but got "rgb ( 150 , 150 , 150 ) 15px 30px 45px , rgba ( 200 , 200 , 200 , 0.5 ) 10px 20px 30px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px] from add [rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (1) should be [rgb(200, 200, 200) 20px 40px 60px] assert_equals: expected "rgb ( 200 , 200 , 200 ) 20px 40px 60px " but got "rgb ( 200 , 200 , 200 ) 20px 40px 60px , rgba ( 0 , 0 , 0 , 0 ) 0px 0px 0px "
>+FAIL Compositing: property <text-shadow> underlying [rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px] from add [rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px] to replace [rgb(200, 200, 200) 20px 40px 60px] at (1.5) should be [rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -2px -4px 0px, rgba(0, 0, 0, 0) -5px -10px 0px, rgba(0, 0, 0, 0) -10px -20px 0px] assert_equals: expected "rgb ( 255 , 255 , 255 ) 29.5px 59px 88px , rgba ( 0 , 0 , 0 , 0 ) - 1px - 2px 0px , rgba ( 0 , 0 , 0 , 0 ) - 2px - 4px 0px , rgba ( 0 , 0 , 0 , 0 ) - 5px - 10px 0px , rgba ( 0 , 0 , 0 , 0 ) - 10px - 20px 0px " but got "rgb ( 250 , 250 , 250 ) 25px 50px 75px , rgba ( 0 , 0 , 0 , 0 ) - 10px - 20px - 30px "
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-composition.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-composition.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..dc297ec9fac9dc23acd25e27f8707470a3d7685d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-composition.html
>@@ -0,0 +1,101 @@
>+<!DOCTYPE html>
>+<meta charset="UTF-8">
>+<title>text-shadow composition</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
>+<meta name="assert" content="text-shadow supports animation">
>+
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/css/support/interpolation-testcommon.js"></script>
>+
>+<style>
>+.target {
>+  width: 40px;
>+  height: 40px;
>+  background-color: black;
>+}
>+.expected {
>+  background-color: green;
>+}
>+</style>
>+
>+<body>
>+<script>
>+test_composition({
>+  property: 'text-shadow',
>+  replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px',
>+  addTo: 'rgb(200, 200, 200) 20px 40px 60px',
>+}, [
>+  {at: -0.3, expect: 'rgb(70, 70, 70 ) 7px 14px 21px'},
>+  {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px'},
>+  {at: 0.5, expect: 'rgb(150, 150, 150) 15px 30px 45px'},
>+  {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
>+  {at: 1.5, expect: 'rgb(250, 250, 250) 25px 50px 75px'},
>+]);
>+
>+test_composition({
>+  property: 'text-shadow',
>+  underlying: 'rgb(10, 20, 30) 1px 2px 3px',
>+  addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
>+  addTo: 'rgb(200, 200, 200) 20px 40px 60px',
>+}, [
>+  {at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(70, 70, 70) 7px 14px 21px'},
>+  {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(100, 100, 100) 10px 20px 30px'},
>+  {at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(150, 150, 150) 15px 30px 45px'},
>+  {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(200, 200, 200) 20px 40px 60px'},
>+  {at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(250, 250, 250) 25px 50px 75px'},
>+]);
>+
>+test_composition({
>+  property: 'text-shadow',
>+  underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
>+  addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
>+  addTo: 'rgb(200, 200, 200) 20px 40px 60px',
>+}, [
>+  {at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(70, 70, 70) 7px 14px 21px'},
>+  {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
>+  {at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(150, 150, 150) 15px 30px 45px'},
>+  {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
>+  {at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(250, 250, 250) 25px 50px 75px'},
>+]);
>+
>+test_composition({
>+  property: 'text-shadow',
>+  underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
>+  addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
>+  replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
>+}, [
>+  {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(130, 130, 130) 13px 26px 39px'},
>+  {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
>+  {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(100, 100, 100, 0.5) 5px 10px 15px'},
>+  {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
>+  {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -5px -10px 0px'},
>+]);
>+
>+test_composition({
>+  property: 'text-shadow',
>+  underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
>+  replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px',
>+  addTo: 'rgb(200, 200, 200) 20px 40px 60px',
>+}, [
>+  {at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px, rgba(0, 0, 0, 0) -6px -12px 0px'},
>+  {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px'},
>+  {at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
>+  {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
>+  {at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px, rgb(30, 60, 90) 3px 6px 9px, rgb(255, 255, 255) 30px 60px 90px'},
>+]);
>+
>+test_composition({
>+  property: 'text-shadow',
>+  underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px',
>+  addFrom: 'rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px',
>+  replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
>+}, [
>+  {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px, rgb(130, 130, 130) 13px 26px 39px, rgb(255, 255, 255) 26px 52px 78px'},
>+  {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px, rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px'},
>+  {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(40, 80, 120, 0.5) 2px 4px 6px, rgba(100, 100, 100, 0.5) 5px 10px 15px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
>+  {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
>+  {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -2px -4px 0px, rgba(0, 0, 0, 0) -5px -10px 0px, rgba(0, 0, 0, 0) -10px -20px 0px'},
>+]);
>+</script>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-interpolation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-interpolation-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..bc29dc8a9833e98efc953e9fe91fdd24aa76c515
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-interpolation-expected.txt
>@@ -0,0 +1,146 @@
>+
>+PASS CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 7px 33px 7px] 
>+PASS CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 10px 30px 10px] 
>+PASS CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 13px 27px 13px] 
>+PASS CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 16px 24px 16px] 
>+PASS CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions: property <text-shadow> from neutral to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 25px 15px 25px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from neutral to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 7px 33px 7px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from neutral to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 10px 30px 10px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 13px 27px 13px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 16px 24px 16px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from neutral to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from neutral to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 25px 15px 25px] 
>+PASS CSS Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 7px 33px 7px] 
>+PASS CSS Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 10px 30px 10px] 
>+PASS CSS Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 13px 27px 13px] 
>+PASS CSS Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 16px 24px 16px] 
>+PASS CSS Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 25px 15px 25px] 
>+PASS Web Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 7px 33px 7px] 
>+FAIL Web Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 10px 30px 10px] assert_equals: expected "rgb ( 255 , 165 , 0 ) 10px 30px 10px " but got "rgb ( 255 , 176 , 0 ) 7px 33px 7px "
>+FAIL Web Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 13px 27px 13px] assert_equals: expected "rgb ( 179 , 154 , 0 ) 13px 27px 13px " but got "rgb ( 179 , 162 , 0 ) 10.89px 29.09px 11px "
>+FAIL Web Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 16px 24px 16px] assert_equals: expected "rgb ( 102 , 143 , 0 ) 16px 24px 16px " but got "rgb ( 72 , 142 , 0 ) 16.34px 23.63px 16px "
>+PASS Web Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+FAIL Web Animations: property <text-shadow> from neutral to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 25px 15px 25px] assert_equals: expected "rgb ( 0 , 110 , 0 ) 25px 15px 25px " but got "rgb ( 0 , 128 , 0 ) 20px 20px 20px "
>+FAIL CSS Transitions: property <text-shadow> from [initial] to [green 20px 20px 20px] at (-0.3) should be [rgba(0, 0, 0, 0) -6px -6px 0px] assert_equals: expected "rgba ( 0 , 0 , 0 , 0 ) - 6px - 6px 0px " but got "rgba ( 0 , 0 , 0 , 0 ) - 5.98px - 5.98px - 6px "
>+PASS CSS Transitions: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0) should be [rgba(0, 0, 0, 0) 0px 0px 0px] 
>+FAIL CSS Transitions: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.3) should be [rgba(0, 128, 0, 0.3) 6px 6px 6px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.3 ) 6px 6px 6px " but got "rgba ( 0 , 126 , 0 , 0.3 ) 6px 6px 6px "
>+FAIL CSS Transitions: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.6) should be [rgba(0, 128, 0, 0.6) 12px 12px 12px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.6 ) 12px 12px 12px " but got "rgba ( 0 , 129 , 0 , 0.6 ) 12px 12px 12px "
>+PASS CSS Transitions: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 192, 0) 30px 30px 30px] 
>+FAIL CSS Transitions with transition: all: property <text-shadow> from [initial] to [green 20px 20px 20px] at (-0.3) should be [rgba(0, 0, 0, 0) -6px -6px 0px] assert_equals: expected "rgba ( 0 , 0 , 0 , 0 ) - 6px - 6px 0px " but got "rgba ( 0 , 0 , 0 , 0 ) - 5.98px - 5.98px - 6px "
>+PASS CSS Transitions with transition: all: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0) should be [rgba(0, 0, 0, 0) 0px 0px 0px] 
>+FAIL CSS Transitions with transition: all: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.3) should be [rgba(0, 128, 0, 0.3) 6px 6px 6px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.3 ) 6px 6px 6px " but got "rgba ( 0 , 126 , 0 , 0.3 ) 6px 6px 6px "
>+FAIL CSS Transitions with transition: all: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.6) should be [rgba(0, 128, 0, 0.6) 12px 12px 12px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.6 ) 12px 12px 12px " but got "rgba ( 0 , 129 , 0 , 0.6 ) 12px 12px 12px "
>+PASS CSS Transitions with transition: all: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 192, 0) 30px 30px 30px] 
>+FAIL CSS Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (-0.3) should be [rgba(0, 0, 0, 0) -6px -6px 0px] assert_equals: expected "rgba ( 0 , 0 , 0 , 0 ) - 6px - 6px 0px " but got "rgba ( 0 , 0 , 0 , 0 ) - 5.98px - 5.98px - 6px "
>+PASS CSS Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0) should be [rgba(0, 0, 0, 0) 0px 0px 0px] 
>+FAIL CSS Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.3) should be [rgba(0, 128, 0, 0.3) 6px 6px 6px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.3 ) 6px 6px 6px " but got "rgba ( 0 , 126 , 0 , 0.3 ) 6px 6px 6px "
>+FAIL CSS Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.6) should be [rgba(0, 128, 0, 0.6) 12px 12px 12px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.6 ) 12px 12px 12px " but got "rgba ( 0 , 129 , 0 , 0.6 ) 12px 12px 12px "
>+PASS CSS Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 192, 0) 30px 30px 30px] 
>+FAIL Web Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (-0.3) should be [rgba(0, 0, 0, 0) -6px -6px 0px] assert_equals: expected "rgba ( 0 , 0 , 0 , 0 ) - 6px - 6px 0px " but got "rgba ( 0 , 0 , 0 , 0 ) - 5.98px - 5.98px - 6px "
>+PASS Web Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0) should be [rgba(0, 0, 0, 0) 0px 0px 0px] 
>+FAIL Web Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.3) should be [rgba(0, 128, 0, 0.3) 6px 6px 6px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.3 ) 6px 6px 6px " but got "rgba ( 0 , 126 , 0 , 0.3 ) 6px 6px 6px "
>+FAIL Web Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (0.6) should be [rgba(0, 128, 0, 0.6) 12px 12px 12px] assert_equals: expected "rgba ( 0 , 128 , 0 , 0.6 ) 12px 12px 12px " but got "rgba ( 0 , 129 , 0 , 0.6 ) 12px 12px 12px "
>+PASS Web Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS Web Animations: property <text-shadow> from [initial] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 192, 0) 30px 30px 30px] 
>+PASS CSS Transitions: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] 
>+PASS CSS Transitions: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] 
>+PASS CSS Transitions: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] 
>+PASS CSS Transitions: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] 
>+PASS CSS Transitions: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] 
>+FAIL CSS Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] assert_equals: expected "rgb ( 255 , 176 , 0 ) 33px 7px 33px " but got "rgb ( 255 , 176 , 0 ) 7px 33px 7px "
>+FAIL CSS Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] assert_equals: expected "rgb ( 255 , 165 , 0 ) 30px 10px 30px " but got "rgb ( 255 , 165 , 0 ) 10px 30px 10px "
>+FAIL CSS Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] assert_equals: expected "rgb ( 179 , 154 , 0 ) 27px 13px 27px " but got "rgb ( 179 , 154 , 0 ) 13px 27px 13px "
>+FAIL CSS Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] assert_equals: expected "rgb ( 102 , 143 , 0 ) 24px 16px 24px " but got "rgb ( 102 , 143 , 0 ) 16px 24px 16px "
>+PASS CSS Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+FAIL CSS Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] assert_equals: expected "rgb ( 0 , 110 , 0 ) 15px 25px 15px " but got "rgb ( 0 , 110 , 0 ) 25px 15px 25px "
>+FAIL Web Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] assert_equals: expected "rgb ( 255 , 176 , 0 ) 33px 7px 33px " but got "rgb ( 255 , 176 , 0 ) 7px 33px 7px "
>+FAIL Web Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] assert_equals: expected "rgb ( 255 , 165 , 0 ) 30px 10px 30px " but got "rgb ( 255 , 176 , 0 ) 7px 33px 7px "
>+FAIL Web Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] assert_equals: expected "rgb ( 179 , 154 , 0 ) 27px 13px 27px " but got "rgb ( 179 , 162 , 0 ) 10.89px 29.09px 11px "
>+FAIL Web Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] assert_equals: expected "rgb ( 102 , 143 , 0 ) 24px 16px 24px " but got "rgb ( 72 , 142 , 0 ) 16.34px 23.63px 16px "
>+PASS Web Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+FAIL Web Animations: property <text-shadow> from [inherit] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] assert_equals: expected "rgb ( 0 , 110 , 0 ) 15px 25px 15px " but got "rgb ( 0 , 128 , 0 ) 20px 20px 20px "
>+PASS CSS Transitions: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] 
>+PASS CSS Transitions: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] 
>+PASS CSS Transitions: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] 
>+PASS CSS Transitions: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] 
>+PASS CSS Transitions: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] 
>+FAIL CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] assert_equals: expected "rgb ( 255 , 176 , 0 ) 33px 7px 33px " but got "rgb ( 255 , 176 , 0 ) 7px 33px 7px "
>+FAIL CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] assert_equals: expected "rgb ( 255 , 165 , 0 ) 30px 10px 30px " but got "rgb ( 255 , 165 , 0 ) 10px 30px 10px "
>+FAIL CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] assert_equals: expected "rgb ( 179 , 154 , 0 ) 27px 13px 27px " but got "rgb ( 179 , 154 , 0 ) 13px 27px 13px "
>+FAIL CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] assert_equals: expected "rgb ( 102 , 143 , 0 ) 24px 16px 24px " but got "rgb ( 102 , 143 , 0 ) 16px 24px 16px "
>+PASS CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+FAIL CSS Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] assert_equals: expected "rgb ( 0 , 110 , 0 ) 15px 25px 15px " but got "rgb ( 0 , 110 , 0 ) 25px 15px 25px "
>+FAIL Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (-0.3) should be [rgb(255, 176, 0) 33px 7px 33px] assert_equals: expected "rgb ( 255 , 176 , 0 ) 33px 7px 33px " but got "rgb ( 255 , 176 , 0 ) 7px 33px 7px "
>+FAIL Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0) should be [rgb(255, 165, 0) 30px 10px 30px] assert_equals: expected "rgb ( 255 , 165 , 0 ) 30px 10px 30px " but got "rgb ( 255 , 176 , 0 ) 7px 33px 7px "
>+FAIL Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.3) should be [rgb(179, 154, 0) 27px 13px 27px] assert_equals: expected "rgb ( 179 , 154 , 0 ) 27px 13px 27px " but got "rgb ( 179 , 162 , 0 ) 10.89px 29.09px 11px "
>+FAIL Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (0.6) should be [rgb(102, 143, 0) 24px 16px 24px] assert_equals: expected "rgb ( 102 , 143 , 0 ) 24px 16px 24px " but got "rgb ( 72 , 142 , 0 ) 16.34px 23.63px 16px "
>+PASS Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1) should be [rgb(0, 128, 0) 20px 20px 20px] 
>+FAIL Web Animations: property <text-shadow> from [unset] to [green 20px 20px 20px] at (1.5) should be [rgb(0, 110, 0) 15px 25px 15px] assert_equals: expected "rgb ( 0 , 110 , 0 ) 15px 25px 15px " but got "rgb ( 0 , 128 , 0 ) 20px 20px 20px "
>+FAIL CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (-0.3) should be [rgb(0, 0, 0) 24px 16px 0px] assert_equals: expected "rgb ( 0 , 0 , 0 ) 24px 16px 0px " but got "rgb ( 0 , 0 , 0 ) 24px 15.98px - 1px "
>+PASS CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0) should be [rgb(0, 0, 0) 15px 10px 5px] 
>+PASS CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.3) should be [rgb(77, 50, 0) 6px 4px 11px] 
>+PASS CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.6) should be [rgb(153, 99, 0) -3px -2px 17px] 
>+PASS CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1) should be [rgb(255, 165, 0) -15px -10px 25px] 
>+PASS CSS Transitions: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1.5) should be [rgb(255, 248, 0) -30px -20px 35px] 
>+FAIL CSS Transitions with transition: all: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (-0.3) should be [rgb(0, 0, 0) 24px 16px 0px] assert_equals: expected "rgb ( 0 , 0 , 0 ) 24px 16px 0px " but got "rgb ( 0 , 0 , 0 ) 24px 15.98px - 1px "
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0) should be [rgb(0, 0, 0) 15px 10px 5px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.3) should be [rgb(77, 50, 0) 6px 4px 11px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.6) should be [rgb(153, 99, 0) -3px -2px 17px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1) should be [rgb(255, 165, 0) -15px -10px 25px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1.5) should be [rgb(255, 248, 0) -30px -20px 35px] 
>+FAIL CSS Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (-0.3) should be [rgb(0, 0, 0) 24px 16px 0px] assert_equals: expected "rgb ( 0 , 0 , 0 ) 24px 16px 0px " but got "rgb ( 0 , 0 , 0 ) 24px 15.98px - 1px "
>+PASS CSS Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0) should be [rgb(0, 0, 0) 15px 10px 5px] 
>+PASS CSS Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.3) should be [rgb(77, 50, 0) 6px 4px 11px] 
>+PASS CSS Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.6) should be [rgb(153, 99, 0) -3px -2px 17px] 
>+PASS CSS Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1) should be [rgb(255, 165, 0) -15px -10px 25px] 
>+PASS CSS Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1.5) should be [rgb(255, 248, 0) -30px -20px 35px] 
>+FAIL Web Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (-0.3) should be [rgb(0, 0, 0) 24px 16px 0px] assert_equals: expected "rgb ( 0 , 0 , 0 ) 24px 16px 0px " but got "rgb ( 0 , 0 , 0 ) 24px 15.98px - 1px "
>+PASS Web Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0) should be [rgb(0, 0, 0) 15px 10px 5px] 
>+PASS Web Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.3) should be [rgb(77, 50, 0) 6px 4px 11px] 
>+PASS Web Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (0.6) should be [rgb(153, 99, 0) -3px -2px 17px] 
>+PASS Web Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1) should be [rgb(255, 165, 0) -15px -10px 25px] 
>+PASS Web Animations: property <text-shadow> from [black 15px 10px 5px] to [orange -15px -10px 25px] at (1.5) should be [rgb(255, 248, 0) -30px -20px 35px] 
>+PASS CSS Transitions: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (-0.3) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS CSS Transitions: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS CSS Transitions: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.3) should be [rgb(0, 38, 0) 10px 10px 10px] 
>+PASS CSS Transitions: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.6) should be [rgb(0, 77, 0) 10px 10px 10px] 
>+PASS CSS Transitions: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1) should be [rgb(0, 128, 0) 10px 10px 10px] 
>+PASS CSS Transitions: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1.5) should be [rgb(0, 192, 0) 10px 10px 10px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (-0.3) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.3) should be [rgb(0, 38, 0) 10px 10px 10px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.6) should be [rgb(0, 77, 0) 10px 10px 10px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1) should be [rgb(0, 128, 0) 10px 10px 10px] 
>+PASS CSS Transitions with transition: all: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1.5) should be [rgb(0, 192, 0) 10px 10px 10px] 
>+PASS CSS Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (-0.3) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS CSS Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS CSS Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.3) should be [rgb(0, 38, 0) 10px 10px 10px] 
>+PASS CSS Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.6) should be [rgb(0, 77, 0) 10px 10px 10px] 
>+PASS CSS Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1) should be [rgb(0, 128, 0) 10px 10px 10px] 
>+PASS CSS Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1.5) should be [rgb(0, 192, 0) 10px 10px 10px] 
>+PASS Web Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (-0.3) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS Web Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0) should be [rgb(0, 0, 0) 10px 10px 10px] 
>+PASS Web Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.3) should be [rgb(0, 38, 0) 10px 10px 10px] 
>+PASS Web Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (0.6) should be [rgb(0, 77, 0) 10px 10px 10px] 
>+PASS Web Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1) should be [rgb(0, 128, 0) 10px 10px 10px] 
>+PASS Web Animations: property <text-shadow> from [black 10px 10px 10px] to [currentColor 10px 10px 10px] at (1.5) should be [rgb(0, 192, 0) 10px 10px 10px] 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-interpolation.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-interpolation.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c007816ecb04236421ff0aea8861da19c244338a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-interpolation.html
>@@ -0,0 +1,110 @@
>+<!DOCTYPE html>
>+<meta charset="UTF-8">
>+<title>text-shadow interpolation</title>
>+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
>+<meta name="assert" content="text-shadow supports animation">
>+
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/css/support/interpolation-testcommon.js"></script>
>+
>+<style>
>+.parent {
>+  text-shadow: 30px 10px 30px orange;
>+}
>+
>+.target {
>+  display: inline-block;
>+  font-size: 60pt;
>+  margin-right: 20px;
>+  margin-bottom: 30px;
>+  color: green;
>+  text-shadow: 10px 30px 10px orange;
>+}
>+
>+.expected {
>+  margin-right: 40px;
>+}
>+</style>
>+<body>
>+<template id="target-template">T</template>
>+<script>
>+test_interpolation({
>+  property: 'text-shadow',
>+  from: neutralKeyframe,
>+  to: 'green 20px 20px 20px',
>+}, [
>+  {at: -0.3, expect: 'rgb(255, 176, 0) 7px 33px 7px'},
>+  {at: 0, expect: 'rgb(255, 165, 0) 10px 30px 10px'},
>+  {at: 0.3, expect: 'rgb(179, 154, 0) 13px 27px 13px'},
>+  {at: 0.6, expect: 'rgb(102, 143, 0) 16px 24px 16px'},
>+  {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'},
>+  {at: 1.5, expect: 'rgb(0, 110, 0) 25px 15px 25px'},
>+]);
>+
>+test_interpolation({
>+  property: 'text-shadow',
>+  from: 'initial',
>+  to: 'green 20px 20px 20px',
>+}, [
>+  {at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px'},
>+  {at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px'},
>+  {at: 0.3, expect: 'rgba(0, 128, 0, 0.3) 6px 6px 6px'},
>+  {at: 0.6, expect: 'rgba(0, 128, 0, 0.6) 12px 12px 12px'},
>+  {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'},
>+  {at: 1.5, expect: 'rgb(0, 192, 0) 30px 30px 30px'},
>+]);
>+
>+test_interpolation({
>+  property: 'text-shadow',
>+  from: 'inherit',
>+  to: 'green 20px 20px 20px',
>+}, [
>+  {at: -0.3, expect: 'rgb(255, 176, 0) 33px 7px 33px'},
>+  {at: 0, expect: 'rgb(255, 165, 0) 30px 10px 30px'},
>+  {at: 0.3, expect: 'rgb(179, 154, 0) 27px 13px 27px'},
>+  {at: 0.6, expect: 'rgb(102, 143, 0) 24px 16px 24px'},
>+  {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'},
>+  {at: 1.5, expect: 'rgb(0, 110, 0) 15px 25px 15px'},
>+]);
>+
>+test_interpolation({
>+  property: 'text-shadow',
>+  from: 'unset',
>+  to: 'green 20px 20px 20px',
>+}, [
>+  {at: -0.3, expect: 'rgb(255, 176, 0) 33px 7px 33px'},
>+  {at: 0, expect: 'rgb(255, 165, 0) 30px 10px 30px'},
>+  {at: 0.3, expect: 'rgb(179, 154, 0) 27px 13px 27px'},
>+  {at: 0.6, expect: 'rgb(102, 143, 0) 24px 16px 24px'},
>+  {at: 1, expect: 'rgb(0, 128, 0) 20px 20px 20px'},
>+  {at: 1.5, expect: 'rgb(0, 110, 0) 15px 25px 15px'},
>+]);
>+
>+test_interpolation({
>+  property: 'text-shadow',
>+  from: 'black 15px 10px 5px',
>+  to: 'orange -15px -10px 25px',
>+}, [
>+  {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px'},
>+  {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px'},
>+  {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px'},
>+  {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px'},
>+  {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px'},
>+  {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px'},
>+]);
>+
>+test_interpolation({
>+  property: 'text-shadow',
>+  from: 'black 10px 10px 10px',
>+  to: 'currentColor 10px 10px 10px',
>+}, [
>+  {at: -0.3, expect: 'rgb(0, 0, 0) 10px 10px 10px'},
>+  {at: 0, expect: 'rgb(0, 0, 0) 10px 10px 10px'},
>+  {at: 0.3, expect: 'rgb(0, 38, 0) 10px 10px 10px'},
>+  {at: 0.6, expect: 'rgb(0, 77, 0) 10px 10px 10px'},
>+  {at: 1, expect: 'rgb(0, 128, 0) 10px 10px 10px'},
>+  {at: 1.5, expect: 'rgb(0, 192, 0) 10px 10px 10px'},
>+]);
>+</script>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..df7035d223e9ebeaa67fdf15a7c976d64c87f1c2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition-expected.txt
>@@ -0,0 +1,22 @@
>+
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (-0.3) should be [120px] assert_equals: expected "120px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (0) should be [150px] assert_equals: expected "150px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (0.5) should be [200px] assert_equals: expected "200px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (1) should be [250px] assert_equals: expected "250px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (1.5) should be [300px] assert_equals: expected "300px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (-0.5) should be [114px] assert_equals: expected "114px " but got "100px "
>+FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (0) should be [110px] assert_equals: expected "110px " but got "100px "
>+FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (0.5) should be [106px] assert_equals: expected "106px " but got "100px "
>+FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (1) should be [102px] assert_equals: expected "102px " but got "100px "
>+FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (1.5) should be [98px] assert_equals: expected "98px " but got "100px "
>+FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (-0.3) should be [calc(130px + 4%)] assert_equals: expected "" but got "10 % "
>+FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (0) should be [calc(100px + 10%)] assert_equals: expected "" but got "10 % "
>+FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (0.5) should be [calc(50px + 20%)] assert_equals: expected "" but got "10 % "
>+FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (1) should be [30%] assert_equals: expected "30 % " but got "10 % "
>+FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (1.5) should be [calc(-50px + 40%)] assert_equals: expected "" but got "10 % "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (-0.3) should be [135px] assert_equals: expected "135px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (0) should be [150px] assert_equals: expected "150px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (0.5) should be [175px] assert_equals: expected "175px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (1) should be [200px] assert_equals: expected "200px " but got "50px "
>+FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (1.5) should be [225px] assert_equals: expected "225px " but got "50px "
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..222a511679b999cc684d26fc3c5e73bfc1d0ee46
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition.html
>@@ -0,0 +1,65 @@
>+<!DOCTYPE html>
>+<meta charset="UTF-8">
>+<title>vertical-align composition</title>
>+<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align">
>+<meta name="assert" content="vertical-align supports animation">
>+
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/css/support/interpolation-testcommon.js"></script>
>+
>+<body>
>+<script>
>+test_composition({
>+  property: 'vertical-align',
>+  underlying: '50px',
>+  addFrom: '100px',
>+  addTo: '200px',
>+}, [
>+  {at: -0.3, expect: '120px'},
>+  {at: 0, expect: '150px'},
>+  {at: 0.5, expect: '200px'},
>+  {at: 1, expect: '250px'},
>+  {at: 1.5, expect: '300px'},
>+]);
>+
>+test_composition({
>+  property: 'vertical-align',
>+  underlying: '100px',
>+  addFrom: '10px',
>+  addTo: '2px',
>+}, [
>+  {at: -0.5, expect: '114px'},
>+  {at: 0, expect: '110px'},
>+  {at: 0.5, expect: '106px'},
>+  {at: 1, expect: '102px'},
>+  {at: 1.5, expect: '98px'},
>+]);
>+
>+test_composition({
>+  property: 'vertical-align',
>+  underlying: '10%',
>+  addFrom: '100px',
>+  addTo: '20%',
>+}, [
>+  {at: -0.3, expect: 'calc(130px + 4%)'},
>+  {at: 0, expect: 'calc(100px + 10%)'},
>+  {at: 0.5, expect: 'calc(50px + 20%)'},
>+  {at: 1, expect: '30%'},
>+  {at: 1.5, expect: 'calc(-50px + 40%)'},
>+]);
>+
>+test_composition({
>+  property: 'vertical-align',
>+  underlying: '50px',
>+  addFrom: '100px',
>+  replaceTo: '200px',
>+}, [
>+  {at: -0.3, expect: '135px'},
>+  {at: 0, expect: '150px'},
>+  {at: 0.5, expect: '175px'},
>+  {at: 1, expect: '200px'},
>+  {at: 1.5, expect: '225px'},
>+]);
>+</script>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..fb233b398282f2be6f5ceca8506175f90aca73ef
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation-expected.txt
>@@ -0,0 +1,178 @@
>+
>+FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "40px "
>+FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (0) should be [10px] assert_equals: expected "10px " but got "40px "
>+FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "40px "
>+FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "40px "
>+PASS CSS Transitions: property <vertical-align> from neutral to [40px] at (1) should be [40px] 
>+FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0) should be [10px] assert_equals: expected "10px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "40px "
>+PASS CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (1) should be [40px] 
>+FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "40px "
>+FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "10px "
>+PASS CSS Animations: property <vertical-align> from neutral to [40px] at (0) should be [10px] 
>+FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "10px "
>+PASS Web Animations: property <vertical-align> from neutral to [40px] at (0) should be [10px] 
>+FAIL Web Animations: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from neutral to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "10px "
>+PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (-0.3) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (0) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (0.3) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (1) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (-0.3) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (0) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (0.3) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (1) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px] 
>+FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (-0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0) should be [initial] assert_equals: expected "baseline " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (-0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0) should be [initial] assert_equals: expected "baseline " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "40px "
>+FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "40px "
>+FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "40px "
>+FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "40px "
>+PASS CSS Transitions: property <vertical-align> from [inherit] to [40px] at (1) should be [40px] 
>+FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px] assert_equals: expected "10px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "40px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "40px "
>+PASS CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (1) should be [40px] 
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px] assert_equals: expected "10px " but got "40px "
>+FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+PASS CSS Animations: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px] 
>+FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+PASS Web Animations: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px] 
>+PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (-0.3) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (0) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (0.3) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (1) should be [40px] 
>+PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (-0.3) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (0) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (0.3) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (1) should be [40px] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px] 
>+FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (-0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0) should be [unset] assert_equals: expected "baseline " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (-0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0) should be [unset] assert_equals: expected "baseline " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
>+FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "100px "
>+FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "100px "
>+FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "100px "
>+FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "100px "
>+PASS CSS Transitions: property <vertical-align> from [0px] to [100px] at (1) should be [100px] 
>+FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "100px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "100px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "100px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "100px "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "100px "
>+PASS CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (1) should be [100px] 
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "100px "
>+FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (1) should be [100px] assert_equals: expected "100px " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (1) should be [100px] assert_equals: expected "100px " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "10px "
>+FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "40 % "
>+FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "10px "
>+FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "10px "
>+FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "10px "
>+FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "10px "
>+FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "10px "
>+FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "10px "
>+PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (-0.3) should be [40%] 
>+PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (0) should be [40%] 
>+PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (0.3) should be [40%] 
>+PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (0.5) should be [40%] 
>+PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (0.6) should be [40%] 
>+PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (1) should be [40%] 
>+PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (1.5) should be [40%] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (-0.3) should be [40%] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (0) should be [40%] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (0.3) should be [40%] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (0.5) should be [40%] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (0.6) should be [40%] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (1) should be [40%] 
>+PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (1.5) should be [40%] 
>+FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (-0.3) should be [super] assert_equals: expected "super " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0) should be [super] assert_equals: expected "super " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0.3) should be [super] assert_equals: expected "super " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0.5) should be [40%] assert_equals: expected "40 % " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0.6) should be [40%] assert_equals: expected "40 % " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (1) should be [40%] assert_equals: expected "40 % " but got "10px "
>+FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (1.5) should be [40%] assert_equals: expected "40 % " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [super] to [40%] at (-0.3) should be [super] assert_equals: expected "super " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0) should be [super] assert_equals: expected "super " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0.3) should be [super] assert_equals: expected "super " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0.5) should be [40%] assert_equals: expected "40 % " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0.6) should be [40%] assert_equals: expected "40 % " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [super] to [40%] at (1) should be [40%] assert_equals: expected "40 % " but got "10px "
>+FAIL Web Animations: property <vertical-align> from [super] to [40%] at (1.5) should be [40%] assert_equals: expected "40 % " but got "10px "
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c81c83239354cc3c179612f26f95891dac8e3676
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation.html
>@@ -0,0 +1,98 @@
>+<!DOCTYPE html>
>+<meta charset="UTF-8">
>+<title>vertical-align interpolation</title>
>+<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align">
>+<meta name="assert" content="vertical-align supports animation">
>+
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/css/support/interpolation-testcommon.js"></script>
>+
>+<style>
>+.parent {
>+  vertical-align: 100px;
>+}
>+.target {
>+  width: 100px;
>+  height: 100px;
>+  background-color: black;
>+  display: inline-block;
>+  vertical-align: 10px;
>+}
>+.expected {
>+  background-color: green;
>+}
>+</style>
>+
>+<body>
>+<script>
>+test_interpolation({
>+  property: 'vertical-align',
>+  from: neutralKeyframe,
>+  to: '40px',
>+}, [
>+  {at: -0.5, expect: '-5px'},
>+  {at: 0, expect: '10px'},
>+  {at: 0.3, expect: '19px'},
>+  {at: 0.6, expect: '28px'},
>+  {at: 1, expect: '40px'},
>+  {at: 1.5, expect: '55px'},
>+]);
>+
>+test_no_interpolation({
>+  property: 'vertical-align',
>+  from: 'initial',
>+  to: '40px',
>+});
>+
>+test_interpolation({
>+  property: 'vertical-align',
>+  from: 'inherit',
>+  to: '40px',
>+}, [
>+  {at: -0.5, expect: '130px'},
>+  {at: 0, expect: '100px'},
>+  {at: 0.3, expect: '82px'},
>+  {at: 0.6, expect: '64px'},
>+  {at: 1, expect: '40px'},
>+  {at: 1.5, expect: '10px'},
>+]);
>+
>+test_no_interpolation({
>+  property: 'vertical-align',
>+  from: 'unset',
>+  to: '40px',
>+});
>+
>+test_interpolation({
>+  property: 'vertical-align',
>+  from: '0px',
>+  to: '100px'
>+}, [
>+  {at: -0.5, expect: '-50px'},
>+  {at: 0, expect: '0px'},
>+  {at: 0.3, expect: '30px'},
>+  {at: 0.6, expect: '60px'},
>+  {at: 1, expect: '100px'},
>+  {at: 1.5, expect: '150px'}
>+]);
>+
>+test_interpolation({
>+  property: 'vertical-align',
>+  from: '40px',
>+  to: '40%'
>+}, [
>+  {at: -0.5, expect: 'calc(60px - 20%)'},
>+  {at: 0, expect: 'calc(40px + 0%)'},
>+  {at: 0.3, expect: 'calc(28px + 12%)'},
>+  {at: 1, expect: 'calc(0px + 40%)'},
>+  {at: 1.5, expect: 'calc(-20px + 60%)'}
>+]);
>+
>+test_no_interpolation({
>+  property: 'vertical-align',
>+  from: 'super',
>+  to: '40%'
>+});
>+</script>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/w3c-import.log
>new file mode 100644
>index 0000000000000000000000000000000000000000..c8e67bdd0cff00b1dcccf51b1d38524a11184768
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/w3c-import.log
>@@ -0,0 +1,21 @@
>+The tests in this directory were imported from the W3C repository.
>+Do NOT modify these tests directly in WebKit.
>+Instead, create a pull request on the WPT github:
>+	https://github.com/web-platform-tests/wpt
>+
>+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
>+
>+Do NOT modify or remove this file.
>+
>+------------------------------------------------------------------------
>+Properties requiring vendor prefixes:
>+None
>+Property values requiring vendor prefixes:
>+None
>+------------------------------------------------------------------------
>+List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-composition.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/text-shadow-interpolation.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/z-index-interpolation.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/z-index-interpolation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/z-index-interpolation-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..9ba55f895079ae55abd6429999ce79bbf92dbe78
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/z-index-interpolation-expected.txt
>@@ -0,0 +1,210 @@
>+
>+PASS CSS Transitions: property <z-index> from neutral to [5] at (-0.3) should be [-4] 
>+PASS CSS Transitions: property <z-index> from neutral to [5] at (0) should be [-2] 
>+PASS CSS Transitions: property <z-index> from neutral to [5] at (0.3) should be [0] 
>+PASS CSS Transitions: property <z-index> from neutral to [5] at (0.6) should be [2] 
>+PASS CSS Transitions: property <z-index> from neutral to [5] at (1) should be [5] 
>+PASS CSS Transitions: property <z-index> from neutral to [5] at (1.5) should be [9] 
>+PASS CSS Transitions with transition: all: property <z-index> from neutral to [5] at (-0.3) should be [-4] 
>+PASS CSS Transitions with transition: all: property <z-index> from neutral to [5] at (0) should be [-2] 
>+PASS CSS Transitions with transition: all: property <z-index> from neutral to [5] at (0.3) should be [0] 
>+PASS CSS Transitions with transition: all: property <z-index> from neutral to [5] at (0.6) should be [2] 
>+PASS CSS Transitions with transition: all: property <z-index> from neutral to [5] at (1) should be [5] 
>+PASS CSS Transitions with transition: all: property <z-index> from neutral to [5] at (1.5) should be [9] 
>+PASS CSS Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4] 
>+PASS CSS Animations: property <z-index> from neutral to [5] at (0) should be [-2] 
>+PASS CSS Animations: property <z-index> from neutral to [5] at (0.3) should be [0] 
>+PASS CSS Animations: property <z-index> from neutral to [5] at (0.6) should be [2] 
>+PASS CSS Animations: property <z-index> from neutral to [5] at (1) should be [5] 
>+PASS CSS Animations: property <z-index> from neutral to [5] at (1.5) should be [9] 
>+PASS Web Animations: property <z-index> from neutral to [5] at (-0.3) should be [-4] 
>+FAIL Web Animations: property <z-index> from neutral to [5] at (0) should be [-2] assert_equals: expected "- 2 " but got "- 4 "
>+FAIL Web Animations: property <z-index> from neutral to [5] at (0.3) should be [0] assert_equals: expected "0 " but got "- 1 "
>+FAIL Web Animations: property <z-index> from neutral to [5] at (0.6) should be [2] assert_equals: expected "2 " but got "3 "
>+PASS Web Animations: property <z-index> from neutral to [5] at (1) should be [5] 
>+FAIL Web Animations: property <z-index> from neutral to [5] at (1.5) should be [9] assert_equals: expected "9 " but got "5 "
>+FAIL CSS Transitions: property <z-index> from [initial] to [5] at (-0.3) should be [5] assert_equals: expected "5 " but got "- 1 "
>+FAIL CSS Transitions: property <z-index> from [initial] to [5] at (0) should be [5] assert_equals: expected "5 " but got "0 "
>+FAIL CSS Transitions: property <z-index> from [initial] to [5] at (0.3) should be [5] assert_equals: expected "5 " but got "2 "
>+FAIL CSS Transitions: property <z-index> from [initial] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL CSS Transitions: property <z-index> from [initial] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS CSS Transitions: property <z-index> from [initial] to [5] at (1) should be [5] 
>+FAIL CSS Transitions: property <z-index> from [initial] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [initial] to [5] at (-0.3) should be [5] assert_equals: expected "5 " but got "- 1 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [initial] to [5] at (0) should be [5] assert_equals: expected "5 " but got "0 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [initial] to [5] at (0.3) should be [5] assert_equals: expected "5 " but got "2 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [initial] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [initial] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS CSS Transitions with transition: all: property <z-index> from [initial] to [5] at (1) should be [5] 
>+FAIL CSS Transitions with transition: all: property <z-index> from [initial] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+FAIL CSS Animations: property <z-index> from [initial] to [5] at (-0.3) should be [initial] assert_equals: expected "auto " but got "- 1 "
>+FAIL CSS Animations: property <z-index> from [initial] to [5] at (0) should be [initial] assert_equals: expected "auto " but got "0 "
>+FAIL CSS Animations: property <z-index> from [initial] to [5] at (0.3) should be [initial] assert_equals: expected "auto " but got "2 "
>+FAIL CSS Animations: property <z-index> from [initial] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL CSS Animations: property <z-index> from [initial] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS CSS Animations: property <z-index> from [initial] to [5] at (1) should be [5] 
>+FAIL CSS Animations: property <z-index> from [initial] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+FAIL Web Animations: property <z-index> from [initial] to [5] at (-0.3) should be [initial] assert_equals: expected "auto " but got "- 1 "
>+FAIL Web Animations: property <z-index> from [initial] to [5] at (0) should be [initial] assert_equals: expected "auto " but got "0 "
>+FAIL Web Animations: property <z-index> from [initial] to [5] at (0.3) should be [initial] assert_equals: expected "auto " but got "2 "
>+FAIL Web Animations: property <z-index> from [initial] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL Web Animations: property <z-index> from [initial] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS Web Animations: property <z-index> from [initial] to [5] at (1) should be [5] 
>+FAIL Web Animations: property <z-index> from [initial] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+PASS CSS Transitions: property <z-index> from [inherit] to [5] at (-0.3) should be [18] 
>+PASS CSS Transitions: property <z-index> from [inherit] to [5] at (0) should be [15] 
>+PASS CSS Transitions: property <z-index> from [inherit] to [5] at (0.3) should be [12] 
>+PASS CSS Transitions: property <z-index> from [inherit] to [5] at (0.6) should be [9] 
>+PASS CSS Transitions: property <z-index> from [inherit] to [5] at (1) should be [5] 
>+PASS CSS Transitions: property <z-index> from [inherit] to [5] at (1.5) should be [0] 
>+PASS CSS Transitions with transition: all: property <z-index> from [inherit] to [5] at (-0.3) should be [18] 
>+PASS CSS Transitions with transition: all: property <z-index> from [inherit] to [5] at (0) should be [15] 
>+PASS CSS Transitions with transition: all: property <z-index> from [inherit] to [5] at (0.3) should be [12] 
>+PASS CSS Transitions with transition: all: property <z-index> from [inherit] to [5] at (0.6) should be [9] 
>+PASS CSS Transitions with transition: all: property <z-index> from [inherit] to [5] at (1) should be [5] 
>+PASS CSS Transitions with transition: all: property <z-index> from [inherit] to [5] at (1.5) should be [0] 
>+FAIL CSS Animations: property <z-index> from [inherit] to [5] at (-0.3) should be [18] assert_equals: expected "18 " but got "- 4 "
>+FAIL CSS Animations: property <z-index> from [inherit] to [5] at (0) should be [15] assert_equals: expected "15 " but got "- 2 "
>+FAIL CSS Animations: property <z-index> from [inherit] to [5] at (0.3) should be [12] assert_equals: expected "12 " but got "0 "
>+FAIL CSS Animations: property <z-index> from [inherit] to [5] at (0.6) should be [9] assert_equals: expected "9 " but got "2 "
>+PASS CSS Animations: property <z-index> from [inherit] to [5] at (1) should be [5] 
>+FAIL CSS Animations: property <z-index> from [inherit] to [5] at (1.5) should be [0] assert_equals: expected "0 " but got "9 "
>+FAIL Web Animations: property <z-index> from [inherit] to [5] at (-0.3) should be [18] assert_equals: expected "18 " but got "- 4 "
>+FAIL Web Animations: property <z-index> from [inherit] to [5] at (0) should be [15] assert_equals: expected "15 " but got "- 4 "
>+FAIL Web Animations: property <z-index> from [inherit] to [5] at (0.3) should be [12] assert_equals: expected "12 " but got "- 1 "
>+FAIL Web Animations: property <z-index> from [inherit] to [5] at (0.6) should be [9] assert_equals: expected "9 " but got "3 "
>+PASS Web Animations: property <z-index> from [inherit] to [5] at (1) should be [5] 
>+FAIL Web Animations: property <z-index> from [inherit] to [5] at (1.5) should be [0] assert_equals: expected "0 " but got "5 "
>+FAIL CSS Transitions: property <z-index> from [unset] to [5] at (-0.3) should be [5] assert_equals: expected "5 " but got "- 1 "
>+FAIL CSS Transitions: property <z-index> from [unset] to [5] at (0) should be [5] assert_equals: expected "5 " but got "0 "
>+FAIL CSS Transitions: property <z-index> from [unset] to [5] at (0.3) should be [5] assert_equals: expected "5 " but got "2 "
>+FAIL CSS Transitions: property <z-index> from [unset] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL CSS Transitions: property <z-index> from [unset] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS CSS Transitions: property <z-index> from [unset] to [5] at (1) should be [5] 
>+FAIL CSS Transitions: property <z-index> from [unset] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [unset] to [5] at (-0.3) should be [5] assert_equals: expected "5 " but got "- 1 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [unset] to [5] at (0) should be [5] assert_equals: expected "5 " but got "0 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [unset] to [5] at (0.3) should be [5] assert_equals: expected "5 " but got "2 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [unset] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [unset] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS CSS Transitions with transition: all: property <z-index> from [unset] to [5] at (1) should be [5] 
>+FAIL CSS Transitions with transition: all: property <z-index> from [unset] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+FAIL CSS Animations: property <z-index> from [unset] to [5] at (-0.3) should be [unset] assert_equals: expected "auto " but got "- 1 "
>+FAIL CSS Animations: property <z-index> from [unset] to [5] at (0) should be [unset] assert_equals: expected "auto " but got "0 "
>+FAIL CSS Animations: property <z-index> from [unset] to [5] at (0.3) should be [unset] assert_equals: expected "auto " but got "2 "
>+FAIL CSS Animations: property <z-index> from [unset] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL CSS Animations: property <z-index> from [unset] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS CSS Animations: property <z-index> from [unset] to [5] at (1) should be [5] 
>+FAIL CSS Animations: property <z-index> from [unset] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+FAIL Web Animations: property <z-index> from [unset] to [5] at (-0.3) should be [unset] assert_equals: expected "auto " but got "- 1 "
>+FAIL Web Animations: property <z-index> from [unset] to [5] at (0) should be [unset] assert_equals: expected "auto " but got "0 "
>+FAIL Web Animations: property <z-index> from [unset] to [5] at (0.3) should be [unset] assert_equals: expected "auto " but got "2 "
>+FAIL Web Animations: property <z-index> from [unset] to [5] at (0.5) should be [5] assert_equals: expected "5 " but got "3 "
>+FAIL Web Animations: property <z-index> from [unset] to [5] at (0.6) should be [5] assert_equals: expected "5 " but got "3 "
>+PASS Web Animations: property <z-index> from [unset] to [5] at (1) should be [5] 
>+FAIL Web Animations: property <z-index> from [unset] to [5] at (1.5) should be [5] assert_equals: expected "5 " but got "8 "
>+PASS CSS Transitions: property <z-index> from [-5] to [5] at (-0.3) should be [-8] 
>+PASS CSS Transitions: property <z-index> from [-5] to [5] at (0) should be [-5] 
>+PASS CSS Transitions: property <z-index> from [-5] to [5] at (0.3) should be [-2] 
>+PASS CSS Transitions: property <z-index> from [-5] to [5] at (0.6) should be [1] 
>+PASS CSS Transitions: property <z-index> from [-5] to [5] at (1) should be [5] 
>+PASS CSS Transitions: property <z-index> from [-5] to [5] at (1.5) should be [10] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-5] to [5] at (-0.3) should be [-8] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-5] to [5] at (0) should be [-5] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-5] to [5] at (0.3) should be [-2] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-5] to [5] at (0.6) should be [1] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-5] to [5] at (1) should be [5] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-5] to [5] at (1.5) should be [10] 
>+PASS CSS Animations: property <z-index> from [-5] to [5] at (-0.3) should be [-8] 
>+PASS CSS Animations: property <z-index> from [-5] to [5] at (0) should be [-5] 
>+PASS CSS Animations: property <z-index> from [-5] to [5] at (0.3) should be [-2] 
>+PASS CSS Animations: property <z-index> from [-5] to [5] at (0.6) should be [1] 
>+PASS CSS Animations: property <z-index> from [-5] to [5] at (1) should be [5] 
>+PASS CSS Animations: property <z-index> from [-5] to [5] at (1.5) should be [10] 
>+PASS Web Animations: property <z-index> from [-5] to [5] at (-0.3) should be [-8] 
>+PASS Web Animations: property <z-index> from [-5] to [5] at (0) should be [-5] 
>+PASS Web Animations: property <z-index> from [-5] to [5] at (0.3) should be [-2] 
>+PASS Web Animations: property <z-index> from [-5] to [5] at (0.6) should be [1] 
>+PASS Web Animations: property <z-index> from [-5] to [5] at (1) should be [5] 
>+PASS Web Animations: property <z-index> from [-5] to [5] at (1.5) should be [10] 
>+PASS CSS Transitions: property <z-index> from [2] to [4] at (-0.3) should be [1] 
>+PASS CSS Transitions: property <z-index> from [2] to [4] at (0) should be [2] 
>+PASS CSS Transitions: property <z-index> from [2] to [4] at (0.3) should be [3] 
>+PASS CSS Transitions: property <z-index> from [2] to [4] at (0.6) should be [3] 
>+PASS CSS Transitions: property <z-index> from [2] to [4] at (1) should be [4] 
>+PASS CSS Transitions: property <z-index> from [2] to [4] at (1.5) should be [5] 
>+PASS CSS Transitions with transition: all: property <z-index> from [2] to [4] at (-0.3) should be [1] 
>+PASS CSS Transitions with transition: all: property <z-index> from [2] to [4] at (0) should be [2] 
>+PASS CSS Transitions with transition: all: property <z-index> from [2] to [4] at (0.3) should be [3] 
>+PASS CSS Transitions with transition: all: property <z-index> from [2] to [4] at (0.6) should be [3] 
>+PASS CSS Transitions with transition: all: property <z-index> from [2] to [4] at (1) should be [4] 
>+PASS CSS Transitions with transition: all: property <z-index> from [2] to [4] at (1.5) should be [5] 
>+PASS CSS Animations: property <z-index> from [2] to [4] at (-0.3) should be [1] 
>+PASS CSS Animations: property <z-index> from [2] to [4] at (0) should be [2] 
>+PASS CSS Animations: property <z-index> from [2] to [4] at (0.3) should be [3] 
>+PASS CSS Animations: property <z-index> from [2] to [4] at (0.6) should be [3] 
>+PASS CSS Animations: property <z-index> from [2] to [4] at (1) should be [4] 
>+PASS CSS Animations: property <z-index> from [2] to [4] at (1.5) should be [5] 
>+PASS Web Animations: property <z-index> from [2] to [4] at (-0.3) should be [1] 
>+PASS Web Animations: property <z-index> from [2] to [4] at (0) should be [2] 
>+PASS Web Animations: property <z-index> from [2] to [4] at (0.3) should be [3] 
>+PASS Web Animations: property <z-index> from [2] to [4] at (0.6) should be [3] 
>+PASS Web Animations: property <z-index> from [2] to [4] at (1) should be [4] 
>+PASS Web Animations: property <z-index> from [2] to [4] at (1.5) should be [5] 
>+PASS CSS Transitions: property <z-index> from [-2] to [-4] at (-0.3) should be [-1] 
>+PASS CSS Transitions: property <z-index> from [-2] to [-4] at (0) should be [-2] 
>+PASS CSS Transitions: property <z-index> from [-2] to [-4] at (0.1) should be [-2] 
>+PASS CSS Transitions: property <z-index> from [-2] to [-4] at (0.3) should be [-3] 
>+PASS CSS Transitions: property <z-index> from [-2] to [-4] at (0.6) should be [-3] 
>+PASS CSS Transitions: property <z-index> from [-2] to [-4] at (1) should be [-4] 
>+PASS CSS Transitions: property <z-index> from [-2] to [-4] at (1.5) should be [-5] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-2] to [-4] at (-0.3) should be [-1] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-2] to [-4] at (0) should be [-2] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-2] to [-4] at (0.1) should be [-2] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-2] to [-4] at (0.3) should be [-3] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-2] to [-4] at (0.6) should be [-3] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-2] to [-4] at (1) should be [-4] 
>+PASS CSS Transitions with transition: all: property <z-index> from [-2] to [-4] at (1.5) should be [-5] 
>+PASS CSS Animations: property <z-index> from [-2] to [-4] at (-0.3) should be [-1] 
>+PASS CSS Animations: property <z-index> from [-2] to [-4] at (0) should be [-2] 
>+PASS CSS Animations: property <z-index> from [-2] to [-4] at (0.1) should be [-2] 
>+PASS CSS Animations: property <z-index> from [-2] to [-4] at (0.3) should be [-3] 
>+PASS CSS Animations: property <z-index> from [-2] to [-4] at (0.6) should be [-3] 
>+PASS CSS Animations: property <z-index> from [-2] to [-4] at (1) should be [-4] 
>+PASS CSS Animations: property <z-index> from [-2] to [-4] at (1.5) should be [-5] 
>+PASS Web Animations: property <z-index> from [-2] to [-4] at (-0.3) should be [-1] 
>+PASS Web Animations: property <z-index> from [-2] to [-4] at (0) should be [-2] 
>+PASS Web Animations: property <z-index> from [-2] to [-4] at (0.1) should be [-2] 
>+PASS Web Animations: property <z-index> from [-2] to [-4] at (0.3) should be [-3] 
>+PASS Web Animations: property <z-index> from [-2] to [-4] at (0.6) should be [-3] 
>+PASS Web Animations: property <z-index> from [-2] to [-4] at (1) should be [-4] 
>+PASS Web Animations: property <z-index> from [-2] to [-4] at (1.5) should be [-5] 
>+FAIL CSS Transitions: property <z-index> from [auto] to [10] at (-0.3) should be [10] assert_equals: expected "10 " but got "- 3 "
>+FAIL CSS Transitions: property <z-index> from [auto] to [10] at (0) should be [10] assert_equals: expected "10 " but got "0 "
>+FAIL CSS Transitions: property <z-index> from [auto] to [10] at (0.3) should be [10] assert_equals: expected "10 " but got "3 "
>+FAIL CSS Transitions: property <z-index> from [auto] to [10] at (0.5) should be [10] assert_equals: expected "10 " but got "5 "
>+FAIL CSS Transitions: property <z-index> from [auto] to [10] at (0.6) should be [10] assert_equals: expected "10 " but got "6 "
>+PASS CSS Transitions: property <z-index> from [auto] to [10] at (1) should be [10] 
>+FAIL CSS Transitions: property <z-index> from [auto] to [10] at (1.5) should be [10] assert_equals: expected "10 " but got "15 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [auto] to [10] at (-0.3) should be [10] assert_equals: expected "10 " but got "- 3 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [auto] to [10] at (0) should be [10] assert_equals: expected "10 " but got "0 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [auto] to [10] at (0.3) should be [10] assert_equals: expected "10 " but got "3 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [auto] to [10] at (0.5) should be [10] assert_equals: expected "10 " but got "5 "
>+FAIL CSS Transitions with transition: all: property <z-index> from [auto] to [10] at (0.6) should be [10] assert_equals: expected "10 " but got "6 "
>+PASS CSS Transitions with transition: all: property <z-index> from [auto] to [10] at (1) should be [10] 
>+FAIL CSS Transitions with transition: all: property <z-index> from [auto] to [10] at (1.5) should be [10] assert_equals: expected "10 " but got "15 "
>+FAIL CSS Animations: property <z-index> from [auto] to [10] at (-0.3) should be [auto] assert_equals: expected "auto " but got "- 3 "
>+FAIL CSS Animations: property <z-index> from [auto] to [10] at (0) should be [auto] assert_equals: expected "auto " but got "0 "
>+FAIL CSS Animations: property <z-index> from [auto] to [10] at (0.3) should be [auto] assert_equals: expected "auto " but got "3 "
>+FAIL CSS Animations: property <z-index> from [auto] to [10] at (0.5) should be [10] assert_equals: expected "10 " but got "5 "
>+FAIL CSS Animations: property <z-index> from [auto] to [10] at (0.6) should be [10] assert_equals: expected "10 " but got "6 "
>+PASS CSS Animations: property <z-index> from [auto] to [10] at (1) should be [10] 
>+FAIL CSS Animations: property <z-index> from [auto] to [10] at (1.5) should be [10] assert_equals: expected "10 " but got "15 "
>+FAIL Web Animations: property <z-index> from [auto] to [10] at (-0.3) should be [auto] assert_equals: expected "auto " but got "- 3 "
>+FAIL Web Animations: property <z-index> from [auto] to [10] at (0) should be [auto] assert_equals: expected "auto " but got "0 "
>+FAIL Web Animations: property <z-index> from [auto] to [10] at (0.3) should be [auto] assert_equals: expected "auto " but got "3 "
>+FAIL Web Animations: property <z-index> from [auto] to [10] at (0.5) should be [10] assert_equals: expected "10 " but got "5 "
>+FAIL Web Animations: property <z-index> from [auto] to [10] at (0.6) should be [10] assert_equals: expected "10 " but got "6 "
>+PASS Web Animations: property <z-index> from [auto] to [10] at (1) should be [10] 
>+FAIL Web Animations: property <z-index> from [auto] to [10] at (1.5) should be [10] assert_equals: expected "10 " but got "15 "
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/z-index-interpolation.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/z-index-interpolation.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9673cc4d8cbb80cf624128e198b6e8bf1b2a1bf1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/z-index-interpolation.html
>@@ -0,0 +1,130 @@
>+<!DOCTYPE html>
>+<meta charset="UTF-8">
>+<title>z-index interpolation</title>
>+<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">
>+<meta name="assert" content="z-index supports animation">
>+
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/css/support/interpolation-testcommon.js"></script>
>+
>+<style>
>+body {
>+  margin-top: 20px;
>+}
>+.layer-reference {
>+  position: fixed;
>+  top: 0px;
>+  height: 100vh;
>+  width: 50px;
>+  background-color: rgba(255, 255, 255, 0.75);
>+  font-family: sans-serif;
>+  text-align: center;
>+  padding-top: 5px;
>+  border: 1px solid;
>+}
>+.parent {
>+  z-index: 15;
>+}
>+.target {
>+  position: relative;
>+  width: 350px;
>+  height: 10px;
>+  z-index: -2;
>+}
>+.actual {
>+  background-color: black;
>+}
>+.expected {
>+  background-color: green;
>+}
>+</style>
>+
>+<body></body>
>+
>+<script>
>+test_interpolation({
>+  property: 'z-index',
>+  from: neutralKeyframe,
>+  to: '5',
>+}, [
>+  {at: -0.3, expect: '-4'},
>+  {at: 0, expect: '-2'},
>+  {at: 0.3, expect: '0'},
>+  {at: 0.6, expect: '2'},
>+  {at: 1, expect: '5'},
>+  {at: 1.5, expect: '9'},
>+]);
>+
>+test_no_interpolation({
>+  property: 'z-index',
>+  from: 'initial',
>+  to: '5',
>+});
>+
>+// We fail to inherit correctly due to style overadjustment: crbug.com/375982
>+test_interpolation({
>+  property: 'z-index',
>+  from: 'inherit',
>+  to: '5',
>+}, [
>+  {at: -0.3, expect: '18'},
>+  {at: 0, expect: '15'},
>+  {at: 0.3, expect: '12'},
>+  {at: 0.6, expect: '9'},
>+  {at: 1, expect: '5'},
>+  {at: 1.5, expect: '0'},
>+]);
>+
>+test_no_interpolation({
>+  property: 'z-index',
>+  from: 'unset',
>+  to: '5',
>+});
>+
>+test_interpolation({
>+  property: 'z-index',
>+  from: '-5',
>+  to: '5'
>+}, [
>+  {at: -0.3, expect: '-8'},
>+  {at: 0, expect: '-5'},
>+  {at: 0.3, expect: '-2'},
>+  {at: 0.6, expect: '1'},
>+  {at: 1, expect: '5'},
>+  {at: 1.5, expect: '10'},
>+]);
>+
>+test_interpolation({
>+  property: 'z-index',
>+  from: '2',
>+  to: '4'
>+}, [
>+  {at: -0.3, expect: '1'},
>+  {at: 0, expect: '2'},
>+  {at: 0.3, expect: '3'},
>+  {at: 0.6, expect: '3'},
>+  {at: 1, expect: '4'},
>+  {at: 1.5, expect: '5'},
>+]);
>+
>+test_interpolation({
>+  property: 'z-index',
>+  from: '-2',
>+  to: '-4'
>+}, [
>+  {at: -0.3, expect: '-1'},
>+  {at: 0, expect: '-2'},
>+  {at: 0.1, expect: '-2'},
>+  {at: 0.3, expect: '-3'},
>+  {at: 0.6, expect: '-3'},
>+  {at: 1, expect: '-4'},
>+  {at: 1.5, expect: '-5'},
>+]);
>+
>+test_no_interpolation({
>+  property: 'z-index',
>+  from: 'auto',
>+  to: '10',
>+});
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/before-load-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/before-load-001.html
>index 231a585f5f6592fa2bdbff17ca36e514fcfe748d..009260eea430721971053f6d98330f9a9ed56d6d 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/before-load-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/before-load-001.html
>@@ -4,9 +4,9 @@
> <meta charset="utf-8">
> <title>CSS Transitions Test: Transitioning before load event</title>
> <meta name="assert" content="Test checks that transitions are run even before the load event fires">
>-
>+     specified here: -->
> <link rel="help" title="5. Transition Events" href="https://drafts.csswg.org/css-transitions/#starting">
> <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed-expected.txt
>index 140deadd1c4c34856cb624542eb5ce5b67ecc6a0..d730b726b2df963622e4b33f4b4dc79752dbcf0b 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed-expected.txt
>@@ -1,7 +1,5 @@
> 
> PASS Property transition-timing-function value 'linear' computes to 'linear' 
>-FAIL Property transition-timing-function value '' computes to 'ease' assert_true: '' is a supported value for transition-timing-function. expected true got false
>-PASS Property transition-timing-function value 'initial' computes to 'ease' 
> PASS Property transition-timing-function value 'ease' computes to 'ease' 
> PASS Property transition-timing-function value 'ease-in' computes to 'ease-in' 
> PASS Property transition-timing-function value 'ease-out' computes to 'ease-out' 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed.html
>index e57856bab4f16f11f288197bb0244aaffa57be7e..cb110549d0b072311d6f00e23bb5452170b0f43c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-computed.html
>@@ -13,8 +13,6 @@
> <div id="target"></div>
> <script>
> test_computed_value("transition-timing-function", "linear");
>-test_computed_value("transition-timing-function", "", "ease");
>-test_computed_value("transition-timing-function", "initial", "ease");
> 
> test_computed_value("transition-timing-function", "ease");
> test_computed_value("transition-timing-function", "ease-in");
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html
>index 9c159afed1698665d53aef9706e3850e671117d3..1f6d49881bfa2bcc5fa95b316af20a8806e620b5 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html
>@@ -30,9 +30,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -40,10 +40,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // this test takes its time, give it a minute to run
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-002.html
>index 6ea59e08839ffcf9ce20523ec60f95cb87723ad4..9c5d9afbb931256251ef59f055d00619282a2e9f 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-002.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-002.html
>@@ -29,9 +29,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -39,10 +39,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // this suite tests property value types that haven't been specified
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html
>index 6194f7f8ea79496e18c9df18cb8af8c66a3603cf..4f6bbda53bc2df17f28987d13ff8288fc94290c4 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html
>@@ -30,9 +30,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -40,10 +40,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // see README.md for an explanation of how this test suite works
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-auto-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-auto-001.html
>index b1f66ee36bafbf2d07d310fc6f51ee368223c43e..6c932aa7cd6c9156e943027551a7cbbce3786365 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-auto-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-auto-001.html
>@@ -28,9 +28,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -38,10 +38,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // see README.md for an explanation of how this test suite works
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-implicit-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-implicit-001.html
>index 717b68095a7dd66d7f36adb9fa106515b7b87da7..8500436c529707f43349354ee87ef460e2d7d63b 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-implicit-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-implicit-001.html
>@@ -29,9 +29,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -39,10 +39,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // see README.md for an explanation of how this test suite works
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html
>index e27434917e26b4cc9c2107f35378f3e477d8e33d..abbdecdfae9159fd0d315d6dea955e81aec988ce 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html
>@@ -29,9 +29,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -39,10 +39,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // http://www.w3.org/TR/css3-transitions/#starting
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html
>index f981bcd5659553f96ffc7a5b22c5e89d03c3ba4a..9556cf7e23af7f755d5c1e9d09571fb8a9ee91aa 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html
>@@ -29,9 +29,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -39,10 +39,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // http://www.w3.org/TR/css3-transitions/#starting
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-003.html
>index 22e563b9eefa21312b0f57fa053712d42ce3ba83..13a16132134c14b273a443779a9b95468ec1af9f 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-003.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-003.html
>@@ -28,9 +28,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -38,10 +38,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
>             // http://www.w3.org/TR/css3-transitions/#starting
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/pseudo-elements-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/pseudo-elements-001.html
>index 8649df08674e3d7a1cce3571a985f93a8ca3c5ef..146c533e235f0061872586039172a51c2d779873 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/pseudo-elements-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/pseudo-elements-001.html
>@@ -30,9 +30,9 @@
>         </style>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="fixture" class="fixture">
>             <div class="container">
>                 <div class="transition">Text sample</div>
>@@ -40,10 +40,10 @@
>         </div>
>         <div id="offscreen"></div>
> 
>-        
>+        -->
> 
>         <script>
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001.html
>index 4459399a009b91007d19fc5aeef51947609e5d62..e0bf09ae37589b9a8ed2688dd4479e2b109ad076 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001.html
>@@ -15,9 +15,9 @@
>         <script src="./support/helper.js" type="text/javascript"></script>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="container">
>             <div id="transition"></div>
>         </div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-delay-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-delay-001.html
>index 9764c4ab27bebd9fd7476f269ac36d846668bae0..921525ea72d2e1e28d2321c1594085deaf2330f0 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-delay-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-delay-001.html
>@@ -16,9 +16,9 @@
>         <script src="./support/helper.js" type="text/javascript"></script>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="container">
>             <div id="transition"></div>
>         </div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-duration-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-duration-001.html
>index 88a581e17af6bd5409dcf3db3795daeb9a371047..b5c095f001efb373934850db67527ace118e10cd 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-duration-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-duration-001.html
>@@ -16,9 +16,9 @@
>         <script src="./support/helper.js" type="text/javascript"></script>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="container">
>             <div id="transition"></div>
>         </div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-001.html
>index 228bf34f0a12d8d072a56cdd45233787c48fa874..47a1417070f0c2e7b8171259d9c4f63c44e96bcc 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-001.html
>@@ -15,9 +15,9 @@
>         <script src="./support/helper.js" type="text/javascript"></script>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="container">
>             <div id="transition"></div>
>         </div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-002.html
>index 86fcf831fa5c72b9124750708aef292b29fc622b..99196b6d1d4ec86be77930d578602110b6a7deb6 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-002.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-property-002.html
>@@ -15,9 +15,9 @@
>         <script src="./support/helper.js" type="text/javascript"></script>
>     </head>
>     <body>
>-        
>+        
>         <div id="log"></div>
>-        
>+        
>         <div id="container">
>             <div id="transition"></div>
>         </div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transitionevent-interface.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transitionevent-interface.html
>index cd47469ec742106ace7d904dc588d746ac514ba5..a40ba4537518361c13aab1d9b0648387f7c88aaa 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transitionevent-interface.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transitionevent-interface.html
>@@ -19,7 +19,7 @@ test(function() {
> }, "the event inherts from Event");
> 
> test(function() {
>-  assert_throws(new TypeError(), function() {
>+  assert_throws_js(TypeError, function() {
>     new TransitionEvent();
>   }, 'First argument is required, so was expecting a TypeError.');
> }, 'Missing type argument');
>@@ -185,37 +185,37 @@ test(function() {
> }, "elapsedTime set to an object with a valueOf function");
> 
> test(function() {
>-  assert_throws(new TypeError(), function() {
>+  assert_throws_js(TypeError, function() {
>     new TransitionEvent("test", {elapsedTime: NaN});
>   }, 'elapsedTime cannot be NaN so was expecting a TypeError');
> }, "elapsedTime cannot be set to NaN");
> 
> test(function() {
>-  assert_throws(new TypeError(), function() {
>+  assert_throws_js(TypeError, function() {
>     new TransitionEvent("test", {elapsedTime: Infinity});
>   }, 'elapsedTime cannot be Infinity so was expecting a TypeError');
> }, "elapsedTime cannot be set to Infinity");
> 
> test(function() {
>-  assert_throws(new TypeError(), function() {
>+  assert_throws_js(TypeError, function() {
>     new TransitionEvent("test", {elapsedTime: -Infinity});
>   }, 'elapsedTime cannot be -Infinity so was expecting a TypeError');
> }, "elapsedTime cannot be set to -Infinity");
> 
> test(function() {
>-  assert_throws(new TypeError(), function() {
>+  assert_throws_js(TypeError, function() {
>     new TransitionEvent("test", {elapsedTime: "sample"});
>   }, 'elapsedTime cannot be a string so was expecting a TypeError');
> }, "elapsedTime cannot be set to 'sample'");
> 
> test(function() {
>-  assert_throws(new TypeError(), function() {
>+  assert_throws_js(TypeError, function() {
>     new TransitionEvent("test", {elapsedTime: [0.5, 1.0]});
>   }, 'elapsedTime cannot be a multi-element array so was expecting a TypeError');
> }, "elapsedTime cannot be set to [0.5, 1.0]");
> 
> test(function() {
>-  assert_throws(new TypeError(), function() {
>+  assert_throws_js(TypeError, function() {
>     new TransitionEvent("test", {elapsedTime: { sample: 0.5}});
>   }, 'elapsedTime cannot be an object so was expecting a TypeError');
> }, "elapsedTime cannot be set to an object");
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/w3c-import.log
>index 0d9b7560c27591fa615fc1959bd6d7b2a032a3c5..128fd8551bbf04c63b687e3608358005e39fb474 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/w3c-import.log
>@@ -15,7 +15,6 @@ None
> ------------------------------------------------------------------------
> List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html
>-/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-canceling.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-currentTime.tentative.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/CSSTransition-effect.tentative.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/support/interpolation-testcommon.js b/LayoutTests/imported/w3c/web-platform-tests/css/support/interpolation-testcommon.js
>index 9e63b02cb703d44e909c0c525f3bd56708477dda..16a1c0e7f7fb83f52b3b5d55fda4d49462fa9fe6 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/support/interpolation-testcommon.js
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/support/interpolation-testcommon.js
>@@ -1,6 +1,7 @@
> 'use strict';
> (function() {
>   var interpolationTests = [];
>+  var compositionTests = [];
>   var cssAnimationsData = {
>     sharedStyle: null,
>     nextID: 0,
>@@ -18,6 +19,7 @@
> 
>   var cssAnimationsInterpolation = {
>     name: 'CSS Animations',
>+    isSupported: function() {return true;},
>     supportsProperty: function() {return true;},
>     supportsValue: function() {return true;},
>     setup: function() {},
>@@ -43,6 +45,7 @@
> 
>   var cssTransitionsInterpolation = {
>     name: 'CSS Transitions',
>+    isSupported: function() {return true;},
>     supportsProperty: function() {return true;},
>     supportsValue: function() {return true;},
>     setup: function(property, from, target) {
>@@ -64,6 +67,7 @@
> 
>   var cssTransitionAllInterpolation = {
>     name: 'CSS Transitions with transition: all',
>+    isSupported: function() {return true;},
>     // The 'all' value doesn't cover custom properties.
>     supportsProperty: function(property) {return property.indexOf('--') !== 0;},
>     supportsValue: function() {return true;},
>@@ -86,6 +90,7 @@
> 
>   var webAnimationsInterpolation = {
>     name: 'Web Animations',
>+    isSupported: function() {return 'animate' in Element.prototype;},
>     supportsProperty: function(property) {return true;},
>     supportsValue: function(value) {return value !== '';},
>     setup: function() {},
>@@ -96,6 +101,10 @@
>       this.interpolateComposite(property, from, 'replace', to, 'replace', at, target);
>     },
>     interpolateComposite: function(property, from, fromComposite, to, toComposite, at, target) {
>+      // This case turns into a test error later on.
>+      if (!this.isSupported())
>+        return;
>+
>       // Convert standard properties to camelCase.
>       if (!property.startsWith('--')) {
>         for (var i = property.length - 2; i > 0; --i) {
>@@ -260,8 +269,9 @@
>     return expectations.map(function(expectation) {
>       var actualTargetContainer = createTargetContainer(testContainer, 'actual');
>       var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
>-      if (!isNeutralKeyframe(expectation.expect)) {
>-        expectedTargetContainer.target.style.setProperty(property, expectation.expect);
>+      var expectedStr = expectation.option || expectation.expect;
>+      if (!isNeutralKeyframe(expectedStr)) {
>+        expectedTargetContainer.target.style.setProperty(property, expectedStr);
>       }
>       var target = actualTargetContainer.target;
>       interpolationMethod.setup(property, from, target);
>@@ -271,6 +281,8 @@
>       target.measure = function() {
>         var expectedValue = getComputedStyle(expectedTargetContainer.target).getPropertyValue(property);
>         test(function() {
>+          assert_true(interpolationMethod.isSupported(), `${interpolationMethod.name} should be supported`);
>+
>           if (from && from !== neutralKeyframe) {
>             assert_true(CSS.supports(property, from), '\'from\' value should be supported');
>           }
>@@ -284,13 +296,81 @@
>           comparisonFunction(
>               getComputedStyle(target).getPropertyValue(property),
>               expectedValue);
>-        }, `${testText} at (${expectation.at}) should be [${sanitizeUrls(expectation.expect)}]`);
>+        }, `${testText} at (${expectation.at}) should be [${sanitizeUrls(expectedStr)}]`);
>       };
>       return target;
>     });
>   }
> 
>-  function createTestTargets(interpolationMethods, interpolationTests, container) {
>+  function createCompositionTestTargets(compositionContainer, compositionTest) {
>+    var options = compositionTest.options;
>+    var property = options.property;
>+    var underlying = options.underlying;
>+    var comparisonFunction = options.comparisonFunction;
>+    var from = options.accumulateFrom || options.addFrom || options.replaceFrom;
>+    var to = options.accumulateTo || options.addTo || options.replaceTo;
>+    var fromComposite = 'accumulateFrom' in options ? 'accumulate' : 'addFrom' in options ? 'add' : 'replace';
>+    var toComposite = 'accumulateTo' in options ? 'accumulate' : 'addTo' in options ? 'add' : 'replace';
>+    const invalidFrom = 'addFrom' in options === 'replaceFrom' in options
>+        && 'addFrom' in options === 'accumulateFrom' in options;
>+    const invalidTo = 'addTo' in options === 'replaceTo' in options
>+        && 'addTo' in options === 'accumulateTo' in options;
>+    if (invalidFrom || invalidTo) {
>+      test(function() {
>+        assert_false(invalidFrom, 'Exactly one of accumulateFrom, addFrom, or replaceFrom must be specified');
>+        assert_false(invalidTo, 'Exactly one of accumulateTo, addTo, or replaceTo must be specified');
>+      }, `Composition tests must have valid setup`);
>+    }
>+
>+    var testText = `Compositing: property <${property}> underlying [${underlying}] from ${fromComposite} [${from}] to ${toComposite} [${to}]`;
>+    var testContainer = createElement(compositionContainer, 'div');
>+    createElement(testContainer);
>+
>+    // Setup a standard equality function if an override is not provided.
>+    if (!comparisonFunction) {
>+      comparisonFunction = (actual, expected) => {
>+        assert_equals(normalizeValue(actual), normalizeValue(expected));
>+      };
>+    }
>+
>+    return compositionTest.expectations.map(function(expectation) {
>+      var actualTargetContainer = createTargetContainer(testContainer, 'actual');
>+      var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
>+      var expectedStr = expectation.option || expectation.expect;
>+      if (!isNeutralKeyframe(expectedStr)) {
>+        expectedTargetContainer.target.style.setProperty(property, expectedStr);
>+      }
>+      var target = actualTargetContainer.target;
>+      target.style.setProperty(property, underlying);
>+      target.interpolate = function() {
>+        webAnimationsInterpolation.interpolateComposite(property, from, fromComposite, to, toComposite, expectation.at, target);
>+      };
>+      target.measure = function() {
>+        var expectedValue = getComputedStyle(expectedTargetContainer.target).getPropertyValue(property);
>+        test(function() {
>+
>+          if (from && from !== neutralKeyframe) {
>+            assert_true(CSS.supports(property, from), '\'from\' value should be supported');
>+          }
>+          if (to && to !== neutralKeyframe) {
>+            assert_true(CSS.supports(property, to), '\'to\' value should be supported');
>+          }
>+          if (typeof underlying !== 'undefined') {
>+            assert_true(CSS.supports(property, underlying), '\'underlying\' value should be supported');
>+          }
>+
>+          comparisonFunction(
>+              getComputedStyle(target).getPropertyValue(property),
>+              expectedValue);
>+        }, `${testText} at (${expectation.at}) should be [${sanitizeUrls(expectedStr)}]`);
>+      };
>+      return target;
>+    });
>+  }
>+
>+
>+
>+  function createTestTargets(interpolationMethods, interpolationTests, compositionTests, container) {
>     var targets = [];
>     for (var interpolationMethod of interpolationMethods) {
>       var interpolationMethodContainer = createElement(container);
>@@ -298,15 +378,17 @@
>         [].push.apply(targets, createInterpolationTestTargets(interpolationMethod, interpolationMethodContainer, interpolationTest));
>       }
>     }
>+    var compositionContainer = createElement(container);
>+    for (var compositionTest of compositionTests) {
>+      [].push.apply(targets, createCompositionTestTargets(compositionContainer, compositionTest));
>+    }
>     return targets;
>   }
> 
>   function test_no_interpolation(options) {
>     test_interpolation(options, expectNoInterpolation);
>   }
>-
>-  function test_interpolation(options, expectations) {
>-    interpolationTests.push({options, expectations});
>+  function create_tests() {
>     var interpolationMethods = [
>       cssTransitionsInterpolation,
>       cssTransitionAllInterpolation,
>@@ -314,7 +396,7 @@
>       webAnimationsInterpolation,
>     ];
>     var container = createElement(document.body);
>-    var targets = createTestTargets(interpolationMethods, interpolationTests, container);
>+    var targets = createTestTargets(interpolationMethods, interpolationTests, compositionTests, container);
>     // Separate interpolation and measurement into different phases to avoid O(n^2) of the number of targets.
>     for (var target of targets) {
>       target.interpolate();
>@@ -323,10 +405,20 @@
>       target.measure();
>     }
>     container.remove();
>-    interpolationTests = [];
>   }
> 
>+  function test_interpolation(options, expectations) {
>+    interpolationTests.push({options, expectations});
>+    create_tests();
>+    interpolationTests = [];
>+  }
>+  function test_composition(options, expectations) {
>+    compositionTests.push({options, expectations});
>+    create_tests();
>+    compositionTests = [];
>+  }
>   window.test_interpolation = test_interpolation;
>   window.test_no_interpolation = test_no_interpolation;
>+  window.test_composition = test_composition;
>   window.neutralKeyframe = neutralKeyframe;
> })();
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/README.md b/LayoutTests/imported/w3c/web-platform-tests/web-animations/README.md
>index 75493ce57b4c242195d9fb56e73154865d6f59bf..c41e0e048efe704917b05894ab72c3f60f5a9a97 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/README.md
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/README.md
>@@ -59,7 +59,7 @@ Guidelines for writing tests
> 
>       ```javascript
>       test(t => {
>-        assert_throws({ name: 'TypeError' }, () => {
>+        assert_throws_js(TypeError, () => {
>           createDiv(t).animate(null, -1);
>         });
>       }, 'Setting a negative duration throws a TypeError');
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/property-list.js b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/property-list.js
>index 11bbf1ac661ad2aa9db86a070b4c32878c752fc9..2f91ebc372cadb044282707f6a1a3e3f1fec47f5 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/property-list.js
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/property-list.js
>@@ -410,15 +410,6 @@ const gCSSProperties = {
>       { type: 'discrete', options: [ [ 'auto', '1px' ] ] }
>     ]
>   },
>-  'content': {
>-    // https://drafts.csswg.org/css-content-3/#propdef-content
>-    types: [
>-      { type: 'discrete', options: [ [ '"a"', '"b"' ] ] }
>-    ],
>-    setup: t => {
>-      return getPseudoElement(t, 'before');
>-    }
>-  },
>   'counter-increment': {
>     // https://drafts.csswg.org/css-lists-3/#propdef-counter-increment
>     types: [
>@@ -1432,13 +1423,11 @@ const gCSSProperties = {
> };
> 
> function testAnimationSamples(animation, idlName, testSamples) {
>-  const type = animation.effect.target.type;
>-  const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
>-                 ? animation.effect.target.element
>-                 : animation.effect.target;
>+  const pseudoType = animation.effect.pseudoElement;
>+  const target = animation.effect.target;
>   for (const testSample of testSamples) {
>     animation.currentTime = testSample.time;
>-    assert_equals(getComputedStyle(target, type)[idlName],
>+    assert_equals(getComputedStyle(target, pseudoType)[idlName],
>                   testSample.expected,
>                   `The value should be ${testSample.expected}` +
>                   ` at ${testSample.time}ms`);
>@@ -1453,10 +1442,8 @@ function toOrderedArray(string) {
> // don't specify an order for serializing computed values.
> // This test is for such the property.
> function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
>-  const type = animation.effect.target.type;
>-  const target = animation.effect.target.constructor.name === 'CSSPseudoElement'
>-                 ? animation.effect.target.element
>-                 : animation.effect.target;
>+  const type = animation.effect.pseudoElement;
>+  const target = animation.effect.target;
>   for (const testSample of testSamples) {
>     animation.currentTime = testSample.time;
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..6e9ed0002dd5625e41f79f019c31e7de7fce4ee1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform-expected.txt
>@@ -0,0 +1,3 @@
>+
>+PASS  apply interpolated transform on multiple keyframes 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c101b5f0cfcf133e87da1323a5cffa71b2d5f4f8
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html
>@@ -0,0 +1,87 @@
>+<!DOCTYPE html>
>+<meta charset=utf-8>
>+<title> apply interpolated transform on multiple keyframes</title>
>+<link rel="help" href="https://drafts.csswg.org/web-animations/#keyframes-section">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="../../testcommon.js"></script>
>+<body>
>+<div id="log"></div>
>+<div id="target"></div>
>+<script>
>+'use strict';
>+// This test tests the correctness if animation behavior under
>+// box-size-denpendent and non-box-size-dependent transformation.
>+test(t => {
>+  var div_1 = createDiv(t);
>+  div_1.style.width = "100px";
>+  // Non-pairwise compatible transforms that are effectively no-ops with a
>+  // matrix fallback. Both rotate(360deg) and scale(1) are identity matrix,
>+  // making it easy to compute.
>+  const keyframe1 = [
>+      {"transform":"translateX( 200px ) rotate( 360deg )"},
>+      {"transform":"translateX( 100% ) scale( 1 )"},
>+    ];
>+  const keyframe2 = [
>+      {"transform":"translateX( 200px ) rotate( 360deg )"},
>+      {"transform":"translateX( 100% ) scale( 1 )"},
>+      {"transform":"none"},
>+      {}
>+    ];
>+
>+  const animation1 = div_1.animate(keyframe1, {
>+                            "duration":3000,
>+                            "easing":"linear",
>+    });
>+  const animation2 = div_1.animate(keyframe2, {
>+                            "duration":3000,
>+                            "easing":"linear",
>+    });
>+ // new animation on the second div, using px value instead of % as a reference
>+
>+  var div_2 = createDiv(t);
>+  div_2.style.width = "100px";
>+  const keyframe3 = [
>+      {"transform":"translateX( 200px ) rotate( 360deg )"},
>+      {"transform":"translateX( 100px ) scale( 1 )"},
>+    ];
>+  const keyframe4 = [
>+      {"transform":"translateX( 200px ) rotate( 360deg )"},
>+      {"transform":"translateX( 100px ) scale( 1 )"},
>+      {"transform":"none"},
>+      {}
>+    ];
>+
>+  const animation3 = div_2.animate(keyframe1, {
>+                            "duration":3000,
>+                            "easing":"linear",
>+    });
>+  const animation4 = div_2.animate(keyframe2, {
>+                            "duration":3000,
>+                            "easing":"linear",
>+                            "composite": 'replace',
>+    });
>+  animation1.pause();
>+  animation2.pause();
>+  animation3.pause();
>+  animation4.pause();
>+  var i;
>+  for (i = 0; i <= 30; i++) {
>+    animation2.currentTime = 100 * i;
>+    animation4.currentTime = 100 * i;
>+    var box_size_dependent_transform = getComputedStyle(div_1)['transform'];
>+    var reference_transform = getComputedStyle(div_2)['transform']
>+    var progress = i / 30;
>+    // The second animation replaces the first animation. As the rotate and
>+    // scale perations are effectively no-ops when the matrix fallback is
>+    // applied. The expected behavior is to go from x-postion 200px to 0 in the
>+    // first 2000ms and go back to x-position 200px in the last 1000ms.
>+    var expected_transform = 'matrix(1, 0, 0, 1, $1, 0)'
>+                            .replace('$1', Math.max(200 - 300 * progress, 0)
>+                            + Math.max(0, -400 + 600 * progress));
>+    assert_matrix_equals(box_size_dependent_transform, reference_transform);
>+    assert_matrix_equals(reference_transform, expected_transform);
>+  }
>+})
>+</script>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/w3c-import.log
>index e11f0c73fe3ea39af60c6994dabe2137dcce35f5..1926858ac02b74fd44ec0f4879ac3fb05d8fcbce 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/w3c-import.log
>@@ -14,5 +14,6 @@ Property values requiring vendor prefixes:
> None
> ------------------------------------------------------------------------
> List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-interpolated-transform.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/applying-the-composited-result.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/combining-effects/effect-composition.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate-expected.txt
>index b844db557a7769af0592bb2d623910bddc8dac07..7514426ca0f1eb14c254369262ac8d95cd941458 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate-expected.txt
>@@ -133,8 +133,12 @@ PASS Element.animate() correctly sets the Animation's timeline
> PASS Element.animate() correctly sets the Animation's timeline when triggered on an element in a different document 
> PASS Element.animate() calls play on the Animation 
> PASS Element.animate() does NOT trigger a style change event 
>-PASS CSSPseudoElement.animate() creates an Animation object 
>-FAIL CSSPseudoElement.animate() creates an Animation object for ::marker assert_true: expected true got false
>-PASS CSSPseudoElement.animate() creates an Animation object targeting to the correct CSSPseudoElement object 
>-FAIL CSSPseudoElement.animate() creates an Animation object targeting to the correct CSSPseudoElement object for ::marker assert_true: expected true got false
>+PASS animate() with pseudoElement parameter creates an Animation object 
>+PASS animate() with pseudoElement parameter without content creates an Animation object 
>+PASS animate() with pseudoElement parameter  creates an Animation object for ::marker 
>+PASS animate() with pseudoElement parameter  creates an Animation object for ::first-line 
>+FAIL animate() with pseudoElement an Animation object targeting the correct pseudo-element assert_equals: The returned Animation targets the correct selector expected (string) "::before" but got (undefined) undefined
>+FAIL animate() with pseudoElement without content creates an Animation object targeting the correct pseudo-element assert_equals: The returned Animation targets the correct selector expected (string) "::before" but got (undefined) undefined
>+FAIL animate() with pseudoElement an Animation object targeting the correct pseudo-element for ::marker assert_equals: The returned Animation targets the correct selector expected (string) "::marker" but got (undefined) undefined
>+FAIL animate() with pseudoElement an Animation object targeting the correct pseudo-element for ::first-line assert_equals: The returned Animation targets the correct selector expected (string) "::first-line" but got (undefined) undefined
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate.html
>index fcf753baef30bbde608d2debfb43b3212b02fa21..4d17d2dd00ece70673cdd9ca52a77d540c3eac43 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animatable/animate.html
>@@ -10,6 +10,11 @@
> <script src="../../resources/keyframe-tests.js"></script>
> <script src="../../resources/timing-utils.js"></script>
> <script src="../../resources/timing-tests.js"></script>
>+<style>
>+.pseudo::before {content: '';}
>+.pseudo::after {content: '';}
>+.pseudo::marker {content: '';}
>+</style>
> <body>
> <div id="log"></div>
> <iframe width="10" height="10" id="iframe"></iframe>
>@@ -76,7 +81,7 @@ for (const subtest of gKeyframesTests) {
> for (const subtest of gInvalidKeyframesTests) {
>   test(t => {
>     const div = createDiv(t);
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       div.animate(subtest.input, 2000);
>     });
>   }, `Element.animate() does not accept ${subtest.desc}`);
>@@ -103,7 +108,7 @@ test(t => {
> 
> for (const invalid of gBadDelayValues) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       createDiv(t).animate(null, { delay: invalid });
>     });
>   }, `Element.animate() does not accept invalid delay value: ${invalid}`);
>@@ -122,7 +127,7 @@ for (const invalid of gBadDurationValues) {
>     continue;
>   }
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       createDiv(t).animate(null, invalid);
>     });
>   }, 'Element.animate() does not accept invalid duration value: '
>@@ -131,7 +136,7 @@ for (const invalid of gBadDurationValues) {
> 
> for (const invalid of gBadDurationValues) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       createDiv(t).animate(null, { duration: invalid });
>     });
>   }, 'Element.animate() does not accept invalid duration value: '
>@@ -141,7 +146,7 @@ for (const invalid of gBadDurationValues) {
> 
> for (const invalidEasing of gInvalidEasings) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       createDiv(t).animate({ easing: invalidEasing }, 2000);
>     });
>   }, `Element.animate() does not accept invalid easing: '${invalidEasing}'`);
>@@ -149,7 +154,7 @@ for (const invalidEasing of gInvalidEasings) {
> 
> for (const invalid of gBadIterationStartValues) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       createDiv(t).animate(null, { iterationStart: invalid });
>     });
>   }, 'Element.animate() does not accept invalid iterationStart value: ' +
>@@ -158,7 +163,7 @@ for (const invalid of gBadIterationStartValues) {
> 
> for (const invalid of gBadIterationsValues) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       createDiv(t).animate(null, { iterations: invalid });
>     });
>   }, 'Element.animate() does not accept invalid iterations value: ' +
>@@ -235,34 +240,83 @@ promise_test(async t => {
>   assert_false(gotTransition, 'A transition should NOT have been triggered');
> }, 'Element.animate() does NOT trigger a style change event');
> 
>-// Tests on CSSPseudoElement
>+// Tests on pseudo-elements
>+// Some tests occur twice (on pseudo-elements with and without content)
>+// in order to test both code paths for tree-abiding pseudo-elements in blink.
> 
> test(t => {
>-  const pseudoTarget = getPseudoElement(t, 'before');
>-  const anim = pseudoTarget.animate(null);
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  getComputedStyle(div,"::before").content; // Sync style
>+  const anim = div.animate(null, {pseudoElement: '::before'});
>+  assert_class_string(anim, 'Animation', 'The returned object is an Animation');
>+}, 'animate() with pseudoElement parameter creates an Animation object');
>+
>+test(t => {
>+  const div = createDiv(t);
>+  const anim = div.animate(null, {pseudoElement: '::before'});
>   assert_class_string(anim, 'Animation', 'The returned object is an Animation');
>-}, 'CSSPseudoElement.animate() creates an Animation object');
>+}, 'animate() with pseudoElement parameter without content creates an Animation object');
> 
> test(t => {
>-  const pseudoTarget = getPseudoElement(t, 'marker');
>-  const anim = pseudoTarget.animate(null);
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  div.style.display = 'list-item';
>+  getComputedStyle(div,"::marker").content; // Sync style
>+  const anim = div.animate(null, {pseudoElement: '::marker'});
>   assert_class_string(anim, 'Animation', 'The returned object is an Animation for ::marker');
>-}, 'CSSPseudoElement.animate() creates an Animation object for ::marker');
>+}, 'animate() with pseudoElement parameter  creates an Animation object for ::marker');
>+
>+test(t => {
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  div.textContent = 'foo';
>+  const anim = div.animate(null, {pseudoElement: '::first-line'});
>+  assert_class_string(anim, 'Animation', 'The returned object is an Animation for ::first-line');
>+}, 'animate() with pseudoElement parameter  creates an Animation object for ::first-line');
> 
> test(t => {
>-  const pseudoTarget = getPseudoElement(t, 'before');
>-  const anim = pseudoTarget.animate(null);
>-  assert_equals(anim.effect.target, pseudoTarget,
>-                'The returned Animation targets to the correct object');
>-}, 'CSSPseudoElement.animate() creates an Animation object targeting ' +
>-   'to the correct CSSPseudoElement object');
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  getComputedStyle(div,"::before").content; // Sync style
>+  const anim = div.animate(null, {pseudoElement: '::before'});
>+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
>+  assert_equals(anim.effect.pseudoElement, '::before',
>+                'The returned Animation targets the correct selector');
>+}, 'animate() with pseudoElement an Animation object targeting ' +
>+   'the correct pseudo-element');
> 
> test(t => {
>-  const pseudoTarget = getPseudoElement(t, 'marker');
>-  const anim = pseudoTarget.animate(null);
>-  assert_equals(anim.effect.target, pseudoTarget,
>-                'The returned Animation targets to the correct object for ::marker');
>-}, 'CSSPseudoElement.animate() creates an Animation object targeting ' +
>-   'to the correct CSSPseudoElement object for ::marker');
>+  const div = createDiv(t);
>+  const anim = div.animate(null, {pseudoElement: '::before'});
>+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
>+  assert_equals(anim.effect.pseudoElement, '::before',
>+                'The returned Animation targets the correct selector');
>+}, 'animate() with pseudoElement without content creates an Animation object targeting ' +
>+   'the correct pseudo-element');
>+
>+test(t => {
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  div.style.display = 'list-item';
>+  getComputedStyle(div,"::marker").content; // Sync style
>+  const anim = div.animate(null, {pseudoElement: '::marker'});
>+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
>+  assert_equals(anim.effect.pseudoElement, '::marker',
>+                'The returned Animation targets the correct selector');
>+}, 'animate() with pseudoElement an Animation object targeting ' +
>+   'the correct pseudo-element for ::marker');
>+
>+test(t => {
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  div.textContent = 'foo';
>+  const anim = div.animate(null, {pseudoElement: '::first-line'});
>+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
>+  assert_equals(anim.effect.pseudoElement, '::first-line',
>+                'The returned Animation targets the correct selector');
>+}, 'animate() with pseudoElement an Animation object targeting ' +
>+   'the correct pseudo-element for ::first-line');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles-expected.txt
>index d37e34f66a0f31fbd6670308519772f39dd67996..3650227cf0f12df25d79ec0c3a0b71d5216e0875 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles-expected.txt
>@@ -4,17 +4,23 @@ PASS Commits styles for an animation that has been removed
> PASS Commits shorthand styles 
> FAIL Commits logical properties assert_equals: expected "20px" but got "10px"
> PASS Commits values calculated mid-interval 
>-PASS Commits variables as their computed values 
>+PASS Commits variable references as their computed values 
>+FAIL Commits custom variables assert_approx_equals: expected 0.8 +/- 0.0001 but got 0.5
> FAIL Commits em units as pixel values assert_approx_equals: expected 100 +/- 0.0001 but got 0
> FAIL Commits the intermediate value of an animation in the middle of stack assert_approx_equals: expected 0.4 +/- 0.0001 but got 0.20000000298023224
>+FAIL Commit composites on top of the underlying value assert_approx_equals: expected 0.5 +/- 0.0001 but got 0.20000000298023224
> PASS Triggers mutation observers when updating style 
> FAIL Does NOT trigger mutation observers when the change to style is redundant assert_equals: Should have no mutation records expected 0 but got 1
>-PASS Throws if the target element is a pseudo element 
>+FAIL Throws if the target element is a pseudo element assert_throws_dom: function "() => {
>+    animation.commitStyles();
>+  }" did not throw
> PASS Throws if the target element is not something with a style attribute 
> PASS Throws if the target effect is display:none 
> PASS Throws if the target effect's ancestor is display:none 
> PASS Treats display:contents as rendered 
> PASS Treats display:contents in a display:none subtree as not rendered 
> PASS Throws if the target effect is disconnected 
>-FAIL Checks the pseudo element condition before the not rendered condition undefined is not an object (evaluating 'pseudo.element.remove')
>+FAIL Checks the pseudo element condition before the not rendered condition assert_throws_dom: function "() => {
>+    animation.commitStyles();
>+  }" threw object "InvalidStateError: The object is in an invalid state." that is not a DOMException NoModificationAllowedError: property "code" is equal to 11, expected 7
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles.html
>index 9005db9e9f2a8bcf3c9bf90bcea0ca882398442f..ca7d6410d0aa9cd02431cb6f8aab427f941e5cc7 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/commitStyles.html
>@@ -5,6 +5,11 @@
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
> <script src="../../testcommon.js"></script>
>+<style>
>+.pseudo::before {content: '';}
>+.pseudo::after {content: '';}
>+.pseudo::marker {content: '';}
>+</style>
> <body>
> <div id="log"></div>
> <script>
>@@ -123,7 +128,23 @@ test(t => {
>   div.style.setProperty('--target', '1');
> 
>   assert_numeric_style_equals(getComputedStyle(div).opacity, 0.5);
>-}, 'Commits variables as their computed values');
>+}, 'Commits variable references as their computed values');
>+
>+
>+test(t => {
>+  const div = createDiv(t);
>+  div.style.setProperty('--target', '0.5');
>+  div.style.opacity = 'var(--target)';
>+  const animation = div.animate(
>+    { '--target': 0.8 },
>+    { duration: 1, fill: 'forwards' }
>+  );
>+  animation.finish();
>+  animation.commitStyles();
>+  animation.cancel();
>+
>+  assert_numeric_style_equals(getComputedStyle(div).opacity, 0.8);
>+}, 'Commits custom variables');
> 
> test(t => {
>   const div = createDiv(t);
>@@ -202,6 +223,54 @@ promise_test(async t => {
>   assert_numeric_style_equals(getComputedStyle(div).opacity, 0.4);
> }, 'Commits the intermediate value of an animation in the middle of stack');
> 
>+promise_test(async t => {
>+  const div = createDiv(t);
>+  div.style.opacity = '0.1';
>+
>+  const animA = div.animate(
>+    { opacity: '0.2', composite: 'add' },
>+    { duration: 1, fill: 'forwards' }
>+  );
>+  const animB = div.animate(
>+    { opacity: '0.2', composite: 'add' },
>+    { duration: 1, fill: 'forwards' }
>+  );
>+  const animC = div.animate(
>+    { opacity: '0.3', composite: 'add' },
>+    { duration: 1, fill: 'forwards' }
>+  );
>+
>+  animA.persist();
>+  animB.persist();
>+  await animB.finished;
>+
>+  // The error cases are similar to the above test with one additional case;
>+  // verifying that the animations composite on top of the correct underlying
>+  // base style.
>+  //
>+  //  Expected result:
>+  //
>+  //  <underlying> + animA + animB = 0.5
>+  //
>+  //  Additional error results:
>+  //
>+  //    <underlying> + animA + animB + animC + animA + animB = 1.0 (saturates)
>+  //    (Added to the computed value instead of underlying value when
>+  //    resolving)
>+  //
>+  //    animA + animB = 0.4
>+  //    Failed to composite on top of underlying value.
>+  //
>+
>+  animB.commitStyles();
>+
>+  animA.cancel();
>+  animB.cancel();
>+  animC.cancel();
>+
>+  assert_numeric_style_equals(getComputedStyle(div).opacity, 0.5);
>+}, 'Commit composites on top of the underlying value');
>+
> promise_test(async t => {
>   const div = createDiv(t);
>   div.style.opacity = '0.1';
>@@ -263,13 +332,15 @@ promise_test(async t => {
> }, 'Does NOT trigger mutation observers when the change to style is redundant');
> 
> test(t => {
>-  const pseudo = getPseudoElement(t, 'before');
>-  const animation = pseudo.animate(
>+
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  const animation = div.animate(
>     { opacity: 0 },
>-    { duration: 1, fill: 'forwards' }
>+    { duration: 1, fill: 'forwards', pseudoElement: '::before' }
>   );
> 
>-  assert_throws('NoModificationAllowedError', () => {
>+  assert_throws_dom('NoModificationAllowedError', () => {
>     animation.commitStyles();
>   });
> }, 'Throws if the target element is a pseudo element');
>@@ -285,7 +356,7 @@ test(t => {
>   document.body.appendChild(nonStyleElement);
>   animation.effect.target = nonStyleElement;
> 
>-  assert_throws('NoModificationAllowedError', () => {
>+  assert_throws_dom('NoModificationAllowedError', () => {
>     animation.commitStyles();
>   });
> 
>@@ -301,7 +372,7 @@ test(t => {
> 
>   div.style.display = 'none';
> 
>-  assert_throws('InvalidStateError', () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.commitStyles();
>   });
> }, 'Throws if the target effect is display:none');
>@@ -318,7 +389,7 @@ test(t => {
> 
>   container.style.display = 'none';
> 
>-  assert_throws('InvalidStateError', () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.commitStyles();
>   });
> }, "Throws if the target effect's ancestor is display:none");
>@@ -352,7 +423,7 @@ test(t => {
>   div.style.display = 'contents';
>   container.style.display = 'none';
> 
>-  assert_throws('InvalidStateError', () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.commitStyles();
>   });
> }, 'Treats display:contents in a display:none subtree as not rendered');
>@@ -366,21 +437,22 @@ test(t => {
> 
>   div.remove();
> 
>-  assert_throws('InvalidStateError', () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.commitStyles();
>   });
> }, 'Throws if the target effect is disconnected');
> 
> test(t => {
>-  const pseudo = getPseudoElement(t, 'before');
>-  const animation = pseudo.animate(
>+  const div = createDiv(t);
>+  div.classList.add('pseudo');
>+  const animation = div.animate(
>     { opacity: 0 },
>-    { duration: 1, fill: 'forwards' }
>+    { duration: 1, fill: 'forwards', pseudoElement: '::before' }
>   );
> 
>-  pseudo.element.remove();
>+  div.remove();
> 
>-  assert_throws('NoModificationAllowedError', () => {
>+  assert_throws_dom('NoModificationAllowedError', () => {
>     animation.commitStyles();
>   });
> }, 'Checks the pseudo element condition before the not rendered condition');
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onremove-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onremove-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..439c73705638c6b9b00e04b05e9da3218d4508d2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onremove-expected.txt
>@@ -0,0 +1,4 @@
>+
>+PASS onremove event is fired when replaced animation is removed. 
>+PASS onremove events are fired in the correct order 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onremove.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onremove.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d7709949f2a0055bb8b563237de8c3ba0a9c78c5
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onremove.html
>@@ -0,0 +1,58 @@
>+<!DOCTYPE html>
>+<meta charset=utf-8>
>+<title>Animation.onremove</title>
>+<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-onremove">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="../../testcommon.js"></script>
>+<body>
>+<div id="log"></div>
>+<script>
>+'use strict';
>+
>+async_test(t => {
>+  const div = createDiv(t);
>+  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
>+  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
>+
>+  let finishedTimelineTime = null;
>+  animB.onfinish = event => {
>+    finishedTimelineTime = event.timelineTime;
>+  };
>+
>+  animA.onremove = t.step_func_done(event => {
>+    assert_equals(animA.replaceState, 'removed');
>+    assert_equals(event.currentTime, 1);
>+    assert_true(finishedTimelineTime != null, 'finished event fired');
>+    assert_true(event.timelineTime == finishedTimelineTime,
>+                'timeline time is set');
>+  });
>+
>+}, 'onremove event is fired when replaced animation is removed.');
>+
>+promise_test(async t => {
>+  const div = createDiv(t);
>+  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
>+  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
>+  const animC = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
>+  const animD = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
>+
>+  const removed = [];
>+
>+  animA.onremove = () => { removed.push('A'); };
>+  animB.onremove = () => { removed.push('B'); };
>+  animC.onremove = () => { removed.push('C'); };
>+
>+  animD.onremove = event => {
>+    assert_unreached('onremove event should not be fired');
>+  };
>+
>+  await waitForAnimationFrames(2);
>+
>+  assert_equals(removed.join(''), 'ABC');
>+
>+}, 'onremove events are fired in the correct order');
>+
>+</script>
>+</body>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/pause.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/pause.html
>index 0649c2f617df45d896c38f14a706f150b02dc82c..1d1bd5fd89aedd6055cd2a3ab0c2c59fcb353a7e 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/pause.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/pause.html
>@@ -73,10 +73,10 @@ test(t => {
>   animation.cancel();
>   animation.playbackRate = -1;
> 
>-  assert_throws('InvalidStateError',
>-                () => { animation.pause(); },
>-                'Expect InvalidStateError exception on calling pause() ' +
>-                'from idle with a negative playbackRate and ' +
>+  assert_throws_dom('InvalidStateError',
>+                    () => { animation.pause(); },
>+                    'Expect InvalidStateError exception on calling pause() ' +
>+                    'from idle with a negative playbackRate and ' +
>                 'infinite-duration animation');
> }, 'pause() from idle with a negative playbackRate and endless effect');
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/play.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/play.html
>index 3e8f923d544adb54a60193ffd42c097077334d38..6c5d604b1e4c88bfffe03238e059dc2b97c6947d 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/play.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/play.html
>@@ -21,10 +21,10 @@ promise_test(t => {
>     animation.currentTime = -5 * MS_PER_SEC;
>     animation.playbackRate = -1;
> 
>-    assert_throws('InvalidStateError',
>-                  () => { animation.play(); },
>-                  'Expected InvalidStateError exception on calling play() ' +
>-                  'with a negative playbackRate and infinite-duration ' +
>+    assert_throws_dom('InvalidStateError',
>+                      () => { animation.play(); },
>+                      'Expected InvalidStateError exception on calling play() ' +
>+                      'with a negative playbackRate and infinite-duration ' +
>                   'animation');
>   });
> }, 'play() throws when seeking an infinite-duration animation played in ' +
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/w3c-import.log
>index 4252ff27b21e2d1b8af4cee35724a40281381f71..3cccdbf31023b54b0723e4558da2784bf395038f 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/w3c-import.log
>@@ -20,9 +20,9 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/effect.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/finished.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/id.html
>-/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/idlharness.window.js
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/oncancel.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onfinish.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/onremove.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/pause.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/pending.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/persist.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationEffect/updateTiming.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationEffect/updateTiming.html
>index 746f0d74f19272b0cb4a63b27102642b5eaba459..6a340c0bf47a298d3c04340e91d8026680aa9ba1 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationEffect/updateTiming.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationEffect/updateTiming.html
>@@ -58,7 +58,7 @@ test(t => {
> for (const invalid of gBadDelayValues) {
>   test(t => {
>     const anim = createDiv(t).animate(null);
>-    assert_throws({ name: 'TypeError' }, () => {
>+    assert_throws_js(TypeError, () => {
>       anim.effect.updateTiming({ delay: invalid });
>     });
>   }, `Throws when setting invalid delay value: ${invalid}`);
>@@ -88,14 +88,14 @@ test(t => {
> 
> test(t => {
>   const anim = createDiv(t).animate(null, 2000);
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     anim.effect.updateTiming({ endDelay: Infinity });
>   });
> }, 'Throws when setting the endDelay to infinity');
> 
> test(t => {
>   const anim = createDiv(t).animate(null, 2000);
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     anim.effect.updateTiming({ endDelay: -Infinity });
>   });
> }, 'Throws when setting the endDelay to negative infinity');
>@@ -163,7 +163,7 @@ test(t => {
> for (const invalid of gBadIterationStartValues) {
>   test(t => {
>     const anim = createDiv(t).animate(null);
>-    assert_throws({ name: 'TypeError' }, () => {
>+    assert_throws_js(TypeError, () => {
>       anim.effect.updateTiming({ iterationStart: invalid });
>     }, `setting ${invalid}`);
>   }, `Throws when setting invalid iterationStart value: ${invalid}`);
>@@ -193,7 +193,7 @@ test(t => {
> for (const invalid of gBadIterationsValues) {
>   test(t => {
>     const anim = createDiv(t).animate(null);
>-    assert_throws({ name: 'TypeError' }, () => {
>+    assert_throws_js(TypeError, () => {
>       anim.effect.updateTiming({ iterations: invalid });
>     });
>   }, `Throws when setting invalid iterations value: ${invalid}`);
>@@ -258,7 +258,7 @@ for (const duration of gGoodDurationValues) {
> 
> for (const invalid of gBadDurationValues) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       createDiv(t).animate(null, { duration: invalid });
>     });
>   }, 'Throws when setting invalid duration: '
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/w3c-import.log
>index 647b5dd1e55b2b29702c0b5c9b3b50718b9f3d2d..c80cfba5452c06ac76c01d03bd5c436de16b36cd 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/w3c-import.log
>@@ -15,4 +15,3 @@ None
> ------------------------------------------------------------------------
> List of files:
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/constructor.html
>-/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/AnimationPlaybackEvent/idlharness.window.js
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations-expected.txt
>deleted file mode 100644
>index 500c40741ab5b7c40bf9f2979aa649a28b8d9e81..0000000000000000000000000000000000000000
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations-expected.txt
>+++ /dev/null
>@@ -1,9 +0,0 @@
>-
>-PASS Test document.getAnimations for non-animated content 
>-PASS Test document.getAnimations for script-generated animations 
>-PASS Test the order of document.getAnimations with script generated animations 
>-PASS Test document.getAnimations for a disconnected node 
>-PASS Test document.getAnimations with null target 
>-FAIL Test document.getAnimations for elements inside same-origin iframes assert_equals: expected 1 but got 0
>-PASS Triggers a style change event 
>-
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations.html
>deleted file mode 100644
>index f6a6c3edd447ccf42da4598db7e771a0ab99b04f..0000000000000000000000000000000000000000
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations.html
>+++ /dev/null
>@@ -1,120 +0,0 @@
>-<!DOCTYPE html>
>-<meta charset=utf-8>
>-<title>Document.getAnimations</title>
>-<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-document-getanimations">
>-<script src="/resources/testharness.js"></script>
>-<script src="/resources/testharnessreport.js"></script>
>-<script src="../../testcommon.js"></script>
>-<body>
>-<div id="log"></div>
>-<div id="target"></div>
>-<script>
>-'use strict';
>-
>-const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
>-
>-test(t => {
>-  assert_equals(document.getAnimations().length, 0,
>-                'getAnimations returns an empty sequence for a document ' +
>-                'with no animations');
>-}, 'Test document.getAnimations for non-animated content');
>-
>-test(t => {
>-  const div = createDiv(t);
>-  const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>-  const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>-  assert_equals(document.getAnimations().length, 2,
>-                'getAnimation returns running animations');
>-
>-  anim1.finish();
>-  anim2.finish();
>-  assert_equals(document.getAnimations().length, 0,
>-                'getAnimation only returns running animations');
>-}, 'Test document.getAnimations for script-generated animations')
>-
>-test(t => {
>-  const div = createDiv(t);
>-  const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>-  const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>-  assert_array_equals(document.getAnimations(),
>-                      [ anim1, anim2 ],
>-                      'getAnimations() returns running animations');
>-}, 'Test the order of document.getAnimations with script generated animations')
>-
>-test(t => {
>-  // This element exists but is not a descendent of any document, so isn't
>-  // picked up by getAnimations.
>-  const div = document.createElement('div');
>-  const anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>-  assert_equals(document.getAnimations().length, 0);
>-
>-  // Now connect the div; it should appear in the list of animations.
>-  document.body.appendChild(div);
>-  t.add_cleanup(() => { div.remove(); });
>-  assert_equals(document.getAnimations().length, 1);
>-}, 'Test document.getAnimations for a disconnected node');
>-
>-test(t => {
>-  const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
>-  const anim = new Animation(effect, document.timeline);
>-  anim.play();
>-
>-  assert_equals(document.getAnimations().length, 0,
>-                'document.getAnimations() only returns animations targeting ' +
>-                'elements in this document');
>-}, 'Test document.getAnimations with null target');
>-
>-promise_test(async t => {
>-  const iframe = document.createElement('iframe');
>-
>-  const eventWatcher = new EventWatcher(t, iframe, ['load']);
>-  const event_promise = eventWatcher.wait_for('load');
>-
>-  document.body.appendChild(iframe);
>-  t.add_cleanup(() => { document.body.removeChild(iframe); });
>-
>-  await event_promise;
>-
>-  const div = createDiv(t, iframe.contentDocument)
>-  const effect = new KeyframeEffect(div, null, 100 * MS_PER_SEC);
>-  const anim = new Animation(effect, document.timeline);
>-  anim.play();
>-
>-  // The animation's timeline is from the main document, but the effect's
>-  // target element is part of the iframe document and that is what matters
>-  // for getAnimations.
>-  assert_equals(document.getAnimations().length, 0);
>-  assert_equals(iframe.contentDocument.getAnimations().length, 1);
>-  anim.finish();
>-}, 'Test document.getAnimations for elements inside same-origin iframes');
>-
>-promise_test(async t => {
>-  const div = createDiv(t);
>-  const watcher = EventWatcher(t, div, 'transitionrun');
>-
>-  // Create a covering animation to prevent transitions from firing after
>-  // calling getAnimations().
>-  const coveringAnimation = new Animation(
>-    new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC)
>-  );
>-
>-  // Setup transition start point.
>-  div.style.transition = 'opacity 100s';
>-  getComputedStyle(div).opacity;
>-
>-  // Update specified style but don't flush style.
>-  div.style.opacity = '0.5';
>-
>-  // Fetch animations
>-  document.getAnimations();
>-
>-  // Play the covering animation to ensure that only the call to
>-  // getAnimations() has a chance to trigger transitions.
>-  coveringAnimation.play();
>-
>-  // If getAnimations() flushed style, we should get a transitionrun event.
>-  await watcher.wait_for('transitionrun');
>-}, 'Triggers a style change event');
>-
>-</script>
>-</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/w3c-import.log
>index eeacf024ad9759a1cfe14b7a39d04373cacd5609..4e20eff19f027fe88b02ce3a54df8c7347a83426 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/w3c-import.log
>@@ -14,5 +14,4 @@ Property values requiring vendor prefixes:
> None
> ------------------------------------------------------------------------
> List of files:
>-/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/timeline.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..8b23a8d6f0cd710d7fa07591ee9d9fed7600acf1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations-expected.txt
>@@ -0,0 +1,11 @@
>+
>+PASS Document.getAnimations() returns an empty sequence for non-animated content 
>+PASS Document.getAnimations() returns script-generated animations 
>+PASS Document.getAnimations() returns script-generated animations in the order they were created 
>+PASS Document.getAnimations() does not return a disconnected node 
>+PASS Document.getAnimations() does not return an animation with a null target 
>+FAIL Document.getAnimations() returns animations on elements inside same-origin iframes assert_equals: expected 1 but got 0
>+FAIL ShadowRoot.getAnimations() return all animations in the shadow tree div.shadowRoot.getAnimations is not a function. (In 'div.shadowRoot.getAnimations()', 'div.shadowRoot.getAnimations' is undefined)
>+FAIL Document.getAnimations() does NOT return animations in shadow trees assert_array_equals: getAnimations() called on Document does not return animations from shadow trees lengths differ, expected 0 got 1
>+PASS Document.getAnimations() triggers a style change event 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..4730f186b34a426b6dd657b113b6e408e0a08b55
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations.html
>@@ -0,0 +1,181 @@
>+<!DOCTYPE html>
>+<meta charset=utf-8>
>+<title>DocumentOrShadowRoot.getAnimations</title>
>+<link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-documentorshadowroot-getanimations">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="../../testcommon.js"></script>
>+<body>
>+<div id="log"></div>
>+<div id="target"></div>
>+<script>
>+'use strict';
>+
>+const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
>+
>+test(t => {
>+  assert_equals(document.getAnimations().length, 0,
>+                'getAnimations returns an empty sequence for a document ' +
>+                'with no animations');
>+}, 'Document.getAnimations() returns an empty sequence for non-animated'
>+   + ' content');
>+
>+test(t => {
>+  const div = createDiv(t);
>+  const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>+  const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>+  assert_equals(document.getAnimations().length, 2,
>+                'getAnimation returns running animations');
>+
>+  anim1.finish();
>+  anim2.finish();
>+  assert_equals(document.getAnimations().length, 0,
>+                'getAnimation only returns running animations');
>+}, 'Document.getAnimations() returns script-generated animations')
>+
>+test(t => {
>+  const div = createDiv(t);
>+  const anim1 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>+  const anim2 = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>+  assert_array_equals(document.getAnimations(),
>+                      [ anim1, anim2 ],
>+                      'getAnimations() returns running animations');
>+}, 'Document.getAnimations() returns script-generated animations in the order'
>+   + ' they were created')
>+
>+test(t => {
>+  // This element exists but is not a descendent of any document, so isn't
>+  // picked up by getAnimations.
>+  const div = document.createElement('div');
>+  const anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
>+  assert_equals(document.getAnimations().length, 0);
>+
>+  // Now connect the div; it should appear in the list of animations.
>+  document.body.appendChild(div);
>+  t.add_cleanup(() => { div.remove(); });
>+  assert_equals(document.getAnimations().length, 1);
>+}, 'Document.getAnimations() does not return a disconnected node');
>+
>+test(t => {
>+  const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
>+  const anim = new Animation(effect, document.timeline);
>+  anim.play();
>+
>+  assert_equals(document.getAnimations().length, 0,
>+                'document.getAnimations() only returns animations targeting ' +
>+                'elements in this document');
>+}, 'Document.getAnimations() does not return an animation with a null target');
>+
>+promise_test(async t => {
>+  const iframe = document.createElement('iframe');
>+
>+  const eventWatcher = new EventWatcher(t, iframe, ['load']);
>+  const event_promise = eventWatcher.wait_for('load');
>+
>+  document.body.appendChild(iframe);
>+  t.add_cleanup(() => { document.body.removeChild(iframe); });
>+
>+  await event_promise;
>+
>+  const div = createDiv(t, iframe.contentDocument)
>+  const effect = new KeyframeEffect(div, null, 100 * MS_PER_SEC);
>+  const anim = new Animation(effect, document.timeline);
>+  anim.play();
>+
>+  // The animation's timeline is from the main document, but the effect's
>+  // target element is part of the iframe document and that is what matters
>+  // for getAnimations.
>+  assert_equals(document.getAnimations().length, 0);
>+  assert_equals(iframe.contentDocument.getAnimations().length, 1);
>+  anim.finish();
>+}, 'Document.getAnimations() returns animations on elements inside same-origin'
>+   + ' iframes');
>+
>+test(t => {
>+  const div = createDiv(t);
>+  const shadow = div.attachShadow({ mode: 'open' });
>+
>+  // Create a tree with the following structure
>+  //
>+  //             div
>+  //              |
>+  //         (ShadowRoot)
>+  //           /     \
>+  //       childA  childB
>+  //      (*anim2)   |
>+  //              grandChild
>+  //               (*anim1)
>+  //
>+  // This lets us test that:
>+  //
>+  // a) All children of the ShadowRoot are included
>+  // b) Descendants of the children are included
>+  // c) The result is sorted by composite order (since we fire anim1 before
>+  //    anim2 despite childA appearing first in tree order)
>+
>+  const childA = createDiv(t);
>+  shadow.append(childA);
>+
>+  const childB = createDiv(t);
>+  shadow.append(childB);
>+
>+  const grandChild = createDiv(t);
>+  childB.append(grandChild);
>+
>+  const anim1 = grandChild.animate(gKeyFrames, 100 * MS_PER_SEC)
>+  const anim2 = childA.animate(gKeyFrames, 100 * MS_PER_SEC)
>+
>+  assert_array_equals(
>+    div.shadowRoot.getAnimations(),
>+    [ anim1, anim2 ],
>+    'getAnimations() called on ShadowRoot returns expected animations'
>+  );
>+}, 'ShadowRoot.getAnimations() return all animations in the shadow tree');
>+
>+test(t => {
>+  const div = createDiv(t);
>+  const shadow = div.attachShadow({ mode: 'open' });
>+
>+  const child = createDiv(t);
>+  shadow.append(child);
>+
>+  child.animate(gKeyFrames, 100 * MS_PER_SEC)
>+
>+  assert_array_equals(
>+    document.getAnimations(),
>+    [],
>+    'getAnimations() called on Document does not return animations from shadow'
>+    + ' trees'
>+  );
>+}, 'Document.getAnimations() does NOT return animations in shadow trees');
>+
>+promise_test(async t => {
>+  const div = createDiv(t);
>+  const watcher = EventWatcher(t, div, 'transitionrun');
>+
>+  // Create a covering animation to prevent transitions from firing after
>+  // calling getAnimations().
>+  const coveringAnimation = new Animation(
>+    new KeyframeEffect(div, { opacity: [0, 1] }, 100 * MS_PER_SEC)
>+  );
>+
>+  // Setup transition start point.
>+  div.style.transition = 'opacity 100s';
>+  getComputedStyle(div).opacity;
>+
>+  // Update specified style but don't flush style.
>+  div.style.opacity = '0.5';
>+
>+  // Fetch animations
>+  document.getAnimations();
>+
>+  // Play the covering animation to ensure that only the call to
>+  // getAnimations() has a chance to trigger transitions.
>+  coveringAnimation.play();
>+
>+  // If getAnimations() flushed style, we should get a transitionrun event.
>+  await watcher.wait_for('transitionrun');
>+}, 'Document.getAnimations() triggers a style change event');
>+
>+</script>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/w3c-import.log
>new file mode 100644
>index 0000000000000000000000000000000000000000..b80fa58b24422372699abcd8c604fccca59c6a0c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/w3c-import.log
>@@ -0,0 +1,17 @@
>+The tests in this directory were imported from the W3C repository.
>+Do NOT modify these tests directly in WebKit.
>+Instead, create a pull request on the WPT github:
>+	https://github.com/web-platform-tests/wpt
>+
>+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
>+
>+Do NOT modify or remove this file.
>+
>+------------------------------------------------------------------------
>+Properties requiring vendor prefixes:
>+None
>+Property values requiring vendor prefixes:
>+None
>+------------------------------------------------------------------------
>+List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentOrShadowRoot/getAnimations.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/w3c-import.log
>index 0967c79649df4691c21f11cb4eda87ffc67feba7..9f7ddf4e589e519c2a6b50d8b786be18ee7bbb90 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/w3c-import.log
>@@ -15,5 +15,4 @@ None
> ------------------------------------------------------------------------
> List of files:
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/constructor.html
>-/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/idlharness.window.js
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/style-change-events.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html
>index 8f16aa18711e596c1c2c604595146e36601a606f..f9d552e63ec55aefaab282d7dc9a352cc00fb263 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html
>@@ -41,7 +41,7 @@ test(t => {
> 
> test(t => {
>   for (const invalidEasing of gInvalidEasings) {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, null, { easing: invalidEasing });
>     }, `TypeError is thrown for easing '${invalidEasing}'`);
>   }
>@@ -57,7 +57,7 @@ test(t => {
>                   `resulting composite for '${composite}'`);
>   }
>   for (const composite of gBadKeyframeCompositeValueTests) {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, getKeyframe(composite));
>     });
>   }
>@@ -76,7 +76,7 @@ test(t => {
>                   `resulting composite for '${composite}'`);
>   }
>   for (const composite of gBadKeyframeCompositeValueTests) {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, getKeyframes(composite));
>     });
>   }
>@@ -92,7 +92,7 @@ test(t => {
>                   `resulting composite for '${composite}'`);
>   }
>   for (const composite of gBadOptionsCompositeValueTests) {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, {
>         left: ['10px', '20px']
>       }, { composite: composite });
>@@ -117,7 +117,7 @@ for (const subtest of gKeyframesTests) {
> 
> for (const subtest of gInvalidKeyframesTests) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, subtest.input);
>     });
>   }, `KeyframeEffect constructor throws with ${subtest.desc}`);
>@@ -169,7 +169,7 @@ for (const subtest of gKeyframeEffectOptionTests) {
> 
> for (const subtest of gInvalidKeyframeEffectOptionTests) {
>   test(t => {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, { left: ['10px', '20px'] }, subtest.input);
>     });
>   }, `Invalid KeyframeEffect option by ${subtest.desc}`);
>@@ -186,7 +186,7 @@ test(t => {
> test(t => {
>   const test_error = { name: 'test' };
> 
>-  assert_throws(test_error, () => {
>+  assert_throws_exactly(test_error, () => {
>     new KeyframeEffect(target, { get left() { throw test_error }})
>   });
> }, 'KeyframeEffect constructor propagates exceptions generated by accessing'
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html
>index 5bd0ae2b1edbb508d45ac64258332fcaddf5434c..87e60a2b1085125040a454763216ed335f249e6c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html
>@@ -320,7 +320,7 @@ test(() => {
> test(() => {
>   const test_error = { name: 'test' };
>   const bad_keyframe = { get left() { throw test_error; } };
>-  assert_throws(test_error, () => {
>+  assert_throws_exactly(test_error, () => {
>     new KeyframeEffect(null, createIterable([
>       { done: false, value: { left: '100px' } },
>       { done: false, value: bad_keyframe },
>@@ -332,7 +332,7 @@ test(() => {
>     + ' propagated');
> 
> test(() => {
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     new KeyframeEffect(null, createIterable([
>       { done: false, value: { left: '100px' } },
>       { done: false, value: 1234 },
>@@ -390,7 +390,7 @@ test(() => {
>       return { next() { throw test_error; } };
>     },
>   };
>-  assert_throws(test_error, () => {
>+  assert_throws_exactly(test_error, () => {
>     new KeyframeEffect(null, keyframe_obj);
>   });
> }, 'If a custom iterator throws from next(), the exception should be rethrown');
>@@ -404,7 +404,7 @@ test(() => {
>       throw test_error;
>     },
>   };
>-  assert_throws(test_error, () => {
>+  assert_throws_exactly(test_error, () => {
>     new KeyframeEffect(null, keyframe_obj);
>   });
> }, 'Accessing a Symbol.iterator property that throws should rethrow');
>@@ -415,7 +415,7 @@ test(() => {
>       return 42;  // Not an object.
>     },
>   };
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     new KeyframeEffect(null, keyframe_obj);
>   });
> }, 'A non-object returned from the Symbol.iterator property should cause a'
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html
>index 8233dc07c5de8d17619489e0d759c75c4d2a059f..4b0e15c9a2f73a81eb181691c8c096fecc55edae 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html
>@@ -37,7 +37,7 @@ test(() => {
> 
> test(() => {
>   for (const invalidEasing of gInvalidEasings) {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, { easing: invalidEasing });
>     }, `TypeError is thrown for easing '${invalidEasing}'`);
>   }
>@@ -46,7 +46,7 @@ test(() => {
> 
> test(() => {
>   for (const invalidEasing of gInvalidEasings) {
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       new KeyframeEffect(target, [{ easing: invalidEasing }]);
>     }, `TypeError is thrown for easing '${invalidEasing}'`);
>   }
>@@ -66,7 +66,7 @@ test(() => {
>   addProp('width');
>   keyframe.easing = 'easy-peasy';
> 
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     new KeyframeEffect(target, keyframe);
>   });
>   assert_equals(propAccessCount, 2,
>@@ -92,7 +92,7 @@ test(() => {
>   addProp(kf2, 'height');
>   addProp(kf2, 'width');
> 
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     new KeyframeEffect(target, [ kf1, kf2 ]);
>   });
>   assert_equals(propAccessCount, 4,
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
>index 675a705891fa6c75c233179e59cc73cc516ff48c..a5c81a29bd9d975c93e652edb614f6dbb1570e3b 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/setKeyframes.html
>@@ -34,7 +34,7 @@ for (const subtest of gKeyframesTests) {
> for (const subtest of gInvalidKeyframesTests) {
>   test(t => {
>     const effect = new KeyframeEffect(target, {});
>-    assert_throws(new TypeError, () => {
>+    assert_throws_js(TypeError, () => {
>       effect.setKeyframes(subtest.input);
>     });
>   }, `KeyframeEffect constructor throws with ${subtest.desc}`);
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events-expected.txt
>index d03707656969dbf8af19ec71dc1d959c86575910..d309a47827922e444fd58d99bc87ccf3605de301 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events-expected.txt
>@@ -1,5 +1,5 @@
> 
>-PASS All property keys are recognized 
>+FAIL All property keys are recognized assert_in_array: Test property 'pseudoElement' should be one of the properties on  KeyframeEffect value "pseudoElement" not in array ["getTiming", "getComputedTiming", "updateTiming", "target", "iterationComposite", "composite", "getKeyframes", "setKeyframes", "KeyframeEffect constructor", "KeyframeEffect copy constructor"]
> PASS KeyframeEffect.getTiming does NOT trigger a style change event 
> PASS KeyframeEffect.getComputedTiming does NOT trigger a style change event 
> PASS KeyframeEffect.updateTiming does NOT trigger a style change event 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events.html
>index af53d2d5e141bf20a1f5e79aeaa5c87520f11e2d..eecf170cd902a3160ade8b4a95fb8ef16851f656 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/style-change-events.html
>@@ -121,6 +121,15 @@ const tests = {
>       },
>     });
>   },
>+  pseudoElement: MakeInEffectTest({
>+    setup: elem => elem.animate(
>+      {opacity: [0.5, 1]},
>+      {duration: 100 * MS_PER_SEC, pseudoElement: '::before'}
>+    ),
>+    test: effect => {
>+      effect.pseudoElement = null;
>+    },
>+  }),
>   iterationComposite: UsePropertyTest(effect => {
>     // Get iterationComposite
>     effect.iterationComposite;
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target-expected.txt
>index bf54448a7398fea18e0aaa553fdde23c33ca3854..03f5fbd2c2eecc84b9762a024c52e0b9f59d302e 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target-expected.txt
>@@ -4,4 +4,18 @@ PASS Test setting target from null to a valid target
> PASS Test setting target from a valid target to null 
> PASS Test setting target from a valid target to another target 
> PASS Target element can be set to a foreign element 
>+FAIL Change target from null to an existing pseudoElement setting target first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
>+FAIL Change target from null to an existing pseudoElement setting pseudoElement first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
>+PASS Change target from an existing pseudo-element to the originating element. 
>+FAIL Change target from an existing to a different existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
>+FAIL Change target from an existing to a different existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
>+FAIL Change target from a non-existing to a different existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
>+FAIL Change target from a non-existing to a different existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
>+FAIL Change target from null to a non-existing pseudoElement setting target first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
>+FAIL Change target from null to a non-existing pseudoElement setting pseudoElement first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
>+PASS Change target from a non-existing pseudo-element to the originating element. 
>+FAIL Change target from an existing to a different non-existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
>+FAIL Change target from an existing to a different non-existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
>+FAIL Change target from a non-existing to a different non-existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
>+FAIL Change target from a non-existing to a different non-existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target.html
>index 10f42eea4e5b406c822802c1078fcc1295cb8a39..a9827d64d3d076185daee4787589832cc74f0ec0 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/target.html
>@@ -1,11 +1,17 @@
> <!DOCTYPE html>
> <meta charset=utf-8>
>-<title>KeyframeEffect.target</title>
>+<title>KeyframeEffect.target and .pseudoElement</title>
> <link rel="help"
>   href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-target">
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
> <script src="../../testcommon.js"></script>
>+<style>
>+  .before::before {content: 'foo'; display: inline-block;}
>+  .after::after {content: 'bar'; display: inline-block;}
>+  .pseudoa::before, .pseudoc::before {margin-left: 10px;}
>+  .pseudob::before, .pseudoc::after {margin-left: 20px;}
>+</style>
> <body>
> <div id="log"></div>
> <script>
>@@ -105,5 +111,151 @@ promise_test(async t => {
>   await waitForNextFrame();
> }, 'Target element can be set to a foreign element');
> 
>+// Pseudo-element tests
>+// (testing target and pseudoElement in these cases)
>+// Since blink uses separate code paths for handling pseudo-element styles
>+// depending on whether content is set (putting the pseudo-element in the layout),
>+// we run tests on both cases.
>+for (const hasContent of [true, false]){
>+  test(t => {
>+    const d = createDiv(t);
>+    d.classList.add('pseudoa');
>+    if (hasContent) {
>+      d.classList.add('before');
>+      getComputedStyle(d,"::before").content; // Sync style
>+    }
>+
>+    const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
>+    const anim = new Animation(effect, document.timeline);
>+    anim.play();
>+
>+    anim.currentTime = 50 * MS_PER_SEC;
>+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
>+                  'Value at 50% progress before setting new target');
>+    effect.target = d;
>+    effect.pseudoElement = '::before';
>+
>+    assert_equals(effect.target, d, "Target element is set correctly");
>+    assert_equals(effect.pseudoElement, '::before', "Target pseudo-element set correctly");
>+    assert_equals(getComputedStyle(d, '::before').marginLeft, '50px',
>+                  'Value at 50% progress after setting new target');
>+  }, "Change target from null to " + (hasContent ? "an existing" : "a non-existing") +
>+     " pseudoElement setting target first.");
>+
>+  test(t => {
>+    const d = createDiv(t);
>+    d.classList.add('pseudoa');
>+    if (hasContent) {
>+      d.classList.add('before');
>+      getComputedStyle(d,"::before").content; // Sync style
>+    }
>+
>+    const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
>+    const anim = new Animation(effect, document.timeline);
>+    anim.play();
>+
>+    anim.currentTime = 50 * MS_PER_SEC;
>+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
>+                  'Value at 50% progress before setting new target');
>+    effect.pseudoElement = '::before';
>+    effect.target = d;
>+
>+    assert_equals(effect.target, d, "Target element is set correctly");
>+    assert_equals(effect.pseudoElement, '::before', "Target pseudo-element set correctly");
>+    assert_equals(getComputedStyle(d, '::before').marginLeft, '50px',
>+                  'Value at 50% progress after setting new target');
>+  }, "Change target from null to " + (hasContent ? "an existing" : "a non-existing") +
>+     " pseudoElement setting pseudoElement first.");
>+
>+  test(t => {
>+    const d = createDiv(t);
>+    d.classList.add('pseudoa');
>+    if (hasContent) {
>+      d.classList.add('before');
>+      getComputedStyle(d,"::before").content; // Sync style
>+    }
>+    const anim = d.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
>+
>+    anim.currentTime = 50 * MS_PER_SEC;
>+    anim.effect.pseudoElement = null;
>+    assert_equals(anim.effect.target, d,
>+                  "Animation targets specified element (target element)");
>+    assert_equals(anim.effect.pseudoElement, null,
>+                  "Animation targets specified element (null pseudo-selector)");
>+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
>+                  'Value of 1st element (currently not targeted) after ' +
>+                  'changing the effect target');
>+    assert_equals(getComputedStyle(d).marginLeft, '50px',
>+                  'Value of 2nd element (currently targeted) after ' +
>+                  'changing the effect target');
>+  }, "Change target from " + (hasContent ? "an existing" : "a non-existing") + " pseudo-element to the originating element.");
>+
>+  for (const prevHasContent of [true, false]) {
>+    test(t => {
>+      const a = createDiv(t);
>+      a.classList.add('pseudoa');
>+      const b = createDiv(t);
>+      b.classList.add('pseudob');
>+      if (prevHasContent) {
>+        a.classList.add('before');
>+        getComputedStyle(a,"::before").content; // Sync style
>+      }
>+      if (hasContent) {
>+        b.classList.add('before');
>+        getComputedStyle(b,"::before").content; // Sync style
>+      }
>+
>+      const anim = a.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
>+
>+      anim.currentTime = 50 * MS_PER_SEC;
>+      anim.effect.target = b;
>+      assert_equals(anim.effect.target, b,
>+                    "Animation targets specified pseudo-element (target element)");
>+      assert_equals(anim.effect.pseudoElement, '::before',
>+                    "Animation targets specified pseudo-element (pseudo-selector)");
>+      assert_equals(getComputedStyle(a, '::before').marginLeft, '10px',
>+                    'Value of 1st element (currently not targeted) after ' +
>+                    'changing the effect target');
>+      assert_equals(getComputedStyle(b, '::before').marginLeft, '50px',
>+                    'Value of 2nd element (currently targeted) after ' +
>+                    'changing the effect target');
>+    }, "Change target from " + (prevHasContent ? "an existing" : "a non-existing") +
>+        " to a different " + (hasContent ? "existing" : "non-existing") +
>+        " pseudo-element by setting target.");
>+
>+    test(t => {
>+      const d = createDiv(t);
>+      d.classList.add('pseudoc');
>+      if (prevHasContent) {
>+        d.classList.add('before');
>+        getComputedStyle(d,"::before").content; // Sync style
>+      }
>+      if (hasContent) {
>+        d.classList.add('after');
>+        getComputedStyle(d,"::after").content; // Sync style
>+      }
>+
>+      const anim = d.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
>+
>+      anim.currentTime = 50 * MS_PER_SEC;
>+      anim.effect.pseudoElement = '::after';
>+      assert_equals(anim.effect.target, d,
>+                    "Animation targets specified pseudo-element (target element)");
>+      assert_equals(anim.effect.pseudoElement, '::after',
>+                    "Animation targets specified pseudo-element (pseudo-selector)");
>+      assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
>+                    'Value of 1st element (currently not targeted) after ' +
>+                    'changing the effect target');
>+      assert_equals(getComputedStyle(d, '::after').marginLeft, '50px',
>+                    'Value of 2nd element (currently targeted) after ' +
>+                    'changing the effect target');
>+    }, "Change target from " + (prevHasContent ? "an existing" : "a non-existing") +
>+        " to a different " + (hasContent ? "existing" : "non-existing") +
>+        " pseudo-element by setting pseudoElement.");
>+  }
>+}
>+
>+
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/w3c-import.log
>index a14d49b041bed95355e9caeef009f803ae11867a..b8d96d9ee0f3415bd150c7a24be5495a08481d0f 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/w3c-import.log
>@@ -18,7 +18,6 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/constructor.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/copy-constructor.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/getKeyframes.html
>-/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/idlharness.window.js
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/testcommon.js b/LayoutTests/imported/w3c/web-platform-tests/web-animations/testcommon.js
>index 82b7053232146e3475f1db4c21d9b28e587d2f31..f89cbbaf9361b1e50b1473e93ae63aaa1abb34c7 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/testcommon.js
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/testcommon.js
>@@ -87,23 +87,6 @@ function createStyle(test, rules, doc) {
>   });
> }
> 
>-// Create a pseudo element
>-function getPseudoElement(test, type) {
>-  createStyle(test, { '@keyframes anim': '',
>-                      [`.pseudo::${type}`]: 'animation: anim 10s; ' +
>-                                            'content: \'\';'  });
>-  const div = createDiv(test);
>-  if (type == 'marker') {
>-    div.style.display = 'list-item';
>-  }
>-  div.classList.add('pseudo');
>-  const anims = document.getAnimations();
>-  assert_true(anims.length >= 1);
>-  const anim = anims[anims.length - 1];
>-  anim.cancel();
>-  return anim.effect.target;
>-}
>-
> // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
> function cubicBezier(x1, y1, x2, y2) {
>   const xForT = t => {
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation-expected.txt
>index 76b15b4f13e1834fbcd15d48a369b8c6cfaed7f9..3f93fe7de4309a4a26bc6bade2e61ce41d4a382d 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation-expected.txt
>@@ -18,4 +18,5 @@ PASS An exception should be thrown if the effective playback rate is zero
> PASS An exception should be thrown when finishing if the effective playback rate is positive and the target effect end is infinity 
> PASS An exception is NOT thrown when finishing if the effective playback rate is negative and the target effect end is infinity 
> PASS Finishing an animation fires finish event on orphaned element 
>+PASS Finishing a canceled animation sets the current and start times 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html
>index 779bee184b8dbde227db6ae72dc7ff83a79c4176..5a41abd7b0844457eae367a873d10f544be574cc 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html
>@@ -17,7 +17,7 @@ test(t => {
>   const animation = div.animate(null, 100 * MS_PER_SEC);
>   animation.playbackRate = 0;
> 
>-  assert_throws({name: 'InvalidStateError'}, () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.finish();
>   });
> }, 'Finishing an animation with a zero playback rate throws');
>@@ -28,7 +28,7 @@ test(t => {
>                                 { duration : 100 * MS_PER_SEC,
>                                   iterations : Infinity });
> 
>-  assert_throws({name: 'InvalidStateError'}, () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.finish();
>   });
> }, 'Finishing an infinite animation throws');
>@@ -249,7 +249,7 @@ promise_test(async t => {
> 
>   animation.updatePlaybackRate(0);
> 
>-  assert_throws('InvalidStateError', () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.finish();
>   });
> }, 'An exception should be thrown if the effective playback rate is zero');
>@@ -265,7 +265,7 @@ promise_test(async t => {
> 
>   animation.updatePlaybackRate(1);
> 
>-  assert_throws('InvalidStateError', () => {
>+  assert_throws_dom('InvalidStateError', () => {
>     animation.finish();
>   });
> }, 'An exception should be thrown when finishing if the effective playback rate'
>@@ -300,5 +300,31 @@ promise_test(async t => {
>     'finish event should be fired for the animation on an orphaned element');
> }, 'Finishing an animation fires finish event on orphaned element');
> 
>+promise_test(async t => {
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  await animation.ready;
>+
>+  const originalFinishPromise = animation.finished;
>+
>+  animation.cancel();
>+  assert_equals(animation.startTime, null);
>+  assert_equals(animation.currentTime, null);
>+
>+  const resolvedFinishPromise = animation.finished;
>+  assert_true(originalFinishPromise != resolvedFinishPromise,
>+               'Canceling an animation should create a new finished promise');
>+
>+  animation.finish();
>+  assert_equals(animation.playState, 'finished',
>+                'The play state of a canceled animation should become ' +
>+                '"finished"');
>+  assert_times_equal(animation.startTime,
>+                     animation.timeline.currentTime - 100 * MS_PER_SEC,
>+                     'The start time of a finished animation should be set');
>+  assert_times_equal(animation.currentTime, 100000,
>+                     'Hold time should be set to end boundary of the animation');
>+
>+}, 'Finishing a canceled animation sets the current and start times');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation-expected.txt
>index ea979d4d011224bf0d0d79e0405138cd4fdaafc5..74e4a449ffa7261eb87a03b5d78b866ff9849dbc 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation-expected.txt
>@@ -1,7 +1,11 @@
>+CONSOLE MESSAGE: Unhandled Promise Rejection: AbortError: The operation was aborted.
>+
>+Harness Error (FAIL), message = Unhandled rejection: The operation was aborted.
> 
> PASS Pausing clears the start time 
> PASS Aborting a pause preserves the start time 
> PASS A pending ready promise should be resolved and not replaced when the animation is paused 
> PASS A pause-pending animation maintains the current time when applying a pending playback rate 
> PASS The animation's current time remains fixed after pausing 
>+PASS Pausing a canceled animation sets the current time 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html
>index bcec609d14206567ee25855f6dd7e684c69485ba..4884163c1d3a0fb795d3a34591ca5cb1d7a9eeda 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html
>@@ -89,5 +89,31 @@ promise_test(async t => {
>     'Animation.currentTime is unchanged after pausing');
> }, 'The animation\'s current time remains fixed after pausing');
> 
>+
>+promise_test(async t => {
>+
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+
>+  const originalReadyPromise = animation.ready;
>+  animation.cancel();
>+  assert_equals(animation.startTime, null);
>+  assert_equals(animation.currentTime, null);
>+
>+  const readyPromise = animation.ready;
>+  assert_true(originalReadyPromise != readyPromise,
>+              'Canceling an animation should create a new ready promise');
>+
>+  animation.pause();
>+  assert_equals(animation.playState, 'paused',
>+                'Pausing a canceled animation should update the play state');
>+  assert_true(animation.pending, 'animation should be pause-pending');
>+  await animation.ready;
>+  assert_false(animation.pending,
>+               'animation should no longer be pause-pending');
>+  assert_equals(animation.startTime, null, 'start time should be unresolved');
>+  assert_equals(animation.currentTime, 0, 'current time should be set to zero');
>+
>+}, 'Pausing a canceled animation sets the current time');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation-expected.txt
>index 8d9137d26d95b82ff063427640d35d9c676aad8f..b3ef5ad3b05c2c657961af10e8339afc144925eb 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation-expected.txt
>@@ -9,4 +9,6 @@ PASS A pending ready promise should be resolved and not replaced when the animat
> PASS Resuming an animation from paused calculates start time from hold time 
> PASS If a pause operation is interrupted, the ready promise is reused 
> PASS A pending playback rate is used when determining auto-rewind behavior 
>+PASS Playing a canceled animation sets the start time 
>+PASS Playing a canceled animation backwards sets the start time 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html
>index 1477261e6bc6227598b4e80475a66aa95fe5d15c..608e881e751bd49e3fa0cb292479459e9e04e522 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html
>@@ -138,5 +138,40 @@ promise_test(async t => {
>   assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
> }, 'A pending playback rate is used when determining auto-rewind behavior');
> 
>+promise_test(async t => {
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  animation.cancel();
>+  assert_equals(animation.startTime, null,
>+                'Start time should be unresolved');
>+
>+  animation.play();
>+  assert_true(animation.pending, 'Animation should be play-pending');
>+
>+  await animation.ready;
>+
>+  assert_false(animation.pending, 'animation should no longer be pending');
>+  assert_times_equal(animation.startTime, animation.timeline.currentTime,
>+                     'The start time of the playing animation should be set');
>+}, 'Playing a canceled animation sets the start time');
>+
>+promise_test(async t => {
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  animation.playbackRate = -1;
>+  // animation.currentTime = 100 * MS_PER_SEC;
>+  animation.cancel();
>+  assert_equals(animation.startTime, null,
>+                'Start time should be unresolved');
>+
>+  animation.play();
>+  assert_true(animation.pending, 'Animation should be play-pending');
>+
>+  await animation.ready;
>+
>+  assert_false(animation.pending, 'Animation should no longer be pending');
>+  assert_times_equal(animation.startTime,
>+                     animation.timeline.currentTime + 100 * MS_PER_SEC,
>+                     'The start time of a playing animation should be set');
>+}, 'Playing a canceled animation backwards sets the start time');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation-expected.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..7fcdf9156f82ae51ed3004fa00ef1fc1f01192db
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation-expected.html
>@@ -0,0 +1,18 @@
>+<!DOCTYPE html>
>+<title>Reference for reverse running animation</title>
>+<style>
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+  body {
>+    backgrond: white;
>+  }
>+</style>
>+<body>
>+  <p id="notes">
>+    This test reverses the animation shortly after the box starts moving. If
>+    any blue pixels are visible the test has failed.
>+  </p>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..65f89b3e04c0b7ff6af221a100685fa71bcf7591
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html
>@@ -0,0 +1,70 @@
>+
>+<!DOCTYPE html>
>+<html class="reftest-wait">
>+<meta charset="UTF-8">
>+<title>reverse running animation</title>
>+<link rel="match" href="reverse-running-animation-ref.html">
>+<script src="/common/reftest-wait.js"></script>
>+<script src="../../testcommon.js"></script>
>+<style>
>+  #box, #overlay {
>+    /* Add a border to ensure that anti-aliasing does not leak blue pixels
>+       outside of the  element's bounds. */
>+    border: 1px solid white;
>+    height: 40px;
>+    position: absolute;
>+    top: 40px;
>+    width: 40px;
>+  }
>+  #box {
>+    background: blue;
>+    left: 40px;
>+    z-index: 1;
>+  }
>+  #overlay {
>+    background: white;
>+    left: 140px;
>+    z-index: 2;
>+  }
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+  body {
>+    backgrond: white;
>+  }
>+</style>
>+
>+<body>
>+  <div id="box"></div>
>+  <div id="overlay"></div>
>+  <p id="notes">
>+    This test reverses the animation shortly after the box starts moving. If
>+    any blue pixels are visible the test has failed.
>+  </p>
>+</body>
>+<script>
>+  onload = async function() {
>+    // Double rAF to ensure that we are not bogged down during initialization
>+    // and the compositor is ready.
>+    waitForAnimationFrames(2).then(() => {
>+      const elem = document.getElementById('box');
>+      const anim = elem.animate([
>+          { transform: 'translateX(100px)' },
>+          { transform: 'translateX(100px)', offset: 0.49 },
>+          { transform: 'translateX(200px)', offset: 0.51 },
>+          { transform: 'translateX(200px)' }
>+        ], {
>+          duration: 10000,
>+        });
>+      anim.ready.then(() => {
>+        anim.currentTime = 5000;
>+        requestAnimationFrame(() => {
>+          anim.reverse();
>+          takeScreenshotDelayed(1000);
>+        });
>+      });
>+    });
>+  };
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html
>index 75fd9876c0495a8bd0096d2f976a920d3d7e5a05..8d869d72aaffc44f07c6d3e30cd26ac53ac281d3 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html
>@@ -145,7 +145,7 @@ test(t => {
>                                       iterations: Infinity });
>   animation.currentTime = -200 * MS_PER_SEC;
> 
>-  assert_throws('InvalidStateError',
>+  assert_throws_dom('InvalidStateError',
>     () => { animation.reverse(); },
>     'reverse() should throw InvalidStateError ' +
>     'if the playbackRate > 0 and the currentTime < 0 ' +
>@@ -230,7 +230,7 @@ test(t => {
>   const animation =
>     new Animation(new KeyframeEffect(div, null, 100 * MS_PER_SEC), null);
> 
>-  assert_throws('InvalidStateError', () => { animation.reverse(); });
>+  assert_throws_dom('InvalidStateError', () => { animation.reverse(); });
> }, 'Reversing an animation without an active timeline throws an ' +
>    'InvalidStateError');
> 
>@@ -254,7 +254,7 @@ promise_test(async t => {
>   await animation.ready;
> 
>   animation.updatePlaybackRate(2);
>-  assert_throws('InvalidStateError', () => { animation.reverse(); });
>+  assert_throws_dom('InvalidStateError', () => { animation.reverse(); });
>   assert_equals(animation.playbackRate, 1);
> 
>   await animation.ready;
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation-expected.txt
>index 85f8ba0087eb126e27fccd843a183f7190e506fc..bec8c8b61781b5f421966f7a78aec7e1d51f3cbe 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation-expected.txt
>@@ -3,4 +3,9 @@ PASS Setting the current time of a pending animation to unresolved does not thro
> PASS Setting the current time of a playing animation to unresolved throws a TypeError 
> PASS Setting the current time of a paused animation to unresolved throws a TypeError 
> PASS Setting the current time of a pausing animation applies a pending playback rate 
>+PASS Setting the current time after the end with a positive playback rate 
>+PASS Setting a negative current time with a positive playback rate 
>+PASS Setting the current time after the end with a negative playback rate 
>+PASS Setting a negative current time with a negative playback rate 
>+PASS Setting the current time on an animation with a zero playback rate 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation.html
>index b1fc43e795226dd8a395bc62ebee9792c541b191..22f88adb8b4268b4a1b11af6cfb287e7ac634809 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation.html
>@@ -26,7 +26,7 @@ promise_test(async t => {
>   await anim.ready;
> 
>   assert_greater_than_equal(anim.currentTime, 0);
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     anim.currentTime = null;
>   });
> }, 'Setting the current time of a playing animation to unresolved throws a'
>@@ -38,7 +38,7 @@ promise_test(async t => {
>   anim.pause();
> 
>   assert_greater_than_equal(anim.currentTime, 0);
>-  assert_throws({ name: 'TypeError' }, () => {
>+  assert_throws_js(TypeError, () => {
>     anim.currentTime = null;
>   });
> }, 'Setting the current time of a paused animation to unresolved throws a'
>@@ -67,5 +67,74 @@ promise_test(async t => {
> }, 'Setting the current time of a pausing animation applies a pending playback'
>    + ' rate');
> 
>+
>+// The following tests verify that currentTime can be set outside of the normal
>+// bounds of an animation.
>+
>+promise_test(async t => {
>+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  await anim.ready;
>+
>+  anim.currentTime = 200 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'finished');
>+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
>+}, 'Setting the current time after the end with a positive playback rate');
>+
>+promise_test(async t => {
>+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  await anim.ready;
>+
>+  anim.currentTime = -100 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'running');
>+  assert_time_equals_literal(anim.currentTime, -100 * MS_PER_SEC);
>+
>+  await waitForAnimationFrames(2);
>+  assert_greater_than(anim.currentTime, -100 * MS_PER_SEC);
>+}, 'Setting a negative current time with a positive playback rate');
>+
>+promise_test(async t => {
>+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  anim.updatePlaybackRate(-1);
>+  await anim.ready;
>+
>+  anim.currentTime = 200 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'running');
>+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
>+
>+  await waitForAnimationFrames(2);
>+  assert_less_than(anim.currentTime, 200 * MS_PER_SEC);
>+}, 'Setting the current time after the end with a negative playback rate');
>+
>+promise_test(async t => {
>+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  anim.updatePlaybackRate(-1);
>+  await anim.ready;
>+
>+  anim.currentTime = -100 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'finished');
>+  assert_time_equals_literal(anim.currentTime, -100 * MS_PER_SEC);
>+}, 'Setting a negative current time with a negative playback rate');
>+
>+promise_test(async t => {
>+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  anim.updatePlaybackRate(0);
>+  await anim.ready;
>+
>+  // An animation with a playback rate of zero is never in the finished state
>+  // even if currentTime is outside the normal range of [0, effect end].
>+  anim.currentTime = 200 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'running');
>+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
>+  await waitForAnimationFrames(2);
>+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
>+
>+  anim.currentTime = -200 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'running');
>+  assert_time_equals_literal(anim.currentTime, -200 * MS_PER_SEC);
>+  await waitForAnimationFrames(2);
>+  assert_time_equals_literal(anim.currentTime, -200 * MS_PER_SEC);
>+
>+}, 'Setting the current time on an animation with a zero playback rate');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation-expected.txt
>index 5dededa2e2e03f0cc6dff6143d1bd0e73f0b6e8b..a490cdff2babcfbe241f14e37564cbeef525b94c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation-expected.txt
>@@ -3,4 +3,8 @@ PASS The playback rate affects the rate of progress of the current time
> PASS Setting the playback rate while play-pending preserves the current time 
> PASS Setting the playback rate while playing preserves the current time 
> PASS Setting the playback rate should clear any pending playback rate 
>+PASS Setting the playback rate while paused preserves the current time and state 
>+PASS Setting the playback rate while finished preserves the current time 
>+PASS Reversing the playback rate while finished restarts the animation 
>+PASS Setting a zero playback rate while running preserves the current time 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation.html
>index 9d07d53df46164d53b1a3c8f4a10787608c5f014..a1f9e4f3acea04337dd0147fbfa373f950a67409 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation.html
>@@ -57,5 +57,54 @@ promise_test(async t => {
>   assert_equals(animation.playbackRate, 1);
> }, 'Setting the playback rate should clear any pending playback rate');
> 
>+promise_test(async t => {
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  animation.currentTime = 50 * MS_PER_SEC;
>+  animation.pause();
>+  await animation.ready;
>+  animation.playbackRate = 2;
>+  // Ensure that the animation remains paused and current time is preserved.
>+  assert_equals(animation.playState, 'paused');
>+  assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC);
>+}, 'Setting the playback rate while paused preserves the current time and '
>+    + 'state');
>+
>+promise_test(async t => {
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  animation.currentTime = 150 * MS_PER_SEC;
>+  await animation.ready;
>+  animation.playbackRate = 2;
>+  // Ensure that current time is preserved and does not snap to the effect end
>+  // time.
>+  assert_equals(animation.playState, 'finished');
>+  assert_time_equals_literal(animation.currentTime, 150 * MS_PER_SEC);
>+}, 'Setting the playback rate while finished preserves the current time');
>+
>+promise_test(async t => {
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  animation.currentTime = 150 * MS_PER_SEC;
>+  await animation.ready;
>+  assert_equals(animation.playState, 'finished');
>+  animation.playbackRate = -1;
>+  // Ensure that current time does not snap to the effect end time and that the
>+  // animation resumes playing.
>+  assert_equals(animation.playState, 'running');
>+  assert_time_equals_literal(animation.currentTime, 150 * MS_PER_SEC);
>+  await waitForAnimationFrames(2);
>+  assert_less_than(animation.currentTime, 150 * MS_PER_SEC);
>+}, 'Reversing the playback rate while finished restarts the animation');
>+
>+
>+promise_test(async t => {
>+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  await animation.ready;
>+  animation.currentTime = 50 * MS_PER_SEC;
>+  animation.playbackRate = 0;
>+  // Ensure that current time does not drift.
>+  assert_equals(animation.playState, 'running');
>+  await waitForAnimationFrames(2);
>+  assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC);
>+}, 'Setting a zero playback rate while running preserves the current time');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation-expected.txt
>index 5bf189e0b6f3dfd88e5ecf2d8d82c29a1242ab5c..d14a942adadf0c3bc3d921029a2f04e40b205ca9 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation-expected.txt
>@@ -9,4 +9,6 @@ PASS Setting an unresolved start time on a play-pending animation makes it pause
> PASS Setting the start time updates the finished state 
> PASS Setting the start time of a play-pending animation applies a pending playback rate 
> PASS Setting the start time of a playing animation applies a pending playback rate 
>+PASS Setting the start time on a running animation updates the play state 
>+PASS Setting the start time on a reverse running animation updates the play state 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html
>index a1727994bdb9b8da10bfdd36baa3d8e0ccc4ef1d..14c9c60100585554f55dde1e225fdfc5b27f1df3 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html
>@@ -266,5 +266,36 @@ promise_test(async t => {
>   assert_time_equals_literal(parseInt(anim.currentTime.toPrecision(5), 10), 50 * MS_PER_SEC);
> }, 'Setting the start time of a playing animation applies a pending playback rate');
> 
>+promise_test(async t => {
>+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  await anim.ready;
>+  assert_equals(anim.playState, 'running');
>+
>+  // Setting the start time updates the finished state. The hold time is not
>+  // constrained by the effect end time.
>+  anim.startTime = -200 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'finished');
>+
>+  assert_times_equal(anim.currentTime,
>+                     document.timeline.currentTime + 200 * MS_PER_SEC);
>+}, 'Setting the start time on a running animation updates the play state');
>+
>+promise_test(async t => {
>+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
>+  await anim.ready;
>+
>+  // Setting the start time updates the finished state. The hold time is not
>+  // constrained by the normal range of the animation time.
>+  anim.currentTime = 100 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'finished');
>+  anim.playbackRate = -1;
>+  assert_equals(anim.playState, 'running');
>+  anim.startTime = -200 * MS_PER_SEC;
>+  assert_equals(anim.playState, 'finished');
>+  assert_times_equal(anim.currentTime,
>+                     -document.timeline.currentTime - 200 * MS_PER_SEC);
>+}, 'Setting the start time on a reverse running animation updates the play '
>+   + 'state');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times-expected.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..fc843a132f2f3741ce27ed796d1182488deb336b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times-expected.html
>@@ -0,0 +1,20 @@
>+
>+<!DOCTYPE html>
>+<meta charset="UTF-8">
>+<title>Reference for sync start times</title>
>+<style>
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+</style>
>+
>+<body>
>+  <p id="notes">
>+    This test creates a pair of animations, starts the first animation and then
>+    syncs the second animation to align with the first. The test passes if the
>+    box associated with the first animation is completely occluded by the
>+    second.
>+  </p>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..06dcf0305639f21fbeea35039023fe2102c38451
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times.html
>@@ -0,0 +1,68 @@
>+
>+<!DOCTYPE html>
>+<html class="reftest-wait">
>+<meta charset="UTF-8">
>+<title>sync start times</title>
>+<link rel="match" href="sync-start-times-ref.html">
>+<script src="/common/reftest-wait.js"></script>
>+<style>
>+  #box-1, #box-2 {
>+    border: 1px solid white;
>+    height: 40px;
>+    left: 40px;
>+    position: absolute;
>+    top: 40px;
>+    width: 40px;
>+  }
>+  #box-1 {
>+    background: blue;
>+    z-index: 1;
>+  }
>+  #box-2 {
>+    background: white;
>+    z-index: 2;
>+  }
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+</style>
>+
>+<body>
>+  <div id="box-1"></div>
>+  <div id="box-2"></div>
>+  <p id="notes">
>+    This test creates a pair of animations, starts the first animation and then
>+    syncs the second animation to align with the first. The test passes if the
>+    box associated with the first animation is completely occluded by the
>+    second.
>+  </p>
>+</body>
>+<script>
>+  onload = function() {
>+    function createAnimation(elementId) {
>+      const elem = document.getElementById(elementId);
>+      const keyframes = [
>+        { transform: 'translateX(0px)' },
>+        { transform: 'translateX(200px)' }
>+      ];
>+      const anim = elem.animate(keyframes, { duration: 1000 });
>+      anim.pause();
>+      return anim;
>+    };
>+
>+    const anim1 = createAnimation('box-1');
>+    const anim2 = createAnimation('box-2');
>+
>+    anim1.currentTime = 500;
>+    anim1.play();
>+
>+    anim1.ready.then(() => {
>+      anim2.startTime = anim1.startTime;
>+      requestAnimationFrame(() => {
>+        takeScreenshot();
>+      });
>+    });
>+  };
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast-expected.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..af69b26100ae02ee711274071df416c45f71d868
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast-expected.html
>@@ -0,0 +1,20 @@
>+<!DOCTYPE html>
>+<title>Reference for update playback rate zero</title>
>+<style>
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+  body {
>+    background: white;
>+  }
>+</style>
>+<body>
>+  <div id="box"></div>
>+  <p id="notes">
>+    This test creates a running animation and changes its playback rate
>+    part way through. The animation finishes ahead of the screenshot.
>+    If any blue pixels appear in the screenshot, the test fails.
>+  </p>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..63a76ba84a62736bb7edb05d9cfa79d6dc73c1cf
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast.html
>@@ -0,0 +1,62 @@
>+
>+<!DOCTYPE html>
>+<html class="reftest-wait">
>+<meta charset="UTF-8">
>+<title>Update playback rate zero</title>
>+<link rel="match" href="update-playback-rate-fast-ref.html">
>+<script src="/common/reftest-wait.js"></script>
>+<style>
>+  #box-1, #box-2 {
>+    border: 1px solid white;
>+    height: 40px;
>+    left: 40px;
>+    position: absolute;
>+    top: 40px;
>+    width: 40px;
>+  }
>+  #box-1 {
>+    background: blue;
>+    z-index: 1;
>+  }
>+  #box-2 {
>+    background: white;
>+    transform: translateX(0px);
>+    z-index: 2;
>+  }
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+  body {
>+    background: white;
>+  }
>+</style>
>+
>+<body>
>+  <div id="box-1"></div>
>+  <div id="box-2"></div>
>+  <p id="notes">
>+    This test creates a running animation and changes its playback rate
>+    part way through. The animation finishes ahead of the screenshot.
>+    If any blue pixels appear in the screenshot, the test fails.
>+  </p>
>+</body>
>+<script>
>+  onload = function() {
>+    const elem = document.getElementById('box-1');
>+    const anim = elem.animate([
>+        { transform: 'translateX(100px)' },
>+        { transform: 'translateX(100px)' },
>+        { transform: 'translateX(200px)' },
>+        { transform: 'translateX(200px)' }
>+      ], {
>+        duration: 1000
>+      });
>+
>+    anim.ready.then(() => {
>+      anim.updatePlaybackRate(2);
>+      takeScreenshotDelayed(750);
>+    });
>+  };
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow-expected.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..11b87deecca4bcea480c9bec9221a02cd1c97a9b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow-expected.html
>@@ -0,0 +1,18 @@
>+<!DOCTYPE html>
>+<title>Reference for update playback rate zero</title>
>+<style>
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+</style>
>+<body>
>+  <div id="box"></div>
>+  <p id="notes">
>+    This test creates a running animation and changes its playback rate
>+    part way through. The animation slows down so that it does not finish
>+    before the screenshot. If any blue pixels appear in the screenshot,
>+    the test fails.
>+  </p>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..db449f2ca596c274170c94c1bb5dc0c87a1ba120
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow.html
>@@ -0,0 +1,62 @@
>+
>+<!DOCTYPE html>
>+<html class="reftest-wait">
>+<meta charset="UTF-8">
>+<title>Update playback rate zero</title>
>+<link rel="match" href="update-playback-rate-slow-ref.html">
>+<script src="/common/reftest-wait.js"></script>
>+<style>
>+  #box-1, #box-2 {
>+    border: 1px solid white;
>+    height: 40px;
>+    left: 40px;
>+    position: absolute;
>+    top: 40px;
>+    width: 40px;
>+  }
>+  #box-1 {
>+    background: blue;
>+    z-index: 1;
>+  }
>+  #box-2 {
>+    background: white;
>+    transform: translateX(200px);
>+    z-index: 2;
>+  }
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+</style>
>+
>+<body>
>+  <div id="box-1"></div>
>+  <div id="box-2"></div>
>+  <p id="notes">
>+    This test creates a running animation and changes its playback rate
>+    part way through. The animation slows down so that it does not finish
>+    before the screenshot. If any blue pixels appear in the screenshot,
>+    the test fails.
>+  </p>
>+</body>
>+<script>
>+  onload = function() {
>+    const elem = document.getElementById('box-1');
>+    const anim = elem.animate([
>+        { transform: 'translateX(100px)' },
>+        { transform: 'translateX(100px)' },
>+        { transform: 'translateX(200px)' },
>+        { transform: 'translateX(200px)' }
>+      ], {
>+        duration: 1000
>+      });
>+
>+    anim.ready.then(() => {
>+      setTimeout(() => {
>+        anim.updatePlaybackRate(0.5);
>+      }, 500);
>+      takeScreenshotDelayed(1000);
>+    });
>+  };
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero-expected.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..26293a3aebbb004dbc03742544c86d237081a56b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero-expected.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html>
>+<title>Reference for update playback rate zero</title>
>+<style>
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+</style>
>+<body>
>+  <div id="box"></div>
>+  <p id="notes">
>+    This test creates a running animation and changes its playback rate
>+    part way through. The animation should stop behind an occluding rectangle.
>+    If not fully occluded, the test fails.
>+  </p>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero.html b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..bed08d630ca2de7960e49e26c9f40da8e772f5b0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero.html
>@@ -0,0 +1,61 @@
>+
>+<!DOCTYPE html>
>+<html class="reftest-wait">
>+<meta charset="UTF-8">
>+<title>Update playback rate zero</title>
>+<link rel="match" href="update-playback-rate-zero-ref.html">
>+<script src="/common/reftest-wait.js"></script>
>+<style>
>+  #box-1, #box-2 {
>+    border: 1px solid white;
>+    height: 40px;
>+    left: 40px;
>+    position: absolute;
>+    top: 40px;
>+    width: 40px;
>+  }
>+  #box-1 {
>+    background: blue;
>+    z-index: 1;
>+  }
>+  #box-2 {
>+    background: white;
>+    transform: translateX(200px);
>+    z-index: 2;
>+  }
>+  #notes {
>+    position: absolute;
>+    left: 0px;
>+    top: 100px;
>+  }
>+</style>
>+
>+<body>
>+  <div id="box-1"></div>
>+  <div id="box-2"></div>
>+  <p id="notes">
>+    This test creates a running animation and changes its playback rate
>+    part way through. The animation should stop behind an occluding rectangle.
>+    If not fully occluded, the test fails.
>+  </p>
>+</body>
>+<script>
>+  onload = function() {
>+    const elem = document.getElementById('box-1');
>+    const anim = elem.animate([
>+        { transform: 'translateX(100px)' },
>+        { transform: 'translateX(100px)' },
>+        { transform: 'translateX(200px)' },
>+        { transform: 'translateX(200px)' }
>+      ], {
>+        duration: 1000
>+      });
>+
>+    anim.ready.then(() => {
>+      setTimeout(() => {
>+        anim.updatePlaybackRate(0);
>+      }, 750);
>+      takeScreenshotDelayed(1200);
>+    });
>+  };
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/w3c-import.log
>index 8c795da7e5eeb4fd3ca42007b7117e5a924b0cea..fb7c50744119d82502e6790a95b6a24f0d8a7b72 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/w3c-import.log
>@@ -19,6 +19,8 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/play-states.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/seamlessly-updating-the-playback-rate-of-an-animation.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation.html
>@@ -26,5 +28,13 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-target-effect-of-an-animation.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/setting-the-timeline-of-an-animation.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/the-current-time-of-an-animation.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-fast.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-slow.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero.html
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/timing-model/animations/updating-the-finished-state.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/web-animations/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/web-animations/w3c-import.log
>index ba514ade0c7a63e0f6eb6442926401ac9c2bfbc9..ede5f7dd5a59bbb85bf6aead00c615bb9cc1fffd 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/web-animations/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/web-animations/w3c-import.log
>@@ -16,4 +16,5 @@ None
> List of files:
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/META.yml
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/README.md
>+/LayoutTests/imported/w3c/web-platform-tests/web-animations/idlharness.window.js
> /LayoutTests/imported/w3c/web-platform-tests/web-animations/testcommon.js
>diff --git a/LayoutTests/tests-options.json b/LayoutTests/tests-options.json
>index 2e0ef72b037901e4497772ba3047c122b6b0e7ed..d0820f16e06cc1942cd31cbfcffd6f3d533075dd 100644
>--- a/LayoutTests/tests-options.json
>+++ b/LayoutTests/tests-options.json
>@@ -17,6 +17,12 @@
>     "imported/w3c/css/css-values/vh_not_refreshing_on_chrome.html": [
>         "slow"
>     ],
>+    "imported/w3c/web-animations/timing-model/animations/updating-the-finished-state.html": [
>+        "slow"
>+    ],
>+    "imported/w3c/web-animations/timing-model/timelines/update-and-send-events.html": [
>+        "slow"
>+    ],
>     "imported/w3c/web-platform-tests/IndexedDB/idb-binary-key-roundtrip.htm": [
>         "slow"
>     ],

Actions: View | Formatted Diff | Diff

Attachments on bug 207263: 389795 | 389798