<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[177360] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/177360">177360</a></dd>
<dt>Author</dt> <dd>cdumez@apple.com</dd>
<dt>Date</dt> <dd>2014-12-16 08:12:35 -0800 (Tue, 16 Dec 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>REGRESSION (<a href="http://trac.webkit.org/projects/webkit/changeset/163928">r163928</a>): 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 <a href="http://trac.webkit.org/projects/webkit/changeset/163928">r163928</a>, 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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoredomDocumentcpp">trunk/Source/WebCore/dom/Document.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastimagesanimatedgifwebkittransformexpectedtxt">trunk/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastimagesanimatedgifwebkittransformhtml">trunk/LayoutTests/fast/images/animated-gif-webkit-transform.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (177359 => 177360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-12-16 11:41:22 UTC (rev 177359)
+++ trunk/LayoutTests/ChangeLog 2014-12-16 16:12:35 UTC (rev 177360)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+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.
+
</ins><span class="cx"> 2014-12-15 Dhi Aurrahman <diorahman@rockybars.com>
</span><span class="cx">
</span><span class="cx"> Extend :lang()'s selector checker to handle ranges with '*' properly and perform matching within the ASCII range
</span></span></pre></div>
<a id="trunkLayoutTestsfastimagesanimatedgifwebkittransformexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt (0 => 177360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/images/animated-gif-webkit-transform-expected.txt 2014-12-16 16:12:35 UTC (rev 177360)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastimagesanimatedgifwebkittransformhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/images/animated-gif-webkit-transform.html (0 => 177360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/images/animated-gif-webkit-transform.html (rev 0)
+++ trunk/LayoutTests/fast/images/animated-gif-webkit-transform.html 2014-12-16 16:12:35 UTC (rev 177360)
</span><span class="lines">@@ -0,0 +1,64 @@
</span><ins>+<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>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (177359 => 177360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-12-16 11:41:22 UTC (rev 177359)
+++ trunk/Source/WebCore/ChangeLog 2014-12-16 16:12:35 UTC (rev 177360)
</span><span class="lines">@@ -1,3 +1,28 @@
</span><ins>+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):
+
</ins><span class="cx"> 2014-12-16 Sebastian Dröge <sebastian@centricular.com>
</span><span class="cx">
</span><span class="cx"> [GStreamer] Fix deadlock when shutting down AudioDestination
</span></span></pre></div>
<a id="trunkSourceWebCoredomDocumentcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/dom/Document.cpp (177359 => 177360)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/dom/Document.cpp 2014-12-16 11:41:22 UTC (rev 177359)
+++ trunk/Source/WebCore/dom/Document.cpp 2014-12-16 16:12:35 UTC (rev 177360)
</span><span class="lines">@@ -1815,6 +1815,10 @@
</span><span class="cx">
</span><span class="cx"> InspectorInstrumentation::didRecalculateStyle(cookie);
</span><span class="cx">
</span><ins>+ // Some animated images may now be inside the viewport due to style recalc,
+ // resume them if necessary.
+ frameView.resumeVisibleImageAnimationsIncludingSubframes();
+
</ins><span class="cx"> // As a result of the style recalculation, the currently hovered element might have been
</span><span class="cx"> // detached (for example, by setting display:none in the :hover style), schedule another mouseMove event
</span><span class="cx"> // to check if any other elements ended up under the mouse pointer due to re-layout.
</span></span></pre>
</div>
</div>
</body>
</html>