WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
[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:
Patch
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> >+<!-- TODO: Add a more specific link for this once it is specified. --> >+<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> >+<!-- TODO: Add a more specific link for this once it is specified. --> >+<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" >+
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Flags:
dbates
:
review+
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 210964
:
397444
|
397476
| 397488