Images on www.fitstylelife.com jiggle on hover.
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 May 2015 05:09:46 +0000 (05:09 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 May 2015 05:09:46 +0000 (05:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=145020
rdar://problem/20885337

Reviewed by Simon Fraser.

This patch ensures that the clipping layer of a composited content is pixel snapped properly.

Source/WebCore:

Tests: compositing/composited-parent-clipping-layer-on-subpixel-position.html
       compositing/parent-clipping-layer-on-subpixel-position.html

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

LayoutTests:

* compositing/composited-parent-clipping-layer-on-subpixel-position-expected.html: Added.
* compositing/composited-parent-clipping-layer-on-subpixel-position.html: Added.
* compositing/parent-clipping-layer-on-subpixel-position-expected.html: Added.
* compositing/parent-clipping-layer-on-subpixel-position.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/compositing/composited-parent-clipping-layer-on-subpixel-position-expected.html [new file with mode: 0644]
LayoutTests/compositing/composited-parent-clipping-layer-on-subpixel-position.html [new file with mode: 0644]
LayoutTests/compositing/parent-clipping-layer-on-subpixel-position-expected.html [new file with mode: 0644]
LayoutTests/compositing/parent-clipping-layer-on-subpixel-position.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderLayerBacking.cpp

index d004a7c28b9ece155749e5604284e0b70243ab6e..26c147b8622353338993d9a603e63c8d9d696edd 100644 (file)
@@ -1,3 +1,18 @@
+2015-05-14  Zalan Bujtas  <zalan@apple.com>
+
+        Images on www.fitstylelife.com jiggle on hover.
+        https://bugs.webkit.org/show_bug.cgi?id=145020
+        rdar://problem/20885337
+
+        Reviewed by Simon Fraser.
+
+        This patch ensures that the clipping layer of a composited content is pixel snapped properly.
+
+        * compositing/composited-parent-clipping-layer-on-subpixel-position-expected.html: Added.
+        * compositing/composited-parent-clipping-layer-on-subpixel-position.html: Added.
+        * compositing/parent-clipping-layer-on-subpixel-position-expected.html: Added.
+        * compositing/parent-clipping-layer-on-subpixel-position.html: Added.
+
 2015-05-14  Simon Fraser  <simon.fraser@apple.com>
 
         REGRESSION (r183794): Garbage tiles when body background switches to fixed
diff --git a/LayoutTests/compositing/composited-parent-clipping-layer-on-subpixel-position-expected.html b/LayoutTests/compositing/composited-parent-clipping-layer-on-subpixel-position-expected.html
new file mode 100644 (file)
index 0000000..6570e3e
--- /dev/null
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that when the composited parent container enforces clipping and it is on a subpixel position, we snap composited child content properly.</title>
+<style>
+       .container {
+               width: 15px;
+               height: 15px;
+               position: absolute;
+               -webkit-transform: translateZ(0);
+       }
+
+       .inner {
+               width: 10px;
+               height: 10px;
+               border: 1px solid red;
+               -webkit-transform: translateZ(0);
+       }
+</style>
+</head>
+<body>
+</div>
+<script>
+       var body = document.body;
+       var x = 0;
+       var y = 0;
+       for (i = 0; i < 20; ++i) {
+           y = 0;
+               for (j = 0; j < 20; ++j) {
+                       var container = document.createElement("div");
+                       container.style.top = 15 * i + y + "px";
+                       container.style.left = 15 * j + x + "px";
+                       container.className = "container";
+                       body.appendChild(container);
+
+                       var inner = document.createElement("div");
+                       inner.className = "inner";
+                       container.appendChild(inner);
+                       y += 0.1;
+               }
+               x += 0.1;
+       }
+</script>
+</body>
+</html>
diff --git a/LayoutTests/compositing/composited-parent-clipping-layer-on-subpixel-position.html b/LayoutTests/compositing/composited-parent-clipping-layer-on-subpixel-position.html
new file mode 100644 (file)
index 0000000..3201257
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that when the composited parent container enforces clipping and it is on a subpixel position, we snap child content properly.</title>
+<style>
+       .container {
+               width: 15px;
+               height: 15px;
+               position: absolute;
+               overflow: hidden;
+               -webkit-transform: translateZ(0);
+       }
+
+       .inner {
+               width: 10px;
+               height: 10px;
+               border: 1px solid red;
+               -webkit-transform: translateZ(0);
+       }
+</style>
+</head>
+<body>
+</div>
+<script>
+       var body = document.body;
+       var x = 0;
+       var y = 0;
+       for (i = 0; i < 20; ++i) {
+           y = 0;
+               for (j = 0; j < 20; ++j) {
+                       var container = document.createElement("div");
+                       container.style.top = 15 * i + y + "px";
+                       container.style.left = 15 * j + x + "px";
+                       container.className = "container";
+                       body.appendChild(container);
+
+                       var inner = document.createElement("div");
+                       inner.className = "inner";
+                       container.appendChild(inner);
+                       y += 0.1;
+               }
+               x += 0.1;
+       }
+</script>
+</body>
+</html>
diff --git a/LayoutTests/compositing/parent-clipping-layer-on-subpixel-position-expected.html b/LayoutTests/compositing/parent-clipping-layer-on-subpixel-position-expected.html
new file mode 100644 (file)
index 0000000..c494831
--- /dev/null
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that when the parent container enforces clipping and it is on a subpixel position, we snap child content properly.</title>
+<style>
+       .container {
+               width: 15px;
+               height: 15px;
+               position: absolute;
+       }
+
+       .inner {
+               width: 10px;
+               height: 10px;
+               border: 1px solid red;
+               -webkit-transform: translateZ(0);
+       }
+</style>
+</head>
+<body>
+</div>
+<script>
+       var body = document.body;
+       var x = 0;
+       var y = 0;
+       for (i = 0; i < 20; ++i) {
+           y = 0;
+               for (j = 0; j < 20; ++j) {
+                       var container = document.createElement("div");
+                       container.style.top = 15 * i + y + "px";
+                       container.style.left = 15 * j + x + "px";
+                       container.className = "container";
+                       body.appendChild(container);
+
+                       var inner = document.createElement("div");
+                       inner.className = "inner";
+                       container.appendChild(inner);
+                       y += 0.1;
+               }
+               x += 0.1;
+       }
+</script>
+</body>
+</html>
diff --git a/LayoutTests/compositing/parent-clipping-layer-on-subpixel-position.html b/LayoutTests/compositing/parent-clipping-layer-on-subpixel-position.html
new file mode 100644 (file)
index 0000000..55a9807
--- /dev/null
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that when the parent container enforces clipping and it is on a subpixel position, we snap child content properly.</title>
+<style>
+       .container {
+               width: 15px;
+               height: 15px;
+               position: absolute;
+               overflow: hidden;
+       }
+
+       .inner {
+               width: 10px;
+               height: 10px;
+               border: 1px solid red;
+               -webkit-transform: translateZ(0);
+       }
+</style>
+</head>
+<body>
+</div>
+<script>
+       var body = document.body;
+       var x = 0;
+       var y = 0;
+       for (i = 0; i < 20; ++i) {
+           y = 0;
+               for (j = 0; j < 20; ++j) {
+                       var container = document.createElement("div");
+                       container.style.top = 15 * i + y + "px";
+                       container.style.left = 15 * j + x + "px";
+                       container.className = "container";
+                       body.appendChild(container);
+
+                       var inner = document.createElement("div");
+                       inner.className = "inner";
+                       container.appendChild(inner);
+                       y += 0.1;
+               }
+               x += 0.1;
+       }
+</script>
+</body>
+</html>
index 8acbfe03fec95bc07c62e4709ea7557b700441a5..cbabe8c1390003054b4f522912dfab70f5e6cde1 100644 (file)
@@ -1,3 +1,19 @@
+2015-05-14  Zalan Bujtas  <zalan@apple.com>
+
+        Images on www.fitstylelife.com jiggle on hover.
+        https://bugs.webkit.org/show_bug.cgi?id=145020
+        rdar://problem/20885337
+
+        Reviewed by Simon Fraser.
+
+        This patch ensures that the clipping layer of a composited content is pixel snapped properly.
+
+        Tests: compositing/composited-parent-clipping-layer-on-subpixel-position.html
+               compositing/parent-clipping-layer-on-subpixel-position.html
+
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::updateGeometry):
+
 2015-05-14  Chris Dumez  <cdumez@apple.com>
 
         Have DOMWindow::createWindow() take references to frames
index afd5f35d053b4e796a2eeab0176699501421a198..e85fb4088257623fe1b439335f50798d60ac362e 100644 (file)
@@ -786,7 +786,8 @@ void RenderLayerBacking::updateGeometry()
         RenderLayer::ClipRectsContext clipRectsContext(compAncestor, TemporaryClipRects, IgnoreOverlayScrollbarSize, shouldRespectOverflowClip);
         LayoutRect parentClipRect = m_owningLayer.backgroundClipRect(clipRectsContext).rect(); // FIXME: Incorrect for CSS regions.
         ASSERT(!parentClipRect.isInfinite());
-        m_ancestorClippingLayer->setPosition(FloatPoint(parentClipRect.location() - graphicsLayerParentLocation));
+        FloatPoint enclosingClippingLayerPosition = floorPointToDevicePixels(LayoutPoint(parentClipRect.location() - graphicsLayerParentLocation), deviceScaleFactor);
+        m_ancestorClippingLayer->setPosition(enclosingClippingLayerPosition);
         m_ancestorClippingLayer->setSize(parentClipRect.size());
 
         // backgroundRect is relative to compAncestor, so subtract deltaX/deltaY to get back to local coords.