<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[243878] trunk/LayoutTests</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/243878">243878</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2019-04-04 10:39:32 -0700 (Thu, 04 Apr 2019)</dd>
</dl>

<h3>Log Message</h3>
<pre>[macOS WK1] Layout Test webanimations/accelerated-transition-interrupted-on-composited-element.html is a flaky image failure
https://bugs.webkit.org/show_bug.cgi?id=189678
<rdar://problem/44621674>

Patch by Antoine Quint <graouts@apple.com> on 2019-04-04
Reviewed by Dean Jackson.

We make the test sturdier by waiting for two rAFs instead of just one to wait until animations have been updated (one rAF)
and accelerated animations have been committed (two rAFs).

We also use the "transitioncancel" event to determine the transition has been interrupted rather than using a rAF callback.

* webanimations/accelerated-transition-interrupted-on-composited-element.html:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestswebanimationsacceleratedtransitioninterruptedoncompositedelementhtml">trunk/LayoutTests/webanimations/accelerated-transition-interrupted-on-composited-element.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (243877 => 243878)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog      2019-04-04 17:36:20 UTC (rev 243877)
+++ trunk/LayoutTests/ChangeLog 2019-04-04 17:39:32 UTC (rev 243878)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2019-04-04  Antoine Quint  <graouts@apple.com>
+
+        [macOS WK1] Layout Test webanimations/accelerated-transition-interrupted-on-composited-element.html is a flaky image failure
+        https://bugs.webkit.org/show_bug.cgi?id=189678
+        <rdar://problem/44621674>
+
+        Reviewed by Dean Jackson.
+
+        We make the test sturdier by waiting for two rAFs instead of just one to wait until animations have been updated (one rAF)
+        and accelerated animations have been committed (two rAFs).
+
+        We also use the "transitioncancel" event to determine the transition has been interrupted rather than using a rAF callback.
+
+        * webanimations/accelerated-transition-interrupted-on-composited-element.html:
+
</ins><span class="cx"> 2019-04-04  Diego Pino Garcia  <dpino@igalia.com>
</span><span class="cx"> 
</span><span class="cx">         [WPE] Unreviewed gardening
</span></span></pre></div>
<a id="trunkLayoutTestswebanimationsacceleratedtransitioninterruptedoncompositedelementhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/webanimations/accelerated-transition-interrupted-on-composited-element.html (243877 => 243878)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/webanimations/accelerated-transition-interrupted-on-composited-element.html    2019-04-04 17:36:20 UTC (rev 243877)
+++ trunk/LayoutTests/webanimations/accelerated-transition-interrupted-on-composited-element.html       2019-04-04 17:39:32 UTC (rev 243878)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
</del><ins>+<!DOCTYPE html>
</ins><span class="cx"> <body>
</span><span class="cx"> <style>
</span><span class="cx"> div {
</span><span class="lines">@@ -18,10 +18,19 @@
</span><span class="cx"> // Wait for a transition to start and abort it.
</span><span class="cx"> div.addEventListener("transitionstart", event => {
</span><span class="cx">     div.style.transition = "none";
</span><del>-    if (window.testRunner)
-        requestAnimationFrame(() => testRunner.notifyDone());
</del><span class="cx"> });
</span><span class="cx"> 
</span><ins>+// When notified the transition was aborted, finish the test once we've ensured that animations
+// have been updated (one rAF) and that accelerated animations will have been committed (two rAFs).
+div.addEventListener("transitioncancel", event => {
+    if (window.testRunner) {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => testRunner.notifyDone());
+        });
+    }
+});
+
+
</ins><span class="cx"> // Initiate a transform transition.
</span><span class="cx"> setTimeout(() => {
</span><span class="cx">     div.style.transition = "transform 2s";
</span></span></pre>
</div>
</div>

</body>
</html>