Diff
Modified: trunk/LayoutTests/ChangeLog (214413 => 214414)
--- trunk/LayoutTests/ChangeLog 2017-03-27 15:43:34 UTC (rev 214413)
+++ trunk/LayoutTests/ChangeLog 2017-03-27 16:12:21 UTC (rev 214414)
@@ -1,3 +1,21 @@
+2017-03-27 Myles C. Maxfield <mmaxfi...@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 <achristen...@webkit.org>
Make WebSockets work in network process
Added: trunk/LayoutTests/animations/font-variations/font-stretch-expected.txt (0 => 214414)
--- trunk/LayoutTests/animations/font-variations/font-stretch-expected.txt (rev 0)
+++ trunk/LayoutTests/animations/font-variations/font-stretch-expected.txt 2017-03-27 16:12:21 UTC (rev 214414)
@@ -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
+
Added: trunk/LayoutTests/animations/font-variations/font-stretch.html (0 => 214414)
--- trunk/LayoutTests/animations/font-variations/font-stretch.html (rev 0)
+++ trunk/LayoutTests/animations/font-variations/font-stretch.html 2017-03-27 16:12:21 UTC (rev 214414)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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>
Added: trunk/LayoutTests/animations/font-variations/font-style-expected.txt (0 => 214414)
--- trunk/LayoutTests/animations/font-variations/font-style-expected.txt (rev 0)
+++ trunk/LayoutTests/animations/font-variations/font-style-expected.txt 2017-03-27 16:12:21 UTC (rev 214414)
@@ -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
+
Added: trunk/LayoutTests/animations/font-variations/font-style.html (0 => 214414)
--- trunk/LayoutTests/animations/font-variations/font-style.html (rev 0)
+++ trunk/LayoutTests/animations/font-variations/font-style.html 2017-03-27 16:12:21 UTC (rev 214414)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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>
Added: trunk/LayoutTests/animations/font-variations/font-weight-expected.txt (0 => 214414)
--- trunk/LayoutTests/animations/font-variations/font-weight-expected.txt (rev 0)
+++ trunk/LayoutTests/animations/font-variations/font-weight-expected.txt 2017-03-27 16:12:21 UTC (rev 214414)
@@ -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
+
Added: trunk/LayoutTests/animations/font-variations/font-weight.html (0 => 214414)
--- trunk/LayoutTests/animations/font-variations/font-weight.html (rev 0)
+++ trunk/LayoutTests/animations/font-variations/font-weight.html 2017-03-27 16:12:21 UTC (rev 214414)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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>
Modified: trunk/LayoutTests/animations/resources/animation-test-helpers.js (214413 => 214414)
--- trunk/LayoutTests/animations/resources/animation-test-helpers.js 2017-03-27 15:43:34 UTC (rev 214413)
+++ trunk/LayoutTests/animations/resources/animation-test-helpers.js 2017-03-27 16:12:21 UTC (rev 214414)
@@ -283,6 +283,15 @@
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 @@
|| 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 @@
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;
Modified: trunk/Source/WebCore/ChangeLog (214413 => 214414)
--- trunk/Source/WebCore/ChangeLog 2017-03-27 15:43:34 UTC (rev 214413)
+++ trunk/Source/WebCore/ChangeLog 2017-03-27 16:12:21 UTC (rev 214414)
@@ -1,3 +1,28 @@
+2017-03-27 Myles C. Maxfield <mmaxfi...@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 <achristen...@webkit.org>
Make WebSockets work in network process
Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (214413 => 214414)
--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2017-03-27 15:43:34 UTC (rev 214413)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2017-03-27 16:12:21 UTC (rev 214414)
@@ -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 @@
#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 @@
#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);
Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (214413 => 214414)
--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2017-03-27 15:43:34 UTC (rev 214413)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2017-03-27 16:12:21 UTC (rev 214414)
@@ -1607,6 +1607,36 @@
}
#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;
Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (214413 => 214414)
--- trunk/Source/WebCore/rendering/style/RenderStyle.h 2017-03-27 15:43:34 UTC (rev 214413)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h 2017-03-27 16:12:21 UTC (rev 214414)
@@ -353,6 +353,9 @@
#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 @@
#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)); }
