Skip to content

GitLab

T
tangled
Commit d6a80917 authored by ericwilligers's avatar ericwilligers Committed by Commit bot
Browse files
Options

CSS Transitions: Fix flaky transition-end-event-rendering.html 

We force a style recalc at the start, and wait for compositor
at the end.

BUG=248938

Review-Url: https://codereview.chromium.org/2619933002
Cr-Commit-Position: refs/heads/master@{#442818}
parent 00f98a37
Hide whitespace changes
Inline Side-by-side
Showing with 12 additions and 14 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ d6a80917
...@@ -717,7 +717,6 @@ crbug.com/248938 virtual/threaded/animations/dynamic-stylesheet-loading.html [ P ...@@ -717,7 +717,6 @@ crbug.com/248938 virtual/threaded/animations/dynamic-stylesheet-loading.html [ P
crbug.com/248938 virtual/threaded/transitions/change-duration-during-transition.html [ Pass Failure ] crbug.com/248938 virtual/threaded/transitions/change-duration-during-transition.html [ Pass Failure ]
crbug.com/638693 virtual/threaded/animations/display-inline-style-adjust.html [ Pass Crash Failure ] crbug.com/638693 virtual/threaded/animations/display-inline-style-adjust.html [ Pass Crash Failure ]
crbug.com/421283 fast/html/marquee-scrollamount.html [ Pass Failure ] crbug.com/421283 fast/html/marquee-scrollamount.html [ Pass Failure ]
crbug.com/248938 virtual/threaded/transitions/transition-end-event-rendering.html [ Pass Timeout ]
crbug.com/248938 [ Mac ] virtual/threaded/transitions/interrupted-all-transition.html [ Pass Failure ] crbug.com/248938 [ Mac ] virtual/threaded/transitions/interrupted-all-transition.html [ Pass Failure ]
crbug.com/659123 [ Mac ] fast/css/text-overflow-ellipsis-button.html [ Pass Failure ] crbug.com/659123 [ Mac ] fast/css/text-overflow-ellipsis-button.html [ Pass Failure ]
......
third_party/WebKit/LayoutTests/transitions/transition-end-event-rendering.html
View file @ d6a80917
...@@ -21,39 +21,39 @@ ...@@ -21,39 +21,39 @@
margin: 10px 0; margin: 10px 0;
background-color: green; background-color: green;
} }
#container.moved .software {
left: 300px;
}
#container.moved .hardware { #container.moved .hardware {
transform: translateX(300px); transform: translateX(300px);
} }
.software {
-webkit-transition: left 300ms linear;
}
.hardware { .hardware {
-webkit-transition: transform 1s linear; -webkit-transition: transform 100ms linear;
transform: translateX(0); transform: translateX(0);
} }
</style> </style>
<script src="../animations/resources/animation-test-helpers.js"></script>
<script> <script>
'use strict';
function waitForCompositor() {
var tester = document.getElementById('tester');
return tester.animate({transform: ['scale(1)', 'scale(1)']}, 1).finished;
}
function testEnded() function testEnded()
{ {
if (window.testRunner) waitForCompositor().then(() => {
testRunner.notifyDone(); if (window.testRunner)
testRunner.notifyDone();
});
} }
function startTest() function startTest()
{ {
if (window.testRunner) if (window.testRunner)
testRunner.waitUntilDone(); testRunner.waitUntilDone();
document.getElementById('tester').addEventListener('webkitTransitionEnd', testEnded, false); document.getElementById('tester').addEventListener('webkitTransitionEnd', testEnded, false);
document.getElementById('container').offsetTop; // Force style recalc
document.getElementById('container').className = 'moved'; document.getElementById('container').className = 'moved';
} }
...@@ -63,7 +63,6 @@ ...@@ -63,7 +63,6 @@
<body> <body>
<div id="container"> <div id="container">
<!-- <div class="software box"></div> -->
<div id="tester" class="hardware box"></div> <div id="tester" class="hardware box"></div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment