Changeset 244800 in webkit


Ignore:
Timestamp:
Apr 30, 2019 1:20:37 PM (5 years ago)
Author:
Simon Fraser
Message:

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.

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:
Location:
trunk
Files:
3 added
46 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r244797 r244800  
    192192        * fast/events/touch/ios/double-tap-for-double-click2-expected.txt: Added.
    193193        * fast/events/touch/ios/double-tap-for-double-click2.html: Added.
     194
     1952019-04-30  Simon Fraser  <simon.fraser@apple.com>
     196
     197        Transform is sometimes left in a bad state after an animation
     198        https://bugs.webkit.org/show_bug.cgi?id=197401
     199        rdar://problem/48179186
     200
     201        Reviewed by Dean Jackson.
     202       
     203        Share code between all the overlap tests that work by creating dot matrices, and strip
     204        out the transforms from the layer tree dumps, because they can vary with timing in these
     205        tests.
     206
     207        * compositing/animation/transform-after-animation-expected.html: Added.
     208        * compositing/animation/transform-after-animation.html: Added.
     209        * compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
     210        * compositing/layer-creation/animation-overlap-with-children.html:
     211        * compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
     212        * compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
     213        * compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
     214        * compositing/layer-creation/mismatched-transform-transition-overlap.html:
     215        * compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
     216        * compositing/layer-creation/multiple-keyframes-animation-overlap.html:
     217        * compositing/layer-creation/resources/compositing-overlap-utils.js: Added.
     218        (makeDots):
     219        (layerTreeWithoutTransforms):
     220        (dumpLayers):
     221        * compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
     222        * compositing/layer-creation/scale-rotation-animation-overlap.html:
     223        * compositing/layer-creation/scale-rotation-transition-overlap.html:
     224        * compositing/layer-creation/translate-animation-overlap-expected.txt:
     225        * compositing/layer-creation/translate-animation-overlap.html:
     226        * compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
     227        * compositing/layer-creation/translate-scale-animation-overlap.html:
     228        * compositing/layer-creation/translate-scale-transition-overlap.html:
     229        * compositing/layer-creation/translate-transition-overlap.html:
     230        * legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
     231        * legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html:
     232        * legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt:
     233        * legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html:
     234        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
     235        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
     236        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt:
     237        * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
     238        * legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt:
     239        * legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html:
     240        * legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
     241        * legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html:
     242        * legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
     243        * legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html:
     244        * legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt:
     245        * legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html:
     246        * legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt:
     247        * legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html:
     248        * legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
     249        * legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html:
     250        * legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt:
     251        * legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html:
     252        * legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt:
     253        * legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html:
     254        * platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
    194255
    1952562019-04-29  Javier Fernandez  <jfernandez@igalia.com>

  • trunk/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt

    r239222 r244800  
    2121              (drawsContent 1)
    2222              (backingStoreAttached 1)
     23              (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])
    2324            )
    2425          )

  • trunk/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html

    r236541 r244800  
    5353    }
    5454  </style>
     55  <script src="resources/compositing-overlap-utils.js"></script>
    5556  <script>
    5657    if (window.testRunner) {
    … …  
    6263    {
    6364      var box = document.getElementById('to-animate');
    64       box.addEventListener('webkitAnimationStart', animationStarted, false);
     65      box.addEventListener('webkitAnimationStart', dumpLayers, false);
    6566      box.classList.add('animating');
    6667    }
    6768   
    68     function animationStarted()
    69     {
    70       if (window.testRunner) {
    71         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    72         testRunner.notifyDone();
    73       }
    74     }
    7569    window.addEventListener('load', runTest, false);
    7670  </script>

  • trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt

    r225897 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html

    r236541 r244800  
    3838        }
    3939    </style>
     40    <script src="resources/compositing-overlap-utils.js"></script>
    4041    <script>
    4142        if (window.testRunner) {
    … …  
    4445        }
    4546
    46         function dumpLayers()
     47        function runTest()
    4748        {
    48             if (window.testRunner) {
    49                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    50                 testRunner.notifyDone();
    51             }
    52         }
    53 
    54         function makeDots()
    55         {
    56             const width = 30;
    57             const height = 30;
    58            
    59             const spacing = 10;
    60            
    61             for (var row = 0; row < height; ++row) {
    62                 for (var col = 0; col < width; ++col) {
    63                     var dot = document.createElement('div');
    64                     dot.className = 'dot';
    65                     dot.style.left = spacing * col + 'px';
    66                     dot.style.top = spacing * row + 'px';
    67                     document.body.appendChild(dot);
    68                 }
    69             }
     49            makeDots(30, 30);
    7050           
    7151            window.setTimeout(function() {
    … …  
    7555        }
    7656       
    77         window.addEventListener('load', makeDots, false);
     57        window.addEventListener('load', runTest, false);
    7858    </script>
    7959</head>

  • trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html

    r236541 r244800  
    2929        }
    3030    </style>
     31    <script src="resources/compositing-overlap-utils.js"></script>
    3132    <script>
    3233        if (window.testRunner) {
    … …  
    3536        }
    3637
    37         function dumpLayers()
     38        function runTest()
    3839        {
    39             if (window.testRunner) {
    40                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    41                 testRunner.notifyDone();
    42             }
    43         }
    44 
    45         function makeDots()
    46         {
    47             const width = 30;
    48             const height = 30;
    49            
    50             const spacing = 10;
    51            
    52             for (var row = 0; row < height; ++row) {
    53                 for (var col = 0; col < width; ++col) {
    54                     var dot = document.createElement('div');
    55                     dot.className = 'dot';
    56                     dot.style.left = spacing * col + 'px';
    57                     dot.style.top = spacing * row + 'px';
    58                     document.body.appendChild(dot);
    59                 }
    60             }
     40            makeDots(30, 30);
    6141           
    6242            window.setTimeout(function() {
    … …  
    6646        }
    6747       
    68         window.addEventListener('load', makeDots, false);
     48        window.addEventListener('load', runTest, false);
    6949    </script>
    7050</head>

  • trunk/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html

    r236541 r244800  
    2929        }
    3030    </style>
     31    <script src="resources/compositing-overlap-utils.js"></script>
    3132    <script>
    3233        if (window.testRunner) {
    … …  
    3536        }
    3637
    37         function dumpLayers()
     38        function runTest()
    3839        {
    39             if (window.testRunner) {
    40                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    41                 testRunner.notifyDone();
    42             }
    43         }
    44 
    45         function makeDots()
    46         {
    47             const width = 30;
    48             const height = 30;
    49            
    50             const spacing = 10;
    51            
    52             for (var row = 0; row < height; ++row) {
    53                 for (var col = 0; col < width; ++col) {
    54                     var dot = document.createElement('div');
    55                     dot.className = 'dot';
    56                     dot.style.left = spacing * col + 'px';
    57                     dot.style.top = spacing * row + 'px';
    58                     document.body.appendChild(dot);
    59                 }
    60             }
     40            makeDots(30, 30);
    6141           
    6242            window.setTimeout(function() {
    … …  
    6646        }
    6747       
    68         window.addEventListener('load', makeDots, false);
     48        window.addEventListener('load', runTest, false);
    6949    </script>
    7050</head>

  • trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt

    r225897 r244800  
    1313          (bounds 228.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html

    r236541 r244800  
    4646        }
    4747    </style>
     48    <script src="resources/compositing-overlap-utils.js"></script>
    4849    <script>
    4950        if (window.testRunner) {
    … …  
    5253        }
    5354
    54         function dumpLayers()
     55        function runTest()
    5556        {
    56             if (window.testRunner) {
    57                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    58                 testRunner.notifyDone();
    59             }
    60         }
    61 
    62         function makeDots()
    63         {
    64             const width = 50;
    65             const height = 23;
    66            
    67             const spacing = 10;
    68            
    69             for (var row = 0; row < height; ++row) {
    70                 for (var col = 0; col < width; ++col) {
    71                     var dot = document.createElement('div');
    72                     dot.className = 'dot';
    73                     dot.style.left = spacing * col + 'px';
    74                     dot.style.top = spacing * row + 'px';
    75                     document.body.appendChild(dot);
    76                 }
    77             }
     57            makeDots(50, 23);
    7858           
    7959            window.setTimeout(function() {
    … …  
    8363        }
    8464       
    85         window.addEventListener('load', makeDots, false);
     65        window.addEventListener('load', runTest, false);
    8666    </script>
    8767</head>

  • trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt

    r225897 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html

    r236541 r244800  
    4646        }
    4747    </style>
     48    <script src="resources/compositing-overlap-utils.js"></script>
    4849    <script>
    4950        if (window.testRunner) {
    … …  
    5253        }
    5354
    54         function dumpLayers()
     55        function runTest()
    5556        {
    56             if (window.testRunner) {
    57                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    58                 testRunner.notifyDone();
    59             }
    60         }
    61 
    62         function makeDots()
    63         {
    64             const width = 60;
    65             const height = 60;
    66            
    67             const spacing = 10;
    68            
    69             for (var row = 0; row < height; ++row) {
    70                 for (var col = 0; col < width; ++col) {
    71                     var dot = document.createElement('div');
    72                     dot.className = 'dot';
    73                     dot.style.left = spacing * col + 'px';
    74                     dot.style.top = spacing * row + 'px';
    75                     document.body.appendChild(dot);
    76                 }
    77             }
     57            makeDots(60, 60);
    7858           
    7959            window.setTimeout(function() {
    … …  
    8363        }
    8464       
    85         window.addEventListener('load', makeDots, false);
     65        window.addEventListener('load', runTest, false);
    8666    </script>
    8767</head>

  • trunk/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html

    r236541 r244800  
    2828        }
    2929    </style>
     30    <script src="resources/compositing-overlap-utils.js"></script>
    3031    <script>
    3132        if (window.testRunner) {
    … …  
    4243        }
    4344
    44         function makeDots()
     45        function runTest()
    4546        {
    46             const width = 42;
    47             const height = 42;
    48            
    49             const spacing = 10;
    50            
    51             for (var row = 0; row < height; ++row) {
    52                 for (var col = 0; col < width; ++col) {
    53                     var dot = document.createElement('div');
    54                     dot.className = 'dot';
    55                     dot.style.left = spacing * col + 'px';
    56                     dot.style.top = spacing * row + 'px';
    57                     document.body.appendChild(dot);
    58                 }
    59             }
     47            makeDots(42, 42);
    6048           
    6149            window.setTimeout(function() {
    … …  
    6553        }
    6654       
    67         window.addEventListener('load', makeDots, false);
     55        window.addEventListener('load', runTest, false);
    6856    </script>
    6957</head>

  • trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt

    r225897 r244800  
    1212          (bounds 228.00 128.00)
    1313          (drawsContent 1)
    14           (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])
    1514        )
    1615        (GraphicsLayer

  • trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap.html

    r236541 r244800  
    3535        }
    3636    </style>
     37    <script src="resources/compositing-overlap-utils.js"></script>
    3738    <script>
    3839        if (window.testRunner) {
    … …  
    4142        }
    4243
    43         function dumpLayers()
     44        function runTest()
    4445        {
    45             if (window.testRunner) {
    46                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    47                 testRunner.notifyDone();
    48             }
    49         }
    50 
    51         function makeDots()
    52         {
    53             const width = 40;
    54             const height = 20;
    55            
    56             const spacing = 10;
    57            
    58             for (var row = 0; row < height; ++row) {
    59                 for (var col = 0; col < width; ++col) {
    60                     var dot = document.createElement('div');
    61                     dot.className = 'dot';
    62                     dot.style.left = spacing * col + 'px';
    63                     dot.style.top = spacing * row + 'px';
    64                     document.body.appendChild(dot);
    65                 }
    66             }
     46            makeDots(40, 20);
    6747           
    6848            window.setTimeout(function() {
    … …  
    7252        }
    7353       
    74         window.addEventListener('load', makeDots, false);
     54        window.addEventListener('load', runTest, false);
    7555    </script>
    7656</head>

  • trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt

    r225897 r244800  
    1313          (bounds 228.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html

    r236541 r244800  
    3737        }
    3838    </style>
     39    <script src="resources/compositing-overlap-utils.js"></script>
    3940    <script>
    4041        if (window.testRunner) {
    … …  
    4344        }
    4445
    45         function dumpLayers()
     46        function runTest()
    4647        {
    47             if (window.testRunner) {
    48                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    49                 testRunner.notifyDone();
    50             }
    51         }
    52 
    53         function makeDots()
    54         {
    55             const width = 50;
    56             const height = 23;
    57            
    58             const spacing = 10;
    59            
    60             for (var row = 0; row < height; ++row) {
    61                 for (var col = 0; col < width; ++col) {
    62                     var dot = document.createElement('div');
    63                     dot.className = 'dot';
    64                     dot.style.left = spacing * col + 'px';
    65                     dot.style.top = spacing * row + 'px';
    66                     document.body.appendChild(dot);
    67                 }
    68             }
     48            makeDots(50, 23);
    6949           
    7050            window.setTimeout(function() {
    … …  
    7454        }
    7555       
    76         window.addEventListener('load', makeDots, false);
     56        window.addEventListener('load', runTest, false);
    7757    </script>
    7858</head>

  • trunk/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html

    r236541 r244800  
    2828        }
    2929    </style>
     30    <script src="resources/compositing-overlap-utils.js"></script>
    3031    <script>
    3132        if (window.testRunner) {
    … …  
    4243        }
    4344
    44         function makeDots()
     45        function runTest()
    4546        {
    46             const width = 50;
    47             const height = 23;
    48            
    49             const spacing = 10;
    50            
    51             for (var row = 0; row < height; ++row) {
    52                 for (var col = 0; col < width; ++col) {
    53                     var dot = document.createElement('div');
    54                     dot.className = 'dot';
    55                     dot.style.left = spacing * col + 'px';
    56                     dot.style.top = spacing * row + 'px';
    57                     document.body.appendChild(dot);
    58                 }
    59             }
     47            makeDots(50, 23);
    6048           
    6149            window.setTimeout(function() {
    … …  
    6553        }
    6654       
    67         window.addEventListener('load', makeDots, false);
     55        window.addEventListener('load', runTest, false);
    6856    </script>
    6957</head>

  • trunk/LayoutTests/compositing/layer-creation/translate-transition-overlap.html

    r236541 r244800  
    2828        }
    2929    </style>
     30    <script src="resources/compositing-overlap-utils.js"></script>
    3031    <script>
    3132        if (window.testRunner) {
    … …  
    3435        }
    3536
    36         function dumpLayers()
     37        function runTest()
    3738        {
    38             if (window.testRunner) {
    39                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    40                 testRunner.notifyDone();
    41             }
    42         }
    43 
    44         function makeDots()
    45         {
    46             const width = 40;
    47             const height = 20;
    48            
    49             const spacing = 10;
    50            
    51             for (var row = 0; row < height; ++row) {
    52                 for (var col = 0; col < width; ++col) {
    53                     var dot = document.createElement('div');
    54                     dot.className = 'dot';
    55                     dot.style.left = spacing * col + 'px';
    56                     dot.style.top = spacing * row + 'px';
    57                     document.body.appendChild(dot);
    58                 }
    59             }
     39            makeDots(40, 20);
    6040           
    6141            window.setTimeout(function() {
    … …  
    6545        }
    6646       
    67         window.addEventListener('load', makeDots, false);
     47        window.addEventListener('load', runTest, false);
    6848    </script>
    6949</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt

    r239222 r244800  
    2121              (drawsContent 1)
    2222              (backingStoreAttached 1)
    23               (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])
    2423            )
    2524          )

  • trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html

    r239222 r244800  
    3535        testRunner.waitUntilDone();
    3636    }
     37   
     38    function layerTreeWithoutTransforms()
     39    {
     40        var layerTreeText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
     41        var filteredLines = layerTreeText.split("\n").filter(line => line.indexOf('transform') == -1);
     42        return filteredLines.join('\n');
     43    }
    3744
    3845    function dumpLayerTree()
    … …  
    4148            return;
    4249
    43         var out = document.getElementById('out');
    44         out.innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
     50        document.getElementById('out').textContent = layerTreeWithoutTransforms();
    4551    }
    4652

  • trunk/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt

    r230471 r244800  
    1515          (drawsContent 1)
    1616          (backingStoreAttached 1)
     17          (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])
    1718          (children 1
    1819            (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html

    r235960 r244800  
    5353    }
    5454  </style>
     55  <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    5556  <script>
    5657    if (window.testRunner) {
    … …  
    6263    {
    6364      var box = document.getElementById('to-animate');
    64       box.addEventListener('webkitAnimationStart', animationStarted, false);
     65      box.addEventListener('webkitAnimationStart', dumpLayers, false);
    6566      box.classList.add('animating');
    6667    }
    67    
    68     function animationStarted()
    69     {
    70       if (window.testRunner) {
    71         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    72         testRunner.notifyDone();
    73       }
    74     }
     68
    7569    window.addEventListener('load', runTest, false);
    7670  </script>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html

    r235960 r244800  
    3838        }
    3939    </style>
     40    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    4041    <script>
    4142        if (window.testRunner) {
    … …  
    4445        }
    4546
    46         function dumpLayers()
     47        function runTest()
    4748        {
    48             if (window.testRunner) {
    49                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    50                 testRunner.notifyDone();
    51             }
    52         }
    53 
    54         function makeDots()
    55         {
    56             const width = 30;
    57             const height = 30;
    58            
    59             const spacing = 10;
    60            
    61             for (var row = 0; row < height; ++row) {
    62                 for (var col = 0; col < width; ++col) {
    63                     var dot = document.createElement('div');
    64                     dot.className = 'dot';
    65                     dot.style.left = spacing * col + 'px';
    66                     dot.style.top = spacing * row + 'px';
    67                     document.body.appendChild(dot);
    68                 }
    69             }
     49            makeDots(30, 30);
    7050           
    7151            window.setTimeout(function() {
    … …  
    7555        }
    7656       
    77         window.addEventListener('load', makeDots, false);
     57        window.addEventListener('load', runTest, false);
    7858    </script>
    7959</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html

    r235960 r244800  
    2929        }
    3030    </style>
     31    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    3132    <script>
    3233        if (window.testRunner) {
    … …  
    3536        }
    3637
    37         function dumpLayers()
     38        function runTest()
    3839        {
    39             if (window.testRunner) {
    40                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    41                 testRunner.notifyDone();
    42             }
    43         }
    44 
    45         function makeDots()
    46         {
    47             const width = 30;
    48             const height = 30;
    49            
    50             const spacing = 10;
    51            
    52             for (var row = 0; row < height; ++row) {
    53                 for (var col = 0; col < width; ++col) {
    54                     var dot = document.createElement('div');
    55                     dot.className = 'dot';
    56                     dot.style.left = spacing * col + 'px';
    57                     dot.style.top = spacing * row + 'px';
    58                     document.body.appendChild(dot);
    59                 }
    60             }
     40            makeDots(30, 30);
    6141           
    6242            window.setTimeout(function() {
    … …  
    6545            }, 0);
    6646        }
    67        
    68         window.addEventListener('load', makeDots, false);
     47
     48        window.addEventListener('load', runTest, false);
    6949    </script>
    7050</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html

    r235960 r244800  
    2929        }
    3030    </style>
     31    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    3132    <script>
    3233        if (window.testRunner) {
    … …  
    3536        }
    3637
    37         function dumpLayers()
     38        function runTest()
    3839        {
    39             if (window.testRunner) {
    40                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    41                 testRunner.notifyDone();
    42             }
    43         }
    44 
    45         function makeDots()
    46         {
    47             const width = 30;
    48             const height = 30;
    49            
    50             const spacing = 10;
    51            
    52             for (var row = 0; row < height; ++row) {
    53                 for (var col = 0; col < width; ++col) {
    54                     var dot = document.createElement('div');
    55                     dot.className = 'dot';
    56                     dot.style.left = spacing * col + 'px';
    57                     dot.style.top = spacing * row + 'px';
    58                     document.body.appendChild(dot);
    59                 }
    60             }
     40            makeDots(30, 30);
    6141           
    6242            window.setTimeout(function() {
    … …  
    6646        }
    6747       
    68         window.addEventListener('load', makeDots, false);
     48        window.addEventListener('load', runTest, false);
    6949    </script>
    7050</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 228.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html

    r235960 r244800  
    4646        }
    4747    </style>
     48    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    4849    <script>
    4950        if (window.testRunner) {
    … …  
    5253        }
    5354
    54         function dumpLayers()
     55        function runTest()
    5556        {
    56             if (window.testRunner) {
    57                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    58                 testRunner.notifyDone();
    59             }
    60         }
     57            makeDots(50, 23);
    6158
    62         function makeDots()
    63         {
    64             const width = 50;
    65             const height = 23;
    66            
    67             const spacing = 10;
    68            
    69             for (var row = 0; row < height; ++row) {
    70                 for (var col = 0; col < width; ++col) {
    71                     var dot = document.createElement('div');
    72                     dot.className = 'dot';
    73                     dot.style.left = spacing * col + 'px';
    74                     dot.style.top = spacing * row + 'px';
    75                     document.body.appendChild(dot);
    76                 }
    77             }
    78            
    7959            window.setTimeout(function() {
    8060                document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
    … …  
    8363        }
    8464       
    85         window.addEventListener('load', makeDots, false);
     65        window.addEventListener('load', runTest, false);
    8666    </script>
    8767</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html

    r235960 r244800  
    4646        }
    4747    </style>
     48    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    4849    <script>
    4950        if (window.testRunner) {
    … …  
    5253        }
    5354
    54         function dumpLayers()
     55        function runTest()
    5556        {
    56             if (window.testRunner) {
    57                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    58                 testRunner.notifyDone();
    59             }
    60         }
    61 
    62         function makeDots()
    63         {
    64             const width = 60;
    65             const height = 60;
    66            
    67             const spacing = 10;
    68            
    69             for (var row = 0; row < height; ++row) {
    70                 for (var col = 0; col < width; ++col) {
    71                     var dot = document.createElement('div');
    72                     dot.className = 'dot';
    73                     dot.style.left = spacing * col + 'px';
    74                     dot.style.top = spacing * row + 'px';
    75                     document.body.appendChild(dot);
    76                 }
    77             }
     57            makeDots(60, 60);
    7858           
    7959            window.setTimeout(function() {
    … …  
    8363        }
    8464       
    85         window.addEventListener('load', makeDots, false);
     65        window.addEventListener('load', runTest, false);
    8666    </script>
    8767</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html

    r235960 r244800  
    2828        }
    2929    </style>
     30    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    3031    <script>
    3132        if (window.testRunner) {
    … …  
    3435        }
    3536
    36         function dumpLayers()
     37        function runTest()
    3738        {
    38             if (window.testRunner) {
    39                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    40                 testRunner.notifyDone();
    41             }
    42         }
    43 
    44         function makeDots()
    45         {
    46             const width = 42;
    47             const height = 42;
    48            
    49             const spacing = 10;
    50            
    51             for (var row = 0; row < height; ++row) {
    52                 for (var col = 0; col < width; ++col) {
    53                     var dot = document.createElement('div');
    54                     dot.className = 'dot';
    55                     dot.style.left = spacing * col + 'px';
    56                     dot.style.top = spacing * row + 'px';
    57                     document.body.appendChild(dot);
    58                 }
    59             }
     39            makeDots(42, 42);
    6040           
    6141            window.setTimeout(function() {
    … …  
    6545        }
    6646       
    67         window.addEventListener('load', makeDots, false);
     47        window.addEventListener('load', runTest, false);
    6848    </script>
    6949</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt

    r230471 r244800  
    1212          (bounds 228.00 128.00)
    1313          (drawsContent 1)
    14           (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])
    1514        )
    1615        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html

    r235960 r244800  
    3535        }
    3636    </style>
     37    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    3738    <script>
    3839        if (window.testRunner) {
    … …  
    4142        }
    4243
    43         function dumpLayers()
     44        function runTest()
    4445        {
    45             if (window.testRunner) {
    46                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    47                 testRunner.notifyDone();
    48             }
    49         }
     46            makeDots(40, 20);
    5047
    51         function makeDots()
    52         {
    53             const width = 40;
    54             const height = 20;
    55            
    56             const spacing = 10;
    57            
    58             for (var row = 0; row < height; ++row) {
    59                 for (var col = 0; col < width; ++col) {
    60                     var dot = document.createElement('div');
    61                     dot.className = 'dot';
    62                     dot.style.left = spacing * col + 'px';
    63                     dot.style.top = spacing * row + 'px';
    64                     document.body.appendChild(dot);
    65                 }
    66             }
    67            
    6848            window.setTimeout(function() {
    6949                document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
    … …  
    7252        }
    7353       
    74         window.addEventListener('load', makeDots, false);
     54        window.addEventListener('load', runTest, false);
    7555    </script>
    7656</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 228.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html

    r235960 r244800  
    3737        }
    3838    </style>
     39    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    3940    <script>
    4041        if (window.testRunner) {
    … …  
    4344        }
    4445
    45         function dumpLayers()
     46        function runTest()
    4647        {
    47             if (window.testRunner) {
    48                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    49                 testRunner.notifyDone();
    50             }
    51         }
    52 
    53         function makeDots()
    54         {
    55             const width = 50;
    56             const height = 23;
    57            
    58             const spacing = 10;
    59            
    60             for (var row = 0; row < height; ++row) {
    61                 for (var col = 0; col < width; ++col) {
    62                     var dot = document.createElement('div');
    63                     dot.className = 'dot';
    64                     dot.style.left = spacing * col + 'px';
    65                     dot.style.top = spacing * row + 'px';
    66                     document.body.appendChild(dot);
    67                 }
    68             }
     48            makeDots(50, 23);
    6949           
    7050            window.setTimeout(function() {
    … …  
    7454        }
    7555       
    76         window.addEventListener('load', makeDots, false);
     56        window.addEventListener('load', runTest, false);
    7757    </script>
    7858</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 228.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html

    r235960 r244800  
    2828        }
    2929    </style>
     30    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    3031    <script>
    3132        if (window.testRunner) {
    … …  
    3435        }
    3536
    36         function dumpLayers()
     37        function runTest()
    3738        {
    38             if (window.testRunner) {
    39                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    40                 testRunner.notifyDone();
    41             }
    42         }
    43 
    44         function makeDots()
    45         {
    46             const width = 50;
    47             const height = 23;
    48            
    49             const spacing = 10;
    50            
    51             for (var row = 0; row < height; ++row) {
    52                 for (var col = 0; col < width; ++col) {
    53                     var dot = document.createElement('div');
    54                     dot.className = 'dot';
    55                     dot.style.left = spacing * col + 'px';
    56                     dot.style.top = spacing * row + 'px';
    57                     document.body.appendChild(dot);
    58                 }
    59             }
     39            makeDots(50, 23);
    6040           
    6141            window.setTimeout(function() {
    … …  
    6545        }
    6646       
    67         window.addEventListener('load', makeDots, false);
     47        window.addEventListener('load', runTest, false);
    6848    </script>
    6949</head>

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt

    r230471 r244800  
    1212          (bounds 228.00 128.00)
    1313          (drawsContent 1)
    14           (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])
    1514        )
    1615        (GraphicsLayer

  • trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html

    r235960 r244800  
    2828        }
    2929    </style>
     30    <script src="../../../compositing/layer-creation/resources/compositing-overlap-utils.js"></script>
    3031    <script>
    3132        if (window.testRunner) {
    … …  
    3435        }
    3536
    36         function dumpLayers()
     37        function runTest()
    3738        {
    38             if (window.testRunner) {
    39                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    40                 testRunner.notifyDone();
    41             }
    42         }
    43 
    44         function makeDots()
    45         {
    46             const width = 40;
    47             const height = 20;
    48            
    49             const spacing = 10;
    50            
    51             for (var row = 0; row < height; ++row) {
    52                 for (var col = 0; col < width; ++col) {
    53                     var dot = document.createElement('div');
    54                     dot.className = 'dot';
    55                     dot.style.left = spacing * col + 'px';
    56                     dot.style.top = spacing * row + 'px';
    57                     document.body.appendChild(dot);
    58                 }
    59             }
     39            makeDots(40, 20);
    6040           
    6141            window.setTimeout(function() {
    … …  
    6545        }
    6646       
    67         window.addEventListener('load', makeDots, false);
     47        window.addEventListener('load', runTest, false);
    6848    </script>
    6949</head>

  • trunk/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt

    r225897 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/LayoutTests/platform/ios/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt

    r230471 r244800  
    1313          (bounds 148.00 128.00)
    1414          (drawsContent 1)
    15           (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])
    1615        )
    1716        (GraphicsLayer

  • trunk/Source/WebCore/ChangeLog

    r244797 r244800  
    243243        * page/ios/FrameIOS.mm:
    244244        (WebCore::Frame::nodeRespondingToDoubleClickEvent):
     245
     2462019-04-30  Simon Fraser  <simon.fraser@apple.com>
     247
     248        Transform is sometimes left in a bad state after an animation
     249        https://bugs.webkit.org/show_bug.cgi?id=197401
     250        rdar://problem/48179186
     251
     252        Reviewed by Dean Jackson.
     253       
     254        In some more complex compositing scenarios, at the end of an animation we'd
     255        fail to push a new transform onto a layer, because updateGeometry() would
     256        think there's an animation running (which there is, but in the "Ending" state).
     257
     258        It's simpler in this code to just always push transform and opacity to the layer;
     259        they will get overridden by the animation while it's running. The current code
     260        dates from the first landing of the file, and the reason for the if (!isRunningAcceleratedTransformAnimation)
     261        check is lost in the sands of time.
     262
     263        I was not able to get a reliable ref or layer tree test for this, because the next compositing update
     264        fixes it, and WTR seems to trigger one.  But the added test does show the bug
     265        in Safari, and is a good test to have.
     266
     267        Test: compositing/animation/transform-after-animation.html
     268
     269        * rendering/RenderLayerBacking.cpp:
     270        (WebCore::RenderLayerBacking::updateGeometry):
    245271
    2462722019-04-29  Youenn Fablet  <youenn@apple.com>

  • trunk/Source/WebCore/rendering/RenderLayerBacking.cpp

    r244509 r244800  
    10021002
    10031003    bool isRunningAcceleratedTransformAnimation = false;
    1004     bool isRunningAcceleratedOpacityAnimation = false;
    10051004    if (RuntimeEnabledFeatures::sharedFeatures().webAnimationsCSSIntegrationEnabled()) {
    1006         if (auto* timeline = renderer().documentTimeline()) {
     1005        if (auto* timeline = renderer().documentTimeline())
    10071006            isRunningAcceleratedTransformAnimation = timeline->isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyTransform);
    1008             isRunningAcceleratedOpacityAnimation = timeline->isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyOpacity);
    1009         }
    1010     } else {
     1007    } else
    10111008        isRunningAcceleratedTransformAnimation = renderer().animation().isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyTransform);
    1012         isRunningAcceleratedOpacityAnimation = renderer().animation().isRunningAcceleratedAnimationOnRenderer(renderer(), CSSPropertyOpacity);
    1013     }
    1014 
    1015     // Set transform property, if it is not animating. We have to do this here because the transform
    1016     // is affected by the layer dimensions.
    1017     if (!isRunningAcceleratedTransformAnimation)
    1018         updateTransform(style);
    1019 
    1020     // Set opacity, if it is not animating.
    1021     if (!isRunningAcceleratedOpacityAnimation)
    1022         updateOpacity(style);
    1023 
     1009
     1010    updateTransform(style);
     1011    updateOpacity(style);
    10241012    updateFilters(style);
    10251013#if ENABLE(FILTERS_LEVEL_2)
Note: See TracChangeset for help on using the changeset viewer.