2008-07-16 Simon Fraser <simon.fraser@apple.com>
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 17 Jul 2008 01:16:30 +0000 (01:16 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 17 Jul 2008 01:16:30 +0000 (01:16 +0000)
        Reviewed by Dave Hyatt

        AnimationController needs to adjust z-index in the blended
        style in case opacity or transform were changed by blending.

        https://bugs.webkit.org/show_bug.cgi?id=20047

        Test: transitions/opacity-transition-zindex.html

        * page/AnimationController.cpp:
        (WebCore::AnimationController::updateImplicitAnimations):

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

LayoutTests/ChangeLog
LayoutTests/transitions/opacity-transition-zindex-expected.txt [new file with mode: 0644]
LayoutTests/transitions/opacity-transition-zindex.html [new file with mode: 0644]
WebCore/ChangeLog
WebCore/page/AnimationController.cpp

index ce59dee7789b9a5c178a6e5e293736ec933e9387..aa25c9c03fdcc71d68659d3dbd61b2f10fbd3a56 100644 (file)
@@ -1,3 +1,13 @@
+2008-07-16  Simon Fraser  <simon.fraser@apple.com>
+
+        Reviewed by Hyatt.
+
+        Testcases for opacity transition.
+        https://bugs.webkit.org/show_bug.cgi?id=20047
+
+        * transitions/opacity-transition-zindex-expected.txt: Added.
+        * transitions/opacity-transition-zindex.html: Added.
+
 2008-07-16  Nikolas Zimmermann  <zimmermann@kde.org>
 
         Rubber stamped by Eric.
diff --git a/LayoutTests/transitions/opacity-transition-zindex-expected.txt b/LayoutTests/transitions/opacity-transition-zindex-expected.txt
new file mode 100644 (file)
index 0000000..427059b
--- /dev/null
@@ -0,0 +1,12 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x320
+  RenderBlock {HTML} at (0,0) size 800x320
+    RenderBody {BODY} at (8,10) size 784x300
+layer at (18,10) size 300x300 layerType: background only
+layer at (168,160) size 100x100
+  RenderBlock (positioned) zI: -1 {DIV} at (150,150) size 100x100 [bgcolor=#FFA500]
+layer at (18,10) size 300x300 layerType: foreground only
+  RenderBlock (relative positioned) {DIV} at (10,0) size 300x300 [bgcolor=#008000]
+layer at (28,20) size 200x200
+  RenderBlock (positioned) {DIV} at (10,10) size 200x200 [bgcolor=#0000FF]
diff --git a/LayoutTests/transitions/opacity-transition-zindex.html b/LayoutTests/transitions/opacity-transition-zindex.html
new file mode 100644 (file)
index 0000000..23c2b35
--- /dev/null
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Opacity Transitions and Stacking Context</title>
+  <style type="text/css" media="screen">
+    .container {
+      position: relative;
+      height: 300px;
+      width: 300px;
+      margin: 10px;
+      background-color: green;
+      -webkit-transition-property: opacity;
+      -webkit-transition-timing-function: linear;
+      -webkit-transition-duration: 5s;
+    }
+  
+    #first {
+      opacity: 0.5;
+    }
+
+    .box {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      height: 200px;
+      width: 200px;
+      background-color: blue;
+    }
+
+    .indicator {
+      position: absolute;
+      top: 150px;
+      left: 150px;
+      height: 100px;
+      width: 100px;
+      background-color: orange;
+      z-index: -1;
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+        layoutTestController.waitUntilDone();
+    }
+
+    function runTest()
+    {
+      var container = document.getElementById('first');
+      container.style.opacity = 1;
+      // dump the tree in the middle of the transition
+      window.setTimeout(function() {
+        if (window.layoutTestController)
+            layoutTestController.notifyDone();
+      }, 2500);
+    }
+    
+    window.addEventListener('load', runTest, false);
+  </script>
+</head>
+<body>
+
+  <div class="container" id="first">
+    <div class="box"></div>
+    <div class="indicator"></div>
+  </div>
+
+</body>
+</html>
index 3b9d2efe0b17ffbf0be548e054d43406cad160bb..14f34d3770bf5d1e12c50effc526eb6a330cbd1e 100644 (file)
@@ -1,3 +1,17 @@
+2008-07-16  Simon Fraser  <simon.fraser@apple.com>
+
+        Reviewed by Dave Hyatt
+
+        AnimationController needs to adjust z-index in the blended
+        style in case opacity or transform were changed by blending.
+
+        https://bugs.webkit.org/show_bug.cgi?id=20047
+        
+        Test: transitions/opacity-transition-zindex.html
+
+        * page/AnimationController.cpp:
+        (WebCore::AnimationController::updateImplicitAnimations):
+
 2008-07-16  Nikolas Zimmermann  <zimmermann@kde.org>
 
         Reviewed by Sam.
index 84e310084b398c295af91d8c1d8b2dd085e0cfee..1677fb2c5f05fb8235221412c50b3e3e6c4f9a0c 100644 (file)
@@ -587,9 +587,17 @@ RenderStyle* AnimationController::updateImplicitAnimations(RenderObject* rendere
     if (!animation && !newStyle->transitions())
         return newStyle;
 
-    RenderStyle* result = animation->animate(renderer, renderer->style(), newStyle);
+    RenderStyle* blendedStyle = animation->animate(renderer, renderer->style(), newStyle);
     m_data->updateTimer();
-    return result;
+
+    if (blendedStyle != newStyle) {
+        // Do some of the work that CSSStyleSelector::adjustRenderStyle() does, to impose rules
+        // like opacity creating stacking context.
+        if (blendedStyle->hasAutoZIndex() && (blendedStyle->opacity() < 1.0f || blendedStyle->hasTransform()))
+            blendedStyle->setZIndex(0);
+    }
+
+    return blendedStyle;
 }
 
 void AnimationController::suspendAnimations()