Attachment 369639 Details for Bug 197692 – Patch

[patch] Patch

bug-197692-20190510232354.patch (text/plain), 33.88 KB, created by Simon Fraser (smfr) on 2019-05-10 23:23:55 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-05-10 23:23:55 PDT

Size: 33.88 KB

patch

obsolete

>Subversion Revision: 245204
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 08adb420af8088e38b126d1a77469a9b92bc60c4..8855b1fbc9c474744fef221c469002ec96d7b035 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,62 @@
>+2019-05-10  Simon Fraser  <simon.fraser@apple.com>
>+
>+        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-10  Youenn Fablet  <youenn@apple.com>
> 
>         A service worker instance should be terminated when its SWServer is destroyed
>diff --git a/Source/WebCore/rendering/RenderLayer.cpp b/Source/WebCore/rendering/RenderLayer.cpp
>index b062d0b954d741d378b883bd26435d3fcecfed83..185a875f516eb9deeefc67e66822418e2cff0440 100644
>--- a/Source/WebCore/rendering/RenderLayer.cpp
>+++ b/Source/WebCore/rendering/RenderLayer.cpp
>@@ -4100,13 +4100,18 @@ void RenderLayer::paintLayer(GraphicsContext& context, const LayerPaintingInfo&
>         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;
> 
>     if (shouldSuppressPaintingLayer(this))
>         return;
>-    
>+
>     // If this layer is totally invisible then there is nothing to paint.
>     if (!renderer().opacity())
>         return;
>diff --git a/Source/WebCore/rendering/RenderLayer.h b/Source/WebCore/rendering/RenderLayer.h
>index da4beb9ac9850608552fafafe7bda20af019ad1b..22be9bcbbfe02dedc4bc25caaada73466ad62756 100644
>--- a/Source/WebCore/rendering/RenderLayer.h
>+++ b/Source/WebCore/rendering/RenderLayer.h
>@@ -1003,6 +1003,8 @@ private:
>     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>);
>diff --git a/Source/WebCore/rendering/RenderLayerBacking.cpp b/Source/WebCore/rendering/RenderLayerBacking.cpp
>index 35a14c1cf35b0ec0add9c8b30ccb8ff283dc3054..8b0ce6b43afe09fc63fed5c926d781bf455f8534 100644
>--- a/Source/WebCore/rendering/RenderLayerBacking.cpp
>+++ b/Source/WebCore/rendering/RenderLayerBacking.cpp
>@@ -675,7 +675,8 @@ bool RenderLayerBacking::updateCompositedBounds()
>         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);
>+        auto bounds = layerWeakPtr->calculateLayerBounds(boundsRootLayer, offset,
>+            { RenderLayer::IncludeSelfTransform, RenderLayer::IncludePaintedFilterOutsets, RenderLayer::UseFragmentBoxesExcludingCompositing, RenderLayer::ExcludeHiddenDescendants, RenderLayer::DontConstrainForMask });
>         layerBounds.unite(bounds);
>     }
> 
>@@ -2668,10 +2669,13 @@ void RenderLayerBacking::paintIntoLayer(const GraphicsLayer* graphicsLayer, Grap
> 
>         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);
>diff --git a/Source/WebCore/rendering/RenderLayerCompositor.cpp b/Source/WebCore/rendering/RenderLayerCompositor.cpp
>index 790791b3fa2ef07aabb2b5fa562603023a8d8da8..ca5424e3f8ba938b881da1228dd260ef8ef317e5 100644
>--- a/Source/WebCore/rendering/RenderLayerCompositor.cpp
>+++ b/Source/WebCore/rendering/RenderLayerCompositor.cpp
>@@ -241,6 +241,7 @@ struct RenderLayerCompositor::CompositingState {
>         else
>             childState.stackingContextAncestor = stackingContextAncestor;
> 
>+        childState.backingSharingAncestor = backingSharingAncestor;
>         childState.subtreeIsCompositing = false;
>         childState.testingOverlap = testingOverlap;
>         childState.fullPaintOrderTraversalRequired = fullPaintOrderTraversalRequired;
>@@ -268,6 +269,7 @@ struct RenderLayerCompositor::CompositingState {
>     }
> 
>     RenderLayer* compositingAncestor;
>+    RenderLayer* backingSharingAncestor { nullptr };
>     RenderLayer* stackingContextAncestor { nullptr };
>     bool subtreeIsCompositing { false };
>     bool testingOverlap { true };
>@@ -860,6 +862,10 @@ bool RenderLayerCompositor::updateCompositingLayers(CompositingUpdateType update
> 
> 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 @@ void RenderLayerCompositor::computeCompositingRequirements(RenderLayer* ancestor
>         // 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 @@ void RenderLayerCompositor::computeCompositingRequirements(RenderLayer* ancestor
>         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 @@ void RenderLayerCompositor::traverseUnchangedSubtree(RenderLayer* ancestorLayer,
>         compositingState.hasNotIsolatedCompositedBlendingDescendants = true;
> #endif
> 
>-    if (childState.compositingAncestor == &layer && !layer.isRenderViewLayer())
>+    if ((childState.compositingAncestor == &layer && !layer.isRenderViewLayer()) || childState.backingSharingAncestor == &layer)
>         overlapMap.popCompositingContainer();
> 
>     if (layer.isComposited())
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 512e5219ce9f424363417651821abf1105c2a3c5..ea0598fb9d75f403e0060f166dcfdab13f64901f 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,29 @@
>+2019-05-10  Simon Fraser  <simon.fraser@apple.com>
>+
>+        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-10  Zalan Bujtas  <zalan@apple.com>
> 
>         [iOS] baidu.com: Synthetic bold renders too far apart, appears doubled.
>diff --git a/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity-expected.html b/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..75547c33a23c7176916ff31a88f96a30fb2bc99a
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity-expected.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity.html b/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..fa947f2d2d88e4142c9dd9a902c11c8dc15e0eca
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/nested-shared-layers-with-opacity.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-bounds.html b/LayoutTests/compositing/shared-backing/shared-layer-bounds.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..252825d3ff178d2b3400ac43d3e128f65e99f090
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-bounds.html
>@@ -0,0 +1,53 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Tests the bounds of the backing provider layer</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>
>+</head>
>+<body>
>+    <div class="composited trigger"></div>
>+    <div class="clipping">
>+        <div class="sharing">
>+            <div class="inner">
>+            </div>
>+        </div>
>+    </div>
>+</body>
>+</html>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-blending-expected.html b/LayoutTests/compositing/shared-backing/shared-layer-has-blending-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..8f47023a4913e12830c5f088bc4834d8186b2140
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-blending-expected.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-blending.html b/LayoutTests/compositing/shared-backing/shared-layer-has-blending.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..483240c4884de813976b78aad650d350df731c53
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-blending.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-filter-expected.html b/LayoutTests/compositing/shared-backing/shared-layer-has-filter-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9d38f9bf77949889a5221dd0d5a596608ebb5ea4
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-filter-expected.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-filter.html b/LayoutTests/compositing/shared-backing/shared-layer-has-filter.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..7b7a01e386704b5991adfa26daf0c9cfdd4a977b
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-filter.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-opacity-expected.html b/LayoutTests/compositing/shared-backing/shared-layer-has-opacity-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..faf330666b5e1505cfc6ca7aa790e6f905338db2
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-opacity-expected.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-opacity.html b/LayoutTests/compositing/shared-backing/shared-layer-has-opacity.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..0143d8f3f4d8401b704d8333b0d839c472ad2d8a
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-opacity.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-reflection-expected.html b/LayoutTests/compositing/shared-backing/shared-layer-has-reflection-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..8be25b288c9b39191b6bc482f2675529e2d672ad
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-reflection-expected.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-reflection.html b/LayoutTests/compositing/shared-backing/shared-layer-has-reflection.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9872332ed05772eecfd7658da799e88149672a63
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-reflection.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-transform-expected.html b/LayoutTests/compositing/shared-backing/shared-layer-has-transform-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..82c0710c9231a36acbad635f84f1ce47957b2cf8
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-transform-expected.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-has-transform.html b/LayoutTests/compositing/shared-backing/shared-layer-has-transform.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..44d8ccdb8f5aabfcd0c5167a337dcb2a5c3345a6
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-has-transform.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending-expected.html b/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..cffc6a8888a4f3b5cd85c60d893f58f54d1967ee
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending-expected.html
>@@ -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>
>diff --git a/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending.html b/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..0a77c837e56959ea4c3350283822e58ffb1193c1
>--- /dev/null
>+++ b/LayoutTests/compositing/shared-backing/shared-layer-isolates-blending.html
>@@ -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>

Flags:

ews-watchlist: commit-queue-

Actions: View | Formatted Diff | Diff

Attachments on bug 197692: 369544 | 369561 | 369637 | 369638 | 369639 | 369641 | 369642 | 369643 | 369644 | 369645 | 369646 | 369647 | 369652