Bug 48340

Summary: CSS animation doesn't work for border-radius
Product: WebKit Reporter: jon.ronnenberg
Component: CSSAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: bdakin, jon.ronnenberg, ossy, simon.fraser, webkit.review.bot, yutak
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: All   
Attachments:
Description Flags
test case
none
Patch
none
Patch cmarrin: review+

Description jon.ronnenberg 2010-10-26 10:02:23 PDT
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.
Comment 1 jon.ronnenberg 2010-10-26 10:17:41 PDT
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-
Comment 2 jon.ronnenberg 2010-10-26 10:52:33 PDT
A similar bug is reported in the chromium camp: http://code.google.com/p/chromium/issues/detail?id=60767
Comment 3 Simon Fraser (smfr) 2010-12-06 10:55:47 PST
I think we animate -webkit-border-radius but not border-radius.
Comment 4 Simon Fraser (smfr) 2010-12-06 16:59:20 PST
Created attachment 75754 [details]
Patch
Comment 5 WebKit Review Bot 2010-12-06 17:01:45 PST
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.
Comment 6 Yuta Kitamura 2010-12-06 20:12:30 PST
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")?
Comment 7 Simon Fraser (smfr) 2010-12-06 20:15:12 PST
(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.
Comment 8 Csaba Osztrogonác 2010-12-07 04:20:45 PST
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
Comment 9 Csaba Osztrogonác 2010-12-07 04:26:36 PST
Comment on attachment 75754 [details]
Patch

remove r+, because it was landed in http://trac.webkit.org/changeset/73421
Comment 10 Csaba Osztrogonác 2010-12-07 05:30:45 PST
(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
Comment 11 Simon Fraser (smfr) 2010-12-07 11:58:36 PST
Will fix the flakeyness via bug 50639.
Comment 12 Simon Fraser (smfr) 2010-12-07 13:39:48 PST
Created attachment 75837 [details]
Patch
Comment 14 WebKit Review Bot 2010-12-07 21:51:12 PST
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.