REGRESSION (r168119): Album flipping animation doesn’t work
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Aug 2014 23:05:34 +0000 (23:05 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Aug 2014 23:05:34 +0000 (23:05 +0000)
https://bugs.webkit.org/show_bug.cgi?id=132801
Source/WebCore:

<rdar://problem/16878497>, <rdar://problem/17908085>

Reviewed by Dean Jackson.

In r168119 I avoided creating backing store for backface-visibility:hidden unless
some ancestor was 3d-transformed. However, when starting transitions or animations
that apply transforms, we don't do a layout, and therefore don't update the RenderLayer
flags that mark an ancestor as having a transform. This broke various content which
used backface-visibility:hidden for "flip" animations.

Make a low-risk fix that looks for the pattern of CSS properties used for flipping,
making a compositing layer for backface-visibility:hidden if the stacking context element
has transform-style: preserve-3d.

Test: compositing/backing/backface-visibility-flip.html

* rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::requiresCompositingForBackfaceVisibility):

LayoutTests:

Reviewed by Dean Jackson.

Test that starts a transform animation and dumps layers.

* compositing/backing/backface-visibility-flip-expected.txt: Added.
* compositing/backing/backface-visibility-flip.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@172183 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/compositing/backing/backface-visibility-flip-expected.txt [new file with mode: 0644]
LayoutTests/compositing/backing/backface-visibility-flip.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderLayerCompositor.cpp

index 2559ab2..ce97c50 100644 (file)
@@ -1,3 +1,15 @@
+2014-08-06  Simon Fraser  <simon.fraser@apple.com>
+
+        REGRESSION (r168119): Album flipping animation doesn’t work
+        https://bugs.webkit.org/show_bug.cgi?id=132801
+
+        Reviewed by Dean Jackson.
+        
+        Test that starts a transform animation and dumps layers.
+
+        * compositing/backing/backface-visibility-flip-expected.txt: Added.
+        * compositing/backing/backface-visibility-flip.html: Added.
+
 2014-08-06  Brent Fulgham  <bfulgham@apple.com>
 
         [Mac] Unable to scroll to bottom of nested scrollable areas
diff --git a/LayoutTests/compositing/backing/backface-visibility-flip-expected.txt b/LayoutTests/compositing/backing/backface-visibility-flip-expected.txt
new file mode 100644 (file)
index 0000000..594b94f
--- /dev/null
@@ -0,0 +1,41 @@
+Front Back
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (position 8.00 8.00)
+          (bounds 320.00 320.00)
+          (childrenTransform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 1.00 -0.00] [0.00 0.00 0.00 1.00])
+          (children 1
+            (GraphicsLayer
+              (position 10.00 10.00)
+              (bounds 300.00 300.00)
+              (preserves3D 1)
+              (children 2
+                (GraphicsLayer
+                  (bounds 300.00 300.00)
+                  (contentsOpaque 1)
+                  (drawsContent 1)
+                  (backfaceVisibility hidden)
+                )
+                (GraphicsLayer
+                  (bounds 300.00 300.00)
+                  (contentsOpaque 1)
+                  (drawsContent 1)
+                  (backfaceVisibility hidden)
+                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                )
+              )
+            )
+          )
+        )
+      )
+    )
+  )
+)
+
diff --git a/LayoutTests/compositing/backing/backface-visibility-flip.html b/LayoutTests/compositing/backing/backface-visibility-flip.html
new file mode 100644 (file)
index 0000000..ac49971
--- /dev/null
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <style>
+        .box {
+          width: 100px;
+          height: 100px;
+          background-color: silver;
+        }
+        
+        .container {
+            -webkit-perspective: 500px;
+            width: 300px;
+            padding: 10px;
+        }
+        
+        #flipper {
+            width: 300px;
+            height: 300px;
+            -webkit-transform-style: preserve-3d;
+        }
+        
+        #flipper > div {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .flipping {
+            -webkit-animation: flip 2s forwards;
+        }
+        
+        .front, .back {
+            -webkit-backface-visibility: hidden;
+        }
+        
+        .back {
+            -webkit-transform: rotateY(180deg);
+        }
+        
+        @-webkit-keyframes flip {
+            to { -webkit-transform: rotateY(0); }
+            to { -webkit-transform: rotateY(180deg); }
+        }
+    </style>
+    <script>
+        if (window.testRunner) {
+            testRunner.dumpAsText();
+            testRunner.waitUntilDone();
+        }
+
+        function doTest()
+        {
+            window.setTimeout(function() {
+                var flipper = document.getElementById('flipper');
+                flipper.addEventListener('webkitAnimationStart', testDone, false);
+                flipper.classList.add('flipping');
+            }, 250);
+        }
+        
+        function testDone()
+        {
+            var layersResult = document.getElementById('layers');
+            if (window.testRunner) {
+                layersResult.innerText = window.internals.layerTreeAsText(document);
+                testRunner.notifyDone();
+            }
+        }
+        window.addEventListener('load', doTest, false)
+    </script>
+</head>
+<body>
+    <div class="container">
+        <div id="flipper">
+            <div class="front box">
+                Front
+            </div>
+            <div class="back box">
+                Back
+            </div>
+        </div>
+    </div>
+<pre id="layers"></pre>
+</body>
+</html>
index 86f867a..c1c4820 100644 (file)
@@ -1,3 +1,26 @@
+2014-08-06  Simon Fraser  <simon.fraser@apple.com>
+
+        REGRESSION (r168119): Album flipping animation doesn’t work
+        https://bugs.webkit.org/show_bug.cgi?id=132801
+        <rdar://problem/16878497>, <rdar://problem/17908085>
+
+        Reviewed by Dean Jackson.
+        
+        In r168119 I avoided creating backing store for backface-visibility:hidden unless
+        some ancestor was 3d-transformed. However, when starting transitions or animations
+        that apply transforms, we don't do a layout, and therefore don't update the RenderLayer
+        flags that mark an ancestor as having a transform. This broke various content which
+        used backface-visibility:hidden for "flip" animations.
+        
+        Make a low-risk fix that looks for the pattern of CSS properties used for flipping,
+        making a compositing layer for backface-visibility:hidden if the stacking context element
+        has transform-style: preserve-3d.
+
+        Test: compositing/backing/backface-visibility-flip.html
+
+        * rendering/RenderLayerCompositor.cpp:
+        (WebCore::RenderLayerCompositor::requiresCompositingForBackfaceVisibility):
+
 2014-08-06  Brent Fulgham  <bfulgham@apple.com>
 
         Consolidate logic for calculating scrollbar page step size
index 6aeba1e..ae1751b 100644 (file)
@@ -2392,7 +2392,18 @@ bool RenderLayerCompositor::requiresCompositingForBackfaceVisibility(RenderLayer
     if (!(m_compositingTriggers & ChromeClient::ThreeDTransformTrigger))
         return false;
 
-    return renderer.style().backfaceVisibility() == BackfaceVisibilityHidden && renderer.layer()->has3DTransformedAncestor();
+    if (renderer.style().backfaceVisibility() != BackfaceVisibilityHidden)
+        return false;
+        
+    if (renderer.layer()->has3DTransformedAncestor())
+        return true;
+    
+    // FIXME: workaround for webkit.org/b/132801
+    RenderLayer* stackingContext = renderer.layer()->stackingContainer();
+    if (stackingContext && stackingContext->renderer().style().transformStyle3D() == TransformStyle3DPreserve3D)
+        return true;
+
+    return false;
 }
 
 bool RenderLayerCompositor::requiresCompositingForVideo(RenderLayerModelObject& renderer) const