Summary: | CSS animation doesn't work for border-radius | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | jon.ronnenberg | ||||||||
Component: | CSS | Assignee: | 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: |
|
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 I think we animate -webkit-border-radius but not border-radius. Created attachment 75754 [details]
Patch
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.
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")? (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. 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 on attachment 75754 [details] Patch remove r+, because it was landed in http://trac.webkit.org/changeset/73421 (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 Will fix the flakeyness via bug 50639. Created attachment 75837 [details]
Patch
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.
|
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.