Transform is sometimes left in a bad state after an animation
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Apr 2019 20:20:37 +0000 (20:20 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Apr 2019 20:20:37 +0000 (20:20 +0000)
https://bugs.webkit.org/show_bug.cgi?id=197401
rdar://problem/48179186

Reviewed by Dean Jackson.

Source/WebCore:

In some more complex compositing scenarios, at the end of an animation we'd
fail to push a new transform onto a layer, because updateGeometry() would
think there's an animation running (which there is, but in the "Ending" state).

It's simpler in this code to just always push transform and opacity to the layer;
they will get overridden by the animation while it's running. The current code
dates from the first landing of the file, and the reason for the if (!isRunningAcceleratedTransformAnimation)
check is lost in the sands of time.

I was not able to get a reliable ref or layer tree test for this, because the next compositing update
fixes it, and WTR seems to trigger one.  But the added test does show the bug
in Safari, and is a good test to have.

Test: compositing/animation/transform-after-animation.html

* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::updateGeometry):

LayoutTests:

Share code between all the overlap tests that work by creating dot matrices, and strip
out the transforms from the layer tree dumps, because they can vary with timing in these
tests.

* compositing/animation/transform-after-animation-expected.html: Added.
* compositing/animation/transform-after-animation.html: Added.
* compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
* compositing/layer-creation/animation-overlap-with-children.html:
* compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
* compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
* compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
* compositing/layer-creation/mismatched-transform-transition-overlap.html:
* compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
* compositing/layer-creation/multiple-keyframes-animation-overlap.html:
* compositing/layer-creation/resources/compositing-overlap-utils.js: Added.
(makeDots):
(layerTreeWithoutTransforms):
(dumpLayers):
* compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
* compositing/layer-creation/scale-rotation-animation-overlap.html:
* compositing/layer-creation/scale-rotation-transition-overlap.html:
* compositing/layer-creation/translate-animation-overlap-expected.txt:
* compositing/layer-creation/translate-animation-overlap.html:
* compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
* compositing/layer-creation/translate-scale-animation-overlap.html:
* compositing/layer-creation/translate-scale-transition-overlap.html:
* compositing/layer-creation/translate-transition-overlap.html:
* legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
* legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html:
* legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt:
* legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html:
* legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
* legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
* legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html:
* legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html:
* legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html:
* legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html:
* legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html:
* legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html:
* legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html:
* legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt:
* legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html:
* platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:

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

49 files changed:
LayoutTests/ChangeLog
LayoutTests/compositing/animation/transform-after-animation-expected.html [new file with mode: 0644]
LayoutTests/compositing/animation/transform-after-animation.html [new file with mode: 0644]
LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
LayoutTests/compositing/layer-creation/animation-overlap-with-children.html
LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html
LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html
LayoutTests/compositing/layer-creation/resources/compositing-overlap-utils.js [new file with mode: 0644]
LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html
LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html
LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt
LayoutTests/compositing/layer-creation/translate-animation-overlap.html
LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html
LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html
LayoutTests/compositing/layer-creation/translate-transition-overlap.html
LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html
LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt
LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html
LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
LayoutTests/platform/ios/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderLayerBacking.cpp

index a79372d..c59c091 100644 (file)
         * fast/events/touch/ios/double-tap-for-double-click2-expected.txt: Added.
         * fast/events/touch/ios/double-tap-for-double-click2.html: Added.
 
+2019-04-30  Simon Fraser  <simon.fraser@apple.com>
+
+        Transform is sometimes left in a bad state after an animation
+        https://bugs.webkit.org/show_bug.cgi?id=197401
+        rdar://problem/48179186
+
+        Reviewed by Dean Jackson.
+        
+        Share code between all the overlap tests that work by creating dot matrices, and strip
+        out the transforms from the layer tree dumps, because they can vary with timing in these
+        tests.
+
+        * compositing/animation/transform-after-animation-expected.html: Added.
+        * compositing/animation/transform-after-animation.html: Added.
+        * compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
+        * compositing/layer-creation/animation-overlap-with-children.html:
+        * compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
+        * compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
+        * compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
+        * compositing/layer-creation/mismatched-transform-transition-overlap.html:
+        * compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
+        * compositing/layer-creation/multiple-keyframes-animation-overlap.html:
+        * compositing/layer-creation/resources/compositing-overlap-utils.js: Added.
+        (makeDots):
+        (layerTreeWithoutTransforms):
+        (dumpLayers):
+        * compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
+        * compositing/layer-creation/scale-rotation-animation-overlap.html:
+        * compositing/layer-creation/scale-rotation-transition-overlap.html:
+        * compositing/layer-creation/translate-animation-overlap-expected.txt:
+        * compositing/layer-creation/translate-animation-overlap.html:
+        * compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
+        * compositing/layer-creation/translate-scale-animation-overlap.html:
+        * compositing/layer-creation/translate-scale-transition-overlap.html:
+        * compositing/layer-creation/translate-transition-overlap.html:
+        * legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
+        * legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html:
+        * legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html:
+        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html:
+        * legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt:
+        * legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html:
+        * platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
+
 2019-04-29  Javier Fernandez  <jfernandez@igalia.com>
 
         line should not be broken before the first space after a word
diff --git a/LayoutTests/compositing/animation/transform-after-animation-expected.html b/LayoutTests/compositing/animation/transform-after-animation-expected.html
new file mode 100644 (file)
index 0000000..4cadef7
--- /dev/null
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .stage {
+            margin: 20px;
+            width: 300px; height: 250px;
+            border: 2px solid black;
+            transform-style: preserve-3d;
+        }
+        
+        .slide {
+            width: 100%;
+            height: 100%;
+            -webkit-backface-visibility: hidden;
+            background-color: blue;
+            transform: translateX(0px);
+        }
+    </style>
+</head>
+<body>
+    <div class="stage">
+        <div id="target" class="slide" onanimationend="animationEnded()"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/compositing/animation/transform-after-animation.html b/LayoutTests/compositing/animation/transform-after-animation.html
new file mode 100644 (file)
index 0000000..fe51391
--- /dev/null
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .stage {
+            margin: 20px;
+            width: 300px; height: 250px;
+            border: 2px solid black;
+            transform-style: preserve-3d;
+        }
+        
+        .slide {
+            width: 100%;
+            height: 100%;
+            animation-duration: 20ms;
+            animation-fill-mode: forwards;
+            -webkit-backface-visibility: hidden;
+            background-color: blue;
+        }
+        
+        .animating {
+            animation-name: slide;
+        }
+        
+        @keyframes slide {
+            0% {   transform-origin: 50% 50%; transform: translateX(400px); } 
+            50% {  transform-origin: 50% 50%; transform: translateX(0px); } 
+            100% { transform-origin: 50% 50%; transform: translateX(0px); }             
+        }
+    </style>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        function animationEnded()
+        {
+            if (window.testRunner)
+                testRunner.notifyDone();
+        }
+
+        window.addEventListener('load', () => {
+            document.getElementById('target').classList.add('animating');
+        }, false);
+    </script>
+</head>
+<body>
+    <div class="stage">
+        <div id="target" class="slide" onanimationend="animationEnded()"></div>
+    </div>
+</body>
+</html>
index e44d701..840c4fe 100644 (file)
@@ -20,6 +20,7 @@
               (contentsOpaque 1)
               (drawsContent 1)
               (backingStoreAttached 1)
+              (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] [-520.00 0.00 0.00 1.00])
             )
           )
         )
index f583b92..5df7689 100644 (file)
@@ -52,6 +52,7 @@
       to { -webkit-transform: translateX(100px); }
     }
   </style>
+  <script src="resources/compositing-overlap-utils.js"></script>
   <script>
     if (window.testRunner) {
       testRunner.dumpAsText();
     function runTest()
     {
       var box = document.getElementById('to-animate');
-      box.addEventListener('webkitAnimationStart', animationStarted, false);
+      box.addEventListener('webkitAnimationStart', dumpLayers, false);
       box.classList.add('animating');
     }
     
-    function animationStarted()
-    {
-      if (window.testRunner) {
-        document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-        testRunner.notifyDone();
-      }
-    }
     window.addEventListener('load', runTest, false);
   </script>
 </head>
index d3c156c..dd59eb8 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (bounds 4.00 4.00)
index 8754c60..7a58eed 100644 (file)
             }
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 30;
-            const height = 30;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(30, 30);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -74,7 +54,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 284c7e9..d7dd5e2 100644 (file)
             -webkit-transform: scale(1.3) rotate(1deg);
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 30;
-            const height = 30;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(30, 30);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -65,7 +45,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index ba4393e..e764971 100644 (file)
             -webkit-transform: scale(1.3);
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 30;
-            const height = 30;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(30, 30);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -65,7 +45,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 89939e2..949f1a5 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.06 0.89)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 20.00 30.00)
index 6b310f4..f070b82 100644 (file)
             }
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 50;
-            const height = 23;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(50, 23);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -82,7 +62,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
diff --git a/LayoutTests/compositing/layer-creation/resources/compositing-overlap-utils.js b/LayoutTests/compositing/layer-creation/resources/compositing-overlap-utils.js
new file mode 100644 (file)
index 0000000..c3af95b
--- /dev/null
@@ -0,0 +1,27 @@
+function makeDots(width, height, spacing = 10)
+{
+    for (var row = 0; row < height; ++row) {
+        for (var col = 0; col < width; ++col) {
+            var dot = document.createElement('div');
+            dot.className = 'dot';
+            dot.style.left = spacing * col + 'px';
+            dot.style.top = spacing * row + 'px';
+            document.body.appendChild(dot);
+        }
+    }
+}
+
+function layerTreeWithoutTransforms()
+{
+    var layerTreeText = internals.layerTreeAsText(document);
+    var filteredLines = layerTreeText.split("\n").filter(line => line.indexOf('transform') == -1);
+    return filteredLines.join('\n');
+}
+
+function dumpLayers()
+{
+    if (window.testRunner) {
+        document.getElementById('layers').innerText = layerTreeWithoutTransforms();
+        testRunner.notifyDone();
+    }
+}
index a1b2f7f..4e91501 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 20.00)
index 8f225f3..c8d1b3c 100644 (file)
             }
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 60;
-            const height = 60;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(60, 60);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -82,7 +62,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 2a5f907..f4e6afd 100644 (file)
@@ -27,6 +27,7 @@
             -webkit-transform: scale(1.3) rotate(45deg);
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             }
         }
 
-        function makeDots()
+        function runTest()
         {
-            const width = 42;
-            const height = 42;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(42, 42);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -64,7 +52,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 43ce17b..204b75a 100644 (file)
@@ -11,7 +11,6 @@
           (position 24.00 38.00)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 40.00)
index a160cbe..7e62c04 100644 (file)
             }
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 40;
-            const height = 20;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(40, 20);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -71,7 +51,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 6578552..2818047 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.11 0.89)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 30.00)
index c49fd52..0774c87 100644 (file)
             }
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 50;
-            const height = 23;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(50, 23);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -73,7 +53,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index b0a17a2..f53c3de 100644 (file)
@@ -27,6 +27,7 @@
             -webkit-transform: translateX(100px) scale(1.3);
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             }
         }
 
-        function makeDots()
+        function runTest()
         {
-            const width = 50;
-            const height = 23;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(50, 23);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -64,7 +52,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 54d786c..242bfd6 100644 (file)
             -webkit-transform: translateX(100px);
         }
     </style>
+    <script src="resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 40;
-            const height = 20;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(40, 20);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -64,7 +44,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 840c4fe..e44d701 100644 (file)
@@ -20,7 +20,6 @@
               (contentsOpaque 1)
               (drawsContent 1)
               (backingStoreAttached 1)
-              (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] [-520.00 0.00 0.00 1.00])
             )
           )
         )
index 281f09c..6502372 100644 (file)
         testRunner.dumpAsText();
         testRunner.waitUntilDone();
     }
+    
+    function layerTreeWithoutTransforms()
+    {
+        var layerTreeText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
+        var filteredLines = layerTreeText.split("\n").filter(line => line.indexOf('transform') == -1);
+        return filteredLines.join('\n');
+    }
 
     function dumpLayerTree()
     {
         if (!window.internals)
             return;
 
-        var out = document.getElementById('out');
-        out.innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
+        document.getElementById('out').textContent = layerTreeWithoutTransforms();
     }
 
     function dumpLayersSoon()
index 85cdf2d..90fd7e6 100644 (file)
@@ -14,6 +14,7 @@
           (bounds 148.00 128.00)
           (drawsContent 1)
           (backingStoreAttached 1)
+          (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] [-400.00 0.00 0.00 1.00])
           (children 1
             (GraphicsLayer
               (offsetFromRenderer width=-14 height=-14)
index 90c69c8..e43b30e 100644 (file)
@@ -52,6 +52,7 @@
       to { -webkit-transform: translateX(100px); }
     }
   </style>
+  <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
   <script>
     if (window.testRunner) {
       testRunner.dumpAsText();
     function runTest()
     {
       var box = document.getElementById('to-animate');
-      box.addEventListener('webkitAnimationStart', animationStarted, false);
+      box.addEventListener('webkitAnimationStart', dumpLayers, false);
       box.classList.add('animating');
     }
-    
-    function animationStarted()
-    {
-      if (window.testRunner) {
-        document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-        testRunner.notifyDone();
-      }
-    }
+
     window.addEventListener('load', runTest, false);
   </script>
 </head>
index d3c156c..dd59eb8 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (bounds 4.00 4.00)
index 123c946..6052369 100644 (file)
             }
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 30;
-            const height = 30;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(30, 30);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -74,7 +54,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 7a8bd3d..dd59eb8 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (transform [1.30 0.02 0.00 0.00] [-0.02 1.30 0.00 0.00] [0.00 0.00 1.00 0.00] [0.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (bounds 4.00 4.00)
index 6fb906a..dea0845 100644 (file)
             -webkit-transform: scale(1.3) rotate(1deg);
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 30;
-            const height = 30;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(30, 30);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
                 window.setTimeout(dumpLayers, 0);
             }, 0);
         }
-        
-        window.addEventListener('load', makeDots, false);
+
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 9c995bd..852a4e7 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (transform [1.30 0.00 0.00 0.00] [0.00 1.30 0.00 0.00] [0.00 0.00 1.00 0.00] [0.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 60.00 80.00)
index dbfa5ad..d2cacf0 100644 (file)
             -webkit-transform: scale(1.3);
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 30;
-            const height = 30;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(30, 30);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -65,7 +45,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 89939e2..949f1a5 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.06 0.89)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 20.00 30.00)
index bd2dbed..c910f8b 100644 (file)
             }
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
+            makeDots(50, 23);
 
-        function makeDots()
-        {
-            const width = 50;
-            const height = 23;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
-            
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
                 document.body.classList.add('changed');
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index a1b2f7f..4e91501 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 20.00)
index a0e4676..9da6240 100644 (file)
             }
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 60;
-            const height = 60;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(60, 60);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -82,7 +62,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 2067abd..68fc7b5 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (transform [0.92 0.92 0.00 0.00] [-0.92 0.92 0.00 0.00] [0.00 0.00 1.00 0.00] [0.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 20.00 10.00)
index f4b9ad0..ebc1769 100644 (file)
             -webkit-transform: scale(1.3) rotate(45deg);
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 42;
-            const height = 42;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(42, 42);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -64,7 +44,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 43ce17b..204b75a 100644 (file)
@@ -11,7 +11,6 @@
           (position 24.00 38.00)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 40.00)
index e119303..ff5d948 100644 (file)
             }
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
+            makeDots(40, 20);
 
-        function makeDots()
-        {
-            const width = 40;
-            const height = 20;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
-            
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
                 document.body.classList.add('changed');
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 6578552..2818047 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.11 0.89)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 30.00)
index 78f67af..5dbb8a7 100644 (file)
             }
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 50;
-            const height = 23;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(50, 23);
             
             window.setTimeout(function() {
                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
@@ -73,7 +53,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index 55b4e27..fccb59f 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.11 0.89)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (transform [1.30 0.00 0.00 0.00] [0.00 1.30 0.00 0.00] [0.00 0.00 1.00 0.00] [100.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 30.00)
index 3f7fef7..b2817fe 100644 (file)
             -webkit-transform: translateX(100px) scale(1.3);
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 50;
-            const height = 23;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(50, 23);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -64,7 +44,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index dc57596..204b75a 100644 (file)
@@ -11,7 +11,6 @@
           (position 24.00 38.00)
           (bounds 228.00 128.00)
           (drawsContent 1)
-          (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] [100.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 40.00)
index af82074..d840469 100644 (file)
             -webkit-transform: translateX(100px);
         }
     </style>
+    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }
 
-        function dumpLayers()
+        function runTest()
         {
-            if (window.testRunner) {
-                document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
-                testRunner.notifyDone();
-            }
-        }
-
-        function makeDots()
-        {
-            const width = 40;
-            const height = 20;
-            
-            const spacing = 10;
-            
-            for (var row = 0; row < height; ++row) {
-                for (var col = 0; col < width; ++col) {
-                    var dot = document.createElement('div');
-                    dot.className = 'dot';
-                    dot.style.left = spacing * col + 'px';
-                    dot.style.top = spacing * row + 'px';
-                    document.body.appendChild(dot);
-                }
-            }
+            makeDots(40, 20);
             
             window.setTimeout(function() {
                 document.body.classList.add('changed');
@@ -64,7 +44,7 @@
             }, 0);
         }
         
-        window.addEventListener('load', makeDots, false);
+        window.addEventListener('load', runTest, false);
     </script>
 </head>
 <body>
index d90bcf5..7a3f3c6 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 20.00)
index d90bcf5..7a3f3c6 100644 (file)
@@ -12,7 +12,6 @@
           (anchor 0.74 0.27)
           (bounds 148.00 128.00)
           (drawsContent 1)
-          (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] [10.00 0.00 0.00 1.00])
         )
         (GraphicsLayer
           (position 30.00 20.00)
index a5a709d..ed574c0 100644 (file)
         * page/ios/FrameIOS.mm:
         (WebCore::Frame::nodeRespondingToDoubleClickEvent):
 
+2019-04-30  Simon Fraser  <simon.fraser@apple.com>
+
+        Transform is sometimes left in a bad state after an animation
+        https://bugs.webkit.org/show_bug.cgi?id=197401
+        rdar://problem/48179186
+
+        Reviewed by Dean Jackson.
+        
+        In some more complex compositing scenarios, at the end of an animation we'd
+        fail to push a new transform onto a layer, because updateGeometry() would
+        think there's an animation running (which there is, but in the "Ending" state).
+
+        It's simpler in this code to just always push transform and opacity to the layer;
+        they will get overridden by the animation while it's running. The current code
+        dates from the first landing of the file, and the reason for the if (!isRunningAcceleratedTransformAnimation)
+        check is lost in the sands of time.
+
+        I was not able to get a reliable ref or layer tree test for this, because the next compositing update
+        fixes it, and WTR seems to trigger one.  But the added test does show the bug
+        in Safari, and is a good test to have.
+
+        Test: compositing/animation/transform-after-animation.html
+
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::updateGeometry):
+
 2019-04-29  Youenn Fablet  <youenn@apple.com>
 
         getDisplayMedia should be called on user gesture
index b384339..1921292 100644 (file)
@@ -1001,26 +1001,14 @@ void RenderLayerBacking::updateGeometry()
     const RenderStyle& style = renderer().style();
 
     bool isRunningAcceleratedTransformAnimation = false;
-    bool isRunningAcceleratedOpacityAnimation = false;
     if (RuntimeEnabledFeatures::sharedFeatures().webAnimationsCSSIntegrationEnabled()) {
-        if (auto* timeline = renderer().documentTimeline()) {
+        if (auto* timeline = renderer().documentTimeline())
             isRunningAcceleratedTransformAnimation = timeline->isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyTransform);
-            isRunningAcceleratedOpacityAnimation = timeline->isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyOpacity);
-        }
-    } else {
+    } else
         isRunningAcceleratedTransformAnimation = renderer().animation().isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyTransform);
-        isRunningAcceleratedOpacityAnimation = renderer().animation().isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyOpacity);
-    }
-
-    // Set transform property, if it is not animating. We have to do this here because the transform
-    // is affected by the layer dimensions.
-    if (!isRunningAcceleratedTransformAnimation)
-        updateTransform(style);
-
-    // Set opacity, if it is not animating.
-    if (!isRunningAcceleratedOpacityAnimation)
-        updateOpacity(style);
 
+    updateTransform(style);
+    updateOpacity(style);
     updateFilters(style);
 #if ENABLE(FILTERS_LEVEL_2)
     updateBackdropFilters(style);