<!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>[200043] 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/200043">200043</a></dd>
<dt>Author</dt> <dd>simon.fraser@apple.com</dd>
<dt>Date</dt> <dd>2016-04-25 13:06:09 -0700 (Mon, 25 Apr 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>play-state not parsed as part of animation shorthand
https://bugs.webkit.org/show_bug.cgi?id=156959

Reviewed by Darin Adler.

Source/WebCore:

We failed to parse animation-play-state as part of the animation shorthand, contrary
to the spec and other browsers.

Fix for both the prefixed and unprefixed properties. There is some compat risk here,
but only changing unprefixed behavior will probably lead to more author confusion.

Test: animations/play-state-in-shorthand.html

* css/CSSParser.cpp:
(WebCore::CSSParser::parseAnimationShorthand):
* css/CSSPropertyNames.in:
* css/StylePropertyShorthand.cpp:
(WebCore::animationShorthandForParsing): Remove the long comment which is no longer relevant
now that the behavior has been written into the spec.

LayoutTests:

* animations/animation-shorthand-expected.txt:
* animations/animation-shorthand.html:
* animations/play-state-in-shorthand-expected.txt: Added.
* animations/play-state-in-shorthand.html: Added.
* animations/resources/animation-test-helpers.js:
(getPropertyValue):
(comparePropertyValue):</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsanimationsanimationshorthandexpectedtxt">trunk/LayoutTests/animations/animation-shorthand-expected.txt</a></li>
<li><a href="#trunkLayoutTestsanimationsanimationshorthandhtml">trunk/LayoutTests/animations/animation-shorthand.html</a></li>
<li><a href="#trunkLayoutTestsanimationsresourcesanimationtesthelpersjs">trunk/LayoutTests/animations/resources/animation-test-helpers.js</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSParsercpp">trunk/Source/WebCore/css/CSSParser.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSPropertyNamesin">trunk/Source/WebCore/css/CSSPropertyNames.in</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertyShorthandcpp">trunk/Source/WebCore/css/StylePropertyShorthand.cpp</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsanimationsplaystateinshorthandexpectedtxt">trunk/LayoutTests/animations/play-state-in-shorthand-expected.txt</a></li>
<li><a href="#trunkLayoutTestsanimationsplaystateinshorthandhtml">trunk/LayoutTests/animations/play-state-in-shorthand.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/LayoutTests/ChangeLog        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -1,5 +1,20 @@
</span><span class="cx"> 2016-04-25  Simon Fraser  &lt;simon.fraser@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        play-state not parsed as part of animation shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=156959
+
+        Reviewed by Darin Adler.
+
+        * animations/animation-shorthand-expected.txt:
+        * animations/animation-shorthand.html:
+        * animations/play-state-in-shorthand-expected.txt: Added.
+        * animations/play-state-in-shorthand.html: Added.
+        * animations/resources/animation-test-helpers.js:
+        (getPropertyValue):
+        (comparePropertyValue):
+
+2016-04-25  Simon Fraser  &lt;simon.fraser@apple.com&gt;
+
</ins><span class="cx">         Negative animation-delay is treated as 0s
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=141008
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsanimationshorthandexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/animations/animation-shorthand-expected.txt (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/animation-shorthand-expected.txt        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/LayoutTests/animations/animation-shorthand-expected.txt        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -5,6 +5,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on a: PASS
</span><span class="cx"> Testing webkitAnimationDirection on a: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on a: PASS
</span><ins>+Testing webkitAnimationPlayState on a: PASS
</ins><span class="cx"> Testing webkitAnimationName on b: PASS
</span><span class="cx"> Testing webkitAnimationDuration on b: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on b: PASS
</span><span class="lines">@@ -12,6 +13,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on b: PASS
</span><span class="cx"> Testing webkitAnimationDirection on b: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on b: PASS
</span><ins>+Testing webkitAnimationPlayState on b: PASS
</ins><span class="cx"> Testing webkitAnimationName on c: PASS
</span><span class="cx"> Testing webkitAnimationDuration on c: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on c: PASS
</span><span class="lines">@@ -19,6 +21,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on c: PASS
</span><span class="cx"> Testing webkitAnimationDirection on c: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on c: PASS
</span><ins>+Testing webkitAnimationPlayState on c: PASS
</ins><span class="cx"> Testing webkitAnimationName on d: PASS
</span><span class="cx"> Testing webkitAnimationDuration on d: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on d: PASS
</span><span class="lines">@@ -26,6 +29,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on d: PASS
</span><span class="cx"> Testing webkitAnimationDirection on d: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on d: PASS
</span><ins>+Testing webkitAnimationPlayState on d: PASS
</ins><span class="cx"> Testing webkitAnimationName on e: PASS
</span><span class="cx"> Testing webkitAnimationDuration on e: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on e: PASS
</span><span class="lines">@@ -33,6 +37,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on e: PASS
</span><span class="cx"> Testing webkitAnimationDirection on e: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on e: PASS
</span><ins>+Testing webkitAnimationPlayState on e: PASS
</ins><span class="cx"> Testing webkitAnimationName on f: PASS
</span><span class="cx"> Testing webkitAnimationDuration on f: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on f: PASS
</span><span class="lines">@@ -40,6 +45,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on f: PASS
</span><span class="cx"> Testing webkitAnimationDirection on f: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on f: PASS
</span><ins>+Testing webkitAnimationPlayState on f: PASS
</ins><span class="cx"> Testing webkitAnimationName on g: PASS
</span><span class="cx"> Testing webkitAnimationDuration on g: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on g: PASS
</span><span class="lines">@@ -47,6 +53,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on g: PASS
</span><span class="cx"> Testing webkitAnimationDirection on g: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on g: PASS
</span><ins>+Testing webkitAnimationPlayState on g: PASS
</ins><span class="cx"> Testing webkitAnimationName on h: PASS
</span><span class="cx"> Testing webkitAnimationDuration on h: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on h: PASS
</span><span class="lines">@@ -54,6 +61,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on h: PASS
</span><span class="cx"> Testing webkitAnimationDirection on h: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on h: PASS
</span><ins>+Testing webkitAnimationPlayState on h: PASS
</ins><span class="cx"> Testing webkitAnimationName on i: PASS
</span><span class="cx"> Testing webkitAnimationDuration on i: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on i: PASS
</span><span class="lines">@@ -61,6 +69,7 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on i: PASS
</span><span class="cx"> Testing webkitAnimationDirection on i: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on i: PASS
</span><ins>+Testing webkitAnimationPlayState on i: PASS
</ins><span class="cx"> Testing webkitAnimationName on j: PASS
</span><span class="cx"> Testing webkitAnimationDuration on j: PASS
</span><span class="cx"> Testing webkitAnimationTimingFunction on j: PASS
</span><span class="lines">@@ -68,4 +77,13 @@
</span><span class="cx"> Testing webkitAnimationIterationCount on j: PASS
</span><span class="cx"> Testing webkitAnimationDirection on j: PASS
</span><span class="cx"> Testing webkitAnimationFillMode on j: PASS
</span><ins>+Testing webkitAnimationPlayState on j: PASS
+Testing webkitAnimationName on k: PASS
+Testing webkitAnimationDuration on k: PASS
+Testing webkitAnimationTimingFunction on k: PASS
+Testing webkitAnimationDelay on k: PASS
+Testing webkitAnimationIterationCount on k: PASS
+Testing webkitAnimationDirection on k: PASS
+Testing webkitAnimationFillMode on k: PASS
+Testing webkitAnimationPlayState on k: PASS
</ins><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsanimationshorthandhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/animations/animation-shorthand.html (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/animation-shorthand.html        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/LayoutTests/animations/animation-shorthand.html        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -34,8 +34,11 @@
</span><span class="cx">   -webkit-animation: anim1 10s linear normal none;
</span><span class="cx"> }
</span><span class="cx"> #j {
</span><del>-  -webkit-animation: anim1 10s linear infinite backwards, anim2 3s none, anim3 5s both;
</del><ins>+  -webkit-animation: anim1 10s ease infinite both paused;
</ins><span class="cx"> }
</span><ins>+#k {
+  -webkit-animation: anim1 10s linear infinite backwards, anim2 3s none paused, anim3 5s both;
+}
</ins><span class="cx"> 
</span><span class="cx"> @-webkit-keyframes anim1 { }
</span><span class="cx"> @-webkit-keyframes anim2 { }
</span><span class="lines">@@ -51,19 +54,21 @@
</span><span class="cx">       &quot;webkitAnimationDelay&quot;,
</span><span class="cx">       &quot;webkitAnimationIterationCount&quot;,
</span><span class="cx">       &quot;webkitAnimationDirection&quot;,
</span><del>-      &quot;webkitAnimationFillMode&quot;
</del><ins>+      &quot;webkitAnimationFillMode&quot;,
+      &quot;webkitAnimationPlayState&quot;,
</ins><span class="cx">     ];
</span><span class="cx">     const kExpectedResults = [
</span><del>-      { id: 'a',  values: [ &quot;none&quot;, &quot;0s&quot;, &quot;ease&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot; ] },
-      { id: 'b',  values: [ &quot;none&quot;, &quot;0s&quot;, &quot;ease&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot; ] },
-      { id: 'c',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;ease&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot; ] },
-      { id: 'd',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot; ] },
-      { id: 'e',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot; ] },
-      { id: 'f',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;3&quot;, &quot;normal&quot;, &quot;none&quot; ] },
-      { id: 'g',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;infinite&quot;, &quot;alternate&quot;, &quot;none&quot; ] },
-      { id: 'h',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;infinite&quot;, &quot;alternate&quot;, &quot;forwards&quot; ] },
-      { id: 'i',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot; ] },
-      { id: 'j',  values: [ &quot;anim1, anim2, anim3&quot;, &quot;10s, 3s, 5s&quot;, &quot;linear, ease, ease&quot;, &quot;0s, 0s, 0s&quot;, &quot;infinite, 1, 1&quot;, &quot;normal, normal, normal&quot;, &quot;backwards, none, both&quot; ] }
</del><ins>+      { id: 'a',  values: [ &quot;none&quot;, &quot;0s&quot;, &quot;ease&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'b',  values: [ &quot;none&quot;, &quot;0s&quot;, &quot;ease&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'c',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;ease&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'd',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'e',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'f',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;3&quot;, &quot;normal&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'g',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;infinite&quot;, &quot;alternate&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'h',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;5s&quot;, &quot;infinite&quot;, &quot;alternate&quot;, &quot;forwards&quot;, &quot;running&quot; ] },
+      { id: 'i',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;linear&quot;, &quot;0s&quot;, &quot;1&quot;, &quot;normal&quot;, &quot;none&quot;, &quot;running&quot; ] },
+      { id: 'j',  values: [ &quot;anim1&quot;, &quot;10s&quot;, &quot;ease&quot;, &quot;0s&quot;, &quot;infinite&quot;, &quot;normal&quot;, &quot;both&quot;, &quot;paused&quot; ] },
+      { id: 'k',  values: [ &quot;anim1, anim2, anim3&quot;, &quot;10s, 3s, 5s&quot;, &quot;linear, ease, ease&quot;, &quot;0s, 0s, 0s&quot;, &quot;infinite, 1, 1&quot;, &quot;normal, normal, normal&quot;, &quot;backwards, none, both&quot;, &quot;running, paused, running&quot; ] },
</ins><span class="cx">     ];
</span><span class="cx">     
</span><span class="cx">     function start()
</span><span class="lines">@@ -102,6 +107,7 @@
</span><span class="cx"> &lt;div id=&quot;h&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
</span><span class="cx"> &lt;div id=&quot;i&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
</span><span class="cx"> &lt;div id=&quot;j&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
</span><ins>+&lt;div id=&quot;k&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
</ins><span class="cx"> &lt;div id=&quot;result&quot;&gt;
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> &lt;/body&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsplaystateinshorthandexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/play-state-in-shorthand-expected.txt (0 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/play-state-in-shorthand-expected.txt                                (rev 0)
+++ trunk/LayoutTests/animations/play-state-in-shorthand-expected.txt        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -0,0 +1,4 @@
</span><ins>+PASS - &quot;transform&quot; property for &quot;box&quot; element at 0.5s saw something close to: 1,0,0,1,75,0
+PASS - &quot;transform&quot; property for &quot;box&quot; element at 1s saw something close to: 1,0,0,1,150,0
+PASS - &quot;transform&quot; property for &quot;box&quot; element at 2.5s saw something close to: 1,0,0,1,150,0
+
</ins></span></pre></div>
<a id="trunkLayoutTestsanimationsplaystateinshorthandhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/play-state-in-shorthand.html (0 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/play-state-in-shorthand.html                                (rev 0)
+++ trunk/LayoutTests/animations/play-state-in-shorthand.html        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -0,0 +1,55 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;style&gt;
+    body {
+      margin: 0;
+    }
+
+    #box {
+      position: absolute;
+      left: 0px;
+      top: 100px;
+      height: 100px;
+      width: 100px;
+      background-color: blue;
+      animation: move1 linear 2s;
+    }
+
+    #box.paused {
+        animation: move1 linear 2s paused;
+    }
+
+    @keyframes move1 {
+      from { transform: translateX(0px); }
+      to   { transform: translateX(300px); }
+    }
+  &lt;/style&gt;
+  &lt;script src=&quot;resources/animation-test-helpers.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+  &lt;script type=&quot;text/javascript&quot;&gt;
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      [&quot;move1&quot;, 0.5, &quot;box&quot;, &quot;transform&quot;, [1,0,0,1,75,0], 20],
+      [&quot;move1&quot;, 1.0, &quot;box&quot;, &quot;transform&quot;, [1,0,0,1,150,0], 20],
+      [&quot;move1&quot;, 2.5, &quot;box&quot;, &quot;transform&quot;, [1,0,0,1,150,0], 20],
+    ];
+
+    function pauseAnimation()
+    {
+        document.getElementById(&quot;box&quot;).classList.add('paused');
+    }
+
+    function setTimers()
+    {
+        setTimeout(pauseAnimation, 1000);
+    }
+
+    runAnimationTest(expectedValues, setTimers, null, true);
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div id=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsanimationsresourcesanimationtesthelpersjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/animations/resources/animation-test-helpers.js (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/resources/animation-test-helpers.js        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/LayoutTests/animations/resources/animation-test-helpers.js        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -399,7 +399,8 @@
</span><span class="cx">                || property == &quot;webkitClipPath&quot;
</span><span class="cx">                || property == &quot;webkitShapeInside&quot;
</span><span class="cx">                || property == &quot;webkitShapeOutside&quot;
</span><del>-               || !property.indexOf(&quot;webkitTransform&quot;)) {
</del><ins>+               || !property.indexOf(&quot;webkitTransform&quot;)
+               || !property.indexOf(&quot;transform&quot;)) {
</ins><span class="cx">         computedValue = window.getComputedStyle(element)[property.split(&quot;.&quot;)[0]];
</span><span class="cx">     } else {
</span><span class="cx">         var computedStyle = window.getComputedStyle(element).getPropertyCSSValue(property);
</span><span class="lines">@@ -413,7 +414,7 @@
</span><span class="cx"> {
</span><span class="cx">     var result = true;
</span><span class="cx"> 
</span><del>-    if (!property.indexOf(&quot;webkitTransform&quot;)) {
</del><ins>+    if (!property.indexOf(&quot;webkitTransform&quot;) || !property.indexOf(&quot;transform&quot;)) {
</ins><span class="cx">         if (typeof expectedValue == &quot;string&quot;)
</span><span class="cx">             result = (computedValue == expectedValue);
</span><span class="cx">         else if (typeof expectedValue == &quot;number&quot;) {
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/Source/WebCore/ChangeLog        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -1,5 +1,27 @@
</span><span class="cx"> 2016-04-25  Simon Fraser  &lt;simon.fraser@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        play-state not parsed as part of animation shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=156959
+
+        Reviewed by Darin Adler.
+
+        We failed to parse animation-play-state as part of the animation shorthand, contrary
+        to the spec and other browsers.
+
+        Fix for both the prefixed and unprefixed properties. There is some compat risk here,
+        but only changing unprefixed behavior will probably lead to more author confusion.
+
+        Test: animations/play-state-in-shorthand.html
+
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseAnimationShorthand):
+        * css/CSSPropertyNames.in:
+        * css/StylePropertyShorthand.cpp:
+        (WebCore::animationShorthandForParsing): Remove the long comment which is no longer relevant
+        now that the behavior has been written into the spec.
+
+2016-04-25  Simon Fraser  &lt;simon.fraser@apple.com&gt;
+
</ins><span class="cx">         Negative animation-delay is treated as 0s
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=141008
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/Source/WebCore/css/CSSParser.cpp        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -3785,7 +3785,7 @@
</span><span class="cx"> {
</span><span class="cx">     ASSERT(propId == CSSPropertyAnimation || propId == CSSPropertyWebkitAnimation);
</span><span class="cx"> 
</span><del>-    const unsigned numProperties = 7;
</del><ins>+    const unsigned numProperties = 8;
</ins><span class="cx">     const StylePropertyShorthand&amp; shorthand = animationShorthandForParsing(propId);
</span><span class="cx"> 
</span><span class="cx">     // The list of properties in the shorthand should be the same
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPropertyNamesin"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPropertyNames.in (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSPropertyNames.in        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/Source/WebCore/css/CSSPropertyNames.in        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -132,7 +132,7 @@
</span><span class="cx"> // The remaining properties are listed in alphabetical order
</span><span class="cx"> alignment-baseline [SVG]
</span><span class="cx"> all [Longhands=all]
</span><del>-animation [Longhands=animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count|animation-direction|animation-fill-mode]
</del><ins>+animation [Longhands=animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count|animation-direction|animation-fill-mode|animation-play-state]
</ins><span class="cx"> animation-delay [AnimationProperty, NameForMethods=Delay]
</span><span class="cx"> animation-direction [AnimationProperty, NameForMethods=Direction]
</span><span class="cx"> animation-duration [AnimationProperty, NameForMethods=Duration]
</span><span class="lines">@@ -372,7 +372,7 @@
</span><span class="cx"> z-index [AutoFunctions]
</span><span class="cx"> alt [NameForMethods=ContentAltText, Custom=Value]
</span><span class="cx"> -webkit-alt = alt
</span><del>--webkit-animation [Longhands=-webkit-animation-name|-webkit-animation-duration|-webkit-animation-timing-function|-webkit-animation-delay|-webkit-animation-iteration-count|-webkit-animation-direction|-webkit-animation-fill-mode]
</del><ins>+-webkit-animation [Longhands=-webkit-animation-name|-webkit-animation-duration|-webkit-animation-timing-function|-webkit-animation-delay|-webkit-animation-iteration-count|-webkit-animation-direction|-webkit-animation-fill-mode|-webkit-animation-play-state]
</ins><span class="cx"> -webkit-animation-delay [AnimationProperty, NameForMethods=Delay]
</span><span class="cx"> -webkit-animation-direction [AnimationProperty, NameForMethods=Direction]
</span><span class="cx"> -webkit-animation-duration [AnimationProperty, NameForMethods=Duration]
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertyShorthandcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StylePropertyShorthand.cpp (200042 => 200043)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StylePropertyShorthand.cpp        2016-04-25 20:06:04 UTC (rev 200042)
+++ trunk/Source/WebCore/css/StylePropertyShorthand.cpp        2016-04-25 20:06:09 UTC (rev 200043)
</span><span class="lines">@@ -35,15 +35,8 @@
</span><span class="cx"> 
</span><span class="cx"> StylePropertyShorthand animationShorthandForParsing(CSSPropertyID propId)
</span><span class="cx"> {
</span><del>-    // When we parse the animation shorthand we need to look for animation-name
-    // last because otherwise it might match against the keywords for fill mode,
-    // timing functions and infinite iteration. This means that animation names
-    // that are the same as keywords (e.g. 'forwards') won't always match in the
-    // shorthand. In that case the authors should be using longhands (or
-    // reconsidering their approach). This is covered by the animations spec
-    // bug: https://www.w3.org/Bugs/Public/show_bug.cgi?id=14790
-    // And in the spec (editor's draft) at:
-    // http://dev.w3.org/csswg/css3-animations/#animation-shorthand-property
</del><ins>+    // Animation-name must come last, so that keywords for other properties in the shorthand
+    // preferentially match those properties.
</ins><span class="cx">     static const CSSPropertyID animationPropertiesForParsing[] = {
</span><span class="cx">         CSSPropertyAnimationDuration,
</span><span class="cx">         CSSPropertyAnimationTimingFunction,
</span><span class="lines">@@ -51,6 +44,7 @@
</span><span class="cx">         CSSPropertyAnimationIterationCount,
</span><span class="cx">         CSSPropertyAnimationDirection,
</span><span class="cx">         CSSPropertyAnimationFillMode,
</span><ins>+        CSSPropertyAnimationPlayState,
</ins><span class="cx">         CSSPropertyAnimationName
</span><span class="cx">     };
</span><span class="cx"> 
</span><span class="lines">@@ -61,6 +55,7 @@
</span><span class="cx">         CSSPropertyWebkitAnimationIterationCount,
</span><span class="cx">         CSSPropertyWebkitAnimationDirection,
</span><span class="cx">         CSSPropertyWebkitAnimationFillMode,
</span><ins>+        CSSPropertyWebkitAnimationPlayState,
</ins><span class="cx">         CSSPropertyWebkitAnimationName
</span><span class="cx">     };
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>