Diff
Modified: branches/safari-608.1.24-branch/LayoutTests/ChangeLog (245388 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/ChangeLog 2019-05-16 06:01:50 UTC (rev 245388)
+++ branches/safari-608.1.24-branch/LayoutTests/ChangeLog 2019-05-16 06:01:56 UTC (rev 245389)
@@ -1,5 +1,116 @@
2019-05-15 Kocsen Chung <[email protected]>
+ Cherry-pick r245205. rdar://problem/50652127
+
+ Backing-sharing layers with transforms render incorrectly
+ https://bugs.webkit.org/show_bug.cgi?id=197692
+ <rdar://problem/50652127>
+
+ Reviewed by Antti Koivisto.
+ Source/WebCore:
+
+ Layers that paint into shared backing need to enter the RenderLayer painting code
+ in a way that paints the filters, transforms, opacity and blending.
+
+ RenderLayerBacking::paintIntoLayer() normally enters at paintLayerContents(), because
+ the effects are rendered via the GraphicsLayer, but shared layers will paint effects.
+ Note that if the backing-provider has effects, it will be the stacking context
+ for the shared layers, so it's correct that sharing layers are impacted by effects
+ on the backing-provider.
+
+ In addition, we have to ensure that we don't over-eagerly make layers shared.
+ Consider:
+
+ <div class="clipping">
+ <div class="sharing">
+ <div class="inner">
+ </div>
+ </div>
+ </div>
+
+ Here "clipping" is the provider layer, "sharing" paints into shared backing, but
+ we don't want to also mark "inner" as sharing, since "sharing" will just paint it.
+ This is akin to avoiding unnecessary compositing of z-order descendants when they can just
+ paint.
+
+ To do this we need to ensure that sharing layers are treated like compositing layers
+ in the overlap map, i.e. when a layer is sharing, we call overlapMap.pushCompositingContainer(),
+ and later overlapMap.popCompositingContainer().
+
+ Tests: compositing/shared-backing/nested-shared-layers-with-opacity.html
+ compositing/shared-backing/shared-layer-has-blending.html
+ compositing/shared-backing/shared-layer-has-filter.html
+ compositing/shared-backing/shared-layer-has-opacity.html
+ compositing/shared-backing/shared-layer-has-reflection.html
+ compositing/shared-backing/shared-layer-has-transform.html
+ compositing/shared-backing/shared-layer-isolates-blending.html
+ compositing/shared-backing/shared-transformed-layer-bounds.html
+ compositing/shared-backing/sharing-layer-becomes-non-scrollable.html
+ compositing/shared-backing/sharing-layer-has-effect.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::paintLayer):
+ (WebCore::RenderLayer::paintLayerWithEffects):
+ * rendering/RenderLayer.h:
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::RenderLayerBacking::paintIntoLayer):
+ * rendering/RenderLayerCompositor.cpp:
+ (WebCore::RenderLayerCompositor::CompositingState::stateForPaintOrderChildren const):
+ (WebCore::backingProviderLayerCanIncludeLayer):
+ (WebCore::RenderLayerCompositor::computeCompositingRequirements):
+ (WebCore::RenderLayerCompositor::traverseUnchangedSubtree):
+
+ LayoutTests:
+
+ Ref tests for effects on sharing layers. The references make "clipping" be stacking context via z-index,
+ which eliminates sharing.
+
+ * compositing/shared-backing/nested-shared-layers-with-opacity-expected.html: Added.
+ * compositing/shared-backing/nested-shared-layers-with-opacity.html: Added.
+ * compositing/shared-backing/shared-layer-has-blending-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-blending.html: Added.
+ * compositing/shared-backing/shared-layer-has-filter-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-filter.html: Added.
+ * compositing/shared-backing/shared-layer-has-opacity-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-opacity.html: Added.
+ * compositing/shared-backing/shared-layer-has-reflection-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-reflection.html: Added.
+ * compositing/shared-backing/shared-layer-has-transform-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-transform.html: Added.
+ * compositing/shared-backing/shared-layer-isolates-blending-expected.html: Added.
+ * compositing/shared-backing/shared-layer-isolates-blending.html: Added.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@245205 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2019-05-11 Simon Fraser <[email protected]>
+
+ Backing-sharing layers with transforms render incorrectly
+ https://bugs.webkit.org/show_bug.cgi?id=197692
+ <rdar://problem/50652127>
+
+ Reviewed by Antti Koivisto.
+
+ Ref tests for effects on sharing layers. The references make "clipping" be stacking context via z-index,
+ which eliminates sharing.
+
+ * compositing/shared-backing/nested-shared-layers-with-opacity-expected.html: Added.
+ * compositing/shared-backing/nested-shared-layers-with-opacity.html: Added.
+ * compositing/shared-backing/shared-layer-has-blending-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-blending.html: Added.
+ * compositing/shared-backing/shared-layer-has-filter-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-filter.html: Added.
+ * compositing/shared-backing/shared-layer-has-opacity-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-opacity.html: Added.
+ * compositing/shared-backing/shared-layer-has-reflection-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-reflection.html: Added.
+ * compositing/shared-backing/shared-layer-has-transform-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-transform.html: Added.
+ * compositing/shared-backing/shared-layer-isolates-blending-expected.html: Added.
+ * compositing/shared-backing/shared-layer-isolates-blending.html: Added.
+
+2019-05-15 Kocsen Chung <[email protected]>
+
Cherry-pick r245181. rdar://problem/50670806
ASSERT(isSelfPaintingLayer() || hasSelfPaintingLayerDescendant()) on nytimes.com after r245170
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity-expected.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity-expected.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity-expected.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with opacity into shared backing</title>
+ <style>
+ .clipping {
+ position: absolute;
+ z-index: 0;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .box {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .opacity {
+ opacity: 0.5;
+ }
+
+ .composited {
+ transform: translateZ(0);
+ }
+
+ .trigger {
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing opacity box">
+ <div class="opacity box"></div>
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with opacity into shared backing</title>
+ <style>
+ .clipping {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .box {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .opacity {
+ opacity: 0.5;
+ }
+
+ .composited {
+ transform: translateZ(0);
+ }
+
+ .trigger {
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing opacity box">
+ <div class="opacity box"></div>
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-blending-expected.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-blending-expected.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-blending-expected.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .clipping {
+ position: absolute;
+ z-index: 0;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .blending {
+ mix-blend-mode: difference;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing blending box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-blending.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-blending.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-blending.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with mix-blend-mode into shared backing</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: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .blending {
+ mix-blend-mode: difference;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing blending box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-filter-expected.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-filter-expected.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-filter-expected.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .clipping {
+ position: absolute;
+ z-index: 0;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .filtered {
+ filter: saturate(0);
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing filtered box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-filter.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-filter.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-filter.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with a filter into shared backing</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: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .filtered {
+ filter: saturate(0);
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing filtered box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-opacity-expected.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-opacity-expected.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-opacity-expected.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with opacity into shared backing</title>
+ <style>
+ .clipping {
+ position: absolute;
+ z-index: 0;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .opacity {
+ opacity: 0.5;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing opacity box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-opacity.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-opacity.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-opacity.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with opacity into shared backing</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: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .opacity {
+ opacity: 0.5;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing opacity box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-reflection-expected.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-reflection-expected.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-reflection-expected.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .clipping {
+ position: absolute;
+ z-index: 0;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 160px;
+ background-color: green;
+ border-bottom: 20px solid orange;
+ }
+
+ .reflected {
+ -webkit-box-reflect: below 10px;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing reflected box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-reflection.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-reflection.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-reflection.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with a reflection into shared backing</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: 180px;
+ height: 160px;
+ background-color: green;
+ border-bottom: 20px solid orange;
+ }
+
+ .reflected {
+ -webkit-box-reflect: below 10px;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing reflected box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-transform-expected.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-transform-expected.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-transform-expected.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .clipping {
+ position: absolute;
+ z-index: 0;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .transformed {
+ transform: rotate(45deg);
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing transformed box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-transform.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-transform.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-has-transform.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer with a transform into shared backing</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: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .transformed {
+ transform: rotate(45deg);
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing transformed box">
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending-expected.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending-expected.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending-expected.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .clipping {
+ position: absolute;
+ z-index: 0;
+ top: 20px;
+ left: 20px;
+ overflow: hidden;
+ height: 300px;
+ width: 300px;
+ margin: 10px;
+ border: 1px solid black;
+ }
+
+ .sharing {
+ position: relative;
+ top: 30px;
+ left: 30px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .isolation {
+ isolation: isolate;
+ }
+
+ .blending {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ mix-blend-mode: multiply;
+ background-color: green;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing isolation box">
+ <div class="blending"></div>
+ </div>
+ </div>
+</body>
+</html>
Added: branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending.html (0 => 245389)
--- branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending.html (rev 0)
+++ branches/safari-608.1.24-branch/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending.html 2019-05-16 06:01:56 UTC (rev 245389)
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Tests painting of a layer which isolates blending into shared backing</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: 30px;
+ left: 30px;
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ }
+
+ .isolation {
+ isolation: isolate;
+ }
+
+ .blending {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 180px;
+ height: 180px;
+ mix-blend-mode: multiply;
+ background-color: green;
+ }
+
+ .trigger {
+ transform: translateZ(0);
+ width: 50px;
+ height: 50px;
+ background-color: silver;
+ }
+ </style>
+</head>
+<body>
+ <div class="composited trigger"></div>
+ <div class="clipping">
+ <div class="sharing isolation box">
+ <div class="blending"></div>
+ </div>
+ </div>
+</body>
+</html>
Modified: branches/safari-608.1.24-branch/Source/WebCore/ChangeLog (245388 => 245389)
--- branches/safari-608.1.24-branch/Source/WebCore/ChangeLog 2019-05-16 06:01:50 UTC (rev 245388)
+++ branches/safari-608.1.24-branch/Source/WebCore/ChangeLog 2019-05-16 06:01:56 UTC (rev 245389)
@@ -1,5 +1,149 @@
2019-05-15 Kocsen Chung <[email protected]>
+ Cherry-pick r245205. rdar://problem/50652127
+
+ Backing-sharing layers with transforms render incorrectly
+ https://bugs.webkit.org/show_bug.cgi?id=197692
+ <rdar://problem/50652127>
+
+ Reviewed by Antti Koivisto.
+ Source/WebCore:
+
+ Layers that paint into shared backing need to enter the RenderLayer painting code
+ in a way that paints the filters, transforms, opacity and blending.
+
+ RenderLayerBacking::paintIntoLayer() normally enters at paintLayerContents(), because
+ the effects are rendered via the GraphicsLayer, but shared layers will paint effects.
+ Note that if the backing-provider has effects, it will be the stacking context
+ for the shared layers, so it's correct that sharing layers are impacted by effects
+ on the backing-provider.
+
+ In addition, we have to ensure that we don't over-eagerly make layers shared.
+ Consider:
+
+ <div class="clipping">
+ <div class="sharing">
+ <div class="inner">
+ </div>
+ </div>
+ </div>
+
+ Here "clipping" is the provider layer, "sharing" paints into shared backing, but
+ we don't want to also mark "inner" as sharing, since "sharing" will just paint it.
+ This is akin to avoiding unnecessary compositing of z-order descendants when they can just
+ paint.
+
+ To do this we need to ensure that sharing layers are treated like compositing layers
+ in the overlap map, i.e. when a layer is sharing, we call overlapMap.pushCompositingContainer(),
+ and later overlapMap.popCompositingContainer().
+
+ Tests: compositing/shared-backing/nested-shared-layers-with-opacity.html
+ compositing/shared-backing/shared-layer-has-blending.html
+ compositing/shared-backing/shared-layer-has-filter.html
+ compositing/shared-backing/shared-layer-has-opacity.html
+ compositing/shared-backing/shared-layer-has-reflection.html
+ compositing/shared-backing/shared-layer-has-transform.html
+ compositing/shared-backing/shared-layer-isolates-blending.html
+ compositing/shared-backing/shared-transformed-layer-bounds.html
+ compositing/shared-backing/sharing-layer-becomes-non-scrollable.html
+ compositing/shared-backing/sharing-layer-has-effect.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::paintLayer):
+ (WebCore::RenderLayer::paintLayerWithEffects):
+ * rendering/RenderLayer.h:
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::RenderLayerBacking::paintIntoLayer):
+ * rendering/RenderLayerCompositor.cpp:
+ (WebCore::RenderLayerCompositor::CompositingState::stateForPaintOrderChildren const):
+ (WebCore::backingProviderLayerCanIncludeLayer):
+ (WebCore::RenderLayerCompositor::computeCompositingRequirements):
+ (WebCore::RenderLayerCompositor::traverseUnchangedSubtree):
+
+ LayoutTests:
+
+ Ref tests for effects on sharing layers. The references make "clipping" be stacking context via z-index,
+ which eliminates sharing.
+
+ * compositing/shared-backing/nested-shared-layers-with-opacity-expected.html: Added.
+ * compositing/shared-backing/nested-shared-layers-with-opacity.html: Added.
+ * compositing/shared-backing/shared-layer-has-blending-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-blending.html: Added.
+ * compositing/shared-backing/shared-layer-has-filter-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-filter.html: Added.
+ * compositing/shared-backing/shared-layer-has-opacity-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-opacity.html: Added.
+ * compositing/shared-backing/shared-layer-has-reflection-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-reflection.html: Added.
+ * compositing/shared-backing/shared-layer-has-transform-expected.html: Added.
+ * compositing/shared-backing/shared-layer-has-transform.html: Added.
+ * compositing/shared-backing/shared-layer-isolates-blending-expected.html: Added.
+ * compositing/shared-backing/shared-layer-isolates-blending.html: Added.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@245205 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2019-05-11 Simon Fraser <[email protected]>
+
+ Backing-sharing layers with transforms render incorrectly
+ https://bugs.webkit.org/show_bug.cgi?id=197692
+ <rdar://problem/50652127>
+
+ Reviewed by Antti Koivisto.
+
+ Layers that paint into shared backing need to enter the RenderLayer painting code
+ in a way that paints the filters, transforms, opacity and blending.
+
+ RenderLayerBacking::paintIntoLayer() normally enters at paintLayerContents(), because
+ the effects are rendered via the GraphicsLayer, but shared layers will paint effects.
+ Note that if the backing-provider has effects, it will be the stacking context
+ for the shared layers, so it's correct that sharing layers are impacted by effects
+ on the backing-provider.
+
+ In addition, we have to ensure that we don't over-eagerly make layers shared.
+ Consider:
+
+ <div class="clipping">
+ <div class="sharing">
+ <div class="inner">
+ </div>
+ </div>
+ </div>
+
+ Here "clipping" is the provider layer, "sharing" paints into shared backing, but
+ we don't want to also mark "inner" as sharing, since "sharing" will just paint it.
+ This is akin to avoiding unnecessary compositing of z-order descendants when they can just
+ paint.
+
+ To do this we need to ensure that sharing layers are treated like compositing layers
+ in the overlap map, i.e. when a layer is sharing, we call overlapMap.pushCompositingContainer(),
+ and later overlapMap.popCompositingContainer().
+
+ Tests: compositing/shared-backing/nested-shared-layers-with-opacity.html
+ compositing/shared-backing/shared-layer-has-blending.html
+ compositing/shared-backing/shared-layer-has-filter.html
+ compositing/shared-backing/shared-layer-has-opacity.html
+ compositing/shared-backing/shared-layer-has-reflection.html
+ compositing/shared-backing/shared-layer-has-transform.html
+ compositing/shared-backing/shared-layer-isolates-blending.html
+ compositing/shared-backing/shared-transformed-layer-bounds.html
+ compositing/shared-backing/sharing-layer-becomes-non-scrollable.html
+ compositing/shared-backing/sharing-layer-has-effect.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::paintLayer):
+ (WebCore::RenderLayer::paintLayerWithEffects):
+ * rendering/RenderLayer.h:
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::RenderLayerBacking::paintIntoLayer):
+ * rendering/RenderLayerCompositor.cpp:
+ (WebCore::RenderLayerCompositor::CompositingState::stateForPaintOrderChildren const):
+ (WebCore::backingProviderLayerCanIncludeLayer):
+ (WebCore::RenderLayerCompositor::computeCompositingRequirements):
+ (WebCore::RenderLayerCompositor::traverseUnchangedSubtree):
+
+2019-05-15 Kocsen Chung <[email protected]>
+
Cherry-pick r245181. rdar://problem/50670806
ASSERT(isSelfPaintingLayer() || hasSelfPaintingLayerDescendant()) on nytimes.com after r245170
Modified: branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayer.cpp (245388 => 245389)
--- branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayer.cpp 2019-05-16 06:01:50 UTC (rev 245388)
+++ branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayer.cpp 2019-05-16 06:01:56 UTC (rev 245389)
@@ -4100,6 +4100,11 @@
return;
}
+ paintLayerWithEffects(context, paintingInfo, paintFlags);
+}
+
+void RenderLayer::paintLayerWithEffects(GraphicsContext& context, const LayerPaintingInfo& paintingInfo, OptionSet<PaintLayerFlag> paintFlags)
+{
// Non self-painting leaf layers don't need to be painted as their renderer() should properly paint itself.
if (!isSelfPaintingLayer() && !hasSelfPaintingLayerDescendant())
return;
@@ -4106,7 +4111,7 @@
if (shouldSuppressPaintingLayer(this))
return;
-
+
// If this layer is totally invisible then there is nothing to paint.
if (!renderer().opacity())
return;
Modified: branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayer.h (245388 => 245389)
--- branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayer.h 2019-05-16 06:01:50 UTC (rev 245388)
+++ branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayer.h 2019-05-16 06:01:56 UTC (rev 245389)
@@ -1003,6 +1003,8 @@
void applyFilters(GraphicsContext& originalContext, const LayerPaintingInfo&, const LayerFragments&);
void paintLayer(GraphicsContext&, const LayerPaintingInfo&, OptionSet<PaintLayerFlag>);
+ void paintLayerWithEffects(GraphicsContext&, const LayerPaintingInfo&, OptionSet<PaintLayerFlag>);
+
void paintLayerContentsAndReflection(GraphicsContext&, const LayerPaintingInfo&, OptionSet<PaintLayerFlag>);
void paintLayerByApplyingTransform(GraphicsContext&, const LayerPaintingInfo&, OptionSet<PaintLayerFlag>, const LayoutSize& translationOffset = LayoutSize());
void paintLayerContents(GraphicsContext&, const LayerPaintingInfo&, OptionSet<PaintLayerFlag>);
Modified: branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayerBacking.cpp (245388 => 245389)
--- branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayerBacking.cpp 2019-05-16 06:01:50 UTC (rev 245388)
+++ branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayerBacking.cpp 2019-05-16 06:01:56 UTC (rev 245389)
@@ -2668,10 +2668,13 @@
RenderLayer::LayerPaintingInfo paintingInfo(&m_owningLayer, paintDirtyRect, paintBehavior, -m_subpixelOffsetFromRenderer);
- layer.paintLayerContents(context, paintingInfo, paintFlags);
+ if (&layer == &m_owningLayer) {
+ layer.paintLayerContents(context, paintingInfo, paintFlags);
- if (layer.containsDirtyOverlayScrollbars())
- layer.paintLayerContents(context, paintingInfo, paintFlags | RenderLayer::PaintLayerPaintingOverlayScrollbars);
+ if (layer.containsDirtyOverlayScrollbars())
+ layer.paintLayerContents(context, paintingInfo, paintFlags | RenderLayer::PaintLayerPaintingOverlayScrollbars);
+ } else
+ layer.paintLayerWithEffects(context, paintingInfo, paintFlags);
if (layer.isRenderViewLayer())
renderer().view().frameView().didPaintContents(context, paintDirtyRect, paintingState);
Modified: branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayerCompositor.cpp (245388 => 245389)
--- branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayerCompositor.cpp 2019-05-16 06:01:50 UTC (rev 245388)
+++ branches/safari-608.1.24-branch/Source/WebCore/rendering/RenderLayerCompositor.cpp 2019-05-16 06:01:56 UTC (rev 245389)
@@ -241,6 +241,7 @@
else
childState.stackingContextAncestor = stackingContextAncestor;
+ childState.backingSharingAncestor = backingSharingAncestor;
childState.subtreeIsCompositing = false;
childState.testingOverlap = testingOverlap;
childState.fullPaintOrderTraversalRequired = fullPaintOrderTraversalRequired;
@@ -268,6 +269,7 @@
}
RenderLayer* compositingAncestor;
+ RenderLayer* backingSharingAncestor { nullptr };
RenderLayer* stackingContextAncestor { nullptr };
bool subtreeIsCompositing { false };
bool testingOverlap { true };
@@ -860,6 +862,10 @@
static bool backingProviderLayerCanIncludeLayer(const RenderLayer& sharedLayer, const RenderLayer& layer)
{
+ // Disable sharing when painting shared layers doesn't work correctly.
+ if (layer.hasReflection())
+ return false;
+
return layer.ancestorLayerIsInContainingBlockChain(sharedLayer);
}
@@ -981,6 +987,9 @@
// Compositing for any reason disables backing sharing.
LOG_WITH_STREAM(Compositing, stream << &layer << " is compositing - flushing sharing to " << backingSharingState.backingProviderCandidate << " with " << backingSharingState.backingSharingLayers.size() << " sharing layers");
backingSharingState.resetBackingProviderCandidate();
+ } else if (layerPaintsIntoProvidedBacking) {
+ childState.backingSharingAncestor = &layer;
+ overlapMap.pushCompositingContainer();
}
#if !ASSERT_DISABLED
@@ -1064,7 +1073,7 @@
compositingState.hasNotIsolatedCompositedBlendingDescendants = true;
#endif
- if (childState.compositingAncestor == &layer && !layer.isRenderViewLayer())
+ if ((childState.compositingAncestor == &layer && !layer.isRenderViewLayer()) || childState.backingSharingAncestor == &layer)
overlapMap.popCompositingContainer();
// If we're back at the root, and no other layers need to be composited, and the root layer itself doesn't need
@@ -1228,7 +1237,7 @@
compositingState.hasNotIsolatedCompositedBlendingDescendants = true;
#endif
- if (childState.compositingAncestor == &layer && !layer.isRenderViewLayer())
+ if ((childState.compositingAncestor == &layer && !layer.isRenderViewLayer()) || childState.backingSharingAncestor == &layer)
overlapMap.popCompositingContainer();
if (layer.isComposited())
