Merge r184373 - 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. 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.
WebKit · May 15, 2015 · 2446ebd · 2446ebd
1 parent 48d03fc
commit 2446ebd
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 1 deletion.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -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-13  Ryosuke Niwa  <rniwa@webkit.org>
 
         Crash in ReplaceSelectionCommand::removeRedundantStylesAndKeepStyleSpanInline

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
@@ -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
@@ -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
@@ -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
@@ -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>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -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-13  Ryosuke Niwa  <rniwa@webkit.org>
 
         Crash in ReplaceSelectionCommand::removeRedundantStylesAndKeepStyleSpanInline

diff --git a/Source/WebCore/rendering/RenderLayerBacking.cpp b/Source/WebCore/rendering/RenderLayerBacking.cpp
@@ -774,7 +774,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.