Diff
Modified: trunk/LayoutTests/ChangeLog (244799 => 244800)
--- trunk/LayoutTests/ChangeLog 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/ChangeLog 2019-04-30 20:20:37 UTC (rev 244800)
@@ -192,6 +192,67 @@
* fast/events/touch/ios/double-tap-for-double-click2-expected.txt: Added.
* fast/events/touch/ios/double-tap-for-double-click2.html: Added.
+2019-04-30 Simon Fraser <[email protected]>
+
+ Transform is sometimes left in a bad state after an animation
+ https://bugs.webkit.org/show_bug.cgi?id=197401
+ rdar://problem/48179186
+
+ Reviewed by Dean Jackson.
+
+ Share code between all the overlap tests that work by creating dot matrices, and strip
+ out the transforms from the layer tree dumps, because they can vary with timing in these
+ tests.
+
+ * compositing/animation/transform-after-animation-expected.html: Added.
+ * compositing/animation/transform-after-animation.html: Added.
+ * compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
+ * compositing/layer-creation/animation-overlap-with-children.html:
+ * compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
+ * compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
+ * compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
+ * compositing/layer-creation/mismatched-transform-transition-overlap.html:
+ * compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
+ * compositing/layer-creation/multiple-keyframes-animation-overlap.html:
+ * compositing/layer-creation/resources/compositing-overlap-utils.js: Added.
+ (makeDots):
+ (layerTreeWithoutTransforms):
+ (dumpLayers):
+ * compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
+ * compositing/layer-creation/scale-rotation-animation-overlap.html:
+ * compositing/layer-creation/scale-rotation-transition-overlap.html:
+ * compositing/layer-creation/translate-animation-overlap-expected.txt:
+ * compositing/layer-creation/translate-animation-overlap.html:
+ * compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
+ * compositing/layer-creation/translate-scale-animation-overlap.html:
+ * compositing/layer-creation/translate-scale-transition-overlap.html:
+ * compositing/layer-creation/translate-transition-overlap.html:
+ * legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt:
+ * legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html:
+ * legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html:
+ * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html:
+ * legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt:
+ * legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html:
+ * platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt:
+
2019-04-29 Javier Fernandez <[email protected]>
line should not be broken before the first space after a word
Added: trunk/LayoutTests/compositing/animation/transform-after-animation-expected.html (0 => 244800)
--- trunk/LayoutTests/compositing/animation/transform-after-animation-expected.html (rev 0)
+++ trunk/LayoutTests/compositing/animation/transform-after-animation-expected.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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>
Added: trunk/LayoutTests/compositing/animation/transform-after-animation.html (0 => 244800)
--- trunk/LayoutTests/compositing/animation/transform-after-animation.html (rev 0)
+++ trunk/LayoutTests/compositing/animation/transform-after-animation.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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>
Modified: trunk/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt (244799 => 244800)
--- trunk/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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])
)
)
)
Modified: trunk/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/animation-overlap-with-children.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -52,6 +52,7 @@
to { -webkit-transform: translateX(100px); }
}
</style>
+ <script src=""
<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>
Modified: trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -37,6 +37,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -43,31 +44,10 @@
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;
+ makeDots(30, 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);
- }
- }
-
window.setTimeout(function() {
document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
document.body.classList.add('changed');
@@ -74,7 +54,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -28,6 +28,7 @@
-webkit-transform: scale(1.3) rotate(1deg);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -34,31 +35,10 @@
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;
+ makeDots(30, 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);
- }
- }
-
window.setTimeout(function() {
document.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -65,7 +45,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/mismatched-transform-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -28,6 +28,7 @@
-webkit-transform: scale(1.3);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -34,31 +35,10 @@
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;
+ makeDots(30, 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);
- }
- }
-
window.setTimeout(function() {
document.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -65,7 +45,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/multiple-keyframes-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -45,6 +45,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -51,31 +52,10 @@
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;
+ makeDots(50, 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');
@@ -82,7 +62,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Added: trunk/LayoutTests/compositing/layer-creation/resources/compositing-overlap-utils.js (0 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/resources/compositing-overlap-utils.js (rev 0)
+++ trunk/LayoutTests/compositing/layer-creation/resources/compositing-overlap-utils.js 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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();
+ }
+}
Modified: trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/scale-rotation-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -45,6 +45,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -51,31 +52,10 @@
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;
+ makeDots(60, 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);
- }
- }
-
window.setTimeout(function() {
document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
document.body.classList.add('changed');
@@ -82,7 +62,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/scale-rotation-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -27,6 +27,7 @@
-webkit-transform: scale(1.3) rotate(45deg);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -41,23 +42,10 @@
}
}
- function makeDots()
+ function runTest()
{
- const width = 42;
- const height = 42;
+ makeDots(42, 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);
- }
- }
-
window.setTimeout(function() {
document.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -64,7 +52,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/translate-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -34,6 +34,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -40,31 +41,10 @@
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;
+ makeDots(40, 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');
@@ -71,7 +51,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/translate-scale-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -36,6 +36,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -42,31 +43,10 @@
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;
+ makeDots(50, 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');
@@ -73,7 +53,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/translate-scale-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -27,6 +27,7 @@
-webkit-transform: translateX(100px) scale(1.3);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -41,23 +42,10 @@
}
}
- function makeDots()
+ function runTest()
{
- const width = 50;
- const height = 23;
+ makeDots(50, 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.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -64,7 +52,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/compositing/layer-creation/translate-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/compositing/layer-creation/translate-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/compositing/layer-creation/translate-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -27,6 +27,7 @@
-webkit-transform: translateX(100px);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -33,31 +34,10 @@
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;
+ makeDots(40, 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.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -64,7 +44,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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])
)
)
)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/backing/backing-store-attachment-empty-keyframe.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -34,6 +34,13 @@
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()
{
@@ -40,8 +47,7 @@
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()
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/backing/transform-transition-from-outside-view-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/animation-overlap-with-children.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -52,6 +52,7 @@
to { -webkit-transform: translateX(100px); }
}
</style>
+ <script src=""
<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>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -37,6 +37,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -43,31 +44,10 @@
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;
+ makeDots(30, 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);
- }
- }
-
window.setTimeout(function() {
document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
document.body.classList.add('changed');
@@ -74,7 +54,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-rotated-transform-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -28,6 +28,7 @@
-webkit-transform: scale(1.3) rotate(1deg);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -34,38 +35,17 @@
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;
+ makeDots(30, 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);
- }
- }
-
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>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/mismatched-transform-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -28,6 +28,7 @@
-webkit-transform: scale(1.3);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -34,31 +35,10 @@
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;
+ makeDots(30, 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);
- }
- }
-
window.setTimeout(function() {
document.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -65,7 +45,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/multiple-keyframes-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -45,6 +45,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -51,31 +52,10 @@
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');
@@ -82,7 +62,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -45,6 +45,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -51,31 +52,10 @@
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;
+ makeDots(60, 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);
- }
- }
-
window.setTimeout(function() {
document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
document.body.classList.add('changed');
@@ -82,7 +62,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/scale-rotation-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -27,6 +27,7 @@
-webkit-transform: scale(1.3) rotate(45deg);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -33,31 +34,10 @@
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;
+ makeDots(42, 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);
- }
- }
-
window.setTimeout(function() {
document.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -64,7 +44,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -34,6 +34,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -40,31 +41,10 @@
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');
@@ -71,7 +51,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-animation-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -36,6 +36,7 @@
}
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -42,31 +43,10 @@
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;
+ makeDots(50, 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');
@@ -73,7 +53,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-scale-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -27,6 +27,7 @@
-webkit-transform: translateX(100px) scale(1.3);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -33,31 +34,10 @@
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;
+ makeDots(50, 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.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -64,7 +44,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html (244799 => 244800)
--- trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/legacy-animation-engine/compositing/layer-creation/translate-transition-overlap.html 2019-04-30 20:20:37 UTC (rev 244800)
@@ -27,6 +27,7 @@
-webkit-transform: translateX(100px);
}
</style>
+ <script src=""
<script>
if (window.testRunner) {
testRunner.dumpAsText();
@@ -33,31 +34,10 @@
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;
+ makeDots(40, 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.body.classList.add('changed');
window.setTimeout(dumpLayers, 0);
@@ -64,7 +44,7 @@
}, 0);
}
- window.addEventListener('load', makeDots, false);
+ window.addEventListener('load', runTest, false);
</script>
</head>
<body>
Modified: trunk/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/platform/ios/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/LayoutTests/platform/ios/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt (244799 => 244800)
--- trunk/LayoutTests/platform/ios/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/LayoutTests/platform/ios/legacy-animation-engine/compositing/layer-creation/scale-rotation-animation-overlap-expected.txt 2019-04-30 20:20:37 UTC (rev 244800)
@@ -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)
Modified: trunk/Source/WebCore/ChangeLog (244799 => 244800)
--- trunk/Source/WebCore/ChangeLog 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/Source/WebCore/ChangeLog 2019-04-30 20:20:37 UTC (rev 244800)
@@ -243,6 +243,32 @@
* page/ios/FrameIOS.mm:
(WebCore::Frame::nodeRespondingToDoubleClickEvent):
+2019-04-30 Simon Fraser <[email protected]>
+
+ Transform is sometimes left in a bad state after an animation
+ https://bugs.webkit.org/show_bug.cgi?id=197401
+ rdar://problem/48179186
+
+ Reviewed by Dean Jackson.
+
+ In some more complex compositing scenarios, at the end of an animation we'd
+ fail to push a new transform onto a layer, because updateGeometry() would
+ think there's an animation running (which there is, but in the "Ending" state).
+
+ It's simpler in this code to just always push transform and opacity to the layer;
+ they will get overridden by the animation while it's running. The current code
+ dates from the first landing of the file, and the reason for the if (!isRunningAcceleratedTransformAnimation)
+ check is lost in the sands of time.
+
+ I was not able to get a reliable ref or layer tree test for this, because the next compositing update
+ fixes it, and WTR seems to trigger one. But the added test does show the bug
+ in Safari, and is a good test to have.
+
+ Test: compositing/animation/transform-after-animation.html
+
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::RenderLayerBacking::updateGeometry):
+
2019-04-29 Youenn Fablet <[email protected]>
getDisplayMedia should be called on user gesture
Modified: trunk/Source/WebCore/rendering/RenderLayerBacking.cpp (244799 => 244800)
--- trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2019-04-30 20:20:00 UTC (rev 244799)
+++ trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2019-04-30 20:20:37 UTC (rev 244800)
@@ -1001,26 +1001,14 @@
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);
