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: https://svn.webkit.org/repository/webkit/trunk@245208
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
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>
--- /dev/null
+(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)
+ )
+ )
+ )
+ )
+)
+
--- /dev/null
+<!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>
--- /dev/null
+(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)
+ )
+ )
+ )
+ )
+)
+
--- /dev/null
+(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)
+ )
+ )
+ )
+ )
+)
+
--- /dev/null
+<!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>
--- /dev/null
+(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)
+ )
+ )
+ )
+ )
+)
+
--- /dev/null
+<!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>
--- /dev/null
+<!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>
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>
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,