Attachment 397488 Details for Bug 210964 – Patch

[patch] Patch

bug-210964-20200424215035.patch (text/plain), 117.99 KB, created by Antoine Quint on 2020-04-24 12:50:37 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Antoine Quint

Created: 2020-04-24 12:50:37 PDT

Size: 117.99 KB

patch

obsolete

>Subversion Revision: 260624
>diff --git a/Source/WebKitLegacy/mac/ChangeLog b/Source/WebKitLegacy/mac/ChangeLog
>index 582df976fb26e993472868726415bdb6a975e181..d6b781cdefdb57a14f817bc01b0cd39ae8f468fd 100644
>--- a/Source/WebKitLegacy/mac/ChangeLog
>+++ b/Source/WebKitLegacy/mac/ChangeLog
>@@ -1,3 +1,19 @@
>+2020-04-24  Antoine Quint  <graouts@apple.com>
>+
>+        Update the css/css-animations WPT tests
>+        https://bugs.webkit.org/show_bug.cgi?id=210964
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Expose the CSSCustomPropertiesAndValues experimental feature such that it may be set in DumpRenderTree.
>+
>+        * WebView/WebPreferenceKeysPrivate.h:
>+        * WebView/WebPreferences.mm:
>+        (-[WebPreferences CSSCustomPropertiesAndValuesEnabled]):
>+        (-[WebPreferences setCSSCustomPropertiesAndValuesEnabled:]):
>+        * WebView/WebPreferencesPrivate.h:
>+        * WebView/WebView.mm:
>+
> 2020-04-23  Alex Christensen  <achristensen@webkit.org>
> 
>         Jesus Calling app needs more WebSQL
>diff --git a/Source/WebKitLegacy/win/ChangeLog b/Source/WebKitLegacy/win/ChangeLog
>index 8afb315addf384a1a448f3886d9526567cb546d4..60058e2f6ece44d1c55c92fba54313a0fb401cac 100644
>--- a/Source/WebKitLegacy/win/ChangeLog
>+++ b/Source/WebKitLegacy/win/ChangeLog
>@@ -1,3 +1,20 @@
>+2020-04-24  Antoine Quint  <graouts@apple.com>
>+
>+        Update the css/css-animations WPT tests
>+        https://bugs.webkit.org/show_bug.cgi?id=210964
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Expose the CSSCustomPropertiesAndValues experimental feature such that it may be set in DumpRenderTree.
>+
>+        * Interfaces/IWebPreferencesPrivate.idl:
>+        * WebPreferenceKeysPrivate.h:
>+        * WebPreferences.cpp:
>+        (WebPreferences::initializeDefaultSettings):
>+        * WebPreferences.h:
>+        * WebView.cpp:
>+        (WebView::notifyPreferencesChanged):
>+
> 2020-04-20  Ross Kirsling  <ross.kirsling@sony.com>
> 
>         Classes marked final should not use protected access specifier
>diff --git a/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h b/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
>index 77b3989502025e61d727690c5e9ec81b2ddae3bb..767aa42954afda9eec13f08593697b54444bbbba 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
>+++ b/Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
>@@ -55,6 +55,7 @@
> #define WebKitWebAnimationsEnabledPreferenceKey @"WebKitWebAnimationsEnabled"
> #define WebKitWebAnimationsCompositeOperationsEnabledPreferenceKey @"WebKitWebAnimationsCompositeOperationsEnabled"
> #define WebKitWebAnimationsMutableTimelinesEnabledPreferenceKey @"WebKitWebAnimationsMutableTimelinesEnabled"
>+#define WebKitCSSCustomPropertiesAndValuesEnabledPreferenceKey @"WebKitCSSCustomPropertiesAndValuesEnabled"
> #define WebKitSyntheticEditingCommandsEnabledPreferenceKey @"WebKitSyntheticEditingCommandsEnabled"
> #define WebKitWebSecurityEnabledPreferenceKey @"WebKitWebSecurityEnabled"
> #define WebKitAllowUniversalAccessFromFileURLsPreferenceKey @"WebKitAllowUniversalAccessFromFileURLs"
>diff --git a/Source/WebKitLegacy/mac/WebView/WebPreferences.mm b/Source/WebKitLegacy/mac/WebView/WebPreferences.mm
>index 114d3e63a7a9b0e0ac345090a47bc5efba45210f..d9a05ce7898ab9e3c334668ddf1179af174386b2 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebPreferences.mm
>+++ b/Source/WebKitLegacy/mac/WebView/WebPreferences.mm
>@@ -3239,6 +3239,16 @@ - (void)setWebAnimationsMutableTimelinesEnabled:(BOOL)flag
>     [self _setBoolValue:flag forKey:WebKitWebAnimationsMutableTimelinesEnabledPreferenceKey];
> }
> 
>+- (BOOL)CSSCustomPropertiesAndValuesEnabled
>+{
>+    return [self _boolValueForKey:WebKitCSSCustomPropertiesAndValuesEnabledPreferenceKey];
>+}
>+
>+- (void)setCSSCustomPropertiesAndValuesEnabled:(BOOL)flag
>+{
>+    [self _setBoolValue:flag forKey:WebKitCSSCustomPropertiesAndValuesEnabledPreferenceKey];
>+}
>+
> - (BOOL)syntheticEditingCommandsEnabled
> {
>     return [self _boolValueForKey:WebKitSyntheticEditingCommandsEnabledPreferenceKey];
>diff --git a/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h b/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
>index a84549d4abd1c5d26ddf9bbf3b4de79dd407c18d..c0568c1efd0a573311ec6fb030286583684f01f7 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
>+++ b/Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
>@@ -586,6 +586,9 @@ extern NSString *WebPreferencesCacheModelChangedInternalNotification WEBKIT_DEPR
> - (void)setWebAnimationsMutableTimelinesEnabled:(BOOL)flag;
> - (BOOL)webAnimationsMutableTimelinesEnabled;
> 
>+- (void)setCSSCustomPropertiesAndValuesEnabled:(BOOL)flag;
>+- (BOOL)CSSCustomPropertiesAndValuesEnabled;
>+
> - (void)setSyntheticEditingCommandsEnabled:(BOOL)flag;
> - (BOOL)syntheticEditingCommandsEnabled;
> 
>diff --git a/Source/WebKitLegacy/mac/WebView/WebView.mm b/Source/WebKitLegacy/mac/WebView/WebView.mm
>index db990ef6acac4398b244dbf22dc03634eda1598d..8a2189a8de82e3ed9677133ad9709ea0f6fa5940 100644
>--- a/Source/WebKitLegacy/mac/WebView/WebView.mm
>+++ b/Source/WebKitLegacy/mac/WebView/WebView.mm
>@@ -3195,6 +3195,8 @@ - (void)_preferencesChanged:(WebPreferences *)preferences
>     RuntimeEnabledFeatures::sharedFeatures().setWebAnimationsCompositeOperationsEnabled([preferences webAnimationsCompositeOperationsEnabled]);
>     RuntimeEnabledFeatures::sharedFeatures().setWebAnimationsMutableTimelinesEnabled([preferences webAnimationsMutableTimelinesEnabled]);
> 
>+    RuntimeEnabledFeatures::sharedFeatures().setCSSCustomPropertiesAndValuesEnabled([preferences CSSCustomPropertiesAndValuesEnabled]);
>+
> #if ENABLE(INTERSECTION_OBSERVER)
>     RuntimeEnabledFeatures::sharedFeatures().setIntersectionObserverEnabled(preferences.intersectionObserverEnabled);
> #endif
>diff --git a/Source/WebKitLegacy/win/Interfaces/IWebPreferencesPrivate.idl b/Source/WebKitLegacy/win/Interfaces/IWebPreferencesPrivate.idl
>index dffd94dd86c2ffd706708ac770776ceb030edb49..0c7e92bc11eae0babe1d046506d02f376684d183 100644
>--- a/Source/WebKitLegacy/win/Interfaces/IWebPreferencesPrivate.idl
>+++ b/Source/WebKitLegacy/win/Interfaces/IWebPreferencesPrivate.idl
>@@ -254,6 +254,8 @@ interface IWebPreferencesPrivate7 : IWebPreferencesPrivate6
>     HRESULT setWebAnimationsCompositeOperationsEnabled([in] BOOL enabled);
>     HRESULT webAnimationsMutableTimelinesEnabled([out, retval] BOOL*);
>     HRESULT setWebAnimationsMutableTimelinesEnabled([in] BOOL enabled);
>+    HRESULT CSSCustomPropertiesAndValuesEnabled([out, retval] BOOL*);
>+    HRESULT setCSSCustomPropertiesAndValuesEnabled([in] BOOL enabled);
>     HRESULT aspectRatioOfImgFromWidthAndHeightEnabled([out, retval] BOOL*);
>     HRESULT setAspectRatioOfImgFromWidthAndHeightEnabled([in] BOOL enabled);
>     HRESULT setWebSQLEnabled([in] BOOL enabled);
>diff --git a/Source/WebKitLegacy/win/WebPreferenceKeysPrivate.h b/Source/WebKitLegacy/win/WebPreferenceKeysPrivate.h
>index ad44f8312657318532ad3947e6273fdd72bb2e2d..804531a46bfb5723f6ed1cac32f958f133fec283 100644
>--- a/Source/WebKitLegacy/win/WebPreferenceKeysPrivate.h
>+++ b/Source/WebKitLegacy/win/WebPreferenceKeysPrivate.h
>@@ -195,6 +195,8 @@
> 
> #define WebKitWebAnimationsCSSIntegrationEnabledPreferenceKey "WebKitWebAnimationsCSSIntegrationEnabled"
> 
>+#define WebKitCSSCustomPropertiesAndValuesEnabledPreferenceKey "WebKitCSSCustomPropertiesAndValuesEnabled"
>+
> #define WebKitUserTimingEnabledPreferenceKey "WebKitUserTimingEnabled"
> 
> #define WebKitResourceTimingEnabledPreferenceKey "WebKitResourceTimingEnabled"
>diff --git a/Source/WebKitLegacy/win/WebPreferences.cpp b/Source/WebKitLegacy/win/WebPreferences.cpp
>index dd29e9236ca8780f875b6160b91e4867ccbccdb8..a671b09feec4fb8f9e9c9c77e0d72e3e52fff6f8 100644
>--- a/Source/WebKitLegacy/win/WebPreferences.cpp
>+++ b/Source/WebKitLegacy/win/WebPreferences.cpp
>@@ -322,6 +322,8 @@ void WebPreferences::initializeDefaultSettings()
> 
>     CFDictionaryAddValue(defaults, CFSTR(WebKitWebAnimationsCSSIntegrationEnabledPreferenceKey), kCFBooleanFalse);
> 
>+    CFDictionaryAddValue(defaults, CFSTR(WebKitCSSCustomPropertiesAndValuesEnabledPreferenceKey), kCFBooleanFalse);
>+
>     CFDictionaryAddValue(defaults, CFSTR(WebKitUserTimingEnabledPreferenceKey), kCFBooleanFalse);
> 
>     CFDictionaryAddValue(defaults, CFSTR(WebKitResourceTimingEnabledPreferenceKey), kCFBooleanFalse);
>@@ -2386,6 +2388,20 @@ HRESULT WebPreferences::webAnimationsMutableTimelinesEnabled(_Out_ BOOL* enabled
>     return S_OK;
> }
> 
>+HRESULT WebPreferences::setCSSCustomPropertiesAndValuesEnabled(BOOL enabled)
>+{
>+    setBoolValue(WebKitCSSCustomPropertiesAndValuesEnabledPreferenceKey, enabled);
>+    return S_OK;
>+}
>+
>+HRESULT WebPreferences::CSSCustomPropertiesAndValuesEnabled(_Out_ BOOL* enabled)
>+{
>+    if (!enabled)
>+        return E_POINTER;
>+    *enabled = boolValueForKey(WebKitCSSCustomPropertiesAndValuesEnabledPreferenceKey);
>+    return S_OK;
>+}
>+    
> HRESULT WebPreferences::setUserTimingEnabled(BOOL enabled)
> {
>     setBoolValue(WebKitUserTimingEnabledPreferenceKey, enabled);
>diff --git a/Source/WebKitLegacy/win/WebPreferences.h b/Source/WebKitLegacy/win/WebPreferences.h
>index fa5794bbfb3b114e755f949475212899cc09912a..f7fe76842b4dd232981efff721c1fa4b10979e98 100644
>--- a/Source/WebKitLegacy/win/WebPreferences.h
>+++ b/Source/WebKitLegacy/win/WebPreferences.h
>@@ -295,6 +295,8 @@ public:
>     virtual HRESULT STDMETHODCALLTYPE setWebAnimationsCompositeOperationsEnabled(BOOL);
>     virtual HRESULT STDMETHODCALLTYPE webAnimationsMutableTimelinesEnabled(_Out_ BOOL*);
>     virtual HRESULT STDMETHODCALLTYPE setWebAnimationsMutableTimelinesEnabled(BOOL);
>+    virtual HRESULT STDMETHODCALLTYPE CSSCustomPropertiesAndValuesEnabled(_Out_ BOOL*);
>+    virtual HRESULT STDMETHODCALLTYPE setCSSCustomPropertiesAndValuesEnabled(BOOL);
>     virtual HRESULT STDMETHODCALLTYPE aspectRatioOfImgFromWidthAndHeightEnabled(_Out_ BOOL*);
>     virtual HRESULT STDMETHODCALLTYPE setAspectRatioOfImgFromWidthAndHeightEnabled(BOOL);
>     virtual HRESULT STDMETHODCALLTYPE webSQLEnabled(_Out_ BOOL*);
>diff --git a/Source/WebKitLegacy/win/WebView.cpp b/Source/WebKitLegacy/win/WebView.cpp
>index 721694734d40dd63609351c39ce83db223a5ac25..4a59dbee797907144d242d3f8ef217b30697be60 100644
>--- a/Source/WebKitLegacy/win/WebView.cpp
>+++ b/Source/WebKitLegacy/win/WebView.cpp
>@@ -5279,6 +5279,11 @@ HRESULT WebView::notifyPreferencesChanged(IWebNotification* notification)
>         return hr;
>     RuntimeEnabledFeatures::sharedFeatures().setWebAnimationsCSSIntegrationEnabled(!!enabled);
> 
>+    hr = prefsPrivate->CSSCustomPropertiesAndValuesEnabled(&enabled);
>+    if (FAILED(hr))
>+        return hr;
>+    RuntimeEnabledFeatures::sharedFeatures().setCSSCustomPropertiesAndValuesEnabled(!!enabled);
>+
>     hr = prefsPrivate->userTimingEnabled(&enabled);
>     if (FAILED(hr))
>         return hr;
>diff --git a/Tools/ChangeLog b/Tools/ChangeLog
>index 077af8624a44e52e80527c43fa7786277ec2efec..4bec27e8ed9299493832cf4ae1e6c5a4017f30c1 100644
>--- a/Tools/ChangeLog
>+++ b/Tools/ChangeLog
>@@ -1,3 +1,17 @@
>+2020-04-24  Antoine Quint  <graouts@apple.com>
>+
>+        Update the css/css-animations WPT tests
>+        https://bugs.webkit.org/show_bug.cgi?id=210964
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Turn on the CSSCustomPropertiesAndValues experimental feature which a new test relies on.
>+
>+        * DumpRenderTree/mac/DumpRenderTree.mm:
>+        (enableExperimentalFeatures):
>+        * DumpRenderTree/win/DumpRenderTree.cpp:
>+        (enableExperimentalFeatures):
>+
> 2020-04-23  Yusuke Suzuki  <ysuzuki@apple.com>
> 
>         stress/ensure-crash.js shouldn't spew stuff onto my screen
>diff --git a/Tools/DumpRenderTree/mac/DumpRenderTree.mm b/Tools/DumpRenderTree/mac/DumpRenderTree.mm
>index 9314ab156f74d06b3bdf6e555eb3cde3de480177..c04251e663845433d859370b1cc658888d3e27a3 100644
>--- a/Tools/DumpRenderTree/mac/DumpRenderTree.mm
>+++ b/Tools/DumpRenderTree/mac/DumpRenderTree.mm
>@@ -866,6 +866,7 @@ static void enableExperimentalFeatures(WebPreferences* preferences)
>     [preferences setWebAnimationsEnabled:YES];
>     [preferences setWebAnimationsCompositeOperationsEnabled:YES];
>     [preferences setWebAnimationsMutableTimelinesEnabled:YES];
>+    [preferences setCSSCustomPropertiesAndValuesEnabled:YES];
>     [preferences setWebGL2Enabled:YES];
>     // FIXME: AsyncFrameScrollingEnabled
>     [preferences setCacheAPIEnabled:NO];
>diff --git a/Tools/DumpRenderTree/win/DumpRenderTree.cpp b/Tools/DumpRenderTree/win/DumpRenderTree.cpp
>index 8cc73c1a5d2929e85e9ef8bb847b422c3a1eb3f2..0b37ad45fe18b2a9465ac35723bcdce6956f6362 100644
>--- a/Tools/DumpRenderTree/win/DumpRenderTree.cpp
>+++ b/Tools/DumpRenderTree/win/DumpRenderTree.cpp
>@@ -799,6 +799,7 @@ static void enableExperimentalFeatures(IWebPreferences* preferences)
>     prefsPrivate->setWebAnimationsEnabled(TRUE);
>     prefsPrivate->setWebAnimationsCompositeOperationsEnabled(TRUE);
>     prefsPrivate->setWebAnimationsMutableTimelinesEnabled(TRUE);
>+    prefsPrivate->setCSSCustomPropertiesAndValuesEnabled(TRUE);
>     prefsPrivate->setServerTimingEnabled(TRUE);
>     prefsPrivate->setAspectRatioOfImgFromWidthAndHeightEnabled(TRUE);
>     // FIXME: WebGL2
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index ec3d895edd36cb19cbf87a32e29501a6fc272ad3..2438349c0912db120dfa399a52c595f50c6e2385 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,13 @@
>+2020-04-24  Antoine Quint  <graouts@apple.com>
>+
>+        Update the css/css-animations WPT tests
>+        https://bugs.webkit.org/show_bug.cgi?id=210964
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * TestExpectations:
>+        * platform/ios/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt: Added.
>+
> 2020-04-24  Rob Buis  <rbuis@igalia.com>
> 
>         Import fetch/stale-while-revalidate/fetch.html
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 7553b6e82d35fefbb6c7aa9e87a222cbc5d9ddcd..8dd8cca840ed60b3ea663dde21e6f689d5a71521 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,50 @@
>+2020-04-24  Antoine Quint  <graouts@apple.com>
>+
>+        Update the css/css-animations WPT tests
>+        https://bugs.webkit.org/show_bug.cgi?id=210964
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * resources/import-expectations.json:
>+        * resources/resource-files.json:
>+        * web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative.html: Added.
>+        * web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative-expected.txt:
>+        * web-platform-tests/css/css-animations/CSSAnimation-compositeOrder.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-effect.tentative-expected.txt:
>+        * 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-pausing.tentative-expected.txt:
>+        * web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative.html:
>+        * web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html:
>+        * 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/KeyframeEffect-getKeyframes.tentative-expected.txt:
>+        * web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html:
>+        * web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative.html: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-001-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-001.html: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-002-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-002.html: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-003-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-003.html: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-004-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/animation-base-response-004.html: Added.
>+        * web-platform-tests/css/css-animations/animation-important-001-expected.txt: Added.
>+        * web-platform-tests/css/css-animations/animation-important-001.html: Added.
>+        * web-platform-tests/css/css-animations/animation-important-002-expected.html: Added.
>+        * web-platform-tests/css/css-animations/animation-important-002.html: Added.
>+        * web-platform-tests/css/css-animations/event-dispatch.tentative.html:
>+        * web-platform-tests/css/css-animations/event-order.tentative-expected.txt:
>+        * web-platform-tests/css/css-animations/event-order.tentative.html:
>+        * web-platform-tests/css/css-animations/historical.html:
>+        * web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash-expected.txt: Removed.
>+        * web-platform-tests/css/css-animations/support/testcommon.js:
>+        (assert_frames_equal):
>+        (assert_frame_lists_equal):
>+        * web-platform-tests/css/css-animations/w3c-import.log:
>+
> 2020-04-24  Rob Buis  <rbuis@igalia.com>
> 
>         Import fetch/stale-while-revalidate/fetch.html
>diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
>index da842db12e25a676d0f723e6842f7bdbbad96eaf..8d34489caad02a3cc72b4ca9d164aa88e07411a8 100644
>--- a/LayoutTests/TestExpectations
>+++ b/LayoutTests/TestExpectations
>@@ -4077,6 +4077,8 @@ webkit.org/b/208988 imported/w3c/web-platform-tests/webxr [ Skip ]
> imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html [ ImageOnlyFailure ]
> 
>+webkit.org/b/210963 imported/w3c/web-platform-tests/css/css-animations/animation-important-002.html [ ImageOnlyFailure ]
>+
> webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/central-baseline-alignment-003.xht [ ImageOnlyFailure Pass ]
> webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/clearance-calculations-vrl-002.xht [ ImageOnlyFailure Pass ]
> webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/abs-pos-non-replaced-icb-vlr-003.xht [ ImageOnlyFailure ]
>diff --git a/LayoutTests/imported/w3c/resources/import-expectations.json b/LayoutTests/imported/w3c/resources/import-expectations.json
>index ae294380efe1270b6f7bfb97059710eb75adfa2d..03ac203bc25ff5ab76760df2b747b55de30dab51 100644
>--- a/LayoutTests/imported/w3c/resources/import-expectations.json
>+++ b/LayoutTests/imported/w3c/resources/import-expectations.json
>@@ -1,6 +1,7 @@
> {
>     "LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/": "import", 
>     "apng": "import", 
>+    "css/css-animations": "import", 
>     "css/css-box": "import", 
>     "css/css-color": "import", 
>     "css/css-multicol": "import", 
>diff --git a/LayoutTests/imported/w3c/resources/resource-files.json b/LayoutTests/imported/w3c/resources/resource-files.json
>index 0ed1fb07c112dacab199dc30decfaf59d2618e3c..791078e4694fbb6df4ef76dcc9cece22dc906dd1 100644
>--- a/LayoutTests/imported/w3c/resources/resource-files.json
>+++ b/LayoutTests/imported/w3c/resources/resource-files.json
>@@ -13,6 +13,7 @@
>         "web-platform-tests/css/css-writing-modes/test-plan"
>     ],
>     "files": [
>+        "css/css-animations/keyframes-remove-documentElement-crash.html",
>         "css/css-color/t32-opacity-basic-0.6-a.xht",
>         "css/css-color/t32-opacity-zorder-c.xht",
>         "css/css-color/t421-rgb-hex3-expand-b.xht",
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..f9e89146376c49f0f8ab7ebe0df4fb8190e89761
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative-expected.txt
>@@ -0,0 +1,7 @@
>+
>+FAIL AnimationEffect.updateTiming({ duration }) causes changes to the animation-duration to be ignored assert_equals: Delay should be the value set by style expected 6000 but got 0
>+FAIL AnimationEffect.updateTiming({ iterations, direction }) causes changes to the animation-iteration-count and animation-direction to be ignored assert_equals: Delay should be the value set by style expected 6000 but got 0
>+FAIL AnimationEffect.updateTiming({ delay, fill }) causes changes to the animation-delay and animation-fill-mode to be ignored assert_equals: Iterations should be the value set by style expected 6 but got 1
>+FAIL AnimationEffect.updateTiming() does override to changes from animation-* properties if there is an error assert_equals: Duration should be the value set by style expected 4000 but got 100000
>+PASS AnimationEffect properties that do not map to animation-* properties should not be changed when animation-* style is updated 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..e6556dac4bde9fd436237cb78f5e88a1968be7d1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-updateTiming.tentative.html
>@@ -0,0 +1,174 @@
>+<!doctype html>
>+<meta charset=utf-8>
>+<title>AnimationEffect.updateTiming() 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 anim-empty { }
>+</style>
>+<body>
>+<div id="log"></div>
>+<script>
>+"use strict";
>+
>+test(t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim-empty 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  animation.effect.updateTiming({ duration: 2 * MS_PER_SEC });
>+
>+  div.style.animationDuration = '4s';
>+  div.style.animationDelay = '6s';
>+
>+  assert_equals(
>+    animation.effect.getTiming().duration,
>+    2 * MS_PER_SEC,
>+    'Duration should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().delay,
>+    6 * MS_PER_SEC,
>+    'Delay should be the value set by style'
>+  );
>+}, 'AnimationEffect.updateTiming({ duration }) causes changes to the'
>+   + ' animation-duration to be ignored');
>+
>+// The above test covers duration (with delay as a control). The remaining
>+// properties are:
>+//
>+//   iterations - animation-iteration-count
>+//   direction - animation-direction
>+//   delay - animation-delay
>+//   fill - animation-fill-mode
>+//
>+// Which we test in two batches, overriding two properties each time and using
>+// the remaining two properties as control values to check they are NOT
>+// overridden.
>+
>+test(t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim-empty 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  animation.effect.updateTiming({ iterations: 2, direction: 'reverse' });
>+
>+  div.style.animationIterationCount = '4';
>+  div.style.animationDirection = 'alternate';
>+  div.style.animationDelay = '6s';
>+  div.style.animationFillMode = 'both';
>+
>+  assert_equals(
>+    animation.effect.getTiming().iterations,
>+    2,
>+    'Iterations should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().direction,
>+    'reverse',
>+    'Direction should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().delay,
>+    6 * MS_PER_SEC,
>+    'Delay should be the value set by style'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().fill,
>+    'both',
>+    'Fill should be the value set by style'
>+  );
>+}, 'AnimationEffect.updateTiming({ iterations, direction }) causes changes to'
>+   + ' the animation-iteration-count and animation-direction to be ignored');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim-empty 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  animation.effect.updateTiming({ delay: 2 * MS_PER_SEC, fill: 'both' });
>+
>+  div.style.animationDelay = '4s';
>+  div.style.animationFillMode = 'forwards';
>+  div.style.animationIterationCount = '6';
>+  div.style.animationDirection = 'reverse';
>+
>+  assert_equals(
>+    animation.effect.getTiming().delay,
>+    2 * MS_PER_SEC,
>+    'Delay should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().fill,
>+    'both',
>+    'Fill should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().iterations,
>+    6,
>+    'Iterations should be the value set by style'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().direction,
>+    'reverse',
>+    'Direction should be the value set by style'
>+  );
>+}, 'AnimationEffect.updateTiming({ delay, fill }) causes changes to'
>+   + ' the animation-delay and animation-fill-mode to be ignored');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim-empty 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  assert_throws_js(TypeError, () => {
>+    animation.effect.updateTiming({ duration: 2 * MS_PER_SEC, iterations: -1 });
>+  }, 'Negative iteration count should cause an error to be thrown');
>+
>+  div.style.animationDuration = '4s';
>+
>+  assert_equals(
>+    animation.effect.getTiming().duration,
>+    4 * MS_PER_SEC,
>+    'Duration should be the value set by style'
>+  );
>+}, 'AnimationEffect.updateTiming() does override to changes from animation-*'
>+   + ' properties if there is an error');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim-empty 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  animation.effect.updateTiming({
>+    easing: 'steps(4)',
>+    endDelay: 2 * MS_PER_SEC,
>+    iterationStart: 4,
>+  });
>+
>+  div.style.animationDuration = '6s';
>+  div.style.animationTimingFunction = 'ease-in';
>+
>+  assert_equals(
>+    animation.effect.getTiming().easing,
>+    'steps(4)',
>+    'endDelay should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().endDelay,
>+    2 * MS_PER_SEC,
>+    'endDelay should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().iterationStart,
>+    4,
>+    'iterationStart should be the value set by style'
>+  );
>+}, 'AnimationEffect properties that do not map to animation-* properties'
>+   + ' should not be changed when animation-* style is updated');
>+
>+</script>
>+</body>
>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
>index 1b0759b8c1cfe634f4f0c11c311f10d51cf979e3..8f0d30f5c601757acf67a46a568dd066bd1fd8fa 100644
>--- 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
>@@ -1,3 +1,4 @@
> 
> PASS Animations are composited by their order in the animation-name property. 
>+PASS Web-animation replaces CSS animation 
> 
>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
>index 225efd23addd664d6fb842264bbf04da4990378d..d55db9a2d117f54cebd447d9bf5ef9f44ab7309a 100644
>--- 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
>@@ -36,4 +36,18 @@ promise_test(async t => {
>   // in the animation list.
>   assert_equals(getComputedStyle(div).marginLeft, '100px');
> }, "Animations are composited by their order in the animation-name property.");
>+
>+promise_test(async t => {
>+  const div = addDiv(t);
>+  const animA = div.animate({margin: ["100px","100px"]}, 100000);
>+  assert_equals(getComputedStyle(div).marginLeft, '100px');
>+  div.style.animation = 'margin50 100s';
>+  // Wait for animation starts
>+  await animA.ready;
>+  await waitForAnimationFrames(1);
>+  assert_equals(getComputedStyle(div).marginLeft, '100px',
>+                "A higher-priority animation is not overriden by a more recent"
>+                + "one.");
>+}, 'Web-animation replaces CSS animation');
>+
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative-expected.txt
>index e4e1c5e0cb752f2aec40d6d8aefda5330f621301..f75d5b6fc322ef0e106550e41578670661dc83cc 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative-expected.txt
>@@ -5,4 +5,5 @@ PASS Replacing an animation's effect with a shorter one that should have already
> PASS A play-pending animation's effect whose effect is replaced still exits the pending state 
> PASS CSS animation events are dispatched at the original element even after setting an effect with a different target element 
> PASS After replacing a finished animation's effect with a longer one it fires an animationstart event 
>+FAIL Replacing the effect of a CSSAnimation causes subsequent changes to corresponding animation-* properties to be ignored undefined is not an object (evaluating 'animation.effect.getKeyframes()[0].left')
> 
>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 bbf35d5113a9c3d1e4dba7318f649494c88feb4c..fadcaa129ab2c4da612add9951bf99b447fe948d 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
>@@ -26,7 +26,8 @@ promise_test(async t => {
>   div.style.animation = 'anim 100s';
> 
>   const watcher = new EventWatcher(t, div, [ 'animationend',
>-                                             'animationcancel' ]);
>+                                             'animationcancel' ],
>+                                   fastEventsTimeout);
>   const animation = div.getAnimations()[0];
>   await animation.ready;
> 
>@@ -90,7 +91,8 @@ promise_test(async t => {
>   const div1 = addDiv(t);
>   const div2 = addDiv(t);
> 
>-  const watcher1 = new EventWatcher(t, div1, 'animationstart');
>+  const watcher1 = new EventWatcher(t, div1, 'animationstart',
>+                                    fastEventsTimeout);
>   // Watch |div2| as well to ensure it does *not* get events.
>   const watcher2 = new EventWatcher(t, div2, 'animationstart');
> 
>@@ -114,7 +116,8 @@ promise_test(async t => {
>   const div = addDiv(t);
>   const watcher = new EventWatcher(t, div, [ 'animationstart',
>                                              'animationend',
>-                                             'animationcancel' ]);
>+                                             'animationcancel' ],
>+                                   fastEventsTimeout);
>   div.style.animation = 'anim 100s';
>   const animation = div.getAnimations()[0];
>   animation.finish();
>@@ -128,4 +131,81 @@ promise_test(async t => {
> }, 'After replacing a finished animation\'s effect with a longer one ' +
>    'it fires an animationstart event');
> 
>+test(t => {
>+  const div = addDiv(t);
>+
>+  // Create custom keyframes so we can tweak them
>+  const stylesheet = document.styleSheets[0];
>+  const keyframes = '@keyframes anim-custom { to { left: 100px } }';
>+  const ruleIndex = stylesheet.insertRule(keyframes, 0);
>+  const keyframesRule = stylesheet.cssRules[ruleIndex];
>+
>+  t.add_cleanup(function() {
>+    stylesheet.deleteRule(ruleIndex);
>+  });
>+
>+  div.style.animation = 'anim-custom 100s';
>+
>+  // Replace the effect
>+  const animation = div.getAnimations()[0];
>+  animation.effect = new KeyframeEffect(
>+    div,
>+    { left: '200px' },
>+    200 * MS_PER_SEC
>+  );
>+
>+  // Update the timing properties
>+  div.style.animationDuration = '4s';
>+  div.style.animationIterationCount = '6';
>+  div.style.animationDirection = 'reverse';
>+  div.style.animationDelay = '8s';
>+  div.style.animationFillMode = 'both';
>+  div.style.animationPlayState = 'paused';
>+
>+  // Update the keyframes
>+  keyframesRule.deleteRule(0);
>+  keyframesRule.appendRule('to { left: 300px }');
>+
>+  // Check nothing (except the play state) changed
>+  assert_equals(
>+    animation.effect.getTiming().duration,
>+    200 * MS_PER_SEC,
>+    'duration should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().iterations,
>+    1,
>+    'iterations should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().direction,
>+    'normal',
>+    'direction should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().delay,
>+    0,
>+    'delay should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getTiming().fill,
>+    'auto',
>+    'fill should be the value set by the API'
>+  );
>+  assert_equals(
>+    animation.effect.getKeyframes()[0].left,
>+    '200px',
>+    'keyframes should be the value set by the API'
>+  );
>+
>+  // Unlike the other properties animation-play-state maps to the Animation
>+  // not the KeyframeEffect so it should be overridden.
>+  assert_equals(
>+    animation.playState,
>+    'paused',
>+    'play state should be the value set by style'
>+  );
>+}, 'Replacing the effect of a CSSAnimation causes subsequent changes to'
>+   + ' corresponding animation-* properties to be ignored');
>+
> </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 57dd0d5020c9d6a4bc30dbe9570bd3eb8cbba9ae..da087b93e0efa5d1440efb22fa294699cd934d46 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
>@@ -31,7 +31,7 @@ promise_test(async t => {
>   div.style.animation = '';
>   getComputedStyle(div).animation;
> 
>-  await promise_rejects(t, 'AbortError', originalFinishedPromise,
>+  await promise_rejects_dom(t, 'AbortError', originalFinishedPromise,
>                         'finished promise is rejected with AbortError');
> 
>   assert_not_equals(animation.finished, originalFinishedPromise,
>@@ -55,7 +55,7 @@ promise_test(async t => {
>   div.style.animation = 'def 100s';
>   getComputedStyle(div).animation;
> 
>-  await promise_rejects(t, 'AbortError', originalFinishedPromise,
>+  await promise_rejects_dom(t, 'AbortError', originalFinishedPromise,
>                         'finished promise is rejected with AbortError');
> 
>   assert_not_equals(animation.finished, originalFinishedPromise,
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative-expected.txt
>index 3534e7bf05c6569100eb118236c032ebb6046629..c188de4b20abe27dc0ab479caa14e7ced80f91c7 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative-expected.txt
>@@ -1,8 +1,11 @@
> 
>-PASS play() overrides animation-play-state 
>+FAIL play() overrides animation-play-state assert_equals: Should still be running even after flipping the animation-play-state expected "running" but got "paused"
>+PASS play() does NOT override the animation-play-state if there was an error 
> PASS pause() overrides animation-play-state 
>-PASS play() is overridden by later setting "animation-play-state: paused" 
>-PASS play() flushes pending changes to animation-play-state first 
>-PASS pause() applies pending changes to animation-play-state first 
>+FAIL reverse() overrides animation-play-state when it starts playing the animation assert_equals: Should still be running even after flipping the animation-play-state expected "running" but got "paused"
>+PASS reverse() does NOT override animation-play-state if the animation is already running 
>+FAIL Setting the startTime to null overrides animation-play-state if the animation is already running assert_equals: Should still be paused even after flipping the animation-play-state expected "paused" but got "running"
>+FAIL Setting the startTime to non-null overrides animation-play-state if the animation is paused assert_equals: Should still be running even after flipping the animation-play-state expected "running" but got "paused"
>+PASS Setting the startTime to non-null does NOT override the animation-play-state if the animation is already running 
> PASS Setting the current time completes a pending pause 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative.html
>index 2b6e6853b4178f90e820a16a74a5d63524123d32..156a1afa964de12e4a983c032f9b526b5cdf625d 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative.html
>@@ -16,129 +16,218 @@
> <script>
> 'use strict';
> 
>-const getMarginLeft = cs => parseFloat(cs.marginLeft);
>-
> promise_test(async t => {
>   const div = addDiv(t);
>-  const cs = getComputedStyle(div);
>   div.style.animation = 'anim 1000s paused';
>+
>   const animation = div.getAnimations()[0];
>-  assert_equals(getMarginLeft(cs), 0,
>-                'Initial value of margin-left is zero');
>   animation.play();
> 
>   await animation.ready;
>   await waitForNextFrame();
> 
>-  assert_greater_than(getMarginLeft(cs), 0,
>-                      'Playing value of margin-left is greater than zero');
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Play state is running after calling play()'
>+  );
>+
>+  // Flip the animation-play-state back and forth to check it has no effect
>+
>+  div.style.animationPlayState = 'running';
>+  getComputedStyle(div).animationPlayState;
>+  div.style.animationPlayState = 'paused';
>+  getComputedStyle(div).animationPlayState;
>+
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Should still be running even after flipping the animation-play-state'
>+  );
> }, 'play() overrides animation-play-state');
> 
> promise_test(async t => {
>   const div = addDiv(t);
>-  const cs = getComputedStyle(div);
>-  div.style.animation = 'anim 1000s paused';
>+  div.style.animation = 'anim 100s infinite paused';
>+
>   const animation = div.getAnimations()[0];
>-  assert_equals(getMarginLeft(cs), 0,
>-                'Initial value of margin-left is zero');
>+  animation.playbackRate = -1;
>+  animation.currentTime = -1;
> 
>+  assert_throws_dom('InvalidStateError', () => {
>+    animation.play();
>+  }, 'Trying to play a reversed infinite animation should throw');
>+
>+  assert_equals(
>+    animation.playState,
>+    'paused',
>+    'Animation should still be paused'
>+  );
>+
>+  animation.playbackRate = 1;
>+  div.style.animationPlayState = 'running';
>+
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Changing the animation-play-state should play the animation'
>+  );
>+}, 'play() does NOT override the animation-play-state if there was an error');
>+
>+promise_test(async t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim 1000s paused';
>+
>+  const animation = div.getAnimations()[0];
>   animation.pause();
>+
>   div.style.animationPlayState = 'running';
>+  getComputedStyle(div).animationPlayState;
> 
>   await animation.ready;
>   await waitForNextFrame();
> 
>-  assert_equals(cs.animationPlayState, 'running',
>-                'animation-play-state is running');
>-  assert_equals(getMarginLeft(cs), 0,
>-                'Paused value of margin-left is zero');
>+  assert_equals(animation.playState, 'paused', 'playState is paused ');
>+
>+  // Flip the animation-play-state back and forth to check it has no effect
>+
>+  div.style.animationPlayState = 'paused';
>+  getComputedStyle(div).animationPlayState;
>+  div.style.animationPlayState = 'running';
>+  getComputedStyle(div).animationPlayState;
>+
>+  assert_equals(
>+    animation.playState,
>+    'paused',
>+    'Should still be paused even after flipping the animation-play-state'
>+  );
> }, 'pause() overrides animation-play-state');
> 
> promise_test(async t => {
>   const div = addDiv(t);
>-  const cs = getComputedStyle(div);
>-  div.style.animation = 'anim 1000s paused';
>+  div.style.animation = 'anim 100s paused';
>+
>   const animation = div.getAnimations()[0];
>-  assert_equals(getMarginLeft(cs), 0,
>-                'Initial value of margin-left is zero');
>-  animation.play();
>+  animation.reverse();
> 
>-  await animation.ready;
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Play state is running after calling reverse()'
>+  );
> 
>-  div.style.animationPlayState = 'running';
>-  cs.animationPlayState; // Trigger style resolution
>-  await waitForNextFrame();
>+  // Flip the animation-play-state back and forth to check it has no effect
> 
>-  assert_equals(cs.animationPlayState, 'running',
>-                'animation-play-state is running');
>+  div.style.animationPlayState = 'running';
>+  getComputedStyle(div).animationPlayState;
>   div.style.animationPlayState = 'paused';
>-  await animation.ready;
>+  getComputedStyle(div).animationPlayState;
> 
>-  assert_equals(cs.animationPlayState, 'paused',
>-                'animation-play-state is paused');
>-  const previousAnimVal = getMarginLeft(cs);
>-  await waitForNextFrame();
>-
>-  assert_equals(getMarginLeft(cs), previousAnimVal,
>-                'Animated value of margin-left does not change when'
>-                + ' paused by style');
>-}, 'play() is overridden by later setting "animation-play-state: paused"');
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Should still be running even after flipping the animation-play-state'
>+  );
>+}, 'reverse() overrides animation-play-state when it starts playing the'
>+   + ' animation');
> 
> promise_test(async t => {
>   const div = addDiv(t);
>-  const cs = getComputedStyle(div);
>-  div.style.animation = 'anim 1000s';
>+  div.style.animation = 'anim 100s';
>+
>   const animation = div.getAnimations()[0];
>-  assert_equals(getMarginLeft(cs), 0,
>-                'Initial value of margin-left is zero');
>+  animation.reverse();
>+
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Play state is running after calling reverse()'
>+  );
> 
>-  // Set the specified style first. If implementations fail to
>-  // apply the style changes first, they will ignore the redundant
>-  // call to play() and fail to correctly override the pause style.
>   div.style.animationPlayState = 'paused';
>-  animation.play();
>-  const previousAnimVal = getMarginLeft(cs);
>+  getComputedStyle(div).animationPlayState;
> 
>-  await animation.ready;
>-  await waitForNextFrame();
>+  assert_equals(
>+    animation.playState,
>+    'paused',
>+    'Should be paused after changing the animation-play-state'
>+  );
>+}, 'reverse() does NOT override animation-play-state if the animation is'
>+   + ' already running');
>+
>+promise_test(async t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  animation.startTime = null;
>+
>+  assert_equals(
>+    animation.playState,
>+    'paused',
>+    'Play state is paused after setting the start time to null'
>+  );
>+
>+  // Flip the animation-play-state back and forth to check it has no effect
>+
>+  div.style.animationPlayState = 'paused';
>+  getComputedStyle(div).animationPlayState;
>+  div.style.animationPlayState = 'running';
>+  getComputedStyle(div).animationPlayState;
> 
>-  assert_equals(cs.animationPlayState, 'paused',
>-                'animation-play-state is paused');
>-  assert_greater_than(getMarginLeft(cs), previousAnimVal,
>-                      'Playing value of margin-left is increasing');
>-}, 'play() flushes pending changes to animation-play-state first');
>+  assert_equals(
>+    animation.playState,
>+    'paused',
>+    'Should still be paused even after flipping the animation-play-state'
>+  );
>+}, 'Setting the startTime to null overrides animation-play-state if the'
>+   + ' animation is already running');
> 
> promise_test(async t => {
>   const div = addDiv(t);
>-  const cs = getComputedStyle(div);
>-  div.style.animation = 'anim 1000s paused';
>+  div.style.animation = 'anim 100s paused';
>+
>   const animation = div.getAnimations()[0];
>-  assert_equals(getMarginLeft(cs), 0,
>-                'Initial value of margin-left is zero');
>-
>-  // Unlike the previous test for play(), since calling pause() is sticky,
>-  // we'll apply it even if the underlying style also says we're paused.
>-  //
>-  // We would like to test that implementations flush styles before running
>-  // pause() but actually there's no style we can currently set that will
>-  // change the behavior of pause(). That may change in the future
>-  // (e.g. if we introduce animation-timeline or animation-playback-rate etc.).
>-  //
>-  // For now this just serves as a sanity check that we do the same thing
>-  // even if we set style before calling the API.
>+  animation.startTime = document.timeline.currentTime;
>+
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Play state is running after setting the start time to non-null'
>+  );
>+
>+  // Flip the animation-play-state back and forth to check it has no effect
>+
>   div.style.animationPlayState = 'running';
>-  animation.pause();
>-  const previousAnimVal = getMarginLeft(cs);
>+  getComputedStyle(div).animationPlayState;
>+  div.style.animationPlayState = 'paused';
>+  getComputedStyle(div).animationPlayState;
> 
>-  await animation.ready;
>-  await waitForNextFrame();
>+  assert_equals(
>+    animation.playState,
>+    'running',
>+    'Should still be running even after flipping the animation-play-state'
>+  );
>+}, 'Setting the startTime to non-null overrides animation-play-state if the'
>+   + ' animation is paused');
>+
>+promise_test(async t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  animation.startTime = document.timeline.currentTime;
>+
>+  div.style.animationPlayState = 'paused';
>+  getComputedStyle(div).animationPlayState;
> 
>-  assert_equals(cs.animationPlayState, 'running',
>-                'animation-play-state is running');
>-  assert_equals(getMarginLeft(cs), previousAnimVal,
>-                'Paused value of margin-left does not change');
>-}, 'pause() applies pending changes to animation-play-state first');
>-// (Note that we can't actually test for this; see comment above, in test-body.)
>+  assert_equals(
>+    animation.playState,
>+    'paused',
>+    'Should be paused after changing the animation-play-state'
>+  );
>+}, 'Setting the startTime to non-null does NOT override the'
>+   + ' animation-play-state if the animation is already running');
> 
> promise_test(async t => {
>   const div = addDiv(t, { style: 'animation: anim 1000s' });
>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 f70ebd17003988d641a7ce5645d92b1c968dac3e..2a22760693de49f4de06a546f3fe6cb99e984761 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
>@@ -42,7 +42,7 @@ promise_test(async t => {
>   div.style.animation = '';
>   getComputedStyle(div).animation;
> 
>-  await promise_rejects(t, 'AbortError', readyPromise,
>+  await promise_rejects_dom(t, 'AbortError', readyPromise,
>                         'ready promise is rejected with AbortError');
> }, 'ready promise is rejected when an animation is canceled by resetting'
>    + ' the animation property');
>@@ -64,7 +64,7 @@ promise_test(async t => {
>   div.style.animation = 'def 100s';
>   getComputedStyle(div).animation;
> 
>-  await promise_rejects(t, 'AbortError', readyPromise,
>+  await promise_rejects_dom(t, 'AbortError', readyPromise,
>                         'ready promise is rejected with AbortError');
> }, 'ready promise is rejected when an animation is canceled by updating'
>    + ' the animation property');
>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 d0babf5683eaeeac3be8096a2c50f2ba616c2969..d7c581f5de6ad0c83a5407845e35af6fea5c0879 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
>@@ -6,6 +6,7 @@ PASS Order of CSS Animations - within an element
> PASS Order of CSS Animations - across elements 
> PASS Order of CSS Animations - across and within elements 
> PASS Order of CSS Animations - markup-bound vs free animations 
>+PASS Order of CSS Animations - free animation vs CSS Transitions 
> PASS Order of CSS Animations - free animations 
> PASS Order of CSS Animations and CSS Transitions 
> PASS Finished but filling CSS Animations are returned 
>@@ -14,4 +15,5 @@ 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 
> PASS CSS Animations targetting (pseudo-)elements should have correct order after sorting 
>+FAIL CSS Animations targetting (pseudo-)elements should have correct order after sorting (::marker) assert_equals: CSS animations on both pseudo-elements and elements are returned expected 5 but got 4
> 
>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 4a9768a8b610e5327cc3497a1ec6f301642468a7..4416735f50bb23a1d1bcccf0ad219bb2c21bc4bd 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
>@@ -180,6 +180,29 @@ test(t => {
>   assert_equals(animations[1], animLeft, 'Free animations come last');
> }, 'Order of CSS Animations - markup-bound vs free animations');
> 
>+test(t => {
>+  // Add an animation first
>+  const div = addDiv(t, { style: 'animation: animLeft 100s' });
>+  const animLeft = document.getAnimations()[0];
>+  // Disassociate animLeft from markup and restart
>+  div.style.animation = '';
>+  animLeft.play();
>+
>+  div.style.top = '0px';
>+  div.style.transition = 'all 100s';
>+  flushComputedStyle(div);
>+  // *Then* add a transition
>+  div.style.top = '100px';
>+  flushComputedStyle(div);
>+
>+  // Although the transition was added later, it should come first in the list
>+  const animations = document.getAnimations();
>+  assert_equals(animations.length, 2,
>+                'Both CSS animations and transitions are returned');
>+  assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
>+  assert_equals(animations[1], animLeft, 'Free animations come last');
>+}, 'Order of CSS Animations - free animation vs CSS Transitions');
>+
> test(t => {
>   const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
>   const animLeft = document.getAnimations()[0];
>@@ -262,83 +285,88 @@ test(t => {
>                 'returned');
> }, 'CSS Animations canceled and restarted via the API are returned');
> 
>-test(t => {
>-  // Create two divs with the following arrangement:
>-  //
>-  //       parent
>-  //    (::marker,)
>-  //     ::before,
>-  //     ::after
>-  //        |
>-  //       child
>-
>-  addStyle(t, {
>-    '#parent::after': "content: ''; animation: animLeft 100s;",
>-    '#parent::before': "content: ''; animation: animRight 100s;",
>-  });
>+function pseudoTest(description, testMarkerPseudos) {
>+  test(t => {
>+    // Create two divs with the following arrangement:
>+    //
>+    //       parent
>+    //    (::marker,)  // Optionally
>+    //     ::before,
>+    //     ::after
>+    //        |
>+    //       child
> 
>-  const supportsMarkerPseudos = CSS.supports('selector(::marker)');
>-  if (supportsMarkerPseudos) {
>     addStyle(t, {
>-      '#parent': 'display: list-item;',
>-      '#parent::marker': "content: ''; animation: animLeft 100s;",
>+      '#parent::after': "content: ''; animation: animLeft 100s;",
>+      '#parent::before': "content: ''; animation: animRight 100s;",
>     });
>-  }
>-
>-  const parent = addDiv(t, { id: 'parent' });
>-  const child = addDiv(t);
>-  parent.appendChild(child);
>-  for (const div of [parent, child]) {
>-    div.setAttribute('style', 'animation: animBottom 100s');
>-  }
>-
>-  const expectedAnimations = [
>-    [parent, undefined],
>-    [parent, '::marker'],
>-    [parent, '::before'],
>-    [parent, '::after'],
>-    [child, undefined],
>-  ];
>-  if (!supportsMarkerPseudos) {
>-    expectedAnimations.splice(1, 1);
>-  }
> 
>-  const animations = document.getAnimations();
>-  assert_equals(
>-    animations.length,
>-    expectedAnimations.length,
>-    'CSS animations on both pseudo-elements and elements are returned'
>-  );
>-
>-  for (const [index, expected] of expectedAnimations.entries()) {
>-    const [element, pseudo] = expected;
>-    const actual = animations[index];
>-
>-    if (pseudo) {
>-      assert_equals(
>-        actual.effect.target,
>-        element,
>-        `Animation #${index + 1} has expected target`
>-      );
>-      assert_equals(
>-        actual.effect.pseudoElement,
>-        pseudo,
>-        `Animation #${index + 1} has expected pseudo type`
>-      );
>-    } else {
>-      assert_equals(
>-        actual.effect.target,
>-        element,
>-        `Animation #${index + 1} has expected target`
>-      );
>-      assert_equals(
>-        actual.effect.pseudoElement,
>-        null,
>-        `Animation #${index + 1} has null pseudo type`
>-      );
>+    if (testMarkerPseudos) {
>+      addStyle(t, {
>+        '#parent': 'display: list-item;',
>+        '#parent::marker': "content: ''; animation: animLeft 100s;",
>+      });
>     }
>-  }
>-}, 'CSS Animations targetting (pseudo-)elements should have correct order '
>-   + 'after sorting');
>+
>+    const parent = addDiv(t, { id: 'parent' });
>+    const child = addDiv(t);
>+    parent.appendChild(child);
>+    for (const div of [parent, child]) {
>+      div.setAttribute('style', 'animation: animBottom 100s');
>+    }
>+
>+    const expectedAnimations = [
>+      [parent, undefined],
>+      [parent, '::marker'],
>+      [parent, '::before'],
>+      [parent, '::after'],
>+      [child, undefined],
>+    ];
>+    if (!testMarkerPseudos) {
>+      expectedAnimations.splice(1, 1);
>+    }
>+
>+    const animations = document.getAnimations();
>+    assert_equals(
>+      animations.length,
>+      expectedAnimations.length,
>+      'CSS animations on both pseudo-elements and elements are returned'
>+    );
>+
>+    for (const [index, expected] of expectedAnimations.entries()) {
>+      const [element, pseudo] = expected;
>+      const actual = animations[index];
>+
>+      if (pseudo) {
>+        assert_equals(
>+          actual.effect.target,
>+          element,
>+          `Animation #${index + 1} has expected target`
>+        );
>+        assert_equals(
>+          actual.effect.pseudoElement,
>+          pseudo,
>+          `Animation #${index + 1} has expected pseudo type`
>+        );
>+      } else {
>+        assert_equals(
>+          actual.effect.target,
>+          element,
>+          `Animation #${index + 1} has expected target`
>+        );
>+        assert_equals(
>+          actual.effect.pseudoElement,
>+          null,
>+          `Animation #${index + 1} has null pseudo type`
>+        );
>+      }
>+    }
>+  }, description);
>+}
>+
>+pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
>+     + 'order after sorting', false);
>+pseudoTest('CSS Animations targetting (pseudo-)elements should have correct '
>+     + 'order after sorting (::marker)', true);
> 
> </script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt
>index 9663ac3c92a74a5a26f6ebfbded2e1c8a54bf6a6..83e7816a3e85561330b882467aaa718826052b6c 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt
>@@ -5,22 +5,23 @@ PASS KeyframeEffect.getKeyframes() returns frames with expected easing values, w
> PASS KeyframeEffect.getKeyframes() returns frames with expected easing values, when the easing is specified on each keyframe 
> PASS KeyframeEffect.getKeyframes() returns frames with expected easing values, when the easing is specified on some keyframes 
> PASS KeyframeEffect.getKeyframes() returns expected frames for a simple animation that specifies a single shorthand property 
>-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a 0% keyframe and no 100% keyframe assert_equals: properties on ComputedKeyframe #1 expected "color,composite,computedOffset,easing,offset" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a 100% keyframe and no 0% keyframe assert_equals: properties on ComputedKeyframe #0 expected "color,composite,computedOffset,easing,offset" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with no 0% or 100% keyframe but with a 50% keyframe assert_equals: properties on ComputedKeyframe #0 expected "color,composite,computedOffset,easing,offset" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a partially complete 100% keyframe (because the !important rule is ignored) assert_equals: properties on ComputedKeyframe #1 expected "composite,computedOffset,easing,marginBottom,marginTop,offset" but got "composite,computedOffset,easing,marginBottom,offset"
>+FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a 0% keyframe and no 100% keyframe assert_array_equals: properties on Keyframe #1 should match lengths differ, expected 5 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a 100% keyframe and no 0% keyframe assert_array_equals: properties on Keyframe #0 should match lengths differ, expected 5 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with no 0% or 100% keyframe but with a 50% keyframe assert_array_equals: properties on Keyframe #0 should match lengths differ, expected 5 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a partially complete 100% keyframe (because the !important rule is ignored) assert_array_equals: properties on Keyframe #1 should match lengths differ, expected 6 got 5
> PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with different properties on different keyframes, all with the same easing function 
> PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with different properties on different keyframes, with a different easing function on each 
> PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with multiple keyframes for the same time, and all with the same easing function 
>-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with multiple keyframes for the same time and with different easing functions assert_equals: number of frames expected 3 but got 2
>+FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with multiple keyframes for the same time and with different easing functions assert_equals: Number of keyframes should match expected 3 but got 2
> PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with multiple keyframes for the same time and with different but equivalent easing functions 
> PASS KeyframeEffect.getKeyframes() returns expected frames for overlapping keyframes 
>-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with filter properties and missing keyframes assert_equals: properties on ComputedKeyframe #0 expected "composite,computedOffset,easing,filter,offset" but got "composite,computedOffset,easing,offset"
>+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with filter properties and missing keyframes assert_array_equals: properties on Keyframe #0 should match lengths differ, expected 5 got 4
> PASS KeyframeEffect.getKeyframes() returns expected values for animation with drop-shadow of filter property 
>-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with text-shadow properties and missing keyframes assert_equals: properties on ComputedKeyframe #0 expected "composite,computedOffset,easing,offset,textShadow" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with background-size properties and missing keyframes assert_equals: properties on ComputedKeyframe #0 expected "backgroundSize,composite,computedOffset,easing,offset" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values assert_equals: properties on ComputedKeyframe #0 expected "composite,computedOffset,easing,offset,transform" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values in a shorthand property assert_equals: properties on ComputedKeyframe #0 expected "composite,computedOffset,easing,marginBottom,marginLeft,marginRight,marginTop,offset" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with a CSS variable which is overriden by the value in keyframe assert_equals: properties on ComputedKeyframe #0 expected "color,composite,computedOffset,easing,offset" but got "composite,computedOffset,easing,offset"
>-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with only custom property in a keyframe assert_equals: value for 'transform' on ComputedKeyframe #0 expected "translate(100px)" but got "matrix(1, 0, 0, 1, 100, 0)"
>+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with text-shadow properties and missing keyframes assert_array_equals: properties on Keyframe #0 should match lengths differ, expected 5 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with background-size properties and missing keyframes assert_array_equals: properties on ComputedKeyframe #0 should match lengths differ, expected 5 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values assert_array_equals: properties on Keyframe #0 should match lengths differ, expected 5 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values in a shorthand property assert_array_equals: properties on Keyframe #0 should match lengths differ, expected 8 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with a CSS variable which is overriden by the value in keyframe assert_array_equals: properties on Keyframe #0 should match lengths differ, expected 5 got 4
>+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with only custom property in a keyframe assert_equals: value for 'transform' on Keyframe #0 should match expected "translate(100px)" but got "matrix(1, 0, 0, 1, 100, 0)"
>+FAIL KeyframeEffect.getKeyframes() reflects changes to @keyframes rules assert_equals: value for 'left' on Keyframes reflects the updated @keyframes rule should match expected "200px" but got "100px"
> 
>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 591cc15a7eda8279ec5e9af529f8e6a06b7caa6c..f7d767dea8ca15589a53fae7952bb15e383ccd22 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
>@@ -164,20 +164,6 @@
> 
> const getKeyframes = elem => elem.getAnimations()[0].effect.getKeyframes();
> 
>-const assert_frames_equal = (a, b, name) => {
>-  assert_equals(Object.keys(a).sort().toString(),
>-                Object.keys(b).sort().toString(),
>-                "properties on " + name);
>-  for (const p in a) {
>-    if (p === 'offset' || p === 'computedOffset') {
>-      assert_approx_equals(a[p], b[p], 0.00001,
>-                           "value for '" + p + "' on " + name);
>-    } else {
>-      assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
>-    }
>-  }
>-};
>-
> // animation-timing-function values to test with, where the value
> // is exactly the same as its serialization, sorted by the order
> // getKeyframes() will group frames with the same easing function
>@@ -221,11 +207,9 @@ test(t => {
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-simple 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease",
>@@ -233,10 +217,7 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease",
>       color: "rgb(255, 255, 255)", composite: "auto" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
>    + ' animation');
> 
>@@ -292,11 +273,9 @@ test(t => {
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-simple-shorthand 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -306,21 +285,16 @@ test(t => {
>       marginBottom: "16px", marginLeft: "16px",
>       marginRight: "16px", marginTop: "16px" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
>    + ' animation that specifies a single shorthand property');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-omit-to 100s';
>   div.style.color = 'rgb(255, 255, 255)';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -328,21 +302,16 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       color: "rgb(255, 255, 255)" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with a 0% keyframe and no 100% keyframe');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-omit-from 100s';
>   div.style.color = 'rgb(255, 255, 255)';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -350,21 +319,16 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       color: "rgb(0, 0, 255)" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with a 100% keyframe and no 0% keyframe');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-omit-from-to 100s';
>   div.style.color = 'rgb(255, 255, 255)';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 3, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0,   computedOffset: 0,   easing: "ease", composite: "auto",
>@@ -374,21 +338,16 @@ test(t => {
>     { offset: 1,   computedOffset: 1,   easing: "ease", composite: "auto",
>       color: "rgb(255, 255, 255)" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with no 0% or 100% keyframe but with a 50% keyframe');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-partially-omit-to 100s';
>   div.style.marginTop = '250px';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -396,21 +355,16 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       marginTop: '250px', marginBottom: '200px' },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with a partially complete 100% keyframe (because the ' +
>    '!important rule is ignored)');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-different-props 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 4, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -422,21 +376,16 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       color: "rgb(255, 255, 255)", marginTop: "16px" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with different properties on different keyframes, all ' +
>    'with the same easing function');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-different-props-and-easing 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 4, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "linear", composite: "auto",
>@@ -448,21 +397,16 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       color: "rgb(255, 255, 255)", marginTop: "16px" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with different properties on different keyframes, with ' +
>    'a different easing function on each');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-merge-offset 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -470,21 +414,16 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       color: "rgb(255, 255, 255)", marginTop: "16px" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with multiple keyframes for the same time, and all with ' +
>    'the same easing function');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-merge-offset-and-easing 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 3, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
>@@ -495,21 +434,16 @@ test(t => {
>       color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
>       paddingLeft: "4px" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with multiple keyframes for the same time and with ' +
>    'different easing functions');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-no-merge-equiv-easing 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 3, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
>@@ -519,21 +453,16 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       marginTop: "20px", marginRight: "20px", marginBottom: "20px" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
>    'animation with multiple keyframes for the same time and with ' +
>    'different but equivalent easing functions');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-overriding 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 6, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -549,10 +478,7 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       paddingTop: "70px" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected frames for ' +
>    'overlapping keyframes');
> 
>@@ -561,11 +487,9 @@ test(t => {
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-filter 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -573,20 +497,15 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       filter: "blur(5px) sepia(60%) saturate(30%)" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected values for ' +
>    'animations with filter properties and missing keyframes');
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.animation = 'anim-filter-drop-shadow 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -594,10 +513,7 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       filter: "drop-shadow(rgb(255, 0, 0) 50px 30px 10px)" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected values for ' +
>    'animation with drop-shadow of filter property');
> 
>@@ -607,14 +523,12 @@ test(t => {
> 
> test(t => {
>   const div = addDiv(t);
>-
>   div.style.textShadow = '1px 1px 2px rgb(0, 0, 0), ' +
>                          '0 0 16px rgb(0, 0, 255), ' +
>                          '0 0 3.2px rgb(0, 0, 255)';
>   div.style.animation = 'anim-text-shadow 100s';
>-  const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>+  const frames = getKeyframes(div);
> 
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>@@ -624,10 +538,7 @@ test(t => {
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       textShadow: "none" },
>   ];
>-
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected values for ' +
>    'animations with text-shadow properties and missing keyframes');
> 
>@@ -673,17 +584,13 @@ test(t => {
> 
>   const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>-
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>       transform: "none" },
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       transform: "translate(100px)" },
>   ];
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected values for ' +
>    'animations with CSS variables as keyframe values');
> 
>@@ -693,8 +600,6 @@ test(t => {
> 
>   const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>-
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>       marginBottom: "0px",
>@@ -707,9 +612,7 @@ test(t => {
>       marginRight: "100px",
>       marginTop: "100px" },
>   ];
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected values for ' +
>    'animations with CSS variables as keyframe values in a shorthand property');
> 
>@@ -719,17 +622,13 @@ test(t => {
> 
>   const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>-
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>       color: "rgb(0, 0, 0)" },
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       color: "rgb(0, 255, 0)" },
>   ];
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected values for ' +
>    'animations with a CSS variable which is overriden by the value in keyframe');
> 
>@@ -739,19 +638,63 @@ test(t => {
> 
>   const frames = getKeyframes(div);
> 
>-  assert_equals(frames.length, 2, "number of frames");
>-
>   const expected = [
>     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
>       transform: "translate(100px)" },
>     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
>       transform: "none" },
>   ];
>-  for (let i = 0; i < frames.length; i++) {
>-    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
>-  }
>+  assert_frame_lists_equal(frames, expected);
> }, 'KeyframeEffect.getKeyframes() returns expected values for ' +
>    'animations with only custom property in a keyframe');
> 
>+test(t => {
>+  const div = addDiv(t);
>+
>+  // Add custom @keyframes rule
>+  const stylesheet = document.styleSheets[0];
>+  const keyframes = '@keyframes anim-custom { to { left: 100px } }';
>+  const ruleIndex = stylesheet.insertRule(keyframes, 0);
>+  const keyframesRule = stylesheet.cssRules[ruleIndex];
>+
>+  t.add_cleanup(function() {
>+    stylesheet.deleteRule(ruleIndex);
>+  });
>+
>+  div.style.animation = 'anim-custom 100s';
>+
>+  // Sanity check the initial result
>+  let frames = getKeyframes(div);
>+  assert_frames_equal(
>+    frames[frames.length - 1],
>+    {
>+      offset: 1,
>+      computedOffset: 1,
>+      easing: 'ease',
>+      composite: 'auto',
>+      left: '100px',
>+    },
>+    'Keyframes reflect the initial @keyframes rule'
>+  );
>+
>+  // Update the @keyframes rule
>+  keyframesRule.deleteRule(0);
>+  keyframesRule.appendRule('to { left: 200px }');
>+
>+  // Check the result from getKeyframes() is updated
>+  frames = getKeyframes(div);
>+  assert_frames_equal(
>+    frames[frames.length - 1],
>+    {
>+      offset: 1,
>+      computedOffset: 1,
>+      easing: 'ease',
>+      composite: 'auto',
>+      left: '200px',
>+    },
>+    'Keyframes reflects the updated @keyframes rule'
>+  );
>+}, 'KeyframeEffect.getKeyframes() reflects changes to @keyframes rules');
>+
> </script>
> </body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..1f158cbc83236c74bc411b17a44d81eb7cb216d0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative-expected.txt
>@@ -0,0 +1,5 @@
>+
>+FAIL KeyframeEffect.setKeyframes() causes subsequent changes to @keyframes rules to be ignored undefined is not an object (evaluating 'Object.keys(actual)')
>+FAIL KeyframeEffect.setKeyframes() causes subsequent changes to animation-timing-function to be ignored undefined is not an object (evaluating 'animation.effect.getKeyframes()[0].easing')
>+FAIL KeyframeEffect.setKeyframes() should NOT cause subsequent changes to @keyframes rules to be ignored if it threw undefined is not an object (evaluating 'Object.keys(actual)')
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..7d8f845413a38daae9bcc9d6ce251e44cda582cb
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-setKeyframes.tentative.html
>@@ -0,0 +1,122 @@
>+<!doctype html>
>+<meta charset=utf-8>
>+<title>KeyframeEffect.setKeyframes() 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 anim-simple {
>+  from { left: 0px }
>+  to   { left: 100px }
>+}
>+</style>
>+<body>
>+<div id="log"></div>
>+<script>
>+"use strict";
>+
>+// Note that the sanity check that getKeyframes() normally DOES return the
>+// updated keyframes is contained in KeyframeEffect-getKeyframes.html.
>+test(t => {
>+  const div = addDiv(t);
>+
>+  // Add custom @keyframes rule
>+  const stylesheet = document.styleSheets[0];
>+  const keyframes = '@keyframes anim-custom { to { left: 100px } }';
>+  const ruleIndex = stylesheet.insertRule(keyframes, 0);
>+  const keyframesRule = stylesheet.cssRules[ruleIndex];
>+
>+  t.add_cleanup(function() {
>+    stylesheet.deleteRule(ruleIndex);
>+  });
>+
>+  div.style.animation = 'anim-custom 100s';
>+
>+  // Update the keyframes via the API
>+  const animation = div.getAnimations()[0];
>+  animation.effect.setKeyframes({ left: '200px' });
>+
>+  // Then update them via style
>+  keyframesRule.deleteRule(0);
>+  keyframesRule.appendRule('to { left: 300px }');
>+
>+  // The result should be the keyframes as set by the API, not via style.
>+  const frames = animation.effect.getKeyframes();
>+  assert_frames_equal(
>+    frames[frames.length - 1],
>+    {
>+      offset: null,
>+      computedOffset: 1,
>+      easing: 'linear',
>+      composite: 'auto',
>+      left: '200px',
>+    },
>+    'Keyframes reflect the value set via setKeyframes'
>+  );
>+}, 'KeyframeEffect.setKeyframes() causes subsequent changes to @keyframes'
>+   + ' rules to be ignored');
>+
>+test(t => {
>+  const div = addDiv(t);
>+  div.style.animation = 'anim-simple 100s';
>+
>+  const animation = div.getAnimations()[0];
>+  assert_equals(animation.effect.getKeyframes()[0].easing, 'ease');
>+
>+  animation.effect.setKeyframes({ left: ['200px', '300px'] });
>+  assert_equals(animation.effect.getKeyframes()[0].easing, 'linear');
>+
>+  div.style.animationTimingFunction = 'ease-in';
>+  getComputedStyle(div).animationTimingFunction;
>+
>+  assert_equals(
>+    animation.effect.getKeyframes()[0].easing,
>+    'linear',
>+    'Easing should be the easing set by the API'
>+  );
>+}, 'KeyframeEffect.setKeyframes() causes subsequent changes to'
>+   + ' animation-timing-function to be ignored');
>+
>+test(t => {
>+  const div = addDiv(t);
>+
>+  const stylesheet = document.styleSheets[0];
>+  const keyframes = '@keyframes anim-custom { to { left: 100px } }';
>+  const ruleIndex = stylesheet.insertRule(keyframes, 0);
>+  const keyframesRule = stylesheet.cssRules[ruleIndex];
>+
>+  t.add_cleanup(function() {
>+    stylesheet.deleteRule(ruleIndex);
>+  });
>+
>+  div.style.animation = 'anim-custom 100s';
>+
>+  // Try updating in a way that throws an error
>+  const animation = div.getAnimations()[0];
>+  assert_throws_js(TypeError, () => {
>+    animation.effect.setKeyframes({ left: '200px', offset: 'yer' });
>+  });
>+
>+  keyframesRule.deleteRule(0);
>+  keyframesRule.appendRule('to { left: 300px }');
>+
>+  // The result should be the keyframes as set via style.
>+  const frames = animation.effect.getKeyframes();
>+  assert_frames_equal(
>+    frames[frames.length - 1],
>+    {
>+      offset: 1,
>+      computedOffset: 1,
>+      easing: 'ease',
>+      composite: 'auto',
>+      left: '300px',
>+    },
>+    'Keyframes reflect the value set via style'
>+  );
>+}, 'KeyframeEffect.setKeyframes() should NOT cause subsequent changes to'
>+   + ' @keyframes rules to be ignored if it threw');
>+
>+</script>
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..014541019cbcda7d44b23c529df600cce0dac18d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt
>@@ -0,0 +1,5 @@
>+
>+FAIL em units respond to font-size animation assert_equals: expected "15px" but got "1px"
>+FAIL ex units respond to font-size animation assert_equals: expected "6.71875px" but got "0.4375px"
>+FAIL var() references respond to custom property animation assert_equals: expected "20px" but got "0px"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c6731e179823584577f42a649f6f3665611a522a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001.html
>@@ -0,0 +1,75 @@
>+<!DOCTYPE html>
>+<title>Test that non-animated style is responsive to animated properties</title>
>+<link rel="help" href="https://drafts.csswg.org/css-animations/">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<style>
>+  @keyframes font_size_animation {
>+    from { font-size: 10px; }
>+    to { font-size: 20px; }
>+  }
>+  @keyframes var_animation {
>+    from { --x: 10px; }
>+    to { --x: 20px; }
>+  }
>+  #targets > div {
>+    animation-duration: 1000s;
>+    animation-delay: -500s;
>+    animation-timing-function: steps(2, end);
>+  }
>+
>+  #target1 {
>+    animation-name: font_size_animation;
>+    font-size: 1px;
>+    width: 1em;
>+  }
>+  #ref1 {
>+    width: 15px;
>+  }
>+
>+  #target2 {
>+    animation-name: font_size_animation;
>+    font-size: 1px;
>+    width: 1ex;
>+  }
>+  #ref2 {
>+    font-size: 15px;
>+    width: 1ex;
>+  }
>+
>+  #target3 {
>+    animation-name: var_animation;
>+    --x: 0px;
>+    width: var(--x);
>+  }
>+  #ref3 {
>+    width: 20px;
>+  }
>+</style>
>+<div id="targets">
>+  <div id="target1"></div>
>+  <div id="target2"></div>
>+  <div id="target3"></div>
>+</div>
>+<div id="refs">
>+  <div id="ref1"></div>
>+  <div id="ref2"></div>
>+  <div id="ref3"></div>
>+</div>
>+<script>
>+
>+// Test that the computed value of the given property is equal on
>+// 'target' and 'ref'.
>+function test_ref(target, ref, property, description) {
>+  test(() => {
>+    let actual = getComputedStyle(target).getPropertyValue(property);
>+    let expected = getComputedStyle(ref).getPropertyValue(property);
>+    assert_equals(actual, expected);
>+  }, description);
>+}
>+
>+test_ref(target1, ref1, 'width', 'em units respond to font-size animation');
>+test_ref(target2, ref2, 'width', 'ex units respond to font-size animation');
>+test_ref(target3, ref3, 'width', 'var() references respond to custom property animation');
>+
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-002-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..7c68b98220bfdbad6b488eceb471a24723d69d16
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-002-expected.txt
>@@ -0,0 +1,3 @@
>+
>+PASS Animated font-size on root affects rem units 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-002.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..e9ea964f75da4def5e94875deed3761e622d23d7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-002.html
>@@ -0,0 +1,25 @@
>+<!DOCTYPE html>
>+<title>Test that rem units are responsive to animated font-size on root</title>
>+<link rel="help" href="https://drafts.csswg.org/css-animations/">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<style>
>+  @keyframes font_size_animation {
>+    from { font-size: 10px; }
>+    to { font-size: 20px; }
>+  }
>+  :root {
>+    font-size: 1px;
>+    animation: font_size_animation steps(2, end) 1000s -500s;
>+  }
>+
>+  #target1 {
>+    width: 1rem;
>+  }
>+</style>
>+<div id="target1"></div>
>+<script>
>+test(() => {
>+  assert_equals(getComputedStyle(target1).getPropertyValue('width'), '15px');
>+}, 'Animated font-size on root affects rem units');
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..5b56c6f0097ab963f4fb682bb295dcd4b1ebc418
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003-expected.txt
>@@ -0,0 +1,3 @@
>+
>+FAIL Identical elements are all responsive to font-size animation assert_equals: expected "15px" but got "1px"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d6e6da7309c3c5b741f2f64266a547a3643d43b2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003.html
>@@ -0,0 +1,26 @@
>+<!DOCTYPE html>
>+<title>Tests that identical elements in the base style responds to font-size animation</title>
>+<link rel="help" href="https://drafts.csswg.org/css-animations/">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<style>
>+  @keyframes font_size_animation {
>+    from { font-size: 10px; }
>+    to { font-size: 20px; }
>+  }
>+  div {
>+    font-size: 1px;
>+    min-width: 1em;
>+    animation: font_size_animation steps(2, end) 1000s -500s;
>+  }
>+</style>
>+<div></div>
>+<div></div>
>+<div></div>
>+<script>
>+test(() => {
>+  let divs = document.querySelectorAll('div');
>+  for (let div of divs)
>+    assert_equals(getComputedStyle(div).getPropertyValue('min-width'), '15px');
>+}, 'Identical elements are all responsive to font-size animation');
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..e4ce32f565b84fb9d3618531da1624acb7796070
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004-expected.txt
>@@ -0,0 +1,3 @@
>+
>+FAIL Base is responsive to font-affecting appearing via setKeyframes assert_equals: expected "15px" but got "75px"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5638a572e90c745bea220e5301210541817c4593
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004.html
>@@ -0,0 +1,35 @@
>+<!DOCTYPE html>
>+<title>Tests that base responds to font-affecting properties appearing via setKeyframes</title>
>+<link rel="help" href="https://drafts.csswg.org/css-animations/">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<style>
>+  #target1 {
>+    font-size: 10px;
>+    height: 1em;
>+  }
>+</style>
>+<div id=target1></div>
>+<script>
>+  test(function() {
>+    getComputedStyle(target1).height;
>+
>+    let animation = target1.animate([
>+      { height: '50px' },
>+      { height: '100px' },
>+    ], {
>+      duration: 1000000,
>+      delay: -500000,
>+      easing: 'steps(2, end)'
>+    });
>+
>+    assert_equals(getComputedStyle(target1).height, '75px');
>+
>+    animation.effect.setKeyframes([
>+      { fontSize: '10px' },
>+      { fontSize: '20px' },
>+    ]);
>+
>+    assert_equals(getComputedStyle(target1).height, '15px');
>+  }, 'Base is responsive to font-affecting appearing via setKeyframes');
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..3b204221ec15373df6773a5da7f5b3cfbdcf491c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001-expected.txt
>@@ -0,0 +1,9 @@
>+
>+PASS Interpolated value is observable 
>+FAIL Important rules override animations assert_equals: expected "rgb(0, 128, 0)" but got "rgb(15, 15, 15)"
>+FAIL Non-overriden interpolations are observable assert_equals: expected "rgb(0, 128, 0)" but got "rgb(15, 15, 15)"
>+FAIL Important rules override animations (::before) assert_equals: expected "rgb(0, 128, 0)" but got "rgb(15, 15, 15)"
>+PASS Important rules do not override animations on :visited as seen from JS 
>+FAIL Standard property animations appearing via setKeyframes do not override important declarations assert_equals: expected "rgb(255, 255, 255)" but got "rgb(15, 15, 15)"
>+FAIL Custom property animations appearing via setKeyframes do not override important declarations assert_equals: expected "150px" but got "10px"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..6b1fcfd76b60da106c6e942b319c7d8559f29765
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001.html
>@@ -0,0 +1,144 @@
>+<!DOCTYPE html>
>+<title>Test !important declarations vs. animation effects</title>
>+<link rel="help" href="https://drafts.csswg.org/css-cascade/#cascade-origin">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script>
>+  CSS.registerProperty({
>+    name: "--length-1",
>+    syntax: "<length>",
>+    initialValue: "0px",
>+    inherits: false
>+  });
>+  CSS.registerProperty({
>+    name: "--length-2",
>+    syntax: "<length>",
>+    initialValue: "0px",
>+    inherits: false
>+  });
>+</script>
>+<style>
>+  @keyframes bgcolor_animation {
>+    from { background-color: rgb(10, 10, 10); }
>+    to { background-color: rgb(20, 20, 20); }
>+  }
>+  @keyframes color_and_bg_animation {
>+    from { background-color: rgb(10, 10, 10); color: rgb(10, 10, 10); }
>+    to { background-color: rgb(20, 20, 20); color: rgb(20, 20, 20); }
>+  }
>+  a, div, ::before{
>+    animation-duration: 1000s;
>+    animation-delay: -500s;
>+    animation-timing-function: steps(2, end);
>+  }
>+  #target1 {
>+    animation-name: bgcolor_animation;
>+  }
>+  #target2 {
>+    background-color: rgb(0, 128, 0) !important;
>+    animation-name: bgcolor_animation;
>+  }
>+  #target3 {
>+    color: rgb(0, 128, 0) !important;
>+    animation-name: color_and_bg_animation;
>+  }
>+  #target4::before {
>+    color: rgb(0, 128, 0) !important;
>+    animation-name: color_and_bg_animation;
>+    content: " ";
>+  }
>+  #target5 {
>+    animation-name: color_and_bg_animation;
>+  }
>+  #target5:visited {
>+    color: rgb(0, 128, 0) !important;
>+  }
>+  #target6 {
>+    background-color: white;
>+    color: white !important;
>+  }
>+  #target7 {
>+    --length-1: 10px;
>+    --length-2: 10px !important;
>+  }
>+</style>
>+<div id="target1"></div>
>+<div id="target2"></div>
>+<div id="target3"></div>
>+<div id="target4"></div>
>+<a href="" id="target5"></a>
>+<span id="target6"></span>
>+<span id="target7"></span>
>+<script>
>+test(() => {
>+  assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(15, 15, 15)');
>+}, 'Interpolated value is observable');
>+
>+test(() => {
>+  assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 128, 0)');
>+}, 'Important rules override animations');
>+
>+test(() => {
>+  assert_equals(getComputedStyle(target3).color, 'rgb(0, 128, 0)');
>+  assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(15, 15, 15)');
>+}, 'Non-overriden interpolations are observable');
>+
>+test(() => {
>+  assert_equals(getComputedStyle(target4, '::before').color, 'rgb(0, 128, 0)');
>+  assert_equals(getComputedStyle(target4, '::before').backgroundColor, 'rgb(15, 15, 15)');
>+}, 'Important rules override animations (::before)');
>+
>+test(() => {
>+  assert_equals(getComputedStyle(target5).color, 'rgb(15, 15, 15)');
>+  assert_equals(getComputedStyle(target5).backgroundColor, 'rgb(15, 15, 15)');
>+}, 'Important rules do not override animations on :visited as seen from JS');
>+
>+test(() => {
>+  getComputedStyle(target6).backgroundColor;
>+
>+  let animation = target6.animate([
>+    { backgroundColor: 'rgb(10, 10, 10)' },
>+    { backgroundColor: 'rgb(20, 20, 20)' },
>+  ], {
>+    duration: 1000000,
>+    delay: -500000,
>+    easing: 'steps(2, end)'
>+  });
>+
>+  assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(15, 15, 15)');
>+  assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)');
>+
>+  animation.effect.setKeyframes([
>+    { color: 'rgb(10, 10, 10)' },
>+    { color: 'rgb(20, 20, 20)' },
>+  ]);
>+
>+  assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(255, 255, 255)');
>+  assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)');
>+}, 'Standard property animations appearing via setKeyframes do not override important declarations');
>+
>+test(() => {
>+  getComputedStyle(target7).getPropertyValue('--length-1');
>+
>+  let animation = target7.animate([
>+    { '--length-1': '100px' },
>+    { '--length-1': '200px' },
>+  ], {
>+    duration: 1000000,
>+    delay: -500000,
>+    easing: 'steps(2, end)'
>+  });
>+
>+  assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '150px');
>+  assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px');
>+
>+  animation.effect.setKeyframes([
>+    { '--length-2': '100px' },
>+    { '--length-2': '200px' },
>+  ]);
>+
>+  assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '10px');
>+  assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px');
>+}, 'Custom property animations appearing via setKeyframes do not override important declarations');
>+
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..52855cb91e6b780fc6375280b0643335802dd4e3
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002-expected.html
>@@ -0,0 +1,9 @@
>+<!DOCTYPE html>
>+<style>
>+  a {
>+    text-decoration: underline;
>+    background-color: rgb(0, 150, 0);
>+  }
>+</style>
>+<a style="color: rgb(150, 0, 0)">Unvisited</a>
>+<a style="color: white">Visited</a>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..2a68f8e0cacf06e2e5761ef392b90a4f89fcc843
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002.html
>@@ -0,0 +1,21 @@
>+<!DOCTYPE html>
>+<title>Test that animated properties on :visited are overridden by !important</title>
>+<link rel="help" href="https://drafts.csswg.org/css-cascade/#cascade-origin">
>+<link rel="match" href="animation-important-002-ref.html">
>+<style>
>+  @keyframes color_and_bg_animation {
>+    from { background-color: rgb(0, 100, 0); color: rgb(100, 0, 0); }
>+    to { background-color: rgb(0, 200, 0); color: rgb(200, 0, 0); }
>+  }
>+  a {
>+    animation-name: color_and_bg_animation;
>+    animation-duration: 1000s;
>+    animation-delay: -500s;
>+    animation-timing-function: steps(2, end);
>+  }
>+  a:visited {
>+    color: white !important;
>+  }
>+</style>
>+<a href="#unvisited">Unvisited</a>
>+<a href="">Visited</a>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html
>index bf5782d24fd2e957bd73235e0e1d8b2b1e7cd41d..770f9b00b1fd3db438f6d03f7c8535cf1d2e3684 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html
>@@ -21,7 +21,8 @@ const setupAnimation = (t, animationStyle) => {
>   const watcher = new EventWatcher(t, div, [ 'animationstart',
>                                              'animationiteration',
>                                              'animationend',
>-                                             'animationcancel' ]);
>+                                             'animationcancel' ],
>+                                   fastEventsTimeout);
>   const animation = div.getAnimations()[0];
> 
>   return { animation, watcher, div };
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative-expected.txt
>index 326b6f1cc4f3ac08617ba7ebf0f6743d2755872c..c9e43182360b43759f96753f41320f02b31cb1e9 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative-expected.txt
>@@ -1,6 +1,7 @@
> 
> PASS Same events are ordered by elements 
> PASS Same events on pseudo-elements follow the prescribed order 
>+FAIL Same events on pseudo-elements follow the prescribed order (::marker) assert_equals: Number of events received (4) should match expected number (5) (expected: animationstart, animationstart, animationstart, animationstart, animationstart, actual: animationstart, animationstart, animationstart, animationstart) expected 5 but got 4
> FAIL Start and iteration events are ordered by time assert_equals: Event #1 types should match (expected: animationiteration, animationstart, actual: animationstart, animationiteration) expected "animationiteration" but got "animationstart"
> FAIL Iteration and end events are ordered by time assert_equals: Event #1 types should match (expected: animationiteration, animationend, actual: animationend, animationiteration) expected "animationiteration" but got "animationend"
> FAIL Start and end events are sorted correctly when fired simultaneously assert_equals: Event #1 targets should match expected Element node <div style="animation: anim 100s 2"></div> but got Element node <div style="animation: anim 100s 100s"></div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative.html
>index f4f9e29a3c859daaa9727fe3009f837a7ddeb1be..58f0bb67cafdd6bc81b17a8845280ded94b73b63 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative.html
>@@ -129,62 +129,68 @@ promise_test(async t => {
>                       ['animationend', div2, 200]);
> }, 'Same events are ordered by elements');
> 
>-promise_test(async t => {
>-  // Setup a hierarchy as follows:
>-  //
>-  //              parent
>-  //                |
>-  //  (::marker, ::before, ::after)
>-  //                |
>-  //              child
>-  const parentDiv = addDiv(t, { style: 'animation: anim 100s' });
>-
>-  parentDiv.id = 'parent-div';
>-  addStyle(t, {
>-    '#parent-div::after': "content: ''; animation: anim 100s",
>-    '#parent-div::before': "content: ''; animation: anim 100s",
>-  });
>-
>-  if (CSS.supports('selector(::marker)')) {
>-    parentDiv.style.display = 'list-item';
>+function pseudoTest(description, testMarkerPseudos) {
>+  promise_test(async t => {
>+    // Setup a hierarchy as follows:
>+    //
>+    //              parent
>+    //                |
>+    //  (::marker, ::before, ::after) // ::marker optional
>+    //                |
>+    //              child
>+    const parentDiv = addDiv(t, { style: 'animation: anim 100s' });
>+
>+    parentDiv.id = 'parent-div';
>     addStyle(t, {
>-      '#parent-div::marker': "content: ''; animation: color-anim 100s",
>+      '#parent-div::after': "content: ''; animation: anim 100s",
>+      '#parent-div::before': "content: ''; animation: anim 100s",
>     });
>-  }
> 
>-  const childDiv = addDiv(t, { style: 'animation: anim 100s' });
>-  parentDiv.append(childDiv);
>-
>-  // Setup event handlers
>-  let events = [];
>-  for (const name of ['start', 'iteration', 'end', 'cancel']) {
>-    parentDiv['onanimation' + name] = evt => {
>-      events.push({
>-        type: evt.type,
>-        target: evt.target,
>-        pseudoElement: evt.pseudoElement,
>-        elapsedTime: evt.elapsedTime,
>+    if (testMarkerPseudos) {
>+      parentDiv.style.display = 'list-item';
>+      addStyle(t, {
>+        '#parent-div::marker': "content: ''; animation: color-anim 100s",
>       });
>-    };
>-  }
>-
>-  // Wait a couple of frames for the events to be dispatched
>-  await waitForFrame();
>-  await waitForFrame();
>-
>-  const expectedEvents = [
>-    ['animationstart', parentDiv, 0],
>-    ['animationstart', parentDiv, '::marker', 0],
>-    ['animationstart', parentDiv, '::before', 0],
>-    ['animationstart', parentDiv, '::after', 0],
>-    ['animationstart', childDiv, 0],
>-  ];
>-  if (!CSS.supports('selector(::marker)')) {
>-    expectedEvents.splice(1, 1);
>-  }
>+    }
>+
>+    const childDiv = addDiv(t, { style: 'animation: anim 100s' });
>+    parentDiv.append(childDiv);
>+
>+    // Setup event handlers
>+    let events = [];
>+    for (const name of ['start', 'iteration', 'end', 'cancel']) {
>+      parentDiv['onanimation' + name] = evt => {
>+        events.push({
>+          type: evt.type,
>+          target: evt.target,
>+          pseudoElement: evt.pseudoElement,
>+          elapsedTime: evt.elapsedTime,
>+        });
>+      };
>+    }
>+
>+    // Wait a couple of frames for the events to be dispatched
>+    await waitForFrame();
>+    await waitForFrame();
>+
>+    const expectedEvents = [
>+      ['animationstart', parentDiv, 0],
>+      ['animationstart', parentDiv, '::marker', 0],
>+      ['animationstart', parentDiv, '::before', 0],
>+      ['animationstart', parentDiv, '::after', 0],
>+      ['animationstart', childDiv, 0],
>+    ];
>+    if (!testMarkerPseudos) {
>+      expectedEvents.splice(1, 1);
>+    }
>+
>+    checkEvents(events, ...expectedEvents);
>+  }, description);
>+}
> 
>-  checkEvents(events, ...expectedEvents);
>-}, 'Same events on pseudo-elements follow the prescribed order');
>+pseudoTest('Same events on pseudo-elements follow the prescribed order', false);
>+pseudoTest('Same events on pseudo-elements follow the prescribed order ' +
>+    '(::marker)', true);
> 
> promise_test(async t => {
>   let events = [];
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/historical.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/historical.html
>index 5b96a422f55f45cddabdf011acb83e5081ec1ef3..f9b13fa016323f53623038167ed7e444f10fd0b1 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/historical.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/historical.html
>@@ -1,7 +1,7 @@
> <!DOCTYPE html>
> 
> <title>Historical CSS Animation features must be removed</title>
>-<link rel="help" href="http://www.w3.org/TR/css3-animations">
>+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#animations">
> 
> <script src="/resources/testharness.js"></script>
> <script src="/resources/testharnessreport.js"></script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash-expected.txt
>deleted file mode 100644
>index 63a04c28b12d50037317a6b49e9e4eadc922a2a3..0000000000000000000000000000000000000000
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash-expected.txt
>+++ /dev/null
>@@ -1,4 +0,0 @@
>-CONSOLE MESSAGE: TypeError: null is not an object (evaluating 'document.body.appendChild')
>-#PID UNRESPONSIVE - WebKitTestRunner (pid 84570)
>-FAIL: Timed out waiting for notifyDone to be called
>-
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js
>index b4fde4b967de2eb67cb3e0819c3a896375e861f9..e26a7a1858ab9e4d404fa9fb76b4a9f4c4f13572 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js
>@@ -36,6 +36,55 @@ function assert_time_equals_literal(actual, expected, description) {
>   assert_approx_equals(actual, expected, TIME_PRECISION, description);
> }
> 
>+/*
>+ * Compare two keyframes
>+ */
>+function assert_frames_equal(actual, expected, name) {
>+  // TODO: Make this skip the 'composite' member when it is not specified in
>+  // `expected` or when the implementation does not support it.
>+  assert_array_equals(
>+    Object.keys(actual).sort(),
>+    Object.keys(expected).sort(),
>+    `properties on ${name} should match`
>+  );
>+
>+  for (const prop in actual) {
>+    if (
>+      // 'offset' can be null
>+      (prop === 'offset' && typeof actual[prop] === 'number') ||
>+      prop === 'computedOffset'
>+    ) {
>+      assert_approx_equals(
>+        actual[prop],
>+        expected[prop],
>+        0.00001,
>+        "value for '" + prop + "' on " + name
>+      );
>+    } else {
>+      assert_equals(
>+        actual[prop],
>+        expected[prop],
>+        `value for '${prop}' on ${name} should match`
>+      );
>+    }
>+  }
>+}
>+
>+/*
>+ * Compare two lists of keyframes
>+ */
>+function assert_frame_lists_equal(actual, expected) {
>+  assert_equals(
>+    actual.length,
>+    expected.length,
>+    'Number of keyframes should match'
>+  );
>+
>+  for (let i = 0; i < actual.length; i++) {
>+    assert_frames_equal(actual[i], expected[i], `Keyframe #${i}`);
>+  }
>+}
>+
> /**
>  * Appends a div to the document body.
>  *
>@@ -142,6 +191,15 @@ function waitForAnimationFrames(frameCount, onFrame) {
>   });
> }
> 
>+/**
>+ * Timeout function used for tests with EventWatchers when all animation events
>+ * should be received on the next animation frame. If two frames pass before
>+ * receiving the expected events, then we can immediate fail the test.
>+ */
>+function fastEventsTimeout() {
>+  return waitForAnimationFrames(2);
>+};
>+
> /**
>  * Wrapper that takes a sequence of N animations and returns:
>  *
>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 eb3db90c0ce7aa3850a52fc2cb597defb924e9b5..b534f2cbc9d47cb9afa39eeeb0875ecd41110bcd 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
>@@ -15,6 +15,7 @@ None
> ------------------------------------------------------------------------
> 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/AnimationEffect-updateTiming.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
>@@ -30,8 +31,13 @@ List of files:
> /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-setKeyframes.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-base-response-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-002.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004.html
> /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
>@@ -41,6 +47,9 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-010.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-011-expected.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-011.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-002.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-iteration-count-calc.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time-expected.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time.html
>diff --git a/LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt b/LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..5c1fec16323ea29e4ab8539a4c41d6f8ba0222ac
>--- /dev/null
>+++ b/LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt
>@@ -0,0 +1,5 @@
>+
>+FAIL em units respond to font-size animation assert_equals: expected "15px" but got "1px"
>+FAIL ex units respond to font-size animation assert_equals: expected "6.703125px" but got "0.4375px"
>+FAIL var() references respond to custom property animation assert_equals: expected "20px" but got "0px"
>+

Flags:

dbates: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 210964: 397444 | 397476 | 397488