Transform misplaces element 50% of the time
https://bugs.webkit.org/show_bug.cgi?id=172300
Source/WebCore:
Reviewed by Simon Fraser.
A hardware-accelerated animation of the transform property
requires layout to happen if it contains a translate operation
using percentages, otherwise it may create an incorrect
animation. The "50% of the time" comes in to play because
the layout timer may sometimes fire before the animation
timer. The test case contains a example that is much more
likely to fail without this fix.
Test: animations/needs-layout.html
* page/animation/CSSAnimationController.cpp:
(WebCore::CSSAnimationControllerPrivate::animationTimerFired): If
we've been told that we need a layout, and we have one pending, then
force it before doing the rest of the animation logic.
(WebCore::CSSAnimationController::updateAnimations): Check if the
CompositeAnimation depends on layout, and tell the private controller
that it should check for the necessity of a layout as the animation
timer fires.
* page/animation/CompositeAnimation.cpp:
(WebCore::CompositeAnimation::animate): Ask the keyframes if this
animation depends on layout.
* page/animation/CompositeAnimation.h:
(WebCore::CompositeAnimation::hasAnimationThatDependsOnLayout):
* page/animation/KeyframeAnimation.cpp:
(WebCore::KeyframeAnimation::KeyframeAnimation):
(WebCore::KeyframeAnimation::computeLayoutDependency): Look at all
the keyframe properties for something that is a translation using
percentages.
* page/animation/KeyframeAnimation.h:
LayoutTests:
<rdar://problem/29835668>
Reviewed by Simon Fraser.
A test case which has an animation that relies on
translation percentages. If all goes well, the
animating element will be completely obscured.
* animations/needs-layout-expected.html: Added.
* animations/needs-layout.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@217075 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/animations/needs-layout-expected.html b/LayoutTests/animations/needs-layout-expected.html
new file mode 100644
index 0000000..24db768
--- /dev/null
+++ b/LayoutTests/animations/needs-layout-expected.html
@@ -0,0 +1,15 @@
+<style>
+ #overlay {
+ position: absolute;
+ left: 100px;
+ top: 100px;
+ width: 200px;
+ height: 200px;
+ transform: translate(100px);
+ background-color: green;
+ }
+</style>
+<body>
+ <div id="overlay"></div>
+</body>
+</html>
\ No newline at end of file
