UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36

Steps to reproduce the problem:
https://codepen.io/anon/pen/JavmEv
(in this code example, the problem is with last/3rd input and star icon right below it)

1. Create parent and child elements (example: span inside label)
2. Set the shorthand transition rule for color in both parent and child and make sure the child's rule has precedence (example: transition: color 2s)
3. Add class to a parent element (through JS) that changes the color of the parent element (example: color: red)
4. Don't set any color on the child element (let it be inherited, if it's not, make it inherited)

What is the expected behavior?
I'm not 100% sure this is expected behavior, but I expect that child transition rule (which has higher precedence over parent) should take over and that its duration should be followed no matter if child color is set or inherited. Currently, transition-duration for the child will multiply if its color is inherited but respected if it's color is set. Even if parent transition duration is longer/shorter than child's that should not matter, child transition duration should be as long as we set it.

What went wrong?
When a transition rule is set both on parent and child (and child rule has precedence). In the case of Chrome, child element transition will be twice as long (as if transition duration of parent and child got multiplied). So, in this case:

.parent,
.child {
  transition: color 2s;
}

When we change the color of the parent (and child color is inherited) transition duration for a child would be 4s. It should be 2s like the rule implies (it shouldn't matter if the child color is set or inherited).

Did this work before? N/A 

Does this work in other browsers? No
 - Safari has the same problem
- Firefox is working (mostly) correctly

Chrome version: 69.0.3497.92  Channel: stable
OS Version: OS X 10.13.6
Flash Version: 

Additional explanation:

In the CodePen example I posted, we can see that span element has a normal transition as I never set its color (it is inherited by default). First input will not inherit it's color from the parent because it's set by the user agent. Second input has its color set by CSS through parent so it's transition works just fine.

The problem is in third input which inherits its color from parent and thus transition-duration gets broken and multiplied. The same thing happens with a star icon. The only difference is that third input has its color set by parent `red-color` class so it's duration works just fine for the first time, but it doesn't once parent class is removed and its color is set back to default one defined by the user agent. Star icon transition lasts twice as long in both cases. In both cases, it should last 2s like it is defined in the rules for third input and star icon.

Last 2 elements, b and i in the example are there to show how it works when the transition in a child is shorter than in parent. In the example of b, it works great as we have set its color property so its transition duration of 0.1s is followed and respected.

In the case of i, there is another example of this bug. Its color property is inherited at the beginning. But once parent gains a class of `red-color` it is no longer inherited but specifically set to red color. So, in this case, child transition is taking over and lasting only 0.1s. But, once we remove that class, child color is again inherited and its transition is longer. Only this time it doesn't seem like it's multiplied (2s + 0.1s), it looks like it's lasting longer period than that. I think transition duration should be 0.1s long as it is set by i element rule and (again) it shouldn't matter whether it's color is set or inherited.

This is where I feel Firefox has it wrong too. In the case of Firefox, once you remove `red-color` parent class, i element will first transition for 0.1s and then, because parent transition is longer, it would continue that transition for the rest of duration. What would be correct behavior is that child element takes all transition rules from its shorthand definition and ending color from the parent (because it is inherited). Thus, 2 transition animations shouldn't happen.