haikuwebkit/LayoutTests/animations/needs-layout-expected.html

15 lines
273 B
HTML
Raw Permalink Normal View History

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. Canonical link: https://commits.webkit.org/189217@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@217075 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-05-18 23:22:16 +00:00
<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>