<!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>[206483] 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/206483">206483</a></dd>
<dt>Author</dt> <dd>zalan@apple.com</dd>
<dt>Date</dt> <dd>2016-09-27 18:17:17 -0700 (Tue, 27 Sep 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>REGRESSION (<a href="http://trac.webkit.org/projects/webkit/changeset/204552">r204552</a>): Yelp carousel animation is not smooth.
https://bugs.webkit.org/show_bug.cgi?id=162632
Reviewed by Simon Fraser.
Source/WebCore:
For composited state changes when the layers don't need rebuilding, the updateGeometry() traversal
is post-order (see webkit.org/162634), so we can't rely on the offsetfromRenderer() value when
computing the graphics layer position on the descendants. We need this workaround until after webkit.org/162634
gets fixed.
Tests: compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html
compositing/hidpi-negative-composited-bounds-on-device-pixel.html
* rendering/RenderLayerBacking.cpp:
(WebCore::computeOffsetFromAncestorGraphicsLayer):
(WebCore::ComputedOffsets::ComputedOffsets):
(WebCore::ComputedOffsets::fromAncestorGraphicsLayer):
(WebCore::RenderLayerBacking::computeParentGraphicsLayerRect):
LayoutTests:
* compositing/hidpi-composited-container-and-graphics-layer-gap-changes-expected.html: Added.
* compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html: Added.
* compositing/hidpi-negative-composited-bounds-on-device-pixel-expected.html: Added.
* compositing/hidpi-negative-composited-bounds-on-device-pixel.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="#trunkSourceWebCorerenderingRenderLayerBackingcpp">trunk/Source/WebCore/rendering/RenderLayerBacking.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscompositinghidpicompositedcontainerandgraphicslayergapchangesexpectedhtml">trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes-expected.html</a></li>
<li><a href="#trunkLayoutTestscompositinghidpicompositedcontainerandgraphicslayergapchangeshtml">trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html</a></li>
<li><a href="#trunkLayoutTestscompositinghidpinegativecompositedboundsondevicepixelexpectedhtml">trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel-expected.html</a></li>
<li><a href="#trunkLayoutTestscompositinghidpinegativecompositedboundsondevicepixelhtml">trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (206482 => 206483)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-09-28 01:11:07 UTC (rev 206482)
+++ trunk/LayoutTests/ChangeLog 2016-09-28 01:17:17 UTC (rev 206483)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2016-09-27 Zalan Bujtas <zalan@apple.com>
+
+ REGRESSION (r204552): Yelp carousel animation is not smooth.
+ https://bugs.webkit.org/show_bug.cgi?id=162632
+
+ Reviewed by Simon Fraser.
+
+ * compositing/hidpi-composited-container-and-graphics-layer-gap-changes-expected.html: Added.
+ * compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html: Added.
+ * compositing/hidpi-negative-composited-bounds-on-device-pixel-expected.html: Added.
+ * compositing/hidpi-negative-composited-bounds-on-device-pixel.html: Added.
+
</ins><span class="cx"> 2016-09-27 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> <a download> does not honor the same-origin requirement
</span></span></pre></div>
<a id="trunkLayoutTestscompositinghidpicompositedcontainerandgraphicslayergapchangesexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes-expected.html (0 => 206483)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes-expected.html (rev 0)
+++ trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes-expected.html 2016-09-28 01:17:17 UTC (rev 206483)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests when the gap between the graphics layer and its associated renderer changes dynamically.</title>
+<style>
+div {
+ width: 20px;
+ height: 20px;
+ background-color: green;
+ position: absolute;
+}
+</style>
+</head>
+<body>
+<p id="container"></p>
+<script>
+ var subpixel = 0;
+ var container = document.getElementById("container");
+ for (i = 0; i < 20; ++i) {
+ for (j = 0; j < 20; ++j) {
+ var outer = document.createElement("div");
+ outer.style.top = 25 * i + subpixel + "px";
+ outer.style.left = 25 * j + subpixel + "px";
+ container.appendChild(outer);
+ subpixel += 0.1;
+ }
+ }
+</script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestscompositinghidpicompositedcontainerandgraphicslayergapchangeshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html (0 => 206483)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html (rev 0)
+++ trunk/LayoutTests/compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html 2016-09-28 01:17:17 UTC (rev 206483)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests when the gap between the graphics layer and its associated renderer changes dynamically.</title>
+<style>
+div {
+ transform: translateZ(0);
+ width: 20px;
+ height: 20px;
+ background-color: green;
+ position: absolute;
+}
+
+.boxShadow {
+ background-color: yellow;
+}
+</style>
+<script>
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ function runTest() {
+ setTimeout(function() {
+ var elements = document.getElementsByClassName("boxShadow")
+ for (var i = 0; i < elements.length; ++i)
+ elements[i].style.boxShadow = "0px 0px 10px transparent";
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }, 0);
+ }
+</script>
+</head>
+<body onload="runTest()">
+<p id="container"></p>
+<script>
+ var subpixel = 0;
+ var container = document.getElementById("container");
+ for (i = 0; i < 20; ++i) {
+ for (j = 0; j < 20; ++j) {
+ var outer = document.createElement("div");
+ outer.style.top = 25 * i + subpixel + "px";
+ outer.style.left = 25 * j + subpixel + "px";
+ outer.className = "boxShadow";
+ outer.appendChild(document.createElement("div"));
+ container.appendChild(outer);
+ subpixel += 0.1;
+ }
+ }
+</script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestscompositinghidpinegativecompositedboundsondevicepixelexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel-expected.html (0 => 206483)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel-expected.html (rev 0)
+++ trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel-expected.html 2016-09-28 01:17:17 UTC (rev 206483)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests when the composited bounds lands on device pixel.</title>
+<style>
+.container {
+ position: absolute;
+ background-color: green;
+ width: 50px;
+ height: 50px;
+ left: 10.1px;
+ top: 10.1px;
+}
+
+.offset {
+ background-color: blue;
+ width: 10px;
+ height: 10px;
+ left: -0.6px;
+ top: -0.7px;
+ position: relative;
+ }
+
+.jiggle {
+ height: 30px;
+ width: 30px;
+ background-color: red;
+}
+</style>
+</head>
+<body>
+<div class=container>
+ <div class=offset></div>
+ <div class=jiggle></div>
+</div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestscompositinghidpinegativecompositedboundsondevicepixelhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel.html (0 => 206483)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel.html (rev 0)
+++ trunk/LayoutTests/compositing/hidpi-negative-composited-bounds-on-device-pixel.html 2016-09-28 01:17:17 UTC (rev 206483)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests when the composited bounds lands on device pixel.</title>
+<style>
+.container {
+ position: absolute;
+ background-color: green;
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ left: 10.1px;
+ top: 10.1px;
+}
+
+.offset {
+ background-color: blue;
+ width: 10px;
+ height: 10px;
+ left: -0.6px;
+ top: -0.7px;
+ position: relative;
+ }
+
+.jiggle {
+ height: 30px;
+ width: 30px;
+ background-color: red;
+ transform: translateZ(0);
+}
+</style>
+</head>
+<body>
+<div class=container>
+ <div class=offset></div>
+ <div class=jiggle></div>
+</div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (206482 => 206483)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-09-28 01:11:07 UTC (rev 206482)
+++ trunk/Source/WebCore/ChangeLog 2016-09-28 01:17:17 UTC (rev 206483)
</span><span class="lines">@@ -1,3 +1,24 @@
</span><ins>+2016-09-27 Zalan Bujtas <zalan@apple.com>
+
+ REGRESSION (r204552): Yelp carousel animation is not smooth.
+ https://bugs.webkit.org/show_bug.cgi?id=162632
+
+ Reviewed by Simon Fraser.
+
+ For composited state changes when the layers don't need rebuilding, the updateGeometry() traversal
+ is post-order (see webkit.org/162634), so we can't rely on the offsetfromRenderer() value when
+ computing the graphics layer position on the descendants. We need this workaround until after webkit.org/162634
+ gets fixed.
+
+ Tests: compositing/hidpi-composited-container-and-graphics-layer-gap-changes.html
+ compositing/hidpi-negative-composited-bounds-on-device-pixel.html
+
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::computeOffsetFromAncestorGraphicsLayer):
+ (WebCore::ComputedOffsets::ComputedOffsets):
+ (WebCore::ComputedOffsets::fromAncestorGraphicsLayer):
+ (WebCore::RenderLayerBacking::computeParentGraphicsLayerRect):
+
</ins><span class="cx"> 2016-09-27 Said Abou-Hallawa <sabouhallawa@apple.com>
</span><span class="cx">
</span><span class="cx"> Move caching the ImageFrame from BitmapImage to ImageSource
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayerBackingcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayerBacking.cpp (206482 => 206483)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2016-09-28 01:11:07 UTC (rev 206482)
+++ trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2016-09-28 01:17:17 UTC (rev 206483)
</span><span class="lines">@@ -740,14 +740,18 @@
</span><span class="cx"> return snappedGraphicsLayer;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static LayoutSize computeOffsetFromAncestorGraphicsLayer(RenderLayer* compositedAncestor, const LayoutPoint& location)
</del><ins>+static LayoutSize computeOffsetFromAncestorGraphicsLayer(RenderLayer* compositedAncestor, const LayoutPoint& location, float deviceScaleFactor)
</ins><span class="cx"> {
</span><span class="cx"> if (!compositedAncestor)
</span><span class="cx"> return toLayoutSize(location);
</span><span class="cx">
</span><del>- LayoutSize ancestorRenderLayerOffsetFromAncestorGraphicsLayer = -(LayoutSize(compositedAncestor->backing()->graphicsLayer()->offsetFromRenderer())
- + compositedAncestor->backing()->subpixelOffsetFromRenderer());
- return ancestorRenderLayerOffsetFromAncestorGraphicsLayer + toLayoutSize(location);
</del><ins>+ // FIXME: This is a workaround until after webkit.org/162634 gets fixed. ancestorSubpixelOffsetFromRenderer
+ // could be stale when a dynamic composited state change triggers a pre-order updateGeometry() traversal.
+ LayoutSize ancestorSubpixelOffsetFromRenderer = compositedAncestor->backing()->subpixelOffsetFromRenderer();
+ LayoutRect ancestorCompositedBounds = compositedAncestor->backing()->compositedBounds();
+ LayoutSize floored = toLayoutSize(LayoutPoint(floorPointToDevicePixels(ancestorCompositedBounds.location() - ancestorSubpixelOffsetFromRenderer, deviceScaleFactor)));
+ LayoutSize ancestorRendererOffsetFromAncestorGraphicsLayer = -(floored + ancestorSubpixelOffsetFromRenderer);
+ return ancestorRendererOffsetFromAncestorGraphicsLayer + toLayoutSize(location);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> class ComputedOffsets {
</span><span class="lines">@@ -757,6 +761,7 @@
</span><span class="cx"> , m_location(localRect.location())
</span><span class="cx"> , m_parentGraphicsLayerOffset(toLayoutSize(parentGraphicsLayerRect.location()))
</span><span class="cx"> , m_primaryGraphicsLayerOffset(toLayoutSize(primaryGraphicsLayerRect.location()))
</span><ins>+ , m_deviceScaleFactor(renderLayer.renderer().document().deviceScaleFactor())
</ins><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -780,7 +785,7 @@
</span><span class="cx"> if (!m_fromAncestorGraphicsLayer) {
</span><span class="cx"> RenderLayer* compositedAncestor = m_renderLayer.ancestorCompositingLayer();
</span><span class="cx"> LayoutPoint localPointInAncestorRenderLayerCoords = m_renderLayer.convertToLayerCoords(compositedAncestor, m_location, RenderLayer::AdjustForColumns);
</span><del>- m_fromAncestorGraphicsLayer = computeOffsetFromAncestorGraphicsLayer(compositedAncestor, localPointInAncestorRenderLayerCoords);
</del><ins>+ m_fromAncestorGraphicsLayer = computeOffsetFromAncestorGraphicsLayer(compositedAncestor, localPointInAncestorRenderLayerCoords, m_deviceScaleFactor);
</ins><span class="cx"> }
</span><span class="cx"> return m_fromAncestorGraphicsLayer.value();
</span><span class="cx"> }
</span><span class="lines">@@ -794,6 +799,7 @@
</span><span class="cx"> const LayoutPoint m_location;
</span><span class="cx"> const LayoutSize m_parentGraphicsLayerOffset;
</span><span class="cx"> const LayoutSize m_primaryGraphicsLayerOffset;
</span><ins>+ float m_deviceScaleFactor;
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> LayoutRect RenderLayerBacking::computePrimaryGraphicsLayerRect(const LayoutRect& parentGraphicsLayerRect) const
</span><span class="lines">@@ -821,7 +827,7 @@
</span><span class="cx"> if (ancestorBackingLayer->hasClippingLayer()) {
</span><span class="cx"> // If the compositing ancestor has a layer to clip children, we parent in that, and therefore position relative to it.
</span><span class="cx"> LayoutRect clippingBox = clipBox(downcast<RenderBox>(compositedAncestor->renderer()));
</span><del>- LayoutSize clippingBoxOffset = computeOffsetFromAncestorGraphicsLayer(compositedAncestor, clippingBox.location());
</del><ins>+ LayoutSize clippingBoxOffset = computeOffsetFromAncestorGraphicsLayer(compositedAncestor, clippingBox.location(), deviceScaleFactor());
</ins><span class="cx"> parentGraphicsLayerRect = snappedGraphicsLayer(clippingBoxOffset, clippingBox.size(), deviceScaleFactor()).m_snappedRect;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -850,7 +856,7 @@
</span><span class="cx"> RenderLayer::ClipRectsContext clipRectsContext(compositedAncestor, TemporaryClipRects, IgnoreOverlayScrollbarSize, shouldRespectOverflowClip);
</span><span class="cx"> LayoutRect parentClipRect = m_owningLayer.backgroundClipRect(clipRectsContext).rect(); // FIXME: Incorrect for CSS regions.
</span><span class="cx"> ASSERT(!parentClipRect.isInfinite());
</span><del>- LayoutSize clippingOffset = computeOffsetFromAncestorGraphicsLayer(compositedAncestor, parentClipRect.location());
</del><ins>+ LayoutSize clippingOffset = computeOffsetFromAncestorGraphicsLayer(compositedAncestor, parentClipRect.location(), deviceScaleFactor());
</ins><span class="cx"> LayoutRect snappedClippingLayerRect = snappedGraphicsLayer(clippingOffset, parentClipRect.size(), deviceScaleFactor()).m_snappedRect;
</span><span class="cx"> // The primary layer is then parented in, and positioned relative to this clipping layer.
</span><span class="cx"> ancestorClippingLayerOffset = snappedClippingLayerRect.location() - parentGraphicsLayerRect.location();
</span></span></pre>
</div>
</div>
</body>
</html>