Attachment 368575 Details for Bug 197401 – Patch

[patch] Patch

bug-197401-20190430101452.patch (text/plain), 71.41 KB, created by Simon Fraser (smfr) on 2019-04-30 10:14:54 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-04-30 10:14:54 PDT

Size: 71.41 KB

patch

obsolete

>Subversion Revision: 244772
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 76271823ccb0c764ec70add3ca6fd499a259b07c..10da4962384c81ef275585a79bacb8b74d58b1c9 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,29 @@
>+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 NOBODY (OOPS!).
>+        
>+        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-30  Antti Koivisto  <antti@apple.com>
> 
>         Tighten type of ScrollingTree:rootNode() to ScrollingTreeFrameScrollingNode
>diff --git a/Source/WebCore/rendering/RenderLayerBacking.cpp b/Source/WebCore/rendering/RenderLayerBacking.cpp
>index b384339ebb8e66a96acf9d5d61ca748776d2c5b0..1921292fb7d28603ecd0f8e8c9e53610c35dba6b 100644
>--- a/Source/WebCore/rendering/RenderLayerBacking.cpp
>+++ b/Source/WebCore/rendering/RenderLayerBacking.cpp
>@@ -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);
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index d318e05f68c842b1f1e5c2cd8948c8d804886686..289b7a8c4e767d9f3e7a566374c22ade8b60dc74 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,64 @@
>+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 NOBODY (OOPS!).
>+        
>+        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-30  Carlos Garcia Campos  <cgarcia@igalia.com>
> 
>         [GTK] Support prefers-color-scheme media query
>diff --git a/LayoutTests/compositing/animation/transform-after-animation-expected.html b/LayoutTests/compositing/animation/transform-after-animation-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..4cadef71eb42d645fe1c3861392a3c210fea6b24
>--- /dev/null
>+++ b/LayoutTests/compositing/animation/transform-after-animation-expected.html
>@@ -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
>index 0000000000000000000000000000000000000000..fe51391867fd61cc0e201543bb66c257348c198e
>--- /dev/null
>+++ b/LayoutTests/compositing/animation/transform-after-animation.html
>@@ -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>
>diff --git a/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt b/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
>index e44d70180742c06fc5111b396e7099d97790e881..840c4fed5b85717602d8ebbeda116a9ce98a02db 100644
>--- a/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
>+++ b/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
>@@ -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])
>             )
>           )
>         )
>diff --git a/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html b/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html
>index f583b92d71f7974efc8850653fac6a4ee7f54ab9..5df7689f435caf07d4ced868d15950e3f00b9a29 100644
>--- a/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html
>+++ b/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html
>@@ -52,6 +52,7 @@
>       to { -webkit-transform: translateX(100px); }
>     }
>   </style>
>+  <script src="resources/compositing-overlap-utils.js"></script>
>   <script>
>     if (window.testRunner) {
>       testRunner.dumpAsText();
>@@ -61,17 +62,10 @@
>     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>
>diff --git a/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt b/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
>index d3c156c51f3beecf73b8f3e66dd4aa9366388923..dd59eb853b1986ffce1fe29bb7b3d1fe5b47f25a 100644
>--- a/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
>+++ b/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html b/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
>index 8754c60fc33457824ca847fd79e0616376f93272..7a58eed452c8a191232a2f02b9d7f247cab07fda 100644
>--- a/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
>@@ -37,36 +37,16 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html b/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
>index 284c7e9b590c70fc01b8278373a8cac19776a21c..d7dd5e2183a2cb04d90cd67df571e53673aae24a 100644
>--- a/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
>@@ -28,36 +28,16 @@
>             -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>
>diff --git a/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html b/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html
>index ba4393ee8b1a2e3587d80b20f5912d730da886bb..e7649713c15a92c5b44bd27d41a82e458553ca2c 100644
>--- a/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html
>@@ -28,36 +28,16 @@
>             -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>
>diff --git a/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt b/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
>index 89939e252bdd79d930ffac3aa7915a6fbbad9974..949f1a55a4329c82e5f8cbe66c436ffc49d97f1d 100644
>--- a/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
>+++ b/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html b/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html
>index 6b310f452513bd9a103364f69c75089a723c6451..f070b82998258431871b3e18b828568a5f308de6 100644
>--- a/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html
>@@ -45,36 +45,16 @@
>             }
>         }
>     </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
>index 0000000000000000000000000000000000000000..c3af95bf6fc5f9512b19d604cbae3691619f9468
>--- /dev/null
>+++ b/LayoutTests/compositing/layer-creation/resources/compositing-overlap-utils.js
>@@ -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();
>+    }
>+}
>diff --git a/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt b/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>index a1b2f7f7d24a79e897d1ce172cf5051318633e9d..4e915010398f110a4a52e32bb5f58b1ecfedfcf9 100644
>--- a/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>+++ b/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html b/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html
>index 8f225f32b67649ea5fae3a776d642c986d05180d..c8d1b3c863cc44ec86a9e1bbcacc5992df613bb4 100644
>--- a/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html
>@@ -45,36 +45,16 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html b/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html
>index 2a5f9076a5336cad21058bfeed44c66a901f0d39..f4e6afdb8f51b005041e01500529e771586db290 100644
>--- a/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html
>@@ -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();
>@@ -41,22 +42,9 @@
>             }
>         }
> 
>-        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>
>diff --git a/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt b/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt
>index 43ce17beae6944cfdb6b6f30ed29704bb560ae09..204b75a2b97e1d7d9c302364b2a1cf0861ee0f2d 100644
>--- a/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt
>+++ b/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/compositing/layer-creation/translate-animation-overlap.html b/LayoutTests/compositing/layer-creation/translate-animation-overlap.html
>index a160cbedf9436a6a2e45722b1004c1a87c460658..7e62c04582a7af294acf05f0f56266d9745f8a0a 100644
>--- a/LayoutTests/compositing/layer-creation/translate-animation-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/translate-animation-overlap.html
>@@ -34,36 +34,16 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt b/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
>index 65785520b01b0085613e7c6ae14c53ee8d66970e..28180478b0631e648cd73aadcad48c12b66ee662 100644
>--- a/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
>+++ b/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html b/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html
>index c49fd52ed6b85324671b55dc293f593d8136e899..0774c87744b83366fded9d95d04df3277e6ae207 100644
>--- a/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html
>@@ -36,36 +36,16 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html b/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html
>index b0a17a20838b6ae88af89bc82eb1d9d030c6ccde..f53c3de2f35b95d5dc9f0d14af99aa2281ad7aae 100644
>--- a/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html
>@@ -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();
>@@ -41,22 +42,9 @@
>             }
>         }
> 
>-        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>
>diff --git a/LayoutTests/compositing/layer-creation/translate-transition-overlap.html b/LayoutTests/compositing/layer-creation/translate-transition-overlap.html
>index 54d786cf88ce130fff3cde264044d9d5d17d8a46..242bfd66f9d79ef1bfd6c8b6ed9beb65c97ac313 100644
>--- a/LayoutTests/compositing/layer-creation/translate-transition-overlap.html
>+++ b/LayoutTests/compositing/layer-creation/translate-transition-overlap.html
>@@ -27,36 +27,16 @@
>             -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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt b/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
>index 840c4fed5b85717602d8ebbeda116a9ce98a02db..e44d70180742c06fc5111b396e7099d97790e881 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt
>@@ -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])
>             )
>           )
>         )
>diff --git a/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html b/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html
>index 281f09c51c528ea4ef86db2a0a36adda47ea40a7..650237254cafe330c6faab5f7edf12226ce978d2 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html
>@@ -34,14 +34,20 @@
>         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()
>diff --git a/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt b/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt
>index 85cdf2d23bf31176a0ff4e6e1dd5931be3816d4b..90fd7e6929b46f566a7f4343580f71b04f53299e 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html
>index 90c69c88bffd70cc265c9a70912877eb41a5ae7c..e43b30e76f8d096cdcfbc30470692ea8a1f451e9 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html
>@@ -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();
>@@ -61,17 +62,10 @@
>     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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
>index d3c156c51f3beecf73b8f3e66dd4aa9366388923..dd59eb853b1986ffce1fe29bb7b3d1fe5b47f25a 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
>index 123c946e9522842cf12073f92a9236e923d5ccbc..6052369f92c840da57f1a4eb5d62d4b9f72a5c54 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html
>@@ -37,36 +37,16 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt
>index 7a8bd3ddf39374c1b5fd05965b31c7d1429454f1..dd59eb853b1986ffce1fe29bb7b3d1fe5b47f25a 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
>index 6fb906ab5c00829c8bf62b87c3fee42b883a7330..dea0845c68c0b364a68592eb19c43dc1ec3b74cf 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html
>@@ -28,44 +28,24 @@
>             -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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt
>index 9c995bd2e06cd37719ac6831f350e008391513f6..852a4e78c6aa33dad64a8a3dc09c2cbe82c329ba 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html
>index dbfa5ad08962272787e3da8fe1855ff472cc8fbd..d2cacf0620c27cee5027d05419f2c7ad37e391d0 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html
>@@ -28,36 +28,16 @@
>             -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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
>index 89939e252bdd79d930ffac3aa7915a6fbbad9974..949f1a55a4329c82e5f8cbe66c436ffc49d97f1d 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html
>index bd2dbed833a5c9a8c488090e8f403328bd3e7384..c910f8bc98a5cde230aad33eee08f406767bc034 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html
>@@ -45,44 +45,24 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>index a1b2f7f7d24a79e897d1ce172cf5051318633e9d..4e915010398f110a4a52e32bb5f58b1ecfedfcf9 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html
>index a0e467694a9a568d5c6c669b1a34af4355ccc820..9da6240b13ece1e4697114ddba58941cf5c74cc4 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html
>@@ -45,36 +45,16 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt
>index 2067abdf0d8eddac875a1394faaee519129aff10..68fc7b5f22f6b77eacd293d7f4e5db240781cfee 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html
>index f4b9ad0b8c0c4c3dc61fc0409fef2d3a707453b6..ebc1769de41d74b90ad1f005567d56e88e19800d 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html
>@@ -27,36 +27,16 @@
>             -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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt
>index 43ce17beae6944cfdb6b6f30ed29704bb560ae09..204b75a2b97e1d7d9c302364b2a1cf0861ee0f2d 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html
>index e11930331a7464a056214c73d15f037778734373..ff5d94895eae3e71607f523afb1e3503393a0116 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html
>@@ -34,44 +34,24 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
>index 65785520b01b0085613e7c6ae14c53ee8d66970e..28180478b0631e648cd73aadcad48c12b66ee662 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html
>index 78f67af70c2022e46b5e348461c0600c4bc16c62..5dbb8a75e0921913c914181d953054af7a4e3151 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html
>@@ -36,36 +36,16 @@
>             }
>         }
>     </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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt
>index 55b4e27b0ead78a47335e9734389e2ac8514e0d0..fccb59f8c8e9a31745f4da334f0b51e3008d9bbf 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html
>index 3f7fef7d25481b7ba2fde365fb1f72d933bef1d0..b2817fee5bd304094ddaca909056b80d21cf007f 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html
>@@ -27,36 +27,16 @@
>             -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>
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt
>index dc57596f788ee515d26bd5eb26c6c4dbcf01d5ae..204b75a2b97e1d7d9c302364b2a1cf0861ee0f2d 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt
>@@ -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)
>diff --git a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html
>index af820741833c3390c999c33b0602feabf5ca4574..d8404692994933ea608decccd6db8ebafe068aeb 100644
>--- a/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html
>+++ b/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html
>@@ -27,36 +27,16 @@
>             -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>
>diff --git a/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt b/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>index d90bcf5dfcf58d1ef7266b15654ba016494614f4..7a3f3c62c8d7b1ad5cda382d79fe91a7d420b116 100644
>--- a/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>+++ b/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt
>@@ -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)

Flags:

dino: review+
ews-watchlist: commit-queue-

Actions: View | Formatted Diff | Diff

Attachments on bug 197401: 368531 | 368535 | 368541 | 368575 | 368583