<!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>[208025] trunk</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/208025">208025</a></dd>
<dt>Author</dt> <dd>simon.fraser@apple.com</dd>
<dt>Date</dt> <dd>2016-10-27 20:20:32 -0700 (Thu, 27 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.
Source/WebCore:
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:
LayoutTests:
* 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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorepageanimationAnimationControllercpp">trunk/Source/WebCore/page/animation/AnimationController.cpp</a></li>
<li><a href="#trunkSourceWebCorepageanimationCSSPropertyAnimationcpp">trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp</a></li>
<li><a href="#trunkSourceWebCorepageanimationCompositeAnimationcpp">trunk/Source/WebCore/page/animation/CompositeAnimation.cpp</a></li>
<li><a href="#trunkSourceWebCorepageanimationKeyframeAnimationcpp">trunk/Source/WebCore/page/animation/KeyframeAnimation.cpp</a></li>
<li><a href="#trunkSourceWebCorepageanimationKeyframeAnimationh">trunk/Source/WebCore/page/animation/KeyframeAnimation.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayercpp">trunk/Source/WebCore/rendering/RenderLayer.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleWillChangeDatacpp">trunk/Source/WebCore/rendering/style/WillChangeData.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleWillChangeDatah">trunk/Source/WebCore/rendering/style/WillChangeData.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsanimationsstackingcontextfillforwardsexpectedhtml">trunk/LayoutTests/animations/stacking-context-fill-forwards-expected.html</a></li>
<li><a href="#trunkLayoutTestsanimationsstackingcontextfillforwardshtml">trunk/LayoutTests/animations/stacking-context-fill-forwards.html</a></li>
<li><a href="#trunkLayoutTestsanimationsstackingcontextnotfillforwardsexpectedhtml">trunk/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html</a></li>
<li><a href="#trunkLayoutTestsanimationsstackingcontextnotfillforwardshtml">trunk/LayoutTests/animations/stacking-context-not-fill-forwards.html</a></li>
<li><a href="#trunkLayoutTestsanimationsstackingcontextunchangedwhilerunningexpectedhtml">trunk/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html</a></li>
<li><a href="#trunkLayoutTestsanimationsstackingcontextunchangedwhilerunninghtml">trunk/LayoutTests/animations/stacking-context-unchanged-while-running.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/LayoutTests/ChangeLog 2016-10-28 03:20:32 UTC (rev 208025)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+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.
+
</ins><span class="cx"> 2016-10-27 Myles C. Maxfield <mmaxfield@apple.com>
</span><span class="cx">
</span><span class="cx"> [macOS] [WebGL2] Temporarily upgrade WebGL 2's internal OpenGL context from version 2.1 to 3.2
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsstackingcontextfillforwardsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/stacking-context-fill-forwards-expected.html (0 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/stacking-context-fill-forwards-expected.html (rev 0)
+++ trunk/LayoutTests/animations/stacking-context-fill-forwards-expected.html 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkLayoutTestsanimationsstackingcontextfillforwardshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/stacking-context-fill-forwards.html (0 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/stacking-context-fill-forwards.html (rev 0)
+++ trunk/LayoutTests/animations/stacking-context-fill-forwards.html 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkLayoutTestsanimationsstackingcontextnotfillforwardsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html (0 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html (rev 0)
+++ trunk/LayoutTests/animations/stacking-context-not-fill-forwards-expected.html 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkLayoutTestsanimationsstackingcontextnotfillforwardshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/stacking-context-not-fill-forwards.html (0 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/stacking-context-not-fill-forwards.html (rev 0)
+++ trunk/LayoutTests/animations/stacking-context-not-fill-forwards.html 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkLayoutTestsanimationsstackingcontextunchangedwhilerunningexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html (0 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html (rev 0)
+++ trunk/LayoutTests/animations/stacking-context-unchanged-while-running-expected.html 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkLayoutTestsanimationsstackingcontextunchangedwhilerunninghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/stacking-context-unchanged-while-running.html (0 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/stacking-context-unchanged-while-running.html (rev 0)
+++ trunk/LayoutTests/animations/stacking-context-unchanged-while-running.html 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/ChangeLog 2016-10-28 03:20:32 UTC (rev 208025)
</span><span class="lines">@@ -1,3 +1,44 @@
</span><ins>+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:
+
</ins><span class="cx"> 2016-10-27 Sam Weinig <sam@webkit.org>
</span><span class="cx">
</span><span class="cx"> [WebIDL] Move code generators off of domSignature::type and onto domSignature::idlType
</span></span></pre></div>
<a id="trunkSourceWebCorepageanimationAnimationControllercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/animation/AnimationController.cpp (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/animation/AnimationController.cpp 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/page/animation/AnimationController.cpp 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkSourceWebCorepageanimationCSSPropertyAnimationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2016-10-28 03:20:32 UTC (rev 208025)
</span><span class="lines">@@ -638,10 +638,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="trunkSourceWebCorepageanimationCompositeAnimationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/animation/CompositeAnimation.cpp (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/animation/CompositeAnimation.cpp 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/page/animation/CompositeAnimation.cpp 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkSourceWebCorepageanimationKeyframeAnimationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/animation/KeyframeAnimation.cpp (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/animation/KeyframeAnimation.cpp 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/page/animation/KeyframeAnimation.cpp 2016-10-28 03:20:32 UTC (rev 208025)
</span><span class="lines">@@ -39,6 +39,7 @@
</span><span class="cx"> #include "RenderStyle.h"
</span><span class="cx"> #include "StylePendingResources.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">@@ -55,6 +56,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">@@ -64,6 +66,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">@@ -147,6 +159,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="trunkSourceWebCorepageanimationKeyframeAnimationh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/animation/KeyframeAnimation.h (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/animation/KeyframeAnimation.h 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/page/animation/KeyframeAnimation.h 2016-10-28 03:20:32 UTC (rev 208025)
</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 resolveKeyframeStyles();
</span><span class="cx"> void validateTransformFunctionList();
</span><span class="cx"> void checkForMatchingFilterFunctionLists();
</span><span class="lines">@@ -99,6 +102,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="trunkSourceWebCorerenderingRenderLayercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2016-10-28 03:20:32 UTC (rev 208025)
</span><span class="lines">@@ -996,6 +996,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="trunkSourceWebCorerenderingstyleWillChangeDatacpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/WillChangeData.cpp (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/WillChangeData.cpp 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/rendering/style/WillChangeData.cpp 2016-10-28 03:20:32 UTC (rev 208025)
</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="trunkSourceWebCorerenderingstyleWillChangeDatah"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/WillChangeData.h (208024 => 208025)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/WillChangeData.h 2016-10-28 02:26:55 UTC (rev 208024)
+++ trunk/Source/WebCore/rendering/style/WillChangeData.h 2016-10-28 03:20:32 UTC (rev 208025)
</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>