Merge r177360 - REGRESSION (r163928): Animated GIFs are not resumed w…

…hen translated into view using -webkit-transform https://bugs.webkit.org/show_bug.cgi?id=139672 <rdar://problem/19260797> Reviewed by Antti Koivisto. Source/WebCore: After r163928, animated GIFs were not resumed when translated into view using '-webkit-transform' CSS property. This broke animated gifs on the mobile version of weibo.com (which is one of the most popular blogging sites in China) on iPhone. e.g. http://m.weibo.cn/page/tpl?containerid=1005052150182731_-_WEIBO_SECOND_PROFILE_WEIBO&itemid=&title=全部微博 This patch calls FrameView::resumeVisibleImageAnimationsIncludingSubframes() after style recalc so that we resume animated images if they become visible after the style has changed. Doing so after layout wouldn't work because no layout happens in this case. Test: fast/images/animated-gif-webkit-transform.html * dom/Document.cpp: (WebCore::Document::recalcStyle): LayoutTests: Add a layout test to verity that animated images are properly paused / resumed when translated in and out of view using '-webkit-transform' CSS property. * fast/images/animated-gif-webkit-transform-expected.txt: Added. * fast/images/animated-gif-webkit-transform.html: Added. Canonical link: https://commits.webkit.org/154760.287@webkitgtk/2.6 git-svn-id: https://svn.webkit.org/repository/webkit/releases/WebKitGTK/webkit-2.6@178357 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Jan 13, 2015 · f99ada8 · f99ada8
1 parent e1eb788
commit f99ada8
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 0 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,18 @@
+2014-12-16  Chris Dumez  <cdumez@apple.com>
+
+        REGRESSION (r163928): Animated GIFs are not resumed when translated into view using -webkit-transform
+        https://bugs.webkit.org/show_bug.cgi?id=139672
+        <rdar://problem/19260797>
+
+        Reviewed by Antti Koivisto.
+
+        Add a layout test to verity that animated images are properly paused /
+        resumed when translated in and out of view using '-webkit-transform'
+        CSS property.
+
+        * fast/images/animated-gif-webkit-transform-expected.txt: Added.
+        * fast/images/animated-gif-webkit-transform.html: Added.
+
 2014-12-14  Ryosuke Niwa  <rniwa@webkit.org>
 
         REGRESSION(r160182): Fragment parser doesn't close a form element with a close tag

diff --git a/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt b/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt
@@ -0,0 +1,18 @@
+Test that animated images are correctly paused / resumed when translated in and out of view using -webkit-transform.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS isFirstImagePaused() is false
+PASS isSecondImagePaused() became true
+PASS isFirstImagePaused() is false
+Translating images left so that first image is no longer visible, but second image is.
+PASS isFirstImagePaused() became true
+PASS isSecondImagePaused() became false
+Translating images right so that second image is no longer visible, but first image is.
+PASS isFirstImagePaused() became false
+PASS isSecondImagePaused() became true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/images/animated-gif-webkit-transform.html b/LayoutTests/fast/images/animated-gif-webkit-transform.html
@@ -0,0 +1,64 @@
+<DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body onload="runTest()">
+<div id="scroller" style="width: 800px; overflow: hidden">
+    <div id="scroller-cont" style="height: 245px; width: 1600px; position: relative; top: 0; left: 0; -webkit-transform: translate(0px, 0px) translateZ(0px);">
+        <div id="wrapper1" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 800px; height: 245px; float: left; margin: 0; padding: 0">
+            <img id="a" src="resources/animated.gif"/>
+        </div>
+        <div id="wrapper2" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 800px; height: 245px; float: left; margin: 0; padding: 0">
+            <img id="b" src="resources/animated-10color.gif"/>
+        </div>
+    </div>
+</div>
+<script>
+description("Test that animated images are correctly paused / resumed when translated in and out of view using -webkit-transform.");
+jsTestIsAsync = true;
+
+function isFirstImagePaused() {
+  return internals.hasPausedImageAnimations(document.getElementById('a'));
+}
+
+function isSecondImagePaused() {
+  return internals.hasPausedImageAnimations(document.getElementById('b'));
+}
+
+function forceLayout() {
+  document.getElementById("scroller-cont").offsetLeft;
+}
+
+function checkSecondImageUnpaused() {
+  shouldBecomeEqual("isSecondImagePaused()", "false", translateImagesRight);
+}
+
+function checkSecondImagePaused() {
+  shouldBecomeEqual("isSecondImagePaused()", "true", finishJSTest);
+}
+
+function translateImagesLeft() {
+  shouldBeFalse("isFirstImagePaused()");
+  debug("Translating images left so that first image is no longer visible, but second image is.");
+  forceLayout();
+  document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(-800px, 0px)";
+  shouldBecomeEqual("isFirstImagePaused()", "true", checkSecondImageUnpaused);
+}
+
+function translateImagesRight() {
+  debug("Translating images right so that second image is no longer visible, but first image is.");
+  forceLayout();
+  document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(0px, 0px)";
+  shouldBecomeEqual("isFirstImagePaused()", "false", checkSecondImagePaused);
+}
+
+function runTest() {
+  shouldBeFalse("isFirstImagePaused()");
+  shouldBecomeEqual("isSecondImagePaused()", "true", translateImagesLeft);
+}
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,28 @@
+2014-12-16  Chris Dumez  <cdumez@apple.com>
+
+        REGRESSION (r163928): Animated GIFs are not resumed when translated into view using -webkit-transform
+        https://bugs.webkit.org/show_bug.cgi?id=139672
+        <rdar://problem/19260797>
+
+        Reviewed by Antti Koivisto.
+
+        After r163928, animated GIFs were not resumed when translated into view
+        using '-webkit-transform' CSS property.
+
+        This broke animated gifs on the mobile version of weibo.com (which is
+        one of the most popular blogging sites in China) on iPhone. e.g.
+        http://m.weibo.cn/page/tpl?containerid=1005052150182731_-_WEIBO_SECOND_PROFILE_WEIBO&itemid=&title=全部微博
+
+        This patch calls FrameView::resumeVisibleImageAnimationsIncludingSubframes()
+        after style recalc so that we resume animated images if they become visible
+        after the style has changed. Doing so after layout wouldn't work because
+        no layout happens in this case.
+
+        Test: fast/images/animated-gif-webkit-transform.html
+
+        * dom/Document.cpp:
+        (WebCore::Document::recalcStyle):
+
 2014-12-12  Simon Fraser  <simon.fraser@apple.com>
 
         REGRESSION (r168217): Images are cropped out during animation at jetblue.com

diff --git a/Source/WebCore/dom/Document.cpp b/Source/WebCore/dom/Document.cpp
@@ -1817,6 +1817,10 @@ void Document::recalcStyle(Style::Change change)
 
     InspectorInstrumentation::didRecalculateStyle(cookie);
 
+    // Some animated images may now be inside the viewport due to style recalc,
+    // resume them if necessary.
+    frameView.resumeVisibleImageAnimationsIncludingSubframes();
+
     // As a result of the style recalculation, the currently hovered element might have been
     // detached (for example, by setting display:none in the :hover style), schedule another mouseMove event
     // to check if any other elements ended up under the mouse pointer due to re-layout.