1571478 - Incorrect animation of border-radius when it combined with rotation

Status: RESOLVED WORKSFORME

(Core :: Web Painting, defect, P3)

Description

[seva]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36

Steps to reproduce:

Have a "div" element with these CSS properties and animation:

@keyframes turning {
0% {
border-radius: 0 0 0 0;
transform: rotate(0deg);
}
25% {
border-radius: 50% 0 0 0;
transform: rotate(45deg);
}
50% {
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
}
75% {
border-radius: 50% 50% 50% 0;
transform: rotate(135deg);
}
100% {
border-radius: 50% 50% 50% 50%;
transform: rotate(180deg);
}
}

div {
width: 120px;
height: 120px;
background-color: violet;
margin: 100px;
animation: turning 2s infinite;
}

<div></div>

Actual results:

Animation of rotation is good, but animation of border-radius is incorrect: does not work or border-radius is set static with random value.

Expected results:

Animation of border radius should be smooth and rotating square should become a circle at the end of animation cycle.

NOTE: id add some other property like "background-color:#000" to the animation (in 0%{...} part), animation will become correct. But if set this background color to one that similar to basic background (violet), animation can remain incorrect or even can become uneven.

Comment 1

[seva]

The effect mentioned in note was found when investigated this question: Link

Comment 2

[Alice0775 White]

Attachment: Reporter's testcase html

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=7d5b25ce9e8f12276156ac98b7e46a0c71863a49&tochange=2ae5ad0cc2e26e35d3a3c0827f8ac54b8d16be83

Regressed by:
2ae5ad0cc2e26e35d3a3c0827f8ac54b8d16be83 Matt Woodrow — Bug 1539306 - Use the current producer/frame id for mask layers, since they never set the previous one. r=mstange
6c20e9cb71b28306480136d04b336a8fed486d60 Matt Woodrow — Bug 1539306 - Don't transform mask layer invalid regions by the current layer transform, since they are positioned relative to our parent. r=mstange

Matt, your patch seems to cause the regression. Can you please look into this?

Comment 3

[Pascal Chevrel:pascalc]

P3, unassigned and no activity over the last 2 months, marking as wontfix for 71 given that we are shipping in 3 weeks.

Comment 4

[Mayank Bansal]

Testcase works fine on Nightly now