Bug 48340 – CSS animation doesn't work for border-radius

• Component: CSS
• Status: RESOLVED FIXED

Created attachment 71903 [details]
test case

-webkit-transition* when used in conjunction with border-radius has no effect.
Takes the following CSS:
.tweet {
  background-color: #E0E9EF;
  margin: 5px;
  padding: 5px;
  border: 2px groove #1671AA;
}

.tweet:hover {
  -webkit-transition-property: border-radius, background-color;
  -webkit-transition-duration: 2s;
  background-color: gold;
  border-radius: 0.5em;
}

In the above case only the background-color property is animated.

Tested in the latest nightly (533.17.8)

Test case is attached.

PS. The same applies for border-style. I haven't tested further CSS properties.

Just saw on w3.org that border-style is not amoung the CSS properties that can be animated. My bad.

http://www.w3.org/TR/css3-transitions/#properties-from-css-

A similar bug is reported in the chromium camp: http://code.google.com/p/chromium/issues/detail?id=60767

[Simon Fraser (smfr)]

I think we animate -webkit-border-radius but not border-radius.

[Simon Fraser (smfr)]

Created attachment 75754 [details]
Patch

[WebKit Review Bot]

Attachment 75754 [details] did not pass style-queue:

Failed to run "[u'git', u'reset', u'--hard', u'HEAD']" exit_code: 128
error: Could not write new index file.
fatal: Could not reset index file to revision 'HEAD'.


If any of these errors are false positives, please file a bug against check-webkit-style.

[Yuta Kitamura]

In Chromium's canary bots, the following two tests started to fail frequently (but pass occasionally).

* transitions/border-radius-transition.html

>FAIL - "border-top-left-radius" property for "box" element at 0.25s expected: 25 but saw: 28
>FAIL - "-webkit-border-top-left-radius" property for "box2" element at 0.25s expected: 25 but saw: 28

* transitions/color-transition-all.html

>inner
>outer
>FAIL - "color" property for "outer" element at 0.5s expected: 0,127,127 but saw: 0,135,119
>PASS - "color" property for "inner" element at 0.5s saw something close to: 255,0,0
>PASS - "-webkit-text-fill-color" property for "inner" element at 0.5s saw something close to: 255,0,0

Do you have any idea about this (maybe related to "usePauseAPI = false")?

[Simon Fraser (smfr)]

(In reply to comment #6)
> In Chromium's canary bots, the following two tests started to fail frequently (but pass occasionally).
> 
> * transitions/border-radius-transition.html
> 
> >FAIL - "border-top-left-radius" property for "box" element at 0.25s expected: 25 but saw: 28
> >FAIL - "-webkit-border-top-left-radius" property for "box2" element at 0.25s expected: 25 but saw: 28
> 
> * transitions/color-transition-all.html
> 
> >inner
> >outer
> >FAIL - "color" property for "outer" element at 0.5s expected: 0,127,127 but saw: 0,135,119
> >PASS - "color" property for "inner" element at 0.5s saw something close to: 255,0,0
> >PASS - "-webkit-text-fill-color" property for "inner" element at 0.5s saw something close to: 255,0,0
> 
> Do you have any idea about this (maybe related to "usePauseAPI = false")?

Yes, almost certainly about not using the pauseAPI. I may have to make them more tolerant.

[Csaba Osztrogonác]

transitions/color-transition-all.html fails on Qt bot too:

--- /home/webkitbuildbot/slaves/release32bit/buildslave/qt-linux-release/build/layout-test-results/transitions/color-transition-all-expected.txt	2010-12-07 02:52:54.011698550 -0800
+++ /home/webkitbuildbot/slaves/release32bit/buildslave/qt-linux-release/build/layout-test-results/transitions/color-transition-all-actual.txt	2010-12-07 02:52:54.011698550 -0800
@@ -1,6 +1,6 @@
 inner
 outer
-PASS - "color" property for "outer" element at 0.5s saw something close to: 0,127,127
+FAIL - "color" property for "outer" element at 0.5s expected: 0,127,127 but saw: 0,121,133
 PASS - "color" property for "inner" element at 0.5s saw something close to: 255,0,0
 PASS - "-webkit-text-fill-color" property for "inner" element at 0.5s saw something close to: 255,0,0

---

$ WebKitTools/Scripts/run-webkit-tests transitions/color-transition-all.html --iterations 100 --singly

81 test cases (81%) succeeded
19 test cases (19%) had incorrect layout

[Csaba Osztrogonác]

Comment on attachment 75754 [details]
Patch

remove r+, because it was landed in http://trac.webkit.org/changeset/73421

[Csaba Osztrogonác]

(In reply to comment #9)
> (From update of attachment 75754 [details])
> remove r+, because it was landed in http://trac.webkit.org/changeset/73421

I rolled it out, because it caused regression: http://trac.webkit.org/changeset/73438

[Simon Fraser (smfr)]

Will fix the flakeyness via bug 50639.

[Simon Fraser (smfr)]

Created attachment 75837 [details]
Patch

[Simon Fraser (smfr)]

http://trac.webkit.org/changeset/73460
http://trac.webkit.org/changeset/73461

[WebKit Review Bot]

Attachment 75837 [details] did not pass style-queue:

Failed to run "['WebKitTools/Scripts/update-webkit']" exit_code: 2
Updating OpenSource
Incomplete data: Delta source ended unexpectedly at /usr/lib/git-core/git-svn line 5061

Died at WebKitTools/Scripts/update-webkit line 132.


If any of these errors are false positives, please file a bug against check-webkit-style.