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& ...@@ -60,8 +60,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
{ {
switch (prop) { switch (prop) {
case CSSPropertyBackgroundColor: case CSSPropertyBackgroundColor:
return a.backgroundColor().resolve(a.color()) == b.backgroundColor().resolve(b.color()) return a.backgroundColor() == b.backgroundColor()
&& a.visitedLinkBackgroundColor().resolve(a.color()) == b.visitedLinkBackgroundColor().resolve(b.color()); && a.visitedLinkBackgroundColor() == b.visitedLinkBackgroundColor();
case CSSPropertyBackgroundImage: case CSSPropertyBackgroundImage:
return fillLayersEqual<CSSPropertyBackgroundImage>(a.backgroundLayers(), b.backgroundLayers()); return fillLayersEqual<CSSPropertyBackgroundImage>(a.backgroundLayers(), b.backgroundLayers());
case CSSPropertyBackgroundPositionX: case CSSPropertyBackgroundPositionX:
...@@ -73,8 +73,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle& ...@@ -73,8 +73,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyBaselineShift: case CSSPropertyBaselineShift:
return dataEquivalent(a.baselineShiftValue(), b.baselineShiftValue()); return dataEquivalent(a.baselineShiftValue(), b.baselineShiftValue());
case CSSPropertyBorderBottomColor: case CSSPropertyBorderBottomColor:
return a.borderBottomColor().resolve(a.color()) == b.borderBottomColor().resolve(b.color()) return a.borderBottomColor() == b.borderBottomColor()
&& a.visitedLinkBorderBottomColor().resolve(a.color()) == b.visitedLinkBorderBottomColor().resolve(b.color()); && a.visitedLinkBorderBottomColor() == b.visitedLinkBorderBottomColor();
case CSSPropertyBorderBottomLeftRadius: case CSSPropertyBorderBottomLeftRadius:
return a.borderBottomLeftRadius() == b.borderBottomLeftRadius(); return a.borderBottomLeftRadius() == b.borderBottomLeftRadius();
case CSSPropertyBorderBottomRightRadius: case CSSPropertyBorderBottomRightRadius:
...@@ -90,18 +90,18 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle& ...@@ -90,18 +90,18 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyBorderImageWidth: case CSSPropertyBorderImageWidth:
return a.borderImageWidth() == b.borderImageWidth(); return a.borderImageWidth() == b.borderImageWidth();
case CSSPropertyBorderLeftColor: case CSSPropertyBorderLeftColor:
return a.borderLeftColor().resolve(a.color()) == b.borderLeftColor().resolve(b.color()) return a.borderLeftColor() == b.borderLeftColor()
&& a.visitedLinkBorderLeftColor().resolve(a.color()) == b.visitedLinkBorderLeftColor().resolve(b.color()); && a.visitedLinkBorderLeftColor() == b.visitedLinkBorderLeftColor();
case CSSPropertyBorderLeftWidth: case CSSPropertyBorderLeftWidth:
return a.borderLeftWidth() == b.borderLeftWidth(); return a.borderLeftWidth() == b.borderLeftWidth();
case CSSPropertyBorderRightColor: case CSSPropertyBorderRightColor:
return a.borderRightColor().resolve(a.color()) == b.borderRightColor().resolve(b.color()) return a.borderRightColor() == b.borderRightColor()
&& a.visitedLinkBorderRightColor().resolve(a.color()) == b.visitedLinkBorderRightColor().resolve(b.color()); && a.visitedLinkBorderRightColor() == b.visitedLinkBorderRightColor();
case CSSPropertyBorderRightWidth: case CSSPropertyBorderRightWidth:
return a.borderRightWidth() == b.borderRightWidth(); return a.borderRightWidth() == b.borderRightWidth();
case CSSPropertyBorderTopColor: case CSSPropertyBorderTopColor:
return a.borderTopColor().resolve(a.color()) == b.borderTopColor().resolve(b.color()) return a.borderTopColor() == b.borderTopColor()
&& a.visitedLinkBorderTopColor().resolve(a.color()) == b.visitedLinkBorderTopColor().resolve(b.color()); && a.visitedLinkBorderTopColor() == b.visitedLinkBorderTopColor();
case CSSPropertyBorderTopLeftRadius: case CSSPropertyBorderTopLeftRadius:
return a.borderTopLeftRadius() == b.borderTopLeftRadius(); return a.borderTopLeftRadius() == b.borderTopLeftRadius();
case CSSPropertyBorderTopRightRadius: case CSSPropertyBorderTopRightRadius:
...@@ -181,8 +181,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle& ...@@ -181,8 +181,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyOrphans: case CSSPropertyOrphans:
return a.orphans() == b.orphans(); return a.orphans() == b.orphans();
case CSSPropertyOutlineColor: case CSSPropertyOutlineColor:
return a.outlineColor().resolve(a.color()) == b.outlineColor().resolve(b.color()) return a.outlineColor() == b.outlineColor()
&& a.visitedLinkOutlineColor().resolve(a.color()) == b.visitedLinkOutlineColor().resolve(b.color()); && a.visitedLinkOutlineColor() == b.visitedLinkOutlineColor();
case CSSPropertyOutlineOffset: case CSSPropertyOutlineOffset:
return a.outlineOffset() == b.outlineOffset(); return a.outlineOffset() == b.outlineOffset();
case CSSPropertyOutlineWidth: case CSSPropertyOutlineWidth:
...@@ -226,8 +226,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle& ...@@ -226,8 +226,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyStrokeWidth: case CSSPropertyStrokeWidth:
return dataEquivalent(a.strokeWidth(), b.strokeWidth()); return dataEquivalent(a.strokeWidth(), b.strokeWidth());
case CSSPropertyTextDecorationColor: case CSSPropertyTextDecorationColor:
return a.textDecorationColor().resolve(a.color()) == b.textDecorationColor().resolve(b.color()) return a.textDecorationColor() == b.textDecorationColor()
&& a.visitedLinkTextDecorationColor().resolve(a.color()) == b.visitedLinkTextDecorationColor().resolve(b.color()); && a.visitedLinkTextDecorationColor() == b.visitedLinkTextDecorationColor();
case CSSPropertyTextIndent: case CSSPropertyTextIndent:
return a.textIndent() == b.textIndent(); return a.textIndent() == b.textIndent();
case CSSPropertyTextShadow: case CSSPropertyTextShadow:
...@@ -254,8 +254,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle& ...@@ -254,8 +254,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyWebkitColumnGap: case CSSPropertyWebkitColumnGap:
return a.columnGap() == b.columnGap(); return a.columnGap() == b.columnGap();
case CSSPropertyWebkitColumnRuleColor: case CSSPropertyWebkitColumnRuleColor:
return a.columnRuleColor().resolve(a.color()) == b.columnRuleColor().resolve(b.color()) return a.columnRuleColor() == b.columnRuleColor()
&& a.visitedLinkColumnRuleColor().resolve(a.color()) == b.visitedLinkColumnRuleColor().resolve(b.color()); && a.visitedLinkColumnRuleColor() == b.visitedLinkColumnRuleColor();
case CSSPropertyWebkitColumnRuleWidth: case CSSPropertyWebkitColumnRuleWidth:
return a.columnRuleWidth() == b.columnRuleWidth(); return a.columnRuleWidth() == b.columnRuleWidth();
case CSSPropertyWebkitColumnWidth: case CSSPropertyWebkitColumnWidth:
...@@ -283,8 +283,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle& ...@@ -283,8 +283,8 @@ bool CSSPropertyEquality::propertiesEqual(CSSPropertyID prop, const RenderStyle&
case CSSPropertyPerspectiveOrigin: case CSSPropertyPerspectiveOrigin:
return a.perspectiveOriginX() == b.perspectiveOriginX() && a.perspectiveOriginY() == b.perspectiveOriginY(); return a.perspectiveOriginX() == b.perspectiveOriginX() && a.perspectiveOriginY() == b.perspectiveOriginY();
case CSSPropertyWebkitTextStrokeColor: case CSSPropertyWebkitTextStrokeColor:
return a.textStrokeColor().resolve(a.color()) == b.textStrokeColor().resolve(b.color()) return a.textStrokeColor() == b.textStrokeColor()
&& a.visitedLinkTextStrokeColor().resolve(a.color()) == b.visitedLinkTextStrokeColor().resolve(b.color()); && a.visitedLinkTextStrokeColor() == b.visitedLinkTextStrokeColor();
case CSSPropertyTransform: case CSSPropertyTransform:
return a.transform() == b.transform(); return a.transform() == b.transform();
case CSSPropertyTransformOrigin: 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