Make sure animation works for font-weight, font-stretch, and font-style
authormmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 27 Mar 2017 16:12:21 +0000 (16:12 +0000)
committermmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 27 Mar 2017 16:12:21 +0000 (16:12 +0000)
https://bugs.webkit.org/show_bug.cgi?id=169683

Reviewed by Simon Fraser.

Source/WebCore:

Hook up animation code for FontSelectionValues.

Tests: animations/font-variations/font-stretch.html
       animations/font-variations/font-style.html
       animations/font-variations/font-weight.html

* page/animation/CSSPropertyAnimation.cpp:
(WebCore::blendFunc):
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::setFontWeight):
(WebCore::RenderStyle::setFontStretch):
(WebCore::RenderStyle::setFontItalic):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::fontWeight):
(WebCore::RenderStyle::fontStretch):
(WebCore::RenderStyle::fontItalic):

LayoutTests:

* animations/font-variations/font-stretch-expected.txt: Added.
* animations/font-variations/font-stretch.html: Added.
* animations/font-variations/font-style-expected.txt: Added.
* animations/font-variations/font-style.html: Added.
* animations/font-variations/font-weight-expected.txt: Added.
* animations/font-variations/font-weight.html: Added.
* animations/resources/animation-test-helpers.js:
(compareFontStyle):
(getPropertyValue):
(comparePropertyValue):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@214414 268f45cc-cd09-0410-ab3c-d52691b4dbfc

12 files changed:
LayoutTests/ChangeLog
LayoutTests/animations/font-variations/font-stretch-expected.txt [new file with mode: 0644]
LayoutTests/animations/font-variations/font-stretch.html [new file with mode: 0644]
LayoutTests/animations/font-variations/font-style-expected.txt [new file with mode: 0644]
LayoutTests/animations/font-variations/font-style.html [new file with mode: 0644]
LayoutTests/animations/font-variations/font-weight-expected.txt [new file with mode: 0644]
LayoutTests/animations/font-variations/font-weight.html [new file with mode: 0644]
LayoutTests/animations/resources/animation-test-helpers.js
Source/WebCore/ChangeLog
Source/WebCore/page/animation/CSSPropertyAnimation.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h

index ad92eea..319fdc6 100644 (file)
@@ -1,3 +1,21 @@
+2017-03-27  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        Make sure animation works for font-weight, font-stretch, and font-style
+        https://bugs.webkit.org/show_bug.cgi?id=169683
+
+        Reviewed by Simon Fraser.
+
+        * animations/font-variations/font-stretch-expected.txt: Added.
+        * animations/font-variations/font-stretch.html: Added.
+        * animations/font-variations/font-style-expected.txt: Added.
+        * animations/font-variations/font-style.html: Added.
+        * animations/font-variations/font-weight-expected.txt: Added.
+        * animations/font-variations/font-weight.html: Added.
+        * animations/resources/animation-test-helpers.js:
+        (compareFontStyle):
+        (getPropertyValue):
+        (comparePropertyValue):
+
 2017-03-27  Alex Christensen  <achristensen@webkit.org>
 
         Make WebSockets work in network process
diff --git a/LayoutTests/animations/font-variations/font-stretch-expected.txt b/LayoutTests/animations/font-variations/font-stretch-expected.txt
new file mode 100644 (file)
index 0000000..19d8dcb
--- /dev/null
@@ -0,0 +1,5 @@
+Hello
+PASS - "font-stretch" property for "box" element at 0.5s saw something close to: 159
+PASS - "font-stretch" property for "box" element at 1s saw something close to: 167
+PASS - "font-stretch" property for "box" element at 2s saw something close to: 183
+
diff --git a/LayoutTests/animations/font-variations/font-stretch.html b/LayoutTests/animations/font-variations/font-stretch.html
new file mode 100644 (file)
index 0000000..261ac0d
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/animation-test-helpers.js"></script>
+<style>
+
+@keyframes TheAnimation {
+    from {
+        font-stretch: 151%;
+    }
+    to {
+        font-stretch: 199%;
+    }
+}
+
+#box {
+    font-size: 100px;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+}
+</style>
+</head>
+<body>
+<div id="box">Hello</div>
+<div id="result"></div>
+<script>
+var expectedValues = [
+    // [animation-name, time, element-id, property, expected-value, tolerance]
+    ["TheAnimation", 0.5, "box", "font-stretch", "159", 1],
+    ["TheAnimation", 1.0, "box", "font-stretch", "167", 1],
+    ["TheAnimation", 2.0, "box", "font-stretch", "183", 1],
+];
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+    promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+    document.getElementById("box").style.animationName = "TheAnimation";
+    runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+});
+</script>
+</body>
+</html>
diff --git a/LayoutTests/animations/font-variations/font-style-expected.txt b/LayoutTests/animations/font-variations/font-style-expected.txt
new file mode 100644 (file)
index 0000000..a27da36
--- /dev/null
@@ -0,0 +1,5 @@
+Hello
+PASS - "font-style" property for "box" element at 0.5s saw something close to: oblique 32.3666
+PASS - "font-style" property for "box" element at 1s saw something close to: oblique 43.6666
+PASS - "font-style" property for "box" element at 2s saw something close to: oblique 66.3333
+
diff --git a/LayoutTests/animations/font-variations/font-style.html b/LayoutTests/animations/font-variations/font-style.html
new file mode 100644 (file)
index 0000000..d939b64
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/animation-test-helpers.js"></script>
+<style>
+
+@keyframes TheAnimation {
+    from {
+        font-style: oblique 21deg;
+    }
+    to {
+        font-style: oblique 89deg;
+    }
+}
+
+#box {
+    font-size: 100px;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+}
+</style>
+</head>
+<body>
+<div id="box">Hello</div>
+<div id="result"></div>
+<script>
+var expectedValues = [
+    // [animation-name, time, element-id, property, expected-value, tolerance]
+    ["TheAnimation", 0.5, "box", "font-style", "oblique 32.3666", 10],
+    ["TheAnimation", 1.0, "box", "font-style", "oblique 43.6666", 10],
+    ["TheAnimation", 2.0, "box", "font-style", "oblique 66.3333", 10],
+];
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+    promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+    document.getElementById("box").style.animationName = "TheAnimation";
+    runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+});
+</script>
+</body>
+</html>
diff --git a/LayoutTests/animations/font-variations/font-weight-expected.txt b/LayoutTests/animations/font-variations/font-weight-expected.txt
new file mode 100644 (file)
index 0000000..b550bf5
--- /dev/null
@@ -0,0 +1,5 @@
+Hello
+PASS - "font-weight" property for "box" element at 0.5s saw something close to: 166.6666
+PASS - "font-weight" property for "box" element at 1s saw something close to: 233.3333
+PASS - "font-weight" property for "box" element at 2s saw something close to: 366.6666
+
diff --git a/LayoutTests/animations/font-variations/font-weight.html b/LayoutTests/animations/font-variations/font-weight.html
new file mode 100644 (file)
index 0000000..1ac90da
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/animation-test-helpers.js"></script>
+<style>
+
+@keyframes TheAnimation {
+    from {
+        font-weight: 100;
+    }
+    to {
+        font-weight: 500;
+    }
+}
+
+#box {
+    font-size: 100px;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+}
+</style>
+</head>
+<body>
+<div id="box">Hello</div>
+<div id="result"></div>
+<script>
+var expectedValues = [
+    // [animation-name, time, element-id, property, expected-value, tolerance]
+    ["TheAnimation", 0.5, "box", "font-weight", "166.6666", 20],
+    ["TheAnimation", 1.0, "box", "font-weight", "233.3333", 20],
+    ["TheAnimation", 2.0, "box", "font-weight", "366.6666", 20],
+];
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+    promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+    document.getElementById("box").style.animationName = "TheAnimation";
+    runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+});
+</script>
+</body>
+</html>
index 5d1a813..c6527cf 100644 (file)
@@ -283,6 +283,15 @@ function compareFontVariationSettings(computedValue, expectedValue, tolerance)
     return true;
 }
 
+function compareFontStyle(computedValue, expectedValue, tolerance)
+{
+       var computed = computedValue.split(" ");
+       var expected = expectedValue.split(" ");
+       var computedAngle = computed[1].split("deg");
+       var expectedAngle = expected[1].split("deg");
+       return computed[0] == expected[0] && Math.abs(computedAngle[0] - expectedAngle[0]) <= tolerance;
+}
+
 // Called by CSS Image function filter() as well as filter property.
 function compareFilterFunctions(computedValue, expectedValue, tolerance)
 {
@@ -427,9 +436,13 @@ function getPropertyValue(property, elementId, iframeId)
                || property == "webkitShapeInside"
                || property == "webkitShapeOutside"
                || property == "font-variation-settings"
+               || property == "font-style"
                || !property.indexOf("webkitTransform")
                || !property.indexOf("transform")) {
         computedValue = window.getComputedStyle(element)[property.split(".")[0]];
+    } else if (property == "font-stretch") {
+        var computedStyle = window.getComputedStyle(element).getPropertyCSSValue(property);
+        computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);
     } else {
         var computedStyle = window.getComputedStyle(element).getPropertyCSSValue(property);
         computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
@@ -474,6 +487,8 @@ function comparePropertyValue(property, computedValue, expectedValue, tolerance)
         result = compareCSSImages(computedValue, expectedValue, tolerance);
     else if (property == "font-variation-settings")
         result = compareFontVariationSettings(computedValue, expectedValue, tolerance);
+    else if (property == "font-style")
+        result = compareFontStyle(computedValue, expectedValue, tolerance);
     else
         result = isCloseEnough(computedValue, expectedValue, tolerance);
     return result;
index 6743c6c..b4a700b 100644 (file)
@@ -1,3 +1,28 @@
+2017-03-27  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        Make sure animation works for font-weight, font-stretch, and font-style
+        https://bugs.webkit.org/show_bug.cgi?id=169683
+
+        Reviewed by Simon Fraser.
+
+        Hook up animation code for FontSelectionValues.
+
+        Tests: animations/font-variations/font-stretch.html
+               animations/font-variations/font-style.html
+               animations/font-variations/font-weight.html
+
+        * page/animation/CSSPropertyAnimation.cpp:
+        (WebCore::blendFunc):
+        (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::setFontWeight):
+        (WebCore::RenderStyle::setFontStretch):
+        (WebCore::RenderStyle::setFontItalic):
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyle::fontWeight):
+        (WebCore::RenderStyle::fontStretch):
+        (WebCore::RenderStyle::fontItalic):
+
 2017-03-27  Alex Christensen  <achristensen@webkit.org>
 
         Make WebSockets work in network process
index c5b28ea..3d52ba6 100644 (file)
@@ -42,6 +42,7 @@
 #include "CalculationValue.h"
 #include "ClipPathOperation.h"
 #include "FloatConversion.h"
+#include "FontSelectionAlgorithm.h"
 #include "FontTaggedSettings.h"
 #include "IdentityTransformOperation.h"
 #include "Logging.h"
@@ -392,6 +393,11 @@ static inline FontVariationSettings blendFunc(const AnimationBase* anim, const F
 
 #endif
 
+static inline FontSelectionValue blendFunc(const AnimationBase* anim, FontSelectionValue from, FontSelectionValue to, double progress)
+{
+    return FontSelectionValue(blendFunc(anim, static_cast<float>(from), static_cast<float>(to), progress));
+}
+
 class AnimationPropertyWrapperBase {
     WTF_MAKE_NONCOPYABLE(AnimationPropertyWrapperBase);
     WTF_MAKE_FAST_ALLOCATED;
@@ -1600,6 +1606,9 @@ CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap()
 #if ENABLE(VARIATION_FONTS)
         new PropertyWrapperFontVariationSettings(CSSPropertyFontVariationSettings, &RenderStyle::fontVariationSettings, &RenderStyle::setFontVariationSettings),
 #endif
+        new PropertyWrapper<FontSelectionValue>(CSSPropertyFontWeight, &RenderStyle::fontWeight, &RenderStyle::setFontWeight),
+        new PropertyWrapper<FontSelectionValue>(CSSPropertyFontStretch, &RenderStyle::fontStretch, &RenderStyle::setFontStretch),
+        new PropertyWrapper<FontSelectionValue>(CSSPropertyFontStyle, &RenderStyle::fontItalic, &RenderStyle::setFontItalic),
     };
     const unsigned animatableLonghandPropertiesCount = WTF_ARRAY_LENGTH(animatableLonghandPropertyWrappers);
 
index 0addd0a..c93036b 100644 (file)
@@ -1607,6 +1607,36 @@ void RenderStyle::setFontVariationSettings(FontVariationSettings settings)
 }
 #endif
 
+void RenderStyle::setFontWeight(FontSelectionValue value)
+{
+    FontSelector* currentFontSelector = fontCascade().fontSelector();
+    auto description = fontDescription();
+    description.setWeight(value);
+
+    setFontDescription(description);
+    fontCascade().update(currentFontSelector);
+}
+
+void RenderStyle::setFontStretch(FontSelectionValue value)
+{
+    FontSelector* currentFontSelector = fontCascade().fontSelector();
+    auto description = fontDescription();
+    description.setStretch(value);
+
+    setFontDescription(description);
+    fontCascade().update(currentFontSelector);
+}
+
+void RenderStyle::setFontItalic(FontSelectionValue value)
+{
+    FontSelector* currentFontSelector = fontCascade().fontSelector();
+    auto description = fontDescription();
+    description.setItalic(value);
+
+    setFontDescription(description);
+    fontCascade().update(currentFontSelector);
+}
+
 void RenderStyle::getShadowExtent(const ShadowData* shadow, LayoutUnit& top, LayoutUnit& right, LayoutUnit& bottom, LayoutUnit& left) const
 {
     top = 0;
index 2219d9e..6cf2e8a 100644 (file)
@@ -353,6 +353,9 @@ public:
 #if ENABLE(VARIATION_FONTS)
     FontVariationSettings fontVariationSettings() const { return fontDescription().variationSettings(); }
 #endif
+    FontSelectionValue fontWeight() const { return fontDescription().weight(); }
+    FontSelectionValue fontStretch() const { return fontDescription().stretch(); }
+    FontSelectionValue fontItalic() const { return fontDescription().italic(); }
 
     const Length& textIndent() const { return m_rareInheritedData->indent; }
     ETextAlign textAlign() const { return static_cast<ETextAlign>(m_inheritedFlags.textAlign); }
@@ -900,6 +903,9 @@ public:
 #if ENABLE(VARIATION_FONTS)
     void setFontVariationSettings(FontVariationSettings);
 #endif
+    void setFontWeight(FontSelectionValue);
+    void setFontStretch(FontSelectionValue);
+    void setFontItalic(FontSelectionValue);
 
     void setColor(const Color&);
     void setTextIndent(Length&& length) { SET_VAR(m_rareInheritedData, indent, WTFMove(length)); }