<!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>[206690] 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/206690">206690</a></dd>
<dt>Author</dt> <dd>mmaxfield@apple.com</dd>
<dt>Date</dt> <dd>2016-09-30 16:08:02 -0700 (Fri, 30 Sep 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>Implement animation of font-variation-settings
https://bugs.webkit.org/show_bug.cgi?id=162783

Reviewed by Simon Fraser.

Source/WebCore:

Modify CSSPropertyAnimation to understand FontVariationSettings objects and how
to interpolate them.

If two FontVariationSettings objects are unlike (meaning they specify different
variation axes), for now the interpolation simply returns an empty object. This
might change in the future, but for now, this is a reasonable place to start.

Because CSSPropertyAnimation interacts with RenderStyles instead of
FontDescriptions, this patch adds a transparent accessor from the RenderStyle
to the inner FontDescription.

Tests: animations/font-variation-settings-order.html
       animations/font-variation-settings-unlike.html
       animations/font-variation-settings.html

* page/animation/CSSPropertyAnimation.cpp:
(WebCore::blendFunc):
(WebCore::PropertyWrapperFontVariationSettings::PropertyWrapperFontVariationSettings):
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::setFontVariationSettings):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::fontVariationSettings):

LayoutTests:

Animation tests need a little infrastructure to be able to tell if two computed
values for font-variation-settings are equivalent.

* animations/font-variation-settings-expected.html: Added.
* animations/font-variation-settings-order-expected.html: Added.
* animations/font-variation-settings-order.html: Added.
* animations/font-variation-settings-unlike-expected.html: Added.
* animations/font-variation-settings-unlike.html: Added.
* animations/font-variation-settings.html: Added.
* animations/resources/animation-test-helpers.js:
(compareFontVariationSettings):
(getPropertyValue):
(comparePropertyValue):</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</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="#trunkSourceWebCorepageanimationCSSPropertyAnimationcpp">trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStylecpp">trunk/Source/WebCore/rendering/style/RenderStyle.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleh">trunk/Source/WebCore/rendering/style/RenderStyle.h</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsanimationsfontvariationsettingsexpectedhtml">trunk/LayoutTests/animations/font-variation-settings-expected.html</a></li>
<li><a href="#trunkLayoutTestsanimationsfontvariationsettingsorderexpectedhtml">trunk/LayoutTests/animations/font-variation-settings-order-expected.html</a></li>
<li><a href="#trunkLayoutTestsanimationsfontvariationsettingsorderhtml">trunk/LayoutTests/animations/font-variation-settings-order.html</a></li>
<li><a href="#trunkLayoutTestsanimationsfontvariationsettingsunlikeexpectedhtml">trunk/LayoutTests/animations/font-variation-settings-unlike-expected.html</a></li>
<li><a href="#trunkLayoutTestsanimationsfontvariationsettingsunlikehtml">trunk/LayoutTests/animations/font-variation-settings-unlike.html</a></li>
<li><a href="#trunkLayoutTestsanimationsfontvariationsettingshtml">trunk/LayoutTests/animations/font-variation-settings.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (206689 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-09-30 22:47:00 UTC (rev 206689)
+++ trunk/LayoutTests/ChangeLog        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -1,3 +1,24 @@
</span><ins>+2016-09-30  Myles C. Maxfield  &lt;mmaxfield@apple.com&gt;
+
+        Implement animation of font-variation-settings
+        https://bugs.webkit.org/show_bug.cgi?id=162783
+
+        Reviewed by Simon Fraser.
+
+        Animation tests need a little infrastructure to be able to tell if two computed
+        values for font-variation-settings are equivalent.
+
+        * animations/font-variation-settings-expected.html: Added.
+        * animations/font-variation-settings-order-expected.html: Added.
+        * animations/font-variation-settings-order.html: Added.
+        * animations/font-variation-settings-unlike-expected.html: Added.
+        * animations/font-variation-settings-unlike.html: Added.
+        * animations/font-variation-settings.html: Added.
+        * animations/resources/animation-test-helpers.js:
+        (compareFontVariationSettings):
+        (getPropertyValue):
+        (comparePropertyValue):
+
</ins><span class="cx"> 2016-09-30  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [Modern Media Controls] layout nodes
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsfontvariationsettingsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/font-variation-settings-expected.html (0 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/font-variation-settings-expected.html                                (rev 0)
+++ trunk/LayoutTests/animations/font-variation-settings-expected.html        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+if (window.internals)
+   window.internals.settings.setVariationFontsEnabled(true);
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div style=&quot;font: 100px 'Skia'; font-variation-settings: 'wght' 2.3&quot;&gt;Hello&lt;/div&gt;
+&lt;div&gt;PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 0.5s saw something close to: 'wght' 0.95&lt;br&gt;
+PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 1s saw something close to: 'wght' 1.4&lt;br&gt;
+PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 2s saw something close to: 'wght' 2.3&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsfontvariationsettingsorderexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/font-variation-settings-order-expected.html (0 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/font-variation-settings-order-expected.html                                (rev 0)
+++ trunk/LayoutTests/animations/font-variation-settings-order-expected.html        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+if (window.internals)
+   window.internals.settings.setVariationFontsEnabled(true);
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div style=&quot;font: 100px 'Skia'; font-variation-settings: 'wght' 2.3, 'wdth' 1.1&quot;&gt;Hello&lt;/div&gt;
+&lt;div&gt;PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 0.5s saw something close to: 'wght' 0.95, 'wdth' 0.95&lt;br&gt;
+PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 1s saw something close to: 'wght' 1.4, 'wdth' 1&lt;br&gt;
+PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 2s saw something close to: 'wght' 2.3, 'wdth' 1.1&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsanimationsfontvariationsettingsorderhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/font-variation-settings-order.html (0 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/font-variation-settings-order.html                                (rev 0)
+++ trunk/LayoutTests/animations/font-variation-settings-order.html        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+if (window.internals)
+    window.internals.settings.setVariationFontsEnabled(true);
+&lt;/script&gt;
+&lt;script src=&quot;resources/animation-test-helpers.js&quot;&gt;&lt;/script&gt;
+&lt;style&gt;
+@keyframes &quot;weightAnimation&quot; {
+    from {
+        font-variation-settings: &quot;wght&quot; 0.5, &quot;wdth&quot; 0.9;
+    }
+    to {
+        font-variation-settings: &quot;wdth&quot; 1.2, &quot;wght&quot; 3.2;
+    }
+}
+
+#box {
+    font: 100px &quot;Skia&quot;;
+    animation-name: &quot;weightAnimation&quot;;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div id=&quot;box&quot;&gt;Hello&lt;/div&gt;
+&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+var expectedValues = [
+    // [animation-name, time, element-id, property, expected-value, tolerance]
+    [&quot;weightAnimation&quot;, 0.5, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;'wght' 0.95, 'wdth' 0.95&quot;, 0.05],
+    [&quot;weightAnimation&quot;, 1.0, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;'wght' 1.4, 'wdth' 1&quot;, 0.05],
+    [&quot;weightAnimation&quot;, 2.0, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;'wght' 2.3, 'wdth' 1.1&quot;, 0.05],
+];
+runAnimationTest(expectedValues, undefined, undefined, undefined, true, undefined);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsfontvariationsettingsunlikeexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/font-variation-settings-unlike-expected.html (0 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/font-variation-settings-unlike-expected.html                                (rev 0)
+++ trunk/LayoutTests/animations/font-variation-settings-unlike-expected.html        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+if (window.internals)
+   window.internals.settings.setVariationFontsEnabled(true);
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div style=&quot;font: 100px 'Skia';&quot;&gt;Hello&lt;/div&gt;
+&lt;div&gt;PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 0.5s saw something close to: normal&lt;br&gt;
+PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 1s saw something close to: normal&lt;br&gt;
+PASS - &quot;font-variation-settings&quot; property for &quot;box&quot; element at 2s saw something close to: normal&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsanimationsfontvariationsettingsunlikehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/font-variation-settings-unlike.html (0 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/font-variation-settings-unlike.html                                (rev 0)
+++ trunk/LayoutTests/animations/font-variation-settings-unlike.html        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+if (window.internals)
+    window.internals.settings.setVariationFontsEnabled(true);
+&lt;/script&gt;
+&lt;script src=&quot;resources/animation-test-helpers.js&quot;&gt;&lt;/script&gt;
+&lt;style&gt;
+@keyframes &quot;weightAnimation&quot; {
+    from {
+        font-variation-settings: &quot;wght&quot; 0.5, &quot;wdth&quot; 0.9;
+    }
+    to {
+        font-variation-settings: &quot;wght&quot; 3.2;
+    }
+}
+
+#box {
+    font: 100px &quot;Skia&quot;;
+    animation-name: &quot;weightAnimation&quot;;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div id=&quot;box&quot;&gt;Hello&lt;/div&gt;
+&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+var expectedValues = [
+    // [animation-name, time, element-id, property, expected-value, tolerance]
+    [&quot;weightAnimation&quot;, 0.5, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;normal&quot;, 0.05],
+    [&quot;weightAnimation&quot;, 1.0, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;normal&quot;, 0.05],
+    [&quot;weightAnimation&quot;, 2.0, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;normal&quot;, 0.05],
+];
+runAnimationTest(expectedValues, undefined, undefined, undefined, true, undefined);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsfontvariationsettingshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/animations/font-variation-settings.html (0 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/font-variation-settings.html                                (rev 0)
+++ trunk/LayoutTests/animations/font-variation-settings.html        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+if (window.internals)
+    window.internals.settings.setVariationFontsEnabled(true);
+&lt;/script&gt;
+&lt;script&gt;
+if (window.internals)
+    window.internals.settings.setVariationFontsEnabled(true);
+&lt;/script&gt;
+&lt;script src=&quot;resources/animation-test-helpers.js&quot;&gt;&lt;/script&gt;
+&lt;style&gt;
+@keyframes &quot;weightAnimation&quot; {
+    from {
+        font-variation-settings: &quot;wght&quot; 0.5;
+    }
+    to {
+        font-variation-settings: &quot;wght&quot; 3.2;
+    }
+}
+
+#box {
+    font: 100px &quot;Skia&quot;;
+    animation-name: &quot;weightAnimation&quot;;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div id=&quot;box&quot;&gt;Hello&lt;/div&gt;
+&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+var expectedValues = [
+    // [animation-name, time, element-id, property, expected-value, tolerance]
+    [&quot;weightAnimation&quot;, 0.5, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;'wght' 0.95&quot;, 0.05],
+    [&quot;weightAnimation&quot;, 1.0, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;'wght' 1.4&quot;, 0.05],
+    [&quot;weightAnimation&quot;, 2.0, &quot;box&quot;, &quot;font-variation-settings&quot;, &quot;'wght' 2.3&quot;, 0.05],
+];
+runAnimationTest(expectedValues, undefined, undefined, undefined, true, undefined);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsresourcesanimationtesthelpersjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/animations/resources/animation-test-helpers.js (206689 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/resources/animation-test-helpers.js        2016-09-30 22:47:00 UTC (rev 206689)
+++ trunk/LayoutTests/animations/resources/animation-test-helpers.js        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -258,6 +258,29 @@
</span><span class="cx">     }
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+function compareFontVariationSettings(computedValue, expectedValue, tolerance)
+{
+    if (computedValue == &quot;normal&quot; || expectedValue == &quot;normal&quot;)
+        return computedValue == expectedValue;
+    var computed = computedValue.split(&quot;, &quot;);
+    var expected = expectedValue.split(&quot;, &quot;);
+    if (computed.length != expected.length)
+        return false;
+    for (var i = 0; i &lt; computed.length; ++i) {
+        var computedPieces = computed[i].split(&quot; &quot;);
+        var expectedPieces = expected[i].split(&quot; &quot;);
+        if (computedPieces.length != 2 || expectedPieces.length != 2)
+            return false;
+        if (computedPieces[0] != expectedPieces[0])
+            return false;
+        var computedNumber = Number.parseFloat(computedPieces[1]);
+        var expectedNumber = Number.parseFloat(expectedPieces[1]);
+        if (Math.abs(computedNumber - expectedNumber) &gt; tolerance)
+            return false;
+    }
+    return true;
+}
+
</ins><span class="cx"> // Called by CSS Image function filter() as well as filter property.
</span><span class="cx"> function compareFilterFunctions(computedValue, expectedValue, tolerance)
</span><span class="cx"> {
</span><span class="lines">@@ -401,6 +424,7 @@
</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><ins>+               || property == &quot;font-variation-settings&quot;
</ins><span class="cx">                || !property.indexOf(&quot;webkitTransform&quot;)
</span><span class="cx">                || !property.indexOf(&quot;transform&quot;)) {
</span><span class="cx">         computedValue = window.getComputedStyle(element)[property.split(&quot;.&quot;)[0]];
</span><span class="lines">@@ -446,9 +470,10 @@
</span><span class="cx">                || property == &quot;webkitMaskImage&quot;
</span><span class="cx">                || property == &quot;webkitMaskBoxImage&quot;)
</span><span class="cx">         result = compareCSSImages(computedValue, expectedValue, tolerance);
</span><del>-    else {
</del><ins>+    else if (property == &quot;font-variation-settings&quot;)
+        result = compareFontVariationSettings(computedValue, expectedValue, tolerance);
+    else
</ins><span class="cx">         result = isCloseEnough(computedValue, expectedValue, tolerance);
</span><del>-    }
</del><span class="cx">     return result;
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (206689 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-09-30 22:47:00 UTC (rev 206689)
+++ trunk/Source/WebCore/ChangeLog        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -1,3 +1,34 @@
</span><ins>+2016-09-30  Myles C. Maxfield  &lt;mmaxfield@apple.com&gt;
+
+        Implement animation of font-variation-settings
+        https://bugs.webkit.org/show_bug.cgi?id=162783
+
+        Reviewed by Simon Fraser.
+
+        Modify CSSPropertyAnimation to understand FontVariationSettings objects and how
+        to interpolate them.
+
+        If two FontVariationSettings objects are unlike (meaning they specify different
+        variation axes), for now the interpolation simply returns an empty object. This
+        might change in the future, but for now, this is a reasonable place to start.
+
+        Because CSSPropertyAnimation interacts with RenderStyles instead of
+        FontDescriptions, this patch adds a transparent accessor from the RenderStyle
+        to the inner FontDescription.
+
+        Tests: animations/font-variation-settings-order.html
+               animations/font-variation-settings-unlike.html
+               animations/font-variation-settings.html
+
+        * page/animation/CSSPropertyAnimation.cpp:
+        (WebCore::blendFunc):
+        (WebCore::PropertyWrapperFontVariationSettings::PropertyWrapperFontVariationSettings):
+        (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::setFontVariationSettings):
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyle::fontVariationSettings):
+
</ins><span class="cx"> 2016-09-30  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [Modern Media Controls] layout nodes
</span></span></pre></div>
<a id="trunkSourceWebCorepageanimationCSSPropertyAnimationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (206689 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp        2016-09-30 22:47:00 UTC (rev 206689)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2007, 2008, 2009, 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2007, 2008, 2009, 2013, 2016 Apple Inc. All rights reserved.
</ins><span class="cx">  * Copyright (C) 2012, 2013 Adobe Systems Incorporated. All rights reserved.
</span><span class="cx">  *
</span><span class="cx">  * Redistribution and use in source and binary forms, with or without
</span><span class="lines">@@ -41,6 +41,7 @@
</span><span class="cx"> #include &quot;CachedImage.h&quot;
</span><span class="cx"> #include &quot;ClipPathOperation.h&quot;
</span><span class="cx"> #include &quot;FloatConversion.h&quot;
</span><ins>+#include &quot;FontTaggedSettings.h&quot;
</ins><span class="cx"> #include &quot;IdentityTransformOperation.h&quot;
</span><span class="cx"> #include &quot;Logging.h&quot;
</span><span class="cx"> #include &quot;Matrix3DTransformOperation.h&quot;
</span><span class="lines">@@ -371,6 +372,23 @@
</span><span class="cx">     return NinePieceImage(newContentImage, from.imageSlices(), from.fill(), from.borderSlices(), from.outset(), from.horizontalRule(), from.verticalRule());
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+static inline FontVariationSettings blendFunc(const AnimationBase* anim, const FontVariationSettings&amp; from, const FontVariationSettings&amp; to, double progress)
+{
+    if (from.size() != to.size())
+        return FontVariationSettings();
+    FontVariationSettings result;
+    unsigned size = from.size();
+    for (unsigned i = 0; i &lt; size; ++i) {
+        auto&amp; fromItem = from.at(i);
+        auto&amp; toItem = to.at(i);
+        if (fromItem.tag() != toItem.tag())
+            return FontVariationSettings();
+        float interpolated = blendFunc(anim, fromItem.value(), toItem.value(), progress);
+        result.insert({ fromItem.tag(), interpolated });
+    }
+    return result;
+}
+
</ins><span class="cx"> class AnimationPropertyWrapperBase {
</span><span class="cx">     WTF_MAKE_NONCOPYABLE(AnimationPropertyWrapperBase);
</span><span class="cx">     WTF_MAKE_FAST_ALLOCATED;
</span><span class="lines">@@ -517,6 +535,29 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+class PropertyWrapperFontVariationSettings : public PropertyWrapper&lt;FontVariationSettings&gt; {
+    WTF_MAKE_FAST_ALLOCATED;
+public:
+    PropertyWrapperFontVariationSettings(CSSPropertyID prop, FontVariationSettings (RenderStyle::*getter)() const, void (RenderStyle::*setter)(FontVariationSettings))
+        : PropertyWrapper&lt;FontVariationSettings&gt;(prop, getter, setter)
+    {
+    }
+
+    bool equals(const RenderStyle* a, const RenderStyle* b) const override
+    {
+        // If the style pointers are the same, don't bother doing the test.
+        // If either is null, return false. If both are null, return true.
+        if (a == b)
+            return true;
+        if (!a || !b)
+            return false;
+
+        const FontVariationSettings&amp; variationSettingsA = (a-&gt;*m_getter)();
+        const FontVariationSettings&amp; variationSettingsB = (b-&gt;*m_getter)();
+        return variationSettingsA == variationSettingsB;
+    }
+};
+
</ins><span class="cx"> #if ENABLE(CSS_SHAPES)
</span><span class="cx"> class PropertyWrapperShape : public RefCountedPropertyWrapper&lt;ShapeValue&gt; {
</span><span class="cx">     WTF_MAKE_FAST_ALLOCATED;
</span><span class="lines">@@ -1438,6 +1479,7 @@
</span><span class="cx"> 
</span><span class="cx">         new PropertyWrapper&lt;SVGLength&gt;(CSSPropertyBaselineShift, &amp;RenderStyle::baselineShiftValue, &amp;RenderStyle::setBaselineShiftValue),
</span><span class="cx">         new PropertyWrapper&lt;SVGLength&gt;(CSSPropertyKerning, &amp;RenderStyle::kerning, &amp;RenderStyle::setKerning),
</span><ins>+        new PropertyWrapperFontVariationSettings(CSSPropertyFontVariationSettings, &amp;RenderStyle::fontVariationSettings, &amp;RenderStyle::setFontVariationSettings),
</ins><span class="cx">     };
</span><span class="cx">     const unsigned animatableLonghandPropertiesCount = WTF_ARRAY_LENGTH(animatableLonghandPropertyWrappers);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStylecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (206689 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp        2016-09-30 22:47:00 UTC (rev 206689)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -1550,6 +1550,16 @@
</span><span class="cx">     fontCascade().update(currentFontSelector);
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+void RenderStyle::setFontVariationSettings(FontVariationSettings settings)
+{
+    FontSelector* currentFontSelector = fontCascade().fontSelector();
+    auto description = fontDescription();
+    description.setVariationSettings(WTFMove(settings));
+
+    setFontDescription(description);
+    fontCascade().update(currentFontSelector);
+}
+
</ins><span class="cx"> void RenderStyle::getShadowExtent(const ShadowData* shadow, LayoutUnit &amp;top, LayoutUnit &amp;right, LayoutUnit &amp;bottom, LayoutUnit &amp;left) const
</span><span class="cx"> {
</span><span class="cx">     top = 0;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (206689 => 206690)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.h        2016-09-30 22:47:00 UTC (rev 206689)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h        2016-09-30 23:08:02 UTC (rev 206690)
</span><span class="lines">@@ -719,6 +719,7 @@
</span><span class="cx">     float specifiedFontSize() const;
</span><span class="cx">     float computedFontSize() const;
</span><span class="cx">     int fontSize() const;
</span><ins>+    FontVariationSettings fontVariationSettings() const { return fontDescription().variationSettings(); }
</ins><span class="cx">     std::pair&lt;FontOrientation, NonCJKGlyphOrientation&gt; fontAndGlyphOrientation();
</span><span class="cx"> 
</span><span class="cx">     const Length&amp; textIndent() const { return rareInheritedData-&gt;indent; }
</span><span class="lines">@@ -1367,6 +1368,7 @@
</span><span class="cx">     bool setFontDescription(const FontCascadeDescription&amp;);
</span><span class="cx">     // Only used for blending font sizes when animating, for MathML anonymous blocks, and for text autosizing.
</span><span class="cx">     void setFontSize(float);
</span><ins>+    void setFontVariationSettings(FontVariationSettings);
</ins><span class="cx"> 
</span><span class="cx">     void setColor(const Color&amp;);
</span><span class="cx">     void setTextIndent(Length length) { SET_VAR(rareInheritedData, indent, WTFMove(length)); }
</span></span></pre>
</div>
</div>

</body>
</html>