Attachment 357356 Details for Bug 192725 – Patch

[patch] Patch

bug-192725-20181214164707.patch (text/plain), 14.41 KB, created by Simon Fraser (smfr) on 2018-12-14 16:47:07 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2018-12-14 16:47:07 PST

Size: 14.41 KB

patch

obsolete

>Subversion Revision: 239222
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 854ee33b41e81f2b845a701004e4be25b79f5d2b..62b9e5214cff1ceed4db7a8d4be37948f425df69 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,28 @@
>+2018-12-14  Simon Fraser  <simon.fraser@apple.com>
>+
>+        REGRESSION (r233268): Elements animated in from offscreen sometimes don't display
>+        https://bugs.webkit.org/show_bug.cgi?id=192725
>+        rdar://problem/46011418
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        There were two problems with backing store attachment and animation.
>+        
>+        First, animations are an input into the "backing store attached" logic, so when they change
>+        we should set the CoverageRectChanged bit on GraphicsLayerCA.
>+        
>+        Secondly, when an ancestor has unknown animation extent, all its descendants need to
>+        get backing store, so we need to set childCommitState.ancestorWithTransformAnimationIntersectsCoverageRect when
>+        the current layer has no animation extent.
>+
>+        Tests: compositing/backing/animate-into-view-with-descendant.html
>+               compositing/backing/animate-into-view.html
>+
>+        * platform/graphics/ca/GraphicsLayerCA.cpp:
>+        (WebCore::GraphicsLayerCA::addAnimation):
>+        (WebCore::GraphicsLayerCA::removeAnimation):
>+        (WebCore::GraphicsLayerCA::recursiveCommitChanges):
>+
> 2018-12-14  Simon Fraser  <simon.fraser@apple.com>
> 
>         REGRESSION (r233268): contents of an animated element inside overflow:hidden disappear
>diff --git a/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp b/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp
>index d351274fd304615d9bee36b249ffc9164be24577..6454c3cceb7d5f2832bdc8accbe7ad6b0eb51b64 100644
>--- a/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp
>+++ b/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp
>@@ -1039,7 +1039,7 @@ bool GraphicsLayerCA::addAnimation(const KeyframeValueList& valueList, const Flo
>         createdAnimations = createAnimationFromKeyframes(valueList, anim, animationName, Seconds { timeOffset });
> 
>     if (createdAnimations)
>-        noteLayerPropertyChanged(AnimationChanged);
>+        noteLayerPropertyChanged(AnimationChanged | CoverageRectChanged);
> 
>     return createdAnimations;
> }
>@@ -1072,7 +1072,7 @@ void GraphicsLayerCA::removeAnimation(const String& animationName)
>         return;
> 
>     addProcessingActionForAnimation(animationName, AnimationProcessingAction(Remove));
>-    noteLayerPropertyChanged(AnimationChanged);
>+    noteLayerPropertyChanged(AnimationChanged | CoverageRectChanged);
> }
> 
> void GraphicsLayerCA::platformCALayerAnimationStarted(const String& animationKey, MonotonicTime startTime)
>@@ -1577,7 +1577,7 @@ void GraphicsLayerCA::recursiveCommitChanges(CommitState& commitState, const Tra
> 
>     if (nowRunningTransformAnimation) {
>         childCommitState.ancestorHasTransformAnimation = true;
>-        if (m_intersectsCoverageRect)
>+        if (m_intersectsCoverageRect || !animationExtent())
>             childCommitState.ancestorWithTransformAnimationIntersectsCoverageRect = true;
>         affectedByTransformAnimation = true;
>     }
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index b50c9ebad99a6bb450492177deca0c76b203accf..bff36a8b0a52398584dcecfaaceb6dd7fd8ecc37 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,18 @@
>+2018-12-14  Simon Fraser  <simon.fraser@apple.com>
>+
>+        REGRESSION (r233268): Elements animated in from offscreen sometimes don't display
>+        https://bugs.webkit.org/show_bug.cgi?id=192725
>+        rdar://problem/46011418
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * compositing/backing/animate-into-view-expected.txt: Added.
>+        * compositing/backing/animate-into-view-with-descendant-expected.txt: Added.
>+        * compositing/backing/animate-into-view-with-descendant.html: Added.
>+        * compositing/backing/animate-into-view.html: Added.
>+        * platform/ios/compositing/backing/animate-into-view-expected.txt: Added.
>+        * platform/ios/compositing/backing/animate-into-view-with-descendant-expected.txt: Added.
>+
> 2018-12-14  Simon Fraser  <simon.fraser@apple.com>
> 
>         REGRESSION (r233268): contents of an animated element inside overflow:hidden disappear
>diff --git a/LayoutTests/compositing/backing/animate-into-view-expected.txt b/LayoutTests/compositing/backing/animate-into-view-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..2b44a952dbc12511f75c1ff28fc8fec388a80b92
>--- /dev/null
>+++ b/LayoutTests/compositing/backing/animate-into-view-expected.txt
>@@ -0,0 +1,24 @@
>+T
>+(GraphicsLayer
>+  (anchor 0.00 0.00)
>+  (bounds 912.00 585.00)
>+  (backingStoreAttached 1)
>+  (children 1
>+    (GraphicsLayer
>+      (bounds 912.00 585.00)
>+      (contentsOpaque 1)
>+      (backingStoreAttached 1)
>+      (children 1
>+        (GraphicsLayer
>+          (position 503.00 26.00)
>+          (anchor 0.50 0.52)
>+          (bounds 10.00 31.00)
>+          (drawsContent 1)
>+          (backingStoreAttached 1)
>+          (transform [1.50 -0.00 0.00 0.00] [0.00 0.50 0.00 0.00] [0.00 0.00 1.00 0.00] [-565.25 7.75 0.00 1.00])
>+        )
>+      )
>+    )
>+  )
>+)
>+
>diff --git a/LayoutTests/compositing/backing/animate-into-view-with-descendant-expected.txt b/LayoutTests/compositing/backing/animate-into-view-with-descendant-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..471400911cc7a044c310fdf73f7aee4e8f4e63ec
>--- /dev/null
>+++ b/LayoutTests/compositing/backing/animate-into-view-with-descendant-expected.txt
>@@ -0,0 +1,30 @@
>+T
>+(GraphicsLayer
>+  (anchor 0.00 0.00)
>+  (bounds 912.00 585.00)
>+  (backingStoreAttached 1)
>+  (children 1
>+    (GraphicsLayer
>+      (bounds 912.00 585.00)
>+      (contentsOpaque 1)
>+      (backingStoreAttached 1)
>+      (children 1
>+        (GraphicsLayer
>+          (position 503.00 66.00)
>+          (bounds 20.00 20.00)
>+          (backingStoreAttached 1)
>+          (transform [1.50 -0.00 0.00 0.00] [0.00 0.50 0.00 0.00] [0.00 0.00 1.00 0.00] [-565.25 7.75 0.00 1.00])
>+          (children 1
>+            (GraphicsLayer
>+              (anchor 0.50 0.52)
>+              (bounds 10.00 31.00)
>+              (drawsContent 1)
>+              (backingStoreAttached 1)
>+            )
>+          )
>+        )
>+      )
>+    )
>+  )
>+)
>+
>diff --git a/LayoutTests/compositing/backing/animate-into-view-with-descendant.html b/LayoutTests/compositing/backing/animate-into-view-with-descendant.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..39ebdd7a774bb69fb9c6d69ee9995b34ca6c97e2
>--- /dev/null
>+++ b/LayoutTests/compositing/backing/animate-into-view-with-descendant.html
>@@ -0,0 +1,81 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <style>
>+        .wrapper {
>+            position: relative;
>+            margin-top: 50px;
>+            margin-left: -50px;
>+            width: 952px;
>+            height: 82px;
>+            border: 1px solid black;
>+            perspective: 2000px;
>+        }
>+        
>+        .middle {
>+            position: absolute;
>+            top: 15px;
>+            left: 544px;
>+            padding: 10px;
>+            animation-fill-mode: forwards;
>+            animation-duration: 3s;
>+            animation-name: bounce;
>+        }
>+        
>+        .letter {
>+            position: absolute;
>+            top: 0px;
>+            left: 0px;
>+            width: 9px;
>+            height: 31px;
>+            position: absolute;
>+            background-color: silver;
>+            transform: translateZ(0);
>+        }
>+
>+        @keyframes bounce {
>+            0% { transform: matrix3d(1.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, -565.25, 7.75, 0, 1); }
>+            19% { transform: matrix3d(1.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, -565.25, 7.75, 0, 1); }
>+            25% { transform: matrix3d(1.1558, 0, 0, 0, -0.00666, 0.7771, 0, 0, 0, 0, 1, 0, -504.006, -41.6730, 0, 1); }
>+            47% { transform: matrix3d(1.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, -283.75, 7.75, 0, 1); }
>+            60% { transform: matrix3d(1.3906, 0, 0, 0, 0.073394, 0.6825, 0, 0, 0, 0, 1, 0, -143.645, 4.920146, 0, 1); }
>+            89% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
>+            100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
>+        }
>+    </style>
>+    <script>
>+        if (window.testRunner) {
>+            testRunner.dumpAsText();
>+            testRunner.waitUntilDone();
>+        }
>+
>+        function dumpLayers()
>+        {
>+            var layersResult = document.getElementById('layers');
>+            if (window.testRunner)
>+                layersResult.innerText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
>+        }
>+    </script>
>+</head>
>+<body>
>+
>+<div class="wrapper">
>+    <div id="target" class="middle">
>+        <div class="letter">T</div>
>+    </div>
>+</div>
>+
>+<pre id="layers">Layer tree goes here in DRT</pre>
>+
>+<script>
>+    let animator = document.getElementById('target');
>+    animator.addEventListener('animationstart', () => {
>+        requestAnimationFrame(() => {
>+            dumpLayers();
>+            if (window.testRunner)
>+                testRunner.notifyDone();
>+        });
>+    });
>+</script>
>+</body>
>+</html>
>diff --git a/LayoutTests/compositing/backing/animate-into-view.html b/LayoutTests/compositing/backing/animate-into-view.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..2b669a11318e78b52a6c0a32db028e748693bae8
>--- /dev/null
>+++ b/LayoutTests/compositing/backing/animate-into-view.html
>@@ -0,0 +1,88 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <style>
>+        .wrapper {
>+            position: relative;
>+            margin-top: 10px;
>+            margin-left: -50px;
>+            width: 952px;
>+            height: 82px;
>+            border: 1px solid black;
>+            perspective: 2000px;
>+        }
>+        
>+        .middle {
>+            position: absolute;
>+            top: 15px;
>+            left: 544px;
>+            width: 9px;
>+            height: 31px;
>+        }
>+        
>+        .letter {
>+            top: 0px;
>+            left: 0px;
>+            width: 9px;
>+            height: 31px;
>+            position: absolute;
>+            background-color: blue;
>+            animation-fill-mode: forwards;
>+            animation-duration: 3s;
>+            animation-name: bounce;
>+        }
>+        
>+        .animating {
>+            animation-name: bounce;
>+        }
>+
>+        @keyframes bounce {
>+            0% { transform: matrix3d(1.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, -565.25, 7.75, 0, 1); }
>+            19% { transform: matrix3d(1.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, -565.25, 7.75, 0, 1); }
>+            25% { transform: matrix3d(1.1558, 0, 0, 0, -0.00666, 0.7771, 0, 0, 0, 0, 1, 0, -504.006, -41.6730, 0, 1); }
>+            47% { transform: matrix3d(1.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, -283.75, 7.75, 0, 1); }
>+            60% { transform: matrix3d(1.3906, 0, 0, 0, 0.073394, 0.6825, 0, 0, 0, 0, 1, 0, -143.645, 4.920146, 0, 1); }
>+            89% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
>+            100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
>+        }
>+    </style>
>+    <script>
>+        if (window.testRunner) {
>+            testRunner.dumpAsText();
>+            testRunner.waitUntilDone();
>+        }
>+
>+        function dumpLayers()
>+        {
>+            var layersResult = document.getElementById('layers');
>+            if (window.testRunner)
>+                layersResult.innerText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
>+        }
>+
>+        window.addEventListener('load', () => {
>+            requestAnimationFrame(() => {
>+                let animator = document.getElementById('target');
>+                animator.addEventListener('animationstart', () => {
>+                    requestAnimationFrame(() => {
>+                        dumpLayers();
>+                        if (window.testRunner)
>+                            testRunner.notifyDone();
>+                    });
>+                });
>+                animator.classList.add('animating');
>+            });
>+        }, false);
>+    </script>
>+</head>
>+<body>
>+
>+<div class="wrapper">
>+    <div class="middle">
>+        <div id="target" class="letter">T</div>
>+    </div>
>+</div>
>+
>+<pre id="layers">Layer tree goes here in DRT</pre>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/platform/ios/compositing/backing/animate-into-view-expected.txt b/LayoutTests/platform/ios/compositing/backing/animate-into-view-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d4dea64d0e1c8b9d0cdad25917b2e3c1832751c9
>--- /dev/null
>+++ b/LayoutTests/platform/ios/compositing/backing/animate-into-view-expected.txt
>@@ -0,0 +1,24 @@
>+T
>+(GraphicsLayer
>+  (anchor 0.00 0.00)
>+  (bounds 912.00 600.00)
>+  (backingStoreAttached 1)
>+  (children 1
>+    (GraphicsLayer
>+      (bounds 912.00 600.00)
>+      (contentsOpaque 1)
>+      (backingStoreAttached 1)
>+      (children 1
>+        (GraphicsLayer
>+          (position 503.00 26.00)
>+          (anchor 0.45 0.50)
>+          (bounds 10.00 31.00)
>+          (drawsContent 1)
>+          (backingStoreAttached 1)
>+          (transform [1.50 -0.00 0.00 0.00] [0.00 0.50 0.00 0.00] [0.00 0.00 1.00 0.00] [-565.25 7.75 0.00 1.00])
>+        )
>+      )
>+    )
>+  )
>+)
>+
>diff --git a/LayoutTests/platform/ios/compositing/backing/animate-into-view-with-descendant-expected.txt b/LayoutTests/platform/ios/compositing/backing/animate-into-view-with-descendant-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..e92d19bbb90cb7fd79149f2af1055aa72bc2c9a7
>--- /dev/null
>+++ b/LayoutTests/platform/ios/compositing/backing/animate-into-view-with-descendant-expected.txt
>@@ -0,0 +1,30 @@
>+T
>+(GraphicsLayer
>+  (anchor 0.00 0.00)
>+  (bounds 912.00 600.00)
>+  (backingStoreAttached 1)
>+  (children 1
>+    (GraphicsLayer
>+      (bounds 912.00 600.00)
>+      (contentsOpaque 1)
>+      (backingStoreAttached 1)
>+      (children 1
>+        (GraphicsLayer
>+          (position 503.00 66.00)
>+          (bounds 20.00 20.00)
>+          (backingStoreAttached 1)
>+          (transform [1.50 -0.00 0.00 0.00] [0.00 0.50 0.00 0.00] [0.00 0.00 1.00 0.00] [-565.25 7.75 0.00 1.00])
>+          (children 1
>+            (GraphicsLayer
>+              (anchor 0.45 0.50)
>+              (bounds 10.00 31.00)
>+              (drawsContent 1)
>+              (backingStoreAttached 1)
>+            )
>+          )
>+        )
>+      )
>+    )
>+  )
>+)
>+

Actions: View | Formatted Diff | Diff

Attachments on bug 192725: 357356