Images in feed on ebay.com jiggle when one is hovered
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 18 Mar 2016 01:53:58 +0000 (01:53 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 18 Mar 2016 01:53:58 +0000 (01:53 +0000)
https://bugs.webkit.org/show_bug.cgi?id=155608
<rdar://problem/25160681>

The content offset in compositing layer = subpixel gap between the graphics layer and the layer bounds + layer bounds top left.

Reviewed by Simon Fraser.

Source/WebCore:

Test: compositing/hidpi-viewport-clipping-on-composited-content.html

* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::updateGeometry):
(WebCore::RenderLayerBacking::contentOffsetInCompostingLayer):
* rendering/RenderLayerBacking.h:

LayoutTests:

* compositing/hidpi-viewport-clipping-on-composited-content-expected.html: Added.
* compositing/hidpi-viewport-clipping-on-composited-content.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@198374 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/compositing/hidpi-viewport-clipping-on-composited-content-expected.html [new file with mode: 0644]
LayoutTests/compositing/hidpi-viewport-clipping-on-composited-content.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderLayerBacking.cpp
Source/WebCore/rendering/RenderLayerBacking.h

index 2b41ee6..c0a8f28 100644 (file)
@@ -1,5 +1,18 @@
 2016-03-17  Zalan Bujtas  <zalan@apple.com>
 
+        Images in feed on ebay.com jiggle when one is hovered
+        https://bugs.webkit.org/show_bug.cgi?id=155608
+        <rdar://problem/25160681>
+
+        The content offset in compositing layer = subpixel gap between the graphics layer and the layer bounds + layer bounds top left.
+
+        Reviewed by Simon Fraser.
+
+        * compositing/hidpi-viewport-clipping-on-composited-content-expected.html: Added.
+        * compositing/hidpi-viewport-clipping-on-composited-content.html: Added.
+
+2016-03-17  Zalan Bujtas  <zalan@apple.com>
+
         Don't initiate a style recall while drawing text 
         https://bugs.webkit.org/show_bug.cgi?id=155618
 
diff --git a/LayoutTests/compositing/hidpi-viewport-clipping-on-composited-content-expected.html b/LayoutTests/compositing/hidpi-viewport-clipping-on-composited-content-expected.html
new file mode 100644 (file)
index 0000000..58bdce2
--- /dev/null
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that we position composited content properly when they are clipped to the viewport.</title>
+<style>
+    .jiggle {
+        width: 20px;
+        height: 5px;
+        position: absolute;
+        background: green;
+    }
+</style>
+</head>
+<body>
+<script>
+var leftPos = 0;
+for (i = 0; i < 50; ++i) {
+    var element = document.createElement("div");
+    element.className = "jiggle";
+    element.style.top = (6 * i) + "px";
+    element.style.left = leftPos + "px";
+       document.body.appendChild(element);
+       leftPos -= 0.1;
+}
+</script>
+</html>
diff --git a/LayoutTests/compositing/hidpi-viewport-clipping-on-composited-content.html b/LayoutTests/compositing/hidpi-viewport-clipping-on-composited-content.html
new file mode 100644 (file)
index 0000000..dd84b99
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that we position composited content properly when they are clipped to the viewport.</title>
+<style>
+    .jiggle {
+        width: 20px;
+        height: 5px;
+        position: absolute;
+        background: green;
+    }
+
+    .overlapping {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 10px;
+        height: 300px;
+        -webkit-transform: translateZ(0);
+    }
+</style>
+</head>
+<body>
+<div class=overlapping></div>
+<script>
+var leftPos = 0;
+for (i = 0; i < 50; ++i) {
+    var element = document.createElement("div");
+    element.className = "jiggle";
+    element.style.top = (6 * i) + "px";
+    element.style.left = leftPos + "px";
+       document.body.appendChild(element);
+       leftPos -= 0.1;
+}
+</script>
+</html>
index 4d1344c..e290212 100644 (file)
@@ -1,5 +1,22 @@
 2016-03-17  Zalan Bujtas  <zalan@apple.com>
 
+        Images in feed on ebay.com jiggle when one is hovered
+        https://bugs.webkit.org/show_bug.cgi?id=155608
+        <rdar://problem/25160681>
+
+        The content offset in compositing layer = subpixel gap between the graphics layer and the layer bounds + layer bounds top left.
+
+        Reviewed by Simon Fraser.
+
+        Test: compositing/hidpi-viewport-clipping-on-composited-content.html
+
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::updateGeometry):
+        (WebCore::RenderLayerBacking::contentOffsetInCompostingLayer):
+        * rendering/RenderLayerBacking.h:
+
+2016-03-17  Zalan Bujtas  <zalan@apple.com>
+
         Don't initiate a style recall while drawing text 
         https://bugs.webkit.org/show_bug.cgi?id=155618
 
index 65e4d0c..e04aed6 100644 (file)
@@ -785,8 +785,8 @@ void RenderLayerBacking::updateGeometry()
     relativeCompositingBounds.moveBy(offsetFromParent);
 
     LayoutRect enclosingRelativeCompositingBounds = LayoutRect(encloseRectToDevicePixels(relativeCompositingBounds, deviceScaleFactor));
-    LayoutSize subpixelOffsetAdjustment = enclosingRelativeCompositingBounds.location() - relativeCompositingBounds.location();
-    LayoutSize rendererOffsetFromGraphicsLayer =  toLayoutSize(localCompositingBounds.location()) + subpixelOffsetAdjustment;
+    m_compositedBoundsDeltaFromGraphicsLayer = enclosingRelativeCompositingBounds.location() - relativeCompositingBounds.location();
+    LayoutSize rendererOffsetFromGraphicsLayer =  toLayoutSize(localCompositingBounds.location()) + m_compositedBoundsDeltaFromGraphicsLayer;
 
     FloatSize devicePixelOffsetFromRenderer;
     LayoutSize devicePixelFractionFromRenderer;
@@ -2093,7 +2093,7 @@ FloatPoint3D RenderLayerBacking::computeTransformOriginForPainting(const LayoutR
 // Return the offset from the top-left of this compositing layer at which the renderer's contents are painted.
 LayoutSize RenderLayerBacking::contentOffsetInCompostingLayer() const
 {
-    return LayoutSize(-m_compositedBounds.x(), -m_compositedBounds.y()) + m_devicePixelFractionFromRenderer;
+    return LayoutSize(-m_compositedBounds.x() - m_compositedBoundsDeltaFromGraphicsLayer.width(), -m_compositedBounds.y() - m_compositedBoundsDeltaFromGraphicsLayer.height());
 }
 
 LayoutRect RenderLayerBacking::contentsBox() const
index 119852e..1c93fab 100644 (file)
@@ -367,6 +367,7 @@ private:
 
     LayoutRect m_compositedBounds;
     LayoutSize m_devicePixelFractionFromRenderer;
+    LayoutSize m_compositedBoundsDeltaFromGraphicsLayer; // This is the (subpixel) distance between the edge of the graphics layer and the layer bounds.
 
     bool m_artificiallyInflatedBounds; // bounds had to be made non-zero to make transform-origin work
     bool m_isMainFrameRenderViewLayer;