Layer bounds are incorrect for sharing layers that paint with transforms
https://bugs.webkit.org/show_bug.cgi?id=197768
<rdar://problem/50695493>
Reviewed by Zalan Bujtas.
Source/WebCore:
We don't need to traverse shared layers if the backing-provider has overflow clip,
because we know they are containing-block descendants and therefore clipped.
Note tha the CSS "clip" property doesn't guarantee this, because the clip rect
can be larger than the element, so in that case we just traverse shared layers.
Tests: compositing/shared-backing/sharing-bounds-clip.html
compositing/shared-backing/sharing-bounds-non-clipping-shared-layer.html
compositing/shared-backing/sharing-bounds-transformed-sharing-layer.html
compositing/shared-backing/sharing-bounds.html
* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::updateCompositedBounds):
LayoutTests:
Tests for backing-shared layer bounds in various configurations.
* compositing/shared-backing/sharing-bounds-clip-expected.txt: Added.
* compositing/shared-backing/sharing-bounds-clip.html: Added.
* compositing/shared-backing/sharing-bounds-expected.txt: Added.
* compositing/shared-backing/sharing-bounds-non-clipping-shared-layer-expected.txt: Added.
* compositing/shared-backing/sharing-bounds-non-clipping-shared-layer.html: Added.
* compositing/shared-backing/sharing-bounds-transformed-sharing-layer-expected.txt: Added.
* compositing/shared-backing/sharing-bounds-transformed-sharing-layer.html: Added.
* compositing/shared-backing/sharing-bounds.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@245208 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index f29d923..836374a 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,5 +1,24 @@
2019-05-11 Simon Fraser <simon.fraser@apple.com>
+ Layer bounds are incorrect for sharing layers that paint with transforms
+ https://bugs.webkit.org/show_bug.cgi?id=197768
+ <rdar://problem/50695493>
+
+ Reviewed by Zalan Bujtas.
+
+ Tests for backing-shared layer bounds in various configurations.
+
+ * compositing/shared-backing/sharing-bounds-clip-expected.txt: Added.
+ * compositing/shared-backing/sharing-bounds-clip.html: Added.
+ * compositing/shared-backing/sharing-bounds-expected.txt: Added.
+ * compositing/shared-backing/sharing-bounds-non-clipping-shared-layer-expected.txt: Added.
+ * compositing/shared-backing/sharing-bounds-non-clipping-shared-layer.html: Added.
+ * compositing/shared-backing/sharing-bounds-transformed-sharing-layer-expected.txt: Added.
+ * compositing/shared-backing/sharing-bounds-transformed-sharing-layer.html: Added.
+ * compositing/shared-backing/sharing-bounds.html: Added.
+
+2019-05-11 Simon Fraser <simon.fraser@apple.com>
+
Translucent gradient rendering bug due to will-change transform
https://bugs.webkit.org/show_bug.cgi?id=197654
<rdar://problem/50547664>
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds-clip-expected.txt b/LayoutTests/compositing/shared-backing/sharing-bounds-clip-expected.txt
new file mode 100644
index 0000000..67d5ffc
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds-clip-expected.txt
@@ -0,0 +1,23 @@
+(GraphicsLayer
+ (anchor 0.00 0.00)
+ (bounds 800.00 600.00)
+ (children 1
+ (GraphicsLayer
+ (bounds 800.00 600.00)
+ (contentsOpaque 1)
+ (children 2
+ (GraphicsLayer
+ (position 8.00 8.00)
+ (bounds 50.00 50.00)
+ (contentsOpaque 1)
+ )
+ (GraphicsLayer
+ (position 30.00 30.00)
+ (bounds 500.00 302.00)
+ (drawsContent 1)
+ )
+ )
+ )
+ )
+)
+
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds-clip.html b/LayoutTests/compositing/shared-backing/sharing-bounds-clip.html
new file mode 100644
index 0000000..06a37b9
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds-clip.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests the backing provider layer bounds with a transformed sharing layer</title>
+ <style>
+ .relative {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ background-color: silver;
+ clip: rect(10px, 500px, 300px, 10px); /* larger than the bounds */
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ }
+
+ .inner {
+ position: absolute;
+ left: 200px;
+ top: 200px;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.dumpAsText();
+
+ window.addEventListener('load', () => {
+ if (window.internals)
+ document.getElementById('layers').textContent = internals.layerTreeAsText(document);
+ }, false);
+ </script>
+</head>
+<body>
+ <div class="trigger"></div>
+ <div class="relative">
+ <div class="sharing">
+ <div class="inner">
+ </div>
+ </div>
+ </div>
+<pre id="layers"></pre>
+</body>
+</html>
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds-expected.txt b/LayoutTests/compositing/shared-backing/sharing-bounds-expected.txt
new file mode 100644
index 0000000..3508f59
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds-expected.txt
@@ -0,0 +1,23 @@
+(GraphicsLayer
+ (anchor 0.00 0.00)
+ (bounds 800.00 600.00)
+ (children 1
+ (GraphicsLayer
+ (bounds 800.00 600.00)
+ (contentsOpaque 1)
+ (children 2
+ (GraphicsLayer
+ (position 8.00 8.00)
+ (bounds 50.00 50.00)
+ (contentsOpaque 1)
+ )
+ (GraphicsLayer
+ (position 30.00 30.00)
+ (bounds 302.00 302.00)
+ (drawsContent 1)
+ )
+ )
+ )
+ )
+)
+
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds-non-clipping-shared-layer-expected.txt b/LayoutTests/compositing/shared-backing/sharing-bounds-non-clipping-shared-layer-expected.txt
new file mode 100644
index 0000000..f9b9b6a
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds-non-clipping-shared-layer-expected.txt
@@ -0,0 +1,23 @@
+(GraphicsLayer
+ (anchor 0.00 0.00)
+ (bounds 800.00 600.00)
+ (children 1
+ (GraphicsLayer
+ (bounds 800.00 600.00)
+ (contentsOpaque 1)
+ (children 2
+ (GraphicsLayer
+ (position 8.00 8.00)
+ (bounds 50.00 50.00)
+ (contentsOpaque 1)
+ )
+ (GraphicsLayer
+ (position 30.00 30.00)
+ (bounds 501.00 501.00)
+ (drawsContent 1)
+ )
+ )
+ )
+ )
+)
+
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds-non-clipping-shared-layer.html b/LayoutTests/compositing/shared-backing/sharing-bounds-non-clipping-shared-layer.html
new file mode 100644
index 0000000..3c26c86
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds-non-clipping-shared-layer.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests the backing provider layer bounds with a transformed sharing layer</title>
+ <style>
+ .relative {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ transform: scale(1.5);
+ transform-origin: top left;
+ }
+
+ .inner {
+ position: absolute;
+ left: 200px;
+ top: 200px;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.dumpAsText();
+
+ window.addEventListener('load', () => {
+ if (window.internals)
+ document.getElementById('layers').textContent = internals.layerTreeAsText(document);
+ }, false);
+ </script>
+</head>
+<body>
+ <div class="trigger"></div>
+ <div class="relative">
+ <div class="sharing">
+ <div class="inner">
+ </div>
+ </div>
+ </div>
+<pre id="layers"></pre>
+</body>
+</html>
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds-transformed-sharing-layer-expected.txt b/LayoutTests/compositing/shared-backing/sharing-bounds-transformed-sharing-layer-expected.txt
new file mode 100644
index 0000000..3508f59
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds-transformed-sharing-layer-expected.txt
@@ -0,0 +1,23 @@
+(GraphicsLayer
+ (anchor 0.00 0.00)
+ (bounds 800.00 600.00)
+ (children 1
+ (GraphicsLayer
+ (bounds 800.00 600.00)
+ (contentsOpaque 1)
+ (children 2
+ (GraphicsLayer
+ (position 8.00 8.00)
+ (bounds 50.00 50.00)
+ (contentsOpaque 1)
+ )
+ (GraphicsLayer
+ (position 30.00 30.00)
+ (bounds 302.00 302.00)
+ (drawsContent 1)
+ )
+ )
+ )
+ )
+)
+
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds-transformed-sharing-layer.html b/LayoutTests/compositing/shared-backing/sharing-bounds-transformed-sharing-layer.html
new file mode 100644
index 0000000..0d08d15
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds-transformed-sharing-layer.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests bounds computation for a transformed layer painting into shared backing</title>
+ <style>
+ .clipping {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .transformed {
+ width: 400px;
+ height: 100px;
+ background-color: green;
+ transform: scale(2);
+ transform-origin: top left;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.dumpAsText();
+
+ window.addEventListener('load', () => {
+ if (window.internals)
+ document.getElementById('layers').textContent = internals.layerTreeAsText(document);
+ }, false);
+ </script>
+</head>
+<body>
+ <div class="trigger"></div>
+ <div class="clipping">
+ <div class="transformed">
+ </div>
+ </div>
+<pre id="layers"></pre>
+</body>
+</html>
diff --git a/LayoutTests/compositing/shared-backing/sharing-bounds.html b/LayoutTests/compositing/shared-backing/sharing-bounds.html
new file mode 100644
index 0000000..33a6240
--- /dev/null
+++ b/LayoutTests/compositing/shared-backing/sharing-bounds.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests the backing provider layer bounds with a positioned child</title>
+ <style>
+ .clipping {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ }
+
+ .inner {
+ position: absolute;
+ left: 200px;
+ top: 200px;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.dumpAsText();
+
+ window.addEventListener('load', () => {
+ if (window.internals)
+ document.getElementById('layers').textContent = internals.layerTreeAsText(document);
+ }, false);
+ </script>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing">
+ <div class="inner">
+ </div>
+ </div>
+ </div>
+<pre id="layers"></pre>
+</body>
+</html>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index b5e803e..c7c8dca 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,5 +1,27 @@
2019-05-11 Simon Fraser <simon.fraser@apple.com>
+ Layer bounds are incorrect for sharing layers that paint with transforms
+ https://bugs.webkit.org/show_bug.cgi?id=197768
+ <rdar://problem/50695493>
+
+ Reviewed by Zalan Bujtas.
+
+ We don't need to traverse shared layers if the backing-provider has overflow clip,
+ because we know they are containing-block descendants and therefore clipped.
+
+ Note tha the CSS "clip" property doesn't guarantee this, because the clip rect
+ can be larger than the element, so in that case we just traverse shared layers.
+
+ Tests: compositing/shared-backing/sharing-bounds-clip.html
+ compositing/shared-backing/sharing-bounds-non-clipping-shared-layer.html
+ compositing/shared-backing/sharing-bounds-transformed-sharing-layer.html
+ compositing/shared-backing/sharing-bounds.html
+
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::RenderLayerBacking::updateCompositedBounds):
+
+2019-05-11 Simon Fraser <simon.fraser@apple.com>
+
Translucent gradient rendering bug due to will-change transform
https://bugs.webkit.org/show_bug.cgi?id=197654
<rdar://problem/50547664>
diff --git a/Source/WebCore/rendering/RenderLayerBacking.cpp b/Source/WebCore/rendering/RenderLayerBacking.cpp
index 205b77b..43d1a57 100644
--- a/Source/WebCore/rendering/RenderLayerBacking.cpp
+++ b/Source/WebCore/rendering/RenderLayerBacking.cpp
@@ -671,12 +671,15 @@
layerBounds.intersect(clippingBounds);
}
- for (auto& layerWeakPtr : m_backingSharingLayers) {
- auto* boundsRootLayer = &m_owningLayer;
- ASSERT(layerWeakPtr->isDescendantOf(m_owningLayer));
- auto offset = layerWeakPtr->offsetFromAncestor(&m_owningLayer);
- auto bounds = layerWeakPtr->calculateLayerBounds(boundsRootLayer, offset, RenderLayer::defaultCalculateLayerBoundsFlags() | RenderLayer::ExcludeHiddenDescendants | RenderLayer::DontConstrainForMask);
- layerBounds.unite(bounds);
+ // If the backing provider has overflow:clip, we know all sharing layers are affected by the clip because they are containing-block descendants.
+ if (!renderer().hasOverflowClip()) {
+ for (auto& layerWeakPtr : m_backingSharingLayers) {
+ auto* boundsRootLayer = &m_owningLayer;
+ ASSERT(layerWeakPtr->isDescendantOf(m_owningLayer));
+ auto offset = layerWeakPtr->offsetFromAncestor(&m_owningLayer);
+ auto bounds = layerWeakPtr->calculateLayerBounds(boundsRootLayer, offset, RenderLayer::defaultCalculateLayerBoundsFlags() | RenderLayer::ExcludeHiddenDescendants | RenderLayer::DontConstrainForMask);
+ layerBounds.unite(bounds);
+ }
}
// If the element has a transform-origin that has fixed lengths, and the renderer has zero size,
