<!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>[201818] 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/201818">201818</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2016-06-08 11:46:43 -0700 (Wed, 08 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Multiple selectors break keyframes animation
https://bugs.webkit.org/show_bug.cgi?id=158199
<rdar://problem/26652591>
Reviewed by Simon Fraser.
Source/WebCore:
If we came across a duplicate key entry in a keyframe, we
were replacing the existing entry, instead of merging.
Test: animations/duplicate-keys.html
* css/CSSKeyframeRule.h:
(WebCore::StyleKeyframe::setKey): Add a way to set the key of a rule
as a number, rather than going through a string and the CSS parser.
* css/StyleResolver.cpp:
(WebCore::StyleResolver::keyframeStylesForAnimation): Check if the rule
has duplicates, and if it does, merge all the common entries.
* rendering/style/KeyframeList.cpp:
(WebCore::KeyframeList::insert): Now that we've removed duplicates at
the processing time, we should never come across a duplicate while
building this list.
LayoutTests:
* animations/duplicate-keys-expected.html: Added.
* animations/duplicate-keys.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="#trunkSourceWebCorecssCSSKeyframeRuleh">trunk/Source/WebCore/css/CSSKeyframeRule.h</a></li>
<li><a href="#trunkSourceWebCorecssStyleResolvercpp">trunk/Source/WebCore/css/StyleResolver.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleKeyframeListcpp">trunk/Source/WebCore/rendering/style/KeyframeList.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsanimationsduplicatekeysexpectedhtml">trunk/LayoutTests/animations/duplicate-keys-expected.html</a></li>
<li><a href="#trunkLayoutTestsanimationsduplicatekeyshtml">trunk/LayoutTests/animations/duplicate-keys.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (201817 => 201818)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-06-08 18:45:47 UTC (rev 201817)
+++ trunk/LayoutTests/ChangeLog 2016-06-08 18:46:43 UTC (rev 201818)
</span><span class="lines">@@ -1,3 +1,14 @@
</span><ins>+2016-06-08 Dean Jackson <dino@apple.com>
+
+ Multiple selectors break keyframes animation
+ https://bugs.webkit.org/show_bug.cgi?id=158199
+ <rdar://problem/26652591>
+
+ Reviewed by Simon Fraser.
+
+ * animations/duplicate-keys-expected.html: Added.
+ * animations/duplicate-keys.html: Added.
+
</ins><span class="cx"> 2016-06-08 Per Arne Vollan <pvollan@apple.com>
</span><span class="cx">
</span><span class="cx"> [Win] Shadow DOM tests are failing.
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsduplicatekeysexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/duplicate-keys-expected.html (0 => 201818)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/duplicate-keys-expected.html (rev 0)
+++ trunk/LayoutTests/animations/duplicate-keys-expected.html 2016-06-08 18:46:43 UTC (rev 201818)
</span><span class="lines">@@ -0,0 +1,38 @@
</span><ins>+<style>
+.box {
+ height: 100px;
+ width: 0px;
+ border-width: 0;
+ border-left-width: 200px;
+ border-right-width: 200px;
+ border-style: solid;
+ border-color: blue;
+ animation: foo 200ms forwards;
+}
+@keyframes foo {
+ 0% {
+ border-left-color: orange;
+ border-right-color: green;
+ }
+ 50% {
+ border-left-color: red;
+ }
+ to {
+ border-left-color: orange;
+ border-right-color: green;
+ }
+}
+
+</style>
+<script>
+if (window.testRunner) {
+ window.addEventListener("load", function () {
+ var box = document.querySelector(".box");
+ internals.pauseAnimationAtTimeOnElement("foo", 0.1, box);
+ }, false);
+}
+</script>
+<p>Left side should go orange -> red -> orange, right side should stay green at the end.</p>
+<div class="box">
+</div>
+
</ins><span class="cx">Property changes on: trunk/LayoutTests/animations/duplicate-keys-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsanimationsduplicatekeyshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/duplicate-keys.html (0 => 201818)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/duplicate-keys.html (rev 0)
+++ trunk/LayoutTests/animations/duplicate-keys.html 2016-06-08 18:46:43 UTC (rev 201818)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+<style>
+.box {
+ height: 100px;
+ width: 0px;
+ border-width: 0;
+ border-left-width: 200px;
+ border-right-width: 200px;
+ border-style: solid;
+ border-color: blue;
+ animation: foo 200ms forwards;
+}
+@keyframes foo {
+ 0% {
+ border-left-color: orange;
+ border-right-color: green;
+ }
+ 50% {
+ border-left-color: red;
+ }
+ 50%, to {
+ border-right-color: green;
+ }
+ to {
+ border-left-color: orange;
+ }
+}
+
+</style>
+<script>
+if (window.testRunner) {
+ testRunner.waitUntilDone();
+ window.addEventListener("load", function () {
+ var box = document.querySelector(".box");
+ internals.pauseAnimationAtTimeOnElement("foo", 0.1, box);
+ testRunner.notifyDone();
+ }, false);
+}
+</script>
+<p>Left side should go orange -> red -> orange, right side should stay green at the end.</p>
+<div class="box">
+</div>
+
</ins><span class="cx">Property changes on: trunk/LayoutTests/animations/duplicate-keys.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (201817 => 201818)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-06-08 18:45:47 UTC (rev 201817)
+++ trunk/Source/WebCore/ChangeLog 2016-06-08 18:46:43 UTC (rev 201818)
</span><span class="lines">@@ -1,3 +1,27 @@
</span><ins>+2016-06-08 Dean Jackson <dino@apple.com>
+
+ Multiple selectors break keyframes animation
+ https://bugs.webkit.org/show_bug.cgi?id=158199
+ <rdar://problem/26652591>
+
+ Reviewed by Simon Fraser.
+
+ If we came across a duplicate key entry in a keyframe, we
+ were replacing the existing entry, instead of merging.
+
+ Test: animations/duplicate-keys.html
+
+ * css/CSSKeyframeRule.h:
+ (WebCore::StyleKeyframe::setKey): Add a way to set the key of a rule
+ as a number, rather than going through a string and the CSS parser.
+ * css/StyleResolver.cpp:
+ (WebCore::StyleResolver::keyframeStylesForAnimation): Check if the rule
+ has duplicates, and if it does, merge all the common entries.
+ * rendering/style/KeyframeList.cpp:
+ (WebCore::KeyframeList::insert): Now that we've removed duplicates at
+ the processing time, we should never come across a duplicate while
+ building this list.
+
</ins><span class="cx"> 2016-06-08 Ryan Haddad <ryanhaddad@apple.com>
</span><span class="cx">
</span><span class="cx"> Rebaseline bindings tests after r201808
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSKeyframeRuleh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSKeyframeRule.h (201817 => 201818)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSKeyframeRule.h 2016-06-08 18:45:47 UTC (rev 201817)
+++ trunk/Source/WebCore/css/CSSKeyframeRule.h 2016-06-08 18:46:43 UTC (rev 201818)
</span><span class="lines">@@ -47,6 +47,12 @@
</span><span class="cx">
</span><span class="cx"> String keyText() const;
</span><span class="cx"> void setKeyText(const String& text) { m_keys = CSSParser::parseKeyframeSelector(text); }
</span><ins>+ void setKey(double key)
+ {
+ ASSERT(m_keys.isEmpty());
+ m_keys.clear();
+ m_keys.append(key);
+ }
</ins><span class="cx">
</span><span class="cx"> const Vector<double>& keys() const { return m_keys; };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleResolvercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleResolver.cpp (201817 => 201818)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleResolver.cpp 2016-06-08 18:45:47 UTC (rev 201817)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2016-06-08 18:46:43 UTC (rev 201818)
</span><span class="lines">@@ -513,7 +513,7 @@
</span><span class="cx"> {
</span><span class="cx"> list.clear();
</span><span class="cx">
</span><del>- // Get the keyframesRule for this name
</del><ins>+ // Get the keyframesRule for this name.
</ins><span class="cx"> if (list.animationName().isEmpty())
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -525,13 +525,54 @@
</span><span class="cx">
</span><span class="cx"> const StyleRuleKeyframes* keyframesRule = it->value.get();
</span><span class="cx">
</span><del>- // Construct and populate the style for each keyframe
- for (auto& keyframe : keyframesRule->keyframes()) {
- // Apply the declaration to the style. This is a simplified version of the logic in styleForElement
</del><ins>+ auto* keyframes = &keyframesRule->keyframes();
+ Vector<Ref<StyleKeyframe>> newKeyframesIfNecessary;
+
+ bool hasDuplicateKeys;
+ HashSet<double> keyframeKeys;
+ for (auto& keyframe : *keyframes) {
+ for (auto key : keyframe->keys()) {
+ if (!keyframeKeys.add(key)) {
+ hasDuplicateKeys = true;
+ break;
+ }
+ }
+ if (hasDuplicateKeys)
+ break;
+ }
+
+ // FIXME: If HashMaps could have Ref<> as value types, we wouldn't need
+ // to copy the HashMap into a Vector.
+ if (hasDuplicateKeys) {
+ // Merge duplicate key times.
+ HashMap<double, RefPtr<StyleKeyframe>> keyframesMap;
+
+ for (auto& originalKeyframe : keyframesRule->keyframes()) {
+ for (auto key : originalKeyframe->keys()) {
+ if (auto keyframe = keyframesMap.get(key))
+ keyframe->mutableProperties().mergeAndOverrideOnConflict(originalKeyframe->properties());
+ else {
+ auto styleKeyframe = StyleKeyframe::create(MutableStyleProperties::create());
+ styleKeyframe.ptr()->setKey(key);
+ styleKeyframe.ptr()->mutableProperties().mergeAndOverrideOnConflict(originalKeyframe->properties());
+ keyframesMap.set(key, styleKeyframe.ptr());
+ }
+ }
+ }
+
+ for (auto& keyframe : keyframesMap.values())
+ newKeyframesIfNecessary.append(*keyframe.get());
+
+ keyframes = &newKeyframesIfNecessary;
+ }
+
+ // Construct and populate the style for each keyframe.
+ for (auto& keyframe : *keyframes) {
+ // Apply the declaration to the style. This is a simplified version of the logic in styleForElement.
</ins><span class="cx"> m_state = State(element, nullptr);
</span><span class="cx">
</span><span class="cx"> // Add this keyframe style to all the indicated key times
</span><del>- for (auto& key : keyframe->keys()) {
</del><ins>+ for (auto key : keyframe->keys()) {
</ins><span class="cx"> KeyframeValue keyframeValue(0, nullptr);
</span><span class="cx"> keyframeValue.setStyle(styleForKeyframe(elementStyle, keyframe.ptr(), keyframeValue));
</span><span class="cx"> keyframeValue.setKey(key);
</span><span class="lines">@@ -539,25 +580,25 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // If the 0% keyframe is missing, create it (but only if there is at least one other keyframe)
</del><ins>+ // If the 0% keyframe is missing, create it (but only if there is at least one other keyframe).
</ins><span class="cx"> int initialListSize = list.size();
</span><span class="cx"> if (initialListSize > 0 && list[0].key()) {
</span><span class="cx"> static StyleKeyframe* zeroPercentKeyframe;
</span><span class="cx"> if (!zeroPercentKeyframe) {
</span><span class="cx"> zeroPercentKeyframe = &StyleKeyframe::create(MutableStyleProperties::create()).leakRef();
</span><del>- zeroPercentKeyframe->setKeyText("0%");
</del><ins>+ zeroPercentKeyframe->setKey(0);
</ins><span class="cx"> }
</span><span class="cx"> KeyframeValue keyframeValue(0, nullptr);
</span><span class="cx"> keyframeValue.setStyle(styleForKeyframe(elementStyle, zeroPercentKeyframe, keyframeValue));
</span><span class="cx"> list.insert(WTFMove(keyframeValue));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // If the 100% keyframe is missing, create it (but only if there is at least one other keyframe)
</del><ins>+ // If the 100% keyframe is missing, create it (but only if there is at least one other keyframe).
</ins><span class="cx"> if (initialListSize > 0 && (list[list.size() - 1].key() != 1)) {
</span><span class="cx"> static StyleKeyframe* hundredPercentKeyframe;
</span><span class="cx"> if (!hundredPercentKeyframe) {
</span><span class="cx"> hundredPercentKeyframe = &StyleKeyframe::create(MutableStyleProperties::create()).leakRef();
</span><del>- hundredPercentKeyframe->setKeyText("100%");
</del><ins>+ hundredPercentKeyframe->setKey(1);
</ins><span class="cx"> }
</span><span class="cx"> KeyframeValue keyframeValue(1, nullptr);
</span><span class="cx"> keyframeValue.setStyle(styleForKeyframe(elementStyle, hundredPercentKeyframe, keyframeValue));
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleKeyframeListcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/KeyframeList.cpp (201817 => 201818)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/KeyframeList.cpp 2016-06-08 18:45:47 UTC (rev 201817)
+++ trunk/Source/WebCore/rendering/style/KeyframeList.cpp 2016-06-08 18:46:43 UTC (rev 201818)
</span><span class="lines">@@ -78,12 +78,10 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> bool inserted = false;
</span><del>- bool replaced = false;
</del><span class="cx"> size_t i = 0;
</span><span class="cx"> for (; i < m_keyframes.size(); ++i) {
</span><span class="cx"> if (m_keyframes[i].key() == keyframe.key()) {
</span><del>- m_keyframes[i] = WTFMove(keyframe);
- replaced = true;
</del><ins>+ ASSERT_NOT_REACHED();
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -95,19 +93,9 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (!replaced && !inserted)
</del><ins>+ if (!inserted)
</ins><span class="cx"> m_keyframes.append(WTFMove(keyframe));
</span><span class="cx">
</span><del>- if (replaced) {
- // We have to rebuild the properties list from scratch.
- m_properties.clear();
- for (auto& keyframeValue : m_keyframes) {
- for (auto& property : keyframeValue.properties())
- m_properties.add(property);
- }
- return;
- }
-
</del><span class="cx"> for (auto& property : m_keyframes[i].properties())
</span><span class="cx"> m_properties.add(property);
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>