Diff
Modified: branches/safari-602-branch/LayoutTests/ChangeLog (208330 => 208331)
--- branches/safari-602-branch/LayoutTests/ChangeLog 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/LayoutTests/ChangeLog 2016-11-03 18:04:28 UTC (rev 208331)
@@ -1,3 +1,21 @@
+2016-11-03 Matthew Hanson <matthew_han...@apple.com>
+
+ Merge r208025. rdar://problem/28216240
+
+ 2016-10-27 Simon Fraser <simon.fra...@apple.com>
+
+ If an animation's keyframes affect stacking context properties, create stacking context while the animation is running
+ https://bugs.webkit.org/show_bug.cgi?id=164094
+
+ Reviewed by Dean Jackson.
+
+ * animations/stacking-context-fill-forwards-expected.html: Added.
+ * animations/stacking-context-fill-forwards.html: Added.
+ * animations/stacking-context-not-fill-forwards-expected.html: Added.
+ * animations/stacking-context-not-fill-forwards.html: Added.
+ * animations/stacking-context-unchanged-while-running-expected.html: Added.
+ * animations/stacking-context-unchanged-while-running.html: Added.
+
2016-11-01 Matthew Hanson <matthew_han...@apple.com>
Rollout r208167. rdar://problem/28216240
Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards-expected.html (0 => 208331)
--- branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards-expected.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards-expected.html 2016-11-03 18:04:28 UTC (rev 208331)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ background-color: orange;
+ z-index: 0;
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards.html (0 => 208331)
--- branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards.html 2016-11-03 18:04:28 UTC (rev 208331)
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests that a fill-forwards animation causes stacking context when finished.</title>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ animation: move 0.1s 1 forwards;
+ background-color: orange;
+ }
+
+ @keyframes move {
+ from { transform: translateX(400px); }
+ to { transform: none }
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.addEventListener('load', function() {
+ document.getElementById('animating').addEventListener('animationend', function() {
+ // Wait until filling forwards.
+ window.setTimeout(function() {
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }, 0);
+ })
+ }, false);
+ </script>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html (0 => 208331)
--- branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html 2016-11-03 18:04:28 UTC (rev 208331)
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ background-color: orange;
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards.html (0 => 208331)
--- branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards.html 2016-11-03 18:04:28 UTC (rev 208331)
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests that a non-fill-forwards animation doesn't cause stacking context once finished.</title>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ animation: move 0.1s 1;
+ background-color: orange;
+ }
+
+ @keyframes move {
+ from { transform: translateX(400px); }
+ to { transform: none }
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.addEventListener('load', function() {
+ document.getElementById('animating').addEventListener('animationend', function() {
+ // Wait until filling forwards.
+ window.setTimeout(function() {
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }, 0);
+ })
+ }, false);
+ </script>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html (0 => 208331)
--- branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html 2016-11-03 18:04:28 UTC (rev 208331)
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ background-color: orange;
+ z-index: 0;
+ }
+
+ .behind {
+ background-color: blue;
+ top: 25px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 50px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+</body>
+</html>
Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running.html (0 => 208331)
--- branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running.html 2016-11-03 18:04:28 UTC (rev 208331)
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests that an element with an animation whose keyframes affect stacking context creates stacking context throughout the animation.</title>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ animation: move 2s 1;
+ background-color: orange;
+ }
+
+ @keyframes move {
+ from { z-index: 1; }
+ 10% { z-index: auto; }
+ 90% { z-index: auto; }
+ to { z-index: 2; }
+ }
+
+ .behind {
+ background-color: blue;
+ top: 25px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 50px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+
+ #result {
+ opacity: 0;
+ }
+ </style>
+ <script src="" type="text/_javascript_"></script>
+ <script type="text/_javascript_">
+ const expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["move", 0.5, "animating", "z-index", 0, 0],
+ ];
+
+ var doPixelTest = true;
+ var disablePauseAPI = false;
+ runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
+ </script>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+<div id="result"></div>
+</body>
+</html>
Modified: branches/safari-602-branch/Source/WebCore/ChangeLog (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/ChangeLog 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/ChangeLog 2016-11-03 18:04:28 UTC (rev 208331)
@@ -1,3 +1,48 @@
+2016-11-03 Matthew Hanson <matthew_han...@apple.com>
+
+ Merge r208025. rdar://problem/28216240
+
+ 2016-10-27 Simon Fraser <simon.fra...@apple.com>
+
+ If an animation's keyframes affect stacking context properties, create stacking context while the animation is running
+ https://bugs.webkit.org/show_bug.cgi?id=164094
+
+ Reviewed by Dean Jackson.
+
+ The CSS animations spec <https://drafts.csswg.org/css-animations-1/> now makes it
+ clear that a keyframe animation animating properties which can affect stacking context
+ should establish stacking context while it's running, or filling-forwards. This is part
+ of the "the user agent must act as if the will-change property...includes all the properties
+ animated by the animation" clause.
+
+ Implement by having CompositeAnimation::animate() track whether running animations should
+ create stacking context, replacing existing code in AnimationController::updateAnimations()
+ which only looked at opacity and transform. Transitions are also checked to see if they need
+ to trigger stacking context.
+
+ This allows for the removal of a 0.9999 hack when blending opacity.
+
+ Tests: animations/stacking-context-fill-forwards.html
+ animations/stacking-context-not-fill-forwards.html
+ animations/stacking-context-unchanged-while-running.html
+
+ * page/animation/AnimationController.cpp:
+ (WebCore::AnimationController::updateAnimations):
+ * page/animation/CSSPropertyAnimation.cpp:
+ * page/animation/CompositeAnimation.cpp:
+ (WebCore::CompositeAnimation::animate):
+ * page/animation/KeyframeAnimation.cpp:
+ (WebCore::KeyframeAnimation::KeyframeAnimation):
+ (WebCore::KeyframeAnimation::computeStackingContextImpact):
+ (WebCore::KeyframeAnimation::animate):
+ * page/animation/KeyframeAnimation.h:
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::currentTransform):
+ * rendering/style/WillChangeData.cpp:
+ (WebCore::WillChangeData::propertyCreatesStackingContext):
+ (WebCore::propertyCreatesStackingContext): Deleted.
+ * rendering/style/WillChangeData.h:
+
2016-11-01 Matthew Hanson <matthew_han...@apple.com>
Rollout r208167. rdar://problem/28216240
Modified: branches/safari-602-branch/Source/WebCore/page/animation/AnimationController.cpp (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/page/animation/AnimationController.cpp 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/page/animation/AnimationController.cpp 2016-11-03 18:04:28 UTC (rev 208331)
@@ -624,13 +624,6 @@
#endif
}
- if (animatedStyle) {
- // If the animations/transitions change opacity or transform, we need to update
- // the style to impose the stacking rules. Note that this is also
- // done in StyleResolver::adjustRenderStyle().
- if (animatedStyle->hasAutoZIndex() && (animatedStyle->opacity() < 1.0f || animatedStyle->hasTransform()))
- animatedStyle->setZIndex(0);
- }
return animationStateChanged;
}
Modified: branches/safari-602-branch/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2016-11-03 18:04:28 UTC (rev 208331)
@@ -599,10 +599,7 @@
void blend(const AnimationBase* anim, RenderStyle* dst, const RenderStyle* a, const RenderStyle* b, double progress) const override
{
- float fromOpacity = a->opacity();
-
- // This makes sure we put the object being animated into a RenderLayer during the animation
- dst->setOpacity(blendFunc(anim, (fromOpacity == 1) ? 0.999999f : fromOpacity, b->opacity(), progress));
+ dst->setOpacity(blendFunc(anim, a->opacity(), b->opacity(), progress));
}
};
Modified: branches/safari-602-branch/Source/WebCore/page/animation/CompositeAnimation.cpp (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/page/animation/CompositeAnimation.cpp 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/page/animation/CompositeAnimation.cpp 2016-11-03 18:04:28 UTC (rev 208331)
@@ -292,14 +292,34 @@
m_keyframeAnimations.checkConsistency();
bool animationStateChanged = false;
+ bool forceStackingContext = false;
if (currentStyle) {
// Now that we have transition objects ready, let them know about the new goal state. We want them
// to fill in a RenderStyle*& only if needed.
+ bool checkForStackingContext = false;
for (auto& transition : m_transitions.values()) {
if (transition->animate(this, &renderer, currentStyle, &targetStyle, blendedStyle))
animationStateChanged = true;
+
+ checkForStackingContext |= WillChangeData::propertyCreatesStackingContext(transition->animatingProperty());
}
+
+ if (blendedStyle && checkForStackingContext) {
+ // Note that this is similar to code in StyleResolver::adjustRenderStyle() but only needs to consult
+ // animatable properties that can trigger stacking context.
+ if (blendedStyle->opacity() < 1.0f
+ || blendedStyle->hasTransformRelatedProperty()
+ || blendedStyle->hasMask()
+ || blendedStyle->clipPath()
+ || blendedStyle->boxReflect()
+ || blendedStyle->hasFilter()
+#if ENABLE(FILTERS_LEVEL_2)
+ || blendedStyle->hasBackdropFilter()
+#endif
+ )
+ forceStackingContext = true;
+ }
}
// Now that we have animation objects ready, let them know about the new goal state. We want them
@@ -306,10 +326,24 @@
// to fill in a RenderStyle*& only if needed.
for (auto& name : m_keyframeAnimationOrderMap) {
RefPtr<KeyframeAnimation> keyframeAnim = m_keyframeAnimations.get(name);
- if (keyframeAnim && keyframeAnim->animate(this, &renderer, currentStyle, &targetStyle, blendedStyle))
- animationStateChanged = true;
+ if (keyframeAnim) {
+ if (keyframeAnim->animate(this, &renderer, currentStyle, &targetStyle, blendedStyle))
+ animationStateChanged = true;
+
+ bool runningOrFillingForwards = !keyframeAnim->waitingToStart() && !keyframeAnim->postActive();
+ forceStackingContext |= runningOrFillingForwards && keyframeAnim->triggersStackingContext();
+ }
}
+ // https://drafts.csswg.org/css-animations-1/
+ // While an animation is applied but has not finished, or has finished but has an animation-fill-mode of forwards or both,
+ // the user agent must act as if the will-change property ([css-will-change-1]) on the element additionally
+ // includes all the properties animated by the animation.
+ if (forceStackingContext && blendedStyle) {
+ if (blendedStyle->hasAutoZIndex())
+ blendedStyle->setZIndex(0);
+ }
+
return animationStateChanged;
}
Modified: branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.cpp (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.cpp 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.cpp 2016-11-03 18:04:28 UTC (rev 208331)
@@ -38,6 +38,7 @@
#include "RenderBox.h"
#include "RenderStyle.h"
#include "StyleResolver.h"
+#include "WillChangeData.h"
namespace WebCore {
@@ -56,6 +57,7 @@
#if ENABLE(FILTERS_LEVEL_2)
checkForMatchingBackdropFilterFunctionLists();
#endif
+ computeStackingContextImpact();
}
KeyframeAnimation::~KeyframeAnimation()
@@ -65,6 +67,16 @@
endAnimation();
}
+void KeyframeAnimation::computeStackingContextImpact()
+{
+ for (auto propertyID : m_keyframes.properties()) {
+ if (WillChangeData::propertyCreatesStackingContext(propertyID)) {
+ m_triggersStackingContext = true;
+ break;
+ }
+ }
+}
+
void KeyframeAnimation::fetchIntervalEndpointsForProperty(CSSPropertyID property, const RenderStyle*& fromStyle, const RenderStyle*& toStyle, double& prog) const
{
size_t numKeyframes = m_keyframes.size();
@@ -148,6 +160,7 @@
return false;
}
+ // FIXME: the code below never changes the state, so this function always returns false.
AnimationState oldState = state();
// Run a cycle of animation.
Modified: branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.h (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.h 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.h 2016-11-03 18:04:28 UTC (rev 208331)
@@ -55,6 +55,8 @@
const AtomicString& name() const { return m_keyframes.animationName(); }
bool hasAnimationForProperty(CSSPropertyID) const;
+
+ bool triggersStackingContext() const { return m_triggersStackingContext; }
void setUnanimatedStyle(std::unique_ptr<RenderStyle> style) { m_unanimatedStyle = WTFMove(style); }
RenderStyle* unanimatedStyle() const { return m_unanimatedStyle.get(); }
@@ -81,6 +83,7 @@
bool computeExtentOfAnimationForMatchingTransformLists(const FloatRect& rendererBox, LayoutRect&) const;
+ void computeStackingContextImpact();
void validateTransformFunctionList();
void checkForMatchingFilterFunctionLists();
#if ENABLE(FILTERS_LEVEL_2)
@@ -98,6 +101,7 @@
std::unique_ptr<RenderStyle> m_unanimatedStyle; // The style just before we started animation
bool m_startEventDispatched { false };
+ bool m_triggersStackingContext { false };
};
} // namespace WebCore
Modified: branches/safari-602-branch/Source/WebCore/rendering/RenderLayer.cpp (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/rendering/RenderLayer.cpp 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/rendering/RenderLayer.cpp 2016-11-03 18:04:28 UTC (rev 208331)
@@ -995,6 +995,7 @@
RenderBox* box = renderBox();
ASSERT(box);
+ // FIXME: replace with call to AnimationController::isRunningAcceleratedAnimationOnRenderer() and remove RenderStyle::isRunningAcceleratedAnimation().
if (renderer().style().isRunningAcceleratedAnimation()) {
TransformationMatrix currTransform;
FloatRect pixelSnappedBorderRect = snapRectToDevicePixels(box->borderBoxRect(), box->document().deviceScaleFactor());
Modified: branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.cpp (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.cpp 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.cpp 2016-11-03 18:04:28 UTC (rev 208331)
@@ -62,7 +62,7 @@
// "If any non-initial value of a property would create a stacking context on the element,
// specifying that property in will-change must create a stacking context on the element."
-static bool propertyCreatesStackingContext(CSSPropertyID property)
+bool WillChangeData::propertyCreatesStackingContext(CSSPropertyID property)
{
switch (property) {
case CSSPropertyPerspective:
Modified: branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.h (208330 => 208331)
--- branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.h 2016-11-03 17:47:37 UTC (rev 208330)
+++ branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.h 2016-11-03 18:04:28 UTC (rev 208331)
@@ -70,6 +70,8 @@
typedef std::pair<Feature, CSSPropertyID> FeaturePropertyPair;
FeaturePropertyPair featureAt(size_t) const;
+ static bool propertyCreatesStackingContext(CSSPropertyID);
+
private:
WillChangeData()
{
