2011-04-11 Simon Fraser <simon.fraser@apple.com>
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 12 Apr 2011 04:14:39 +0000 (04:14 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 12 Apr 2011 04:14:39 +0000 (04:14 +0000)
        Reviewed by Dan Bernstein.

        -webkit-box-shadow:inset does not animate transform as an inset shadow
        https://bugs.webkit.org/show_bug.cgi?id=45176

        Two fixes:
        1. Don't run transitions between different shadow styles (normal vs. inset).
        2. When either source or destination is null, use a default shadow with a
        matching style so that the transition runs.

        Test: transitions/mismatched-shadow-styles.html

        * page/animation/AnimationBase.cpp:
        (WebCore::blendFunc):
        (WebCore::PropertyWrapperShadow::blend):

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

LayoutTests/ChangeLog
LayoutTests/transitions/mismatched-shadow-styles-expected.txt [new file with mode: 0644]
LayoutTests/transitions/mismatched-shadow-styles.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/page/animation/AnimationBase.cpp

index 215505c..a3dc912 100644 (file)
@@ -1,3 +1,15 @@
+2011-04-11  Simon Fraser  <simon.fraser@apple.com>
+
+        Reviewed by Dan Bernstein.
+
+        -webkit-box-shadow:inset does not animate transform as an inset shadow
+        https://bugs.webkit.org/show_bug.cgi?id=45176
+        
+        Testcase for transitions between different shadow styles.
+
+        * transitions/mismatched-shadow-styles-expected.txt: Added.
+        * transitions/mismatched-shadow-styles.html: Added.
+
 2011-04-11  Xianzhu Wang  <wangxianzhu@google.com>
 
         Reviewed by Tony Gentilcore.
 2011-04-11  Xianzhu Wang  <wangxianzhu@google.com>
 
         Reviewed by Tony Gentilcore.
diff --git a/LayoutTests/transitions/mismatched-shadow-styles-expected.txt b/LayoutTests/transitions/mismatched-shadow-styles-expected.txt
new file mode 100644 (file)
index 0000000..bcb2cae
--- /dev/null
@@ -0,0 +1,6 @@
+   
+PASS - "box-shadow" property for "none-to-normal" element at 0.25s saw something close to: 10,10
+PASS - "box-shadow" property for "none-to-inset" element at 0.25s saw something close to: 10,10
+PASS - "box-shadow" property for "inset-to-normal" element at 0.25s saw something close to: 20,20
+PASS - "box-shadow" property for "normal-to-inset" element at 0.25s saw something close to: 20,20
+
diff --git a/LayoutTests/transitions/mismatched-shadow-styles.html b/LayoutTests/transitions/mismatched-shadow-styles.html
new file mode 100644 (file)
index 0000000..7cb6616
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <style type="text/css" media="screen">
+    .box {
+      display: inline-block;
+      height: 100px;
+      width: 100px;
+      margin: 20px;
+      border: 3px solid blue;
+      -webkit-transition-duration: 0.5s;
+      -webkit-transition-timing-function: linear;
+      -webkit-transition-property: box-shadow;
+    }
+    
+    .final #none-to-normal {
+      box-shadow: 20px 20px 10px black;
+    }
+
+    .final #none-to-inset {
+      box-shadow: 20px 20px 10px black inset;
+    }
+
+    #inset-to-normal {
+      box-shadow: 20px 20px 10px black inset;
+    }
+
+    .final #inset-to-normal {
+      box-shadow: 20px 20px 10px black;
+    }
+
+    #normal-to-inset {
+      box-shadow: 20px 20px 10px black;
+    }
+
+    .final #normal-to-inset {
+      box-shadow: 20px 20px 10px black inset;
+    }
+
+  </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]
+      // For box-shadow, we test shadow-x and shadow-y to see if it's animating.
+      [0.25, 'none-to-normal', 'box-shadow', [10, 10], 1],
+      [0.25, 'none-to-inset', 'box-shadow', [10, 10], 1],
+      [0.25, 'inset-to-normal', 'box-shadow', [20, 20], 1],
+      [0.25, 'normal-to-inset', 'box-shadow', [20, 20], 1],
+    ];
+  
+    function setupTest()
+    {
+      document.body.className = 'final';
+    }
+  
+    runTransitionTest(expectedValues, setupTest, usePauseAPI);
+  </script>
+</head>
+<body>
+
+  <div id="none-to-normal" class="box"></div>
+  <div id="none-to-inset" class="box"></div>
+  <div id="inset-to-normal" class="box"></div>
+  <div id="normal-to-inset" class="box"></div>
+
+  <div id="result">
+  </div>
+
+</body>
+</html>
index 062a2bf..44c54e6 100644 (file)
@@ -1,3 +1,21 @@
+2011-04-11  Simon Fraser  <simon.fraser@apple.com>
+
+        Reviewed by Dan Bernstein.
+
+        -webkit-box-shadow:inset does not animate transform as an inset shadow
+        https://bugs.webkit.org/show_bug.cgi?id=45176
+        
+        Two fixes:
+        1. Don't run transitions between different shadow styles (normal vs. inset).
+        2. When either source or destination is null, use a default shadow with a
+        matching style so that the transition runs.
+
+        Test: transitions/mismatched-shadow-styles.html
+
+        * page/animation/AnimationBase.cpp:
+        (WebCore::blendFunc):
+        (WebCore::PropertyWrapperShadow::blend):
+
 2011-04-11  John Bates  <jbates@google.com>
 
         Reviewed by Kenneth Russell.
 2011-04-11  John Bates  <jbates@google.com>
 
         Reviewed by Kenneth Russell.
index 1ee0d1f..e232b03 100644 (file)
@@ -142,6 +142,9 @@ static inline ShadowStyle blendFunc(const AnimationBase* anim, ShadowStyle from,
 static inline ShadowData* blendFunc(const AnimationBase* anim, const ShadowData* from, const ShadowData* to, double progress)
 {  
     ASSERT(from && to);
 static inline ShadowData* blendFunc(const AnimationBase* anim, const ShadowData* from, const ShadowData* to, double progress)
 {  
     ASSERT(from && to);
+    if (from->style() != to->style())
+        return new ShadowData(*to);
+
     return new ShadowData(blendFunc(anim, from->x(), to->x(), progress),
                           blendFunc(anim, from->y(), to->y(), progress), 
                           blendFunc(anim, from->blur(), to->blur(), progress),
     return new ShadowData(blendFunc(anim, from->x(), to->x(), progress),
                           blendFunc(anim, from->y(), to->y(), progress), 
                           blendFunc(anim, from->blur(), to->blur(), progress),
@@ -360,14 +363,15 @@ public:
         const ShadowData* shadowA = (a->*m_getter)();
         const ShadowData* shadowB = (b->*m_getter)();
         ShadowData defaultShadowData(0, 0, 0, 0, Normal, property() == CSSPropertyWebkitBoxShadow, Color::transparent);
         const ShadowData* shadowA = (a->*m_getter)();
         const ShadowData* shadowB = (b->*m_getter)();
         ShadowData defaultShadowData(0, 0, 0, 0, Normal, property() == CSSPropertyWebkitBoxShadow, Color::transparent);
+        ShadowData defaultInsetShadowData(0, 0, 0, 0, Inset, property() == CSSPropertyWebkitBoxShadow, Color::transparent);
 
         ShadowData* newShadowData = 0;
         ShadowData* lastShadow = 0;
         
         while (shadowA || shadowB) {
 
         ShadowData* newShadowData = 0;
         ShadowData* lastShadow = 0;
         
         while (shadowA || shadowB) {
-            const ShadowData* srcShadow = shadowA ? shadowA : &defaultShadowData;
-            const ShadowData* dstShadow = shadowB ? shadowB : &defaultShadowData;
-            
+            const ShadowData* srcShadow = shadowA ? shadowA : (shadowB->style() == Inset ? &defaultInsetShadowData : &defaultShadowData);
+            const ShadowData* dstShadow = shadowB ? shadowB : (shadowA->style() == Inset ? &defaultInsetShadowData : &defaultShadowData);
+
             ShadowData* blendedShadow = blendFunc(anim, srcShadow, dstShadow, progress);
             if (!lastShadow)
                 newShadowData = blendedShadow;
             ShadowData* blendedShadow = blendFunc(anim, srcShadow, dstShadow, progress);
             if (!lastShadow)
                 newShadowData = blendedShadow;