Skip to content

GitLab

T
tangled
Commit ae037838 authored by timloh@chromium.org's avatar timloh@chromium.org
Browse files
Options

Don't transition a property that is currentColor when color changes 

As per css3-color[1], currentColor is not resolved at computed value
time. This means that we shouldn't fire a transition when a property is
set to currentColor, even if the used value changes. Note we still
transition between currentColor and actual colours, which is likely to
be fine by css4-color, which adds a blending primitive.

[1] http://www.w3.org/Style/2011/REC-css3-color-20110607-errata.html

BUG=394632

Review URL: https://codereview.chromium.org/552683002

git-svn-id: svn://svn.chromium.org/blink/trunk@181546 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent ec34cdc0
Show whitespace changes
Inline Side-by-side
Showing with 45 additions and 18 deletions
third_party/WebKit/LayoutTests/transitions/transition-currentcolor.html 0 → 100644
View file @ ae037838
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
div {
border-left-color: currentColor;
border-top-color: initial;
transition: 100s;
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<script>
var test1 = async_test("A property set to currentColor shouldn't transition when color changes");
var test2 = async_test("A property set should transition from currentColor to an explicit color");
requestAnimationFrame(function() {
target1.style.color = "orange";
target2.style.borderLeftColor = "orange";
requestAnimationFrame(function() {
// Only 'color' should transition
test1.step(function() { assert_equals(target1.getAnimationPlayers().length, 1); });
test2.step(function() { assert_equals(target2.getAnimationPlayers().length, 1); });
test1.done();
test2.done();
});
});
</script>
third_party/WebKit/Source/core/animation/css/CSSPropertyEquality.cpp
View file @ ae037838
......@@ -60,8 +60,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
{
switch (prop) {
case CSSPropertyBackgroundColor:
return a.backgroundColor().resolve(a.color()) == b.backgroundColor().resolve(b.color())
&& a.visitedLinkBackgroundColor().resolve(a.color()) == b.visitedLinkBackgroundColor().resolve(b.color());
return a.backgroundColor() == b.backgroundColor()
&& a.visitedLinkBackgroundColor() == b.visitedLinkBackgroundColor();
case CSSPropertyBackgroundImage:
return fillLayersEqual<CSSPropertyBackgroundImage>(a.backgroundLayers(), b.backgroundLayers());
case CSSPropertyBackgroundPositionX:
......@@ -73,8 +73,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyBaselineShift:
return dataEquivalent(a.baselineShiftValue(), b.baselineShiftValue());
case CSSPropertyBorderBottomColor:
return a.borderBottomColor().resolve(a.color()) == b.borderBottomColor().resolve(b.color())
&& a.visitedLinkBorderBottomColor().resolve(a.color()) == b.visitedLinkBorderBottomColor().resolve(b.color());
return a.borderBottomColor() == b.borderBottomColor()
&& a.visitedLinkBorderBottomColor() == b.visitedLinkBorderBottomColor();
case CSSPropertyBorderBottomLeftRadius:
return a.borderBottomLeftRadius() == b.borderBottomLeftRadius();
case CSSPropertyBorderBottomRightRadius:
......@@ -90,18 +90,18 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyBorderImageWidth:
return a.borderImageWidth() == b.borderImageWidth();
case CSSPropertyBorderLeftColor:
return a.borderLeftColor().resolve(a.color()) == b.borderLeftColor().resolve(b.color())
&& a.visitedLinkBorderLeftColor().resolve(a.color()) == b.visitedLinkBorderLeftColor().resolve(b.color());
return a.borderLeftColor() == b.borderLeftColor()
&& a.visitedLinkBorderLeftColor() == b.visitedLinkBorderLeftColor();
case CSSPropertyBorderLeftWidth:
return a.borderLeftWidth() == b.borderLeftWidth();
case CSSPropertyBorderRightColor:
return a.borderRightColor().resolve(a.color()) == b.borderRightColor().resolve(b.color())
&& a.visitedLinkBorderRightColor().resolve(a.color()) == b.visitedLinkBorderRightColor().resolve(b.color());
return a.borderRightColor() == b.borderRightColor()
&& a.visitedLinkBorderRightColor() == b.visitedLinkBorderRightColor();
case CSSPropertyBorderRightWidth:
return a.borderRightWidth() == b.borderRightWidth();
case CSSPropertyBorderTopColor:
return a.borderTopColor().resolve(a.color()) == b.borderTopColor().resolve(b.color())
&& a.visitedLinkBorderTopColor().resolve(a.color()) == b.visitedLinkBorderTopColor().resolve(b.color());
return a.borderTopColor() == b.borderTopColor()
&& a.visitedLinkBorderTopColor() == b.visitedLinkBorderTopColor();
case CSSPropertyBorderTopLeftRadius:
return a.borderTopLeftRadius() == b.borderTopLeftRadius();
case CSSPropertyBorderTopRightRadius:
......@@ -181,8 +181,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyOrphans:
return a.orphans() == b.orphans();
case CSSPropertyOutlineColor:
return a.outlineColor().resolve(a.color()) == b.outlineColor().resolve(b.color())
&& a.visitedLinkOutlineColor().resolve(a.color()) == b.visitedLinkOutlineColor().resolve(b.color());
return a.outlineColor() == b.outlineColor()
&& a.visitedLinkOutlineColor() == b.visitedLinkOutlineColor();
case CSSPropertyOutlineOffset:
return a.outlineOffset() == b.outlineOffset();
case CSSPropertyOutlineWidth:
......@@ -226,8 +226,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyStrokeWidth:
return dataEquivalent(a.strokeWidth(), b.strokeWidth());
case CSSPropertyTextDecorationColor:
return a.textDecorationColor().resolve(a.color()) == b.textDecorationColor().resolve(b.color())
&& a.visitedLinkTextDecorationColor().resolve(a.color()) == b.visitedLinkTextDecorationColor().resolve(b.color());
return a.textDecorationColor() == b.textDecorationColor()
&& a.visitedLinkTextDecorationColor() == b.visitedLinkTextDecorationColor();
case CSSPropertyTextIndent:
return a.textIndent() == b.textIndent();
case CSSPropertyTextShadow:
......@@ -254,8 +254,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyWebkitColumnGap:
return a.columnGap() == b.columnGap();
case CSSPropertyWebkitColumnRuleColor:
return a.columnRuleColor().resolve(a.color()) == b.columnRuleColor().resolve(b.color())
&& a.visitedLinkColumnRuleColor().resolve(a.color()) == b.visitedLinkColumnRuleColor().resolve(b.color());
return a.columnRuleColor() == b.columnRuleColor()
&& a.visitedLinkColumnRuleColor() == b.visitedLinkColumnRuleColor();
case CSSPropertyWebkitColumnRuleWidth:
return a.columnRuleWidth() == b.columnRuleWidth();
case CSSPropertyWebkitColumnWidth:
......@@ -283,8 +283,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyPerspectiveOrigin:
return a.perspectiveOriginX() == b.perspectiveOriginX() && a.perspectiveOriginY() == b.perspectiveOriginY();
case CSSPropertyWebkitTextStrokeColor:
return a.textStrokeColor().resolve(a.color()) == b.textStrokeColor().resolve(b.color())
&& a.visitedLinkTextStrokeColor().resolve(a.color()) == b.visitedLinkTextStrokeColor().resolve(b.color());
return a.textStrokeColor() == b.textStrokeColor()
&& a.visitedLinkTextStrokeColor() == b.visitedLinkTextStrokeColor();
case CSSPropertyTransform:
return a.transform() == b.transform();
case CSSPropertyTransformOrigin:
......
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