- Revision
- 178357
- Author
- [email protected]
- Date
- 2015-01-13 03:55:37 -0800 (Tue, 13 Jan 2015)
Log Message
Merge r177360 - 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.
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.
Modified Paths
Added Paths
Diff
Modified: releases/WebKitGTK/webkit-2.6/LayoutTests/ChangeLog (178356 => 178357)
--- releases/WebKitGTK/webkit-2.6/LayoutTests/ChangeLog 2015-01-13 11:50:53 UTC (rev 178356)
+++ releases/WebKitGTK/webkit-2.6/LayoutTests/ChangeLog 2015-01-13 11:55:37 UTC (rev 178357)
@@ -1,3 +1,18 @@
+2014-12-16 Chris Dumez <[email protected]>
+
+ 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 <[email protected]>
REGRESSION(r160182): Fragment parser doesn't close a form element with a close tag
Added: releases/WebKitGTK/webkit-2.6/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt (0 => 178357)
--- releases/WebKitGTK/webkit-2.6/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt (rev 0)
+++ releases/WebKitGTK/webkit-2.6/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt 2015-01-13 11:55:37 UTC (rev 178357)
@@ -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
+
Added: releases/WebKitGTK/webkit-2.6/LayoutTests/fast/images/animated-gif-webkit-transform.html (0 => 178357)
--- releases/WebKitGTK/webkit-2.6/LayoutTests/fast/images/animated-gif-webkit-transform.html (rev 0)
+++ releases/WebKitGTK/webkit-2.6/LayoutTests/fast/images/animated-gif-webkit-transform.html 2015-01-13 11:55:37 UTC (rev 178357)
@@ -0,0 +1,64 @@
+<DOCTYPE html>
+<html>
+<head>
+<script src=""
+</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=""
+ </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=""
+ </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=""
+</body>
+</html>
Modified: releases/WebKitGTK/webkit-2.6/Source/WebCore/ChangeLog (178356 => 178357)
--- releases/WebKitGTK/webkit-2.6/Source/WebCore/ChangeLog 2015-01-13 11:50:53 UTC (rev 178356)
+++ releases/WebKitGTK/webkit-2.6/Source/WebCore/ChangeLog 2015-01-13 11:55:37 UTC (rev 178357)
@@ -1,3 +1,28 @@
+2014-12-16 Chris Dumez <[email protected]>
+
+ 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 <[email protected]>
REGRESSION (r168217): Images are cropped out during animation at jetblue.com
Modified: releases/WebKitGTK/webkit-2.6/Source/WebCore/dom/Document.cpp (178356 => 178357)
--- releases/WebKitGTK/webkit-2.6/Source/WebCore/dom/Document.cpp 2015-01-13 11:50:53 UTC (rev 178356)
+++ releases/WebKitGTK/webkit-2.6/Source/WebCore/dom/Document.cpp 2015-01-13 11:55:37 UTC (rev 178357)
@@ -1817,6 +1817,10 @@
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.
