<!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>[208167] branches/safari-602-branch</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/208167">208167</a></dd>
<dt>Author</dt> <dd>matthew_hanson@apple.com</dd>
<dt>Date</dt> <dd>2016-10-31 12:13:37 -0700 (Mon, 31 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/208025">r208025</a>. rdar://problem/28216240</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari602branchLayoutTestsChangeLog">branches/safari-602-branch/LayoutTests/ChangeLog</a></li>
<li><a href="#branchessafari602branchSourceWebCoreChangeLog">branches/safari-602-branch/Source/WebCore/ChangeLog</a></li>
<li><a href="#branchessafari602branchSourceWebCorepageanimationAnimationControllercpp">branches/safari-602-branch/Source/WebCore/page/animation/AnimationController.cpp</a></li>
<li><a href="#branchessafari602branchSourceWebCorepageanimationCSSPropertyAnimationcpp">branches/safari-602-branch/Source/WebCore/page/animation/CSSPropertyAnimation.cpp</a></li>
<li><a href="#branchessafari602branchSourceWebCorepageanimationCompositeAnimationcpp">branches/safari-602-branch/Source/WebCore/page/animation/CompositeAnimation.cpp</a></li>
<li><a href="#branchessafari602branchSourceWebCorepageanimationKeyframeAnimationcpp">branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.cpp</a></li>
<li><a href="#branchessafari602branchSourceWebCorepageanimationKeyframeAnimationh">branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.h</a></li>
<li><a href="#branchessafari602branchSourceWebCorerenderingRenderLayercpp">branches/safari-602-branch/Source/WebCore/rendering/RenderLayer.cpp</a></li>
<li><a href="#branchessafari602branchSourceWebCorerenderingstyleWillChangeDatacpp">branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.cpp</a></li>
<li><a href="#branchessafari602branchSourceWebCorerenderingstyleWillChangeDatah">branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari602branchLayoutTestsanimationsstackingcontextfillforwardsexpectedhtml">branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards-expected.html</a></li>
<li><a href="#branchessafari602branchLayoutTestsanimationsstackingcontextfillforwardshtml">branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards.html</a></li>
<li><a href="#branchessafari602branchLayoutTestsanimationsstackingcontextnotfillforwardsexpectedhtml">branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html</a></li>
<li><a href="#branchessafari602branchLayoutTestsanimationsstackingcontextnotfillforwardshtml">branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards.html</a></li>
<li><a href="#branchessafari602branchLayoutTestsanimationsstackingcontextunchangedwhilerunningexpectedhtml">branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html</a></li>
<li><a href="#branchessafari602branchLayoutTestsanimationsstackingcontextunchangedwhilerunninghtml">branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari602branchLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/LayoutTests/ChangeLog (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/LayoutTests/ChangeLog 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/LayoutTests/ChangeLog 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -1,5 +1,23 @@
</span><span class="cx"> 2016-10-31 Matthew Hanson <matthew_hanson@apple.com>
</span><span class="cx">
</span><ins>+ Merge r208025. rdar://problem/28216240
+
+ 2016-10-27 Simon Fraser <simon.fraser@apple.com>
+
+ If an animation's keyframes affect stacking context properties, create stacking context while the animation is running
+ https://bugs.webkit.org/show_bug.cgi?id=164094
+
+ Reviewed by Dean Jackson.
+
+ * animations/stacking-context-fill-forwards-expected.html: Added.
+ * animations/stacking-context-fill-forwards.html: Added.
+ * animations/stacking-context-not-fill-forwards-expected.html: Added.
+ * animations/stacking-context-not-fill-forwards.html: Added.
+ * animations/stacking-context-unchanged-while-running-expected.html: Added.
+ * animations/stacking-context-unchanged-while-running.html: Added.
+
+2016-10-31 Matthew Hanson <matthew_hanson@apple.com>
+
</ins><span class="cx"> Merge r208003. rdar://problem/28811878
</span><span class="cx">
</span><span class="cx"> 2016-10-25 Brent Fulgham <bfulgham@apple.com>
</span></span></pre></div>
<a id="branchessafari602branchLayoutTestsanimationsstackingcontextfillforwardsexpectedhtml"></a>
<div class="addfile"><h4>Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards-expected.html (0 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards-expected.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards-expected.html 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ background-color: orange;
+ z-index: 0;
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="branchessafari602branchLayoutTestsanimationsstackingcontextfillforwardshtml"></a>
<div class="addfile"><h4>Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards.html (0 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-fill-forwards.html 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -0,0 +1,62 @@
</span><ins>+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests that a fill-forwards animation causes stacking context when finished.</title>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ animation: move 0.1s 1 forwards;
+ background-color: orange;
+ }
+
+ @keyframes move {
+ from { transform: translateX(400px); }
+ to { transform: none }
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.addEventListener('load', function() {
+ document.getElementById('animating').addEventListener('animationend', function() {
+ // Wait until filling forwards.
+ window.setTimeout(function() {
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }, 0);
+ })
+ }, false);
+ </script>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="branchessafari602branchLayoutTestsanimationsstackingcontextnotfillforwardsexpectedhtml"></a>
<div class="addfile"><h4>Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html (0 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ background-color: orange;
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="branchessafari602branchLayoutTestsanimationsstackingcontextnotfillforwardshtml"></a>
<div class="addfile"><h4>Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards.html (0 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-not-fill-forwards.html 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -0,0 +1,62 @@
</span><ins>+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests that a non-fill-forwards animation doesn't cause stacking context once finished.</title>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ animation: move 0.1s 1;
+ background-color: orange;
+ }
+
+ @keyframes move {
+ from { transform: translateX(400px); }
+ to { transform: none }
+ }
+
+ .behind {
+ background-color: blue;
+ top: 50px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 25px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ window.addEventListener('load', function() {
+ document.getElementById('animating').addEventListener('animationend', function() {
+ // Wait until filling forwards.
+ window.setTimeout(function() {
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }, 0);
+ })
+ }, false);
+ </script>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+
+</body>
+</html>
</ins></span></pre></div>
<a id="branchessafari602branchLayoutTestsanimationsstackingcontextunchangedwhilerunningexpectedhtml"></a>
<div class="addfile"><h4>Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html (0 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ background-color: orange;
+ z-index: 0;
+ }
+
+ .behind {
+ background-color: blue;
+ top: 25px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 50px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+ </style>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+</body>
+</html>
</ins></span></pre></div>
<a id="branchessafari602branchLayoutTestsanimationsstackingcontextunchangedwhilerunninghtml"></a>
<div class="addfile"><h4>Added: branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running.html (0 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running.html (rev 0)
+++ branches/safari-602-branch/LayoutTests/animations/stacking-context-unchanged-while-running.html 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -0,0 +1,65 @@
</span><ins>+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests that an element with an animation whose keyframes affect stacking context creates stacking context throughout the animation.</title>
+ <style>
+ .box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ }
+
+ #animating {
+ animation: move 2s 1;
+ background-color: orange;
+ }
+
+ @keyframes move {
+ from { z-index: 1; }
+ 10% { z-index: auto; }
+ 90% { z-index: auto; }
+ to { z-index: 2; }
+ }
+
+ .behind {
+ background-color: blue;
+ top: 25px;
+ left: 50px;
+ z-index: 1;
+ }
+
+ .front {
+ top: 50px;
+ left: 25px;
+ background-color: green;
+ z-index: 2;
+ }
+
+ #result {
+ opacity: 0;
+ }
+ </style>
+ <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ const expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["move", 0.5, "animating", "z-index", 0, 0],
+ ];
+
+ var doPixelTest = true;
+ var disablePauseAPI = false;
+ runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
+ </script>
+</head>
+<body>
+
+<div class="behind box"></div>
+<div id="animating" class="box">
+ <div class="front box"></div>
+</div>
+<div id="result"></div>
+</body>
+</html>
</ins></span></pre></div>
<a id="branchessafari602branchSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/ChangeLog (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/ChangeLog 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/ChangeLog 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -1,5 +1,50 @@
</span><span class="cx"> 2016-10-31 Matthew Hanson <matthew_hanson@apple.com>
</span><span class="cx">
</span><ins>+ Merge r208025. rdar://problem/28216240
+
+ 2016-10-27 Simon Fraser <simon.fraser@apple.com>
+
+ If an animation's keyframes affect stacking context properties, create stacking context while the animation is running
+ https://bugs.webkit.org/show_bug.cgi?id=164094
+
+ Reviewed by Dean Jackson.
+
+ The CSS animations spec <https://drafts.csswg.org/css-animations-1/> now makes it
+ clear that a keyframe animation animating properties which can affect stacking context
+ should establish stacking context while it's running, or filling-forwards. This is part
+ of the "the user agent must act as if the will-change property...includes all the properties
+ animated by the animation" clause.
+
+ Implement by having CompositeAnimation::animate() track whether running animations should
+ create stacking context, replacing existing code in AnimationController::updateAnimations()
+ which only looked at opacity and transform. Transitions are also checked to see if they need
+ to trigger stacking context.
+
+ This allows for the removal of a 0.9999 hack when blending opacity.
+
+ Tests: animations/stacking-context-fill-forwards.html
+ animations/stacking-context-not-fill-forwards.html
+ animations/stacking-context-unchanged-while-running.html
+
+ * page/animation/AnimationController.cpp:
+ (WebCore::AnimationController::updateAnimations):
+ * page/animation/CSSPropertyAnimation.cpp:
+ * page/animation/CompositeAnimation.cpp:
+ (WebCore::CompositeAnimation::animate):
+ * page/animation/KeyframeAnimation.cpp:
+ (WebCore::KeyframeAnimation::KeyframeAnimation):
+ (WebCore::KeyframeAnimation::computeStackingContextImpact):
+ (WebCore::KeyframeAnimation::animate):
+ * page/animation/KeyframeAnimation.h:
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::currentTransform):
+ * rendering/style/WillChangeData.cpp:
+ (WebCore::WillChangeData::propertyCreatesStackingContext):
+ (WebCore::propertyCreatesStackingContext): Deleted.
+ * rendering/style/WillChangeData.h:
+
+2016-10-31 Matthew Hanson <matthew_hanson@apple.com>
+
</ins><span class="cx"> Merge r208003. rdar://problem/28811878
</span><span class="cx">
</span><span class="cx"> 2016-10-27 Brent Fulgham <bfulgham@apple.com>
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorepageanimationAnimationControllercpp"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/page/animation/AnimationController.cpp (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/page/animation/AnimationController.cpp 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/page/animation/AnimationController.cpp 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -624,13 +624,6 @@
</span><span class="cx"> #endif
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (animatedStyle) {
- // If the animations/transitions change opacity or transform, we need to update
- // the style to impose the stacking rules. Note that this is also
- // done in StyleResolver::adjustRenderStyle().
- if (animatedStyle->hasAutoZIndex() && (animatedStyle->opacity() < 1.0f || animatedStyle->hasTransform()))
- animatedStyle->setZIndex(0);
- }
</del><span class="cx"> return animationStateChanged;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorepageanimationCSSPropertyAnimationcpp"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -599,10 +599,7 @@
</span><span class="cx">
</span><span class="cx"> void blend(const AnimationBase* anim, RenderStyle* dst, const RenderStyle* a, const RenderStyle* b, double progress) const override
</span><span class="cx"> {
</span><del>- float fromOpacity = a->opacity();
-
- // This makes sure we put the object being animated into a RenderLayer during the animation
- dst->setOpacity(blendFunc(anim, (fromOpacity == 1) ? 0.999999f : fromOpacity, b->opacity(), progress));
</del><ins>+ dst->setOpacity(blendFunc(anim, a->opacity(), b->opacity(), progress));
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorepageanimationCompositeAnimationcpp"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/page/animation/CompositeAnimation.cpp (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/page/animation/CompositeAnimation.cpp 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/page/animation/CompositeAnimation.cpp 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -292,14 +292,34 @@
</span><span class="cx"> m_keyframeAnimations.checkConsistency();
</span><span class="cx">
</span><span class="cx"> bool animationStateChanged = false;
</span><ins>+ bool forceStackingContext = false;
</ins><span class="cx">
</span><span class="cx"> if (currentStyle) {
</span><span class="cx"> // Now that we have transition objects ready, let them know about the new goal state. We want them
</span><span class="cx"> // to fill in a RenderStyle*& only if needed.
</span><ins>+ bool checkForStackingContext = false;
</ins><span class="cx"> for (auto& transition : m_transitions.values()) {
</span><span class="cx"> if (transition->animate(this, &renderer, currentStyle, &targetStyle, blendedStyle))
</span><span class="cx"> animationStateChanged = true;
</span><ins>+
+ checkForStackingContext |= WillChangeData::propertyCreatesStackingContext(transition->animatingProperty());
</ins><span class="cx"> }
</span><ins>+
+ if (blendedStyle && checkForStackingContext) {
+ // Note that this is similar to code in StyleResolver::adjustRenderStyle() but only needs to consult
+ // animatable properties that can trigger stacking context.
+ if (blendedStyle->opacity() < 1.0f
+ || blendedStyle->hasTransformRelatedProperty()
+ || blendedStyle->hasMask()
+ || blendedStyle->clipPath()
+ || blendedStyle->boxReflect()
+ || blendedStyle->hasFilter()
+#if ENABLE(FILTERS_LEVEL_2)
+ || blendedStyle->hasBackdropFilter()
+#endif
+ )
+ forceStackingContext = true;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Now that we have animation objects ready, let them know about the new goal state. We want them
</span><span class="lines">@@ -306,10 +326,24 @@
</span><span class="cx"> // to fill in a RenderStyle*& only if needed.
</span><span class="cx"> for (auto& name : m_keyframeAnimationOrderMap) {
</span><span class="cx"> RefPtr<KeyframeAnimation> keyframeAnim = m_keyframeAnimations.get(name);
</span><del>- if (keyframeAnim && keyframeAnim->animate(this, &renderer, currentStyle, &targetStyle, blendedStyle))
- animationStateChanged = true;
</del><ins>+ if (keyframeAnim) {
+ if (keyframeAnim->animate(this, &renderer, currentStyle, &targetStyle, blendedStyle))
+ animationStateChanged = true;
+
+ bool runningOrFillingForwards = !keyframeAnim->waitingToStart() && !keyframeAnim->postActive();
+ forceStackingContext |= runningOrFillingForwards && keyframeAnim->triggersStackingContext();
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ // https://drafts.csswg.org/css-animations-1/
+ // While an animation is applied but has not finished, or has finished but has an animation-fill-mode of forwards or both,
+ // the user agent must act as if the will-change property ([css-will-change-1]) on the element additionally
+ // includes all the properties animated by the animation.
+ if (forceStackingContext && blendedStyle) {
+ if (blendedStyle->hasAutoZIndex())
+ blendedStyle->setZIndex(0);
+ }
+
</ins><span class="cx"> return animationStateChanged;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorepageanimationKeyframeAnimationcpp"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.cpp (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.cpp 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.cpp 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -38,6 +38,7 @@
</span><span class="cx"> #include "RenderBox.h"
</span><span class="cx"> #include "RenderStyle.h"
</span><span class="cx"> #include "StyleResolver.h"
</span><ins>+#include "WillChangeData.h"
</ins><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><span class="lines">@@ -56,6 +57,7 @@
</span><span class="cx"> #if ENABLE(FILTERS_LEVEL_2)
</span><span class="cx"> checkForMatchingBackdropFilterFunctionLists();
</span><span class="cx"> #endif
</span><ins>+ computeStackingContextImpact();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> KeyframeAnimation::~KeyframeAnimation()
</span><span class="lines">@@ -65,6 +67,16 @@
</span><span class="cx"> endAnimation();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+void KeyframeAnimation::computeStackingContextImpact()
+{
+ for (auto propertyID : m_keyframes.properties()) {
+ if (WillChangeData::propertyCreatesStackingContext(propertyID)) {
+ m_triggersStackingContext = true;
+ break;
+ }
+ }
+}
+
</ins><span class="cx"> void KeyframeAnimation::fetchIntervalEndpointsForProperty(CSSPropertyID property, const RenderStyle*& fromStyle, const RenderStyle*& toStyle, double& prog) const
</span><span class="cx"> {
</span><span class="cx"> size_t numKeyframes = m_keyframes.size();
</span><span class="lines">@@ -148,6 +160,7 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ // FIXME: the code below never changes the state, so this function always returns false.
</ins><span class="cx"> AnimationState oldState = state();
</span><span class="cx">
</span><span class="cx"> // Run a cycle of animation.
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorepageanimationKeyframeAnimationh"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.h (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.h 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/page/animation/KeyframeAnimation.h 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -55,6 +55,8 @@
</span><span class="cx"> const AtomicString& name() const { return m_keyframes.animationName(); }
</span><span class="cx">
</span><span class="cx"> bool hasAnimationForProperty(CSSPropertyID) const;
</span><ins>+
+ bool triggersStackingContext() const { return m_triggersStackingContext; }
</ins><span class="cx">
</span><span class="cx"> void setUnanimatedStyle(std::unique_ptr<RenderStyle> style) { m_unanimatedStyle = WTFMove(style); }
</span><span class="cx"> RenderStyle* unanimatedStyle() const { return m_unanimatedStyle.get(); }
</span><span class="lines">@@ -81,6 +83,7 @@
</span><span class="cx">
</span><span class="cx"> bool computeExtentOfAnimationForMatchingTransformLists(const FloatRect& rendererBox, LayoutRect&) const;
</span><span class="cx">
</span><ins>+ void computeStackingContextImpact();
</ins><span class="cx"> void validateTransformFunctionList();
</span><span class="cx"> void checkForMatchingFilterFunctionLists();
</span><span class="cx"> #if ENABLE(FILTERS_LEVEL_2)
</span><span class="lines">@@ -98,6 +101,7 @@
</span><span class="cx"> std::unique_ptr<RenderStyle> m_unanimatedStyle; // The style just before we started animation
</span><span class="cx">
</span><span class="cx"> bool m_startEventDispatched { false };
</span><ins>+ bool m_triggersStackingContext { false };
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> } // namespace WebCore
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorerenderingRenderLayercpp"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/rendering/RenderLayer.cpp (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/rendering/RenderLayer.cpp 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/rendering/RenderLayer.cpp 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -995,6 +995,7 @@
</span><span class="cx">
</span><span class="cx"> RenderBox* box = renderBox();
</span><span class="cx"> ASSERT(box);
</span><ins>+ // FIXME: replace with call to AnimationController::isRunningAcceleratedAnimationOnRenderer() and remove RenderStyle::isRunningAcceleratedAnimation().
</ins><span class="cx"> if (renderer().style().isRunningAcceleratedAnimation()) {
</span><span class="cx"> TransformationMatrix currTransform;
</span><span class="cx"> FloatRect pixelSnappedBorderRect = snapRectToDevicePixels(box->borderBoxRect(), box->document().deviceScaleFactor());
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorerenderingstyleWillChangeDatacpp"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.cpp (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.cpp 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.cpp 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -62,7 +62,7 @@
</span><span class="cx">
</span><span class="cx"> // "If any non-initial value of a property would create a stacking context on the element,
</span><span class="cx"> // specifying that property in will-change must create a stacking context on the element."
</span><del>-static bool propertyCreatesStackingContext(CSSPropertyID property)
</del><ins>+bool WillChangeData::propertyCreatesStackingContext(CSSPropertyID property)
</ins><span class="cx"> {
</span><span class="cx"> switch (property) {
</span><span class="cx"> case CSSPropertyPerspective:
</span></span></pre></div>
<a id="branchessafari602branchSourceWebCorerenderingstyleWillChangeDatah"></a>
<div class="modfile"><h4>Modified: branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.h (208166 => 208167)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.h 2016-10-31 19:09:23 UTC (rev 208166)
+++ branches/safari-602-branch/Source/WebCore/rendering/style/WillChangeData.h 2016-10-31 19:13:37 UTC (rev 208167)
</span><span class="lines">@@ -70,6 +70,8 @@
</span><span class="cx"> typedef std::pair<Feature, CSSPropertyID> FeaturePropertyPair;
</span><span class="cx"> FeaturePropertyPair featureAt(size_t) const;
</span><span class="cx">
</span><ins>+ static bool propertyCreatesStackingContext(CSSPropertyID);
+
</ins><span class="cx"> private:
</span><span class="cx"> WillChangeData()
</span><span class="cx"> {
</span></span></pre>
</div>
</div>
</body>
</html>