Commit 261cb0ef authored by Alper Cakan's avatar Alper Cakan Committed by Commit Bot

make text-size-adjust animatable

Make text-size-adjust animatable, as it is supposed be so according to:
drafts.csswg.org/css-size-adjust/#adjustment-control

R=nainar@chromium.org, shend@chromium.org, smcgruer@chromium.org

Bug: 818526
Change-Id: I0c3b98c4726f6898599aa5626ad2fec876057ec0
Reviewed-on: https://chromium-review.googlesource.com/956462Reviewed-by: default avatarEric Willigers <ericwilligers@chromium.org>
Reviewed-by: default avatarStephen McGruer <smcgruer@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543050}
parent ba5fbe99
...@@ -49,6 +49,7 @@ Alexis Menard <alexis.menard@intel.com> ...@@ -49,6 +49,7 @@ Alexis Menard <alexis.menard@intel.com>
Alfredo Hernandez <ahernandez.miralles@gmail.com> Alfredo Hernandez <ahernandez.miralles@gmail.com>
Ali Vathi <ali.akbar@gmail.com> Ali Vathi <ali.akbar@gmail.com>
Allan Sandfeld Jensen <allan.jensen@theqtcompany.com> Allan Sandfeld Jensen <allan.jensen@theqtcompany.com>
Alper Çakan <alpercakan98@gmail.com>
Ambarish Rapte <ambarish.r@samsung.com> Ambarish Rapte <ambarish.r@samsung.com>
Amey Jahagirdar <jahagird@amazon.com> Amey Jahagirdar <jahagird@amazon.com>
Amit Sarkar <amit.srkr@samsung.com> Amit Sarkar <amit.srkr@samsung.com>
......
<!DOCTYPE html>
<style type="text/css">
.container {
display: inline-block;
}
.parent {
text-size-adjust: 70%;
}
.target {
text-size-adjust: 60%;
}
.expected {
color: green;
margin-right: 30px;
}
</style>
<template id="target-template">
<span class="container">
<div class="target">x</span>
</div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'text-size-adjust',
from: neutralKeyframe,
to: '50%',
}, [
{at: -2, is: '80%'},
{at: -0.3, is: '63%'},
{at: 0, is: '60%'},
{at: 0.3, is: '57%'},
{at: 0.6, is: '54%'},
{at: 1, is: '50%'},
{at: 1.5, is: '45%'},
]);
assertNoInterpolation({
property: 'text-size-adjust',
from: 'initial',
to: '70%',
});
assertInterpolation({
property: 'text-size-adjust',
from: 'inherit', // 70%
to: '50%',
}, [
{at: -2, is: '110%'},
{at: -0.3, is: '76%'},
{at: 0, is: '70%'},
{at: 0.3, is: '64%'},
{at: 0.6, is: '58%'},
{at: 1, is: '50%'},
{at: 1.5, is: '40%'},
]);
assertInterpolation({
property: 'text-size-adjust',
from: 'unset',
to: '50%',
}, [
{at: -2, is: '110%'},
{at: -0.3, is: '76%'},
{at: 0, is: '70%'},
{at: 0.3, is: '64%'},
{at: 0.6, is: '58%'},
{at: 1, is: '50%'},
{at: 1.5, is: '40%'},
]);
assertInterpolation({
property: 'text-size-adjust',
from: '10%',
to: '0%'
}, [
{at: -2, is: '30%'},
{at: -0.3, is: '13%'},
{at: 0, is: '10%'},
{at: 0.3, is: '7%'},
{at: 0.6, is: '4%'},
{at: 1, is: '0%'},
{at: 1.5, is: '0%'}, // text-size-adjust can't be negative
]);
assertNoInterpolation({
property: 'text-size-adjust',
from: 'none',
to: '100%'
});
</script>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id='container'>
<div id='element'></div>
</div>
<script>
var container = document.getElementById('container');
var element = document.getElementById('element');
test(function() {
var keyframes = [
{textSizeAdjust: 'inherit'},
{textSizeAdjust: '60%'}
];
container.style.textSizeAdjust = '100%';
var player = element.animate(keyframes, 20);
player.pause();
player.currentTime = 5;
assert_equals(getComputedStyle(element).textSizeAdjust, '90%');
player.currentTime = 10;
container.style.textSizeAdjust = '50%';
assert_equals(getComputedStyle(element).textSizeAdjust, '55%');
}, 'text-size-adjust responsive to inherited text-size-adjust changes');
</script>
...@@ -162,6 +162,7 @@ const InterpolationTypes& CSSInterpolationTypesMap::Get( ...@@ -162,6 +162,7 @@ const InterpolationTypes& CSSInterpolationTypesMap::Get(
case CSSPropertyStrokeMiterlimit: case CSSPropertyStrokeMiterlimit:
case CSSPropertyStrokeOpacity: case CSSPropertyStrokeOpacity:
case CSSPropertyColumnCount: case CSSPropertyColumnCount:
case CSSPropertyTextSizeAdjust:
case CSSPropertyWidows: case CSSPropertyWidows:
case CSSPropertyZIndex: case CSSPropertyZIndex:
applicable_types->push_back( applicable_types->push_back(
......
...@@ -86,7 +86,9 @@ InterpolationValue CSSNumberInterpolationType::MaybeConvertValue( ...@@ -86,7 +86,9 @@ InterpolationValue CSSNumberInterpolationType::MaybeConvertValue(
const CSSValue& value, const CSSValue& value,
const StyleResolverState*, const StyleResolverState*,
ConversionCheckers&) const { ConversionCheckers&) const {
if (!value.IsPrimitiveValue() || !ToCSSPrimitiveValue(value).IsNumber()) if (!value.IsPrimitiveValue() ||
!(ToCSSPrimitiveValue(value).IsNumber() ||
ToCSSPrimitiveValue(value).IsPercentage()))
return nullptr; return nullptr;
return CreateNumberValue(ToCSSPrimitiveValue(value).GetDoubleValue()); return CreateNumberValue(ToCSSPrimitiveValue(value).GetDoubleValue());
} }
......
...@@ -55,6 +55,13 @@ Optional<double> NumberPropertyFunctions::GetNumber( ...@@ -55,6 +55,13 @@ Optional<double> NumberPropertyFunctions::GetNumber(
return Optional<double>(); return Optional<double>();
return style.ZIndex(); return style.ZIndex();
case CSSPropertyTextSizeAdjust: {
const TextSizeAdjust& text_size_adjust = style.GetTextSizeAdjust();
if (text_size_adjust.IsAuto())
return Optional<double>();
return text_size_adjust.Multiplier() * 100;
}
case CSSPropertyLineHeight: { case CSSPropertyLineHeight: {
const Length& length = style.SpecifiedLineHeight(); const Length& length = style.SpecifiedLineHeight();
// Numbers are represented by percentages. // Numbers are represented by percentages.
...@@ -92,6 +99,7 @@ double NumberPropertyFunctions::ClampNumber(const CSSProperty& property, ...@@ -92,6 +99,7 @@ double NumberPropertyFunctions::ClampNumber(const CSSProperty& property,
case CSSPropertyFlexShrink: case CSSPropertyFlexShrink:
case CSSPropertyFontSizeAdjust: case CSSPropertyFontSizeAdjust:
case CSSPropertyLineHeight: case CSSPropertyLineHeight:
case CSSPropertyTextSizeAdjust:
return clampTo<float>(value, 0); return clampTo<float>(value, 0);
case CSSPropertyOrphans: case CSSPropertyOrphans:
...@@ -158,6 +166,9 @@ bool NumberPropertyFunctions::SetNumber(const CSSProperty& property, ...@@ -158,6 +166,9 @@ bool NumberPropertyFunctions::SetNumber(const CSSProperty& property,
case CSSPropertyColumnCount: case CSSPropertyColumnCount:
style.SetColumnCount(value); style.SetColumnCount(value);
return true; return true;
case CSSPropertyTextSizeAdjust:
style.SetTextSizeAdjust(value / 100.);
return true;
case CSSPropertyWidows: case CSSPropertyWidows:
style.SetWidows(value); style.SetWidows(value);
return true; return true;
......
...@@ -2756,6 +2756,7 @@ ...@@ -2756,6 +2756,7 @@
{ {
name: "text-size-adjust", name: "text-size-adjust",
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"], property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
interpolable: true,
inherited: true, inherited: true,
field_group: "*", field_group: "*",
field_template: "external", field_template: "external",
......
...@@ -277,6 +277,8 @@ bool CSSPropertyEquality::PropertiesEqual(const PropertyHandle& property, ...@@ -277,6 +277,8 @@ bool CSSPropertyEquality::PropertiesEqual(const PropertyHandle& property,
return a.TextIndent() == b.TextIndent(); return a.TextIndent() == b.TextIndent();
case CSSPropertyTextShadow: case CSSPropertyTextShadow:
return DataEquivalent(a.TextShadow(), b.TextShadow()); return DataEquivalent(a.TextShadow(), b.TextShadow());
case CSSPropertyTextSizeAdjust:
return a.GetTextSizeAdjust() == b.GetTextSizeAdjust();
case CSSPropertyTop: case CSSPropertyTop:
return a.Top() == b.Top(); return a.Top() == b.Top();
case CSSPropertyVerticalAlign: case CSSPropertyVerticalAlign:
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment