2010-12-07 Simon Fraser <simon.fraser@apple.com>
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 7 Dec 2010 22:03:03 +0000 (22:03 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 7 Dec 2010 22:03:03 +0000 (22:03 +0000)
        Reviewed by Beth Dakin.

        CSS animation doesn't work for border-radius
        https://bugs.webkit.org/show_bug.cgi?id=48340

        Include CSSPropertyBorderRadius in the list of shorthand
        properties, so that the individual border-radius properties
        get animated.

        Test: transitions/border-radius-transition.html

        * page/animation/AnimationBase.cpp:
        (WebCore::addShorthandProperties):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@73461 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/transitions/border-radius-transition-expected.txt [new file with mode: 0644]
LayoutTests/transitions/border-radius-transition.html [new file with mode: 0644]
WebCore/ChangeLog
WebCore/page/animation/AnimationBase.cpp

index 25dba24..f302367 100644 (file)
@@ -1,5 +1,17 @@
 2010-12-07  Simon Fraser  <simon.fraser@apple.com>
 
+        Reviewed by Beth Dakin.
+
+        CSS animation doesn't work for border-radius
+        https://bugs.webkit.org/show_bug.cgi?id=48340
+        
+        Test for border-radius and -webkit-border-radius transition.
+
+        * transitions/border-radius-transition-expected.txt: Added.
+        * transitions/border-radius-transition.html: Added.
+
+2010-12-07  Simon Fraser  <simon.fraser@apple.com>
+
         Reviewed by Chris Marrin.
 
         Make use of pause API more explicit before landing fix for borer-radius animation.
diff --git a/LayoutTests/transitions/border-radius-transition-expected.txt b/LayoutTests/transitions/border-radius-transition-expected.txt
new file mode 100644 (file)
index 0000000..5cbd1bf
--- /dev/null
@@ -0,0 +1,3 @@
+PASS - "border-top-left-radius" property for "box" element at 0.25s saw something close to: 25
+PASS - "-webkit-border-top-left-radius" property for "box2" element at 0.25s saw something close to: 25
+
diff --git a/LayoutTests/transitions/border-radius-transition.html b/LayoutTests/transitions/border-radius-transition.html
new file mode 100644 (file)
index 0000000..99b685c
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE>
+
+<html lang="en">
+<head>
+  <style type="text/css" media="screen">
+    .box {
+      height: 100px;
+      width: 100px;
+      margin: 10px;
+      border: 3px solid blue;
+      -webkit-transition-duration: 0.5s;
+      -webkit-transition-timing-function: linear;
+    }
+    
+    #box {
+      -webkit-transition-property: border-radius;
+    }
+    
+    #box.final {
+        border-top-left-radius: 50px;
+    }
+
+    #box2 {
+      -webkit-transition-property: -webkit-border-radius;
+    }
+    
+    #box2.final {
+        -webkit-border-top-left-radius: 50px;
+    }
+    
+  </style>
+  <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [0.25, 'box', 'border-top-left-radius', 25, 2],
+      [0.25, 'box2', '-webkit-border-top-left-radius', 25, 2],
+    ];
+  
+    function setupTest()
+    {
+      document.getElementById('box').className = 'box final';
+      document.getElementById('box2').className = 'box final';
+    }
+  
+    runTransitionTest(expectedValues, setupTest, dontUsePauseAPI); // the pause API does not work with shorthands.
+  </script>
+</head>
+<body>
+
+  <div id="box" class="box"></div>
+  <div id="box2" class="box"></div>
+
+  <div id="result">
+  </div>
+
+</body>
+</html>
index db93665..451eece 100644 (file)
@@ -1,3 +1,19 @@
+2010-12-07  Simon Fraser  <simon.fraser@apple.com>
+
+        Reviewed by Beth Dakin.
+
+        CSS animation doesn't work for border-radius
+        https://bugs.webkit.org/show_bug.cgi?id=48340
+        
+        Include CSSPropertyBorderRadius in the list of shorthand
+        properties, so that the individual border-radius properties
+        get animated.
+
+        Test: transitions/border-radius-transition.html
+
+        * page/animation/AnimationBase.cpp:
+        (WebCore::addShorthandProperties):
+
 2010-12-07  Maciej Stachowiak  <mjs@apple.com>
 
         Reviewed by Kent Tamura.
index 66172f7..2d09206 100644 (file)
@@ -731,7 +731,8 @@ static void addShorthandProperties()
         CSSPropertyWebkitMask,      // for mask-position
         CSSPropertyWebkitMaskPosition,
         CSSPropertyBorderTop, CSSPropertyBorderRight, CSSPropertyBorderBottom, CSSPropertyBorderLeft,
-        CSSPropertyBorderColor, 
+        CSSPropertyBorderColor,
+        CSSPropertyBorderRadius,
         CSSPropertyBorderWidth,
         CSSPropertyBorder,
         CSSPropertyBorderSpacing,