Fix clippingContainer for fixed position elements.

Fixed position elements are clipped by CSS clip ancestors, which may be between the fixed position element and its containingBlock. So clippingAncestor needs to walk up the ancestors of a fixed positioned element manually instead of using containingBlock directly. I believe this only applies to fixed position elements. Other elements can use containingBlock because an absolutely positioned ancestor will never get skipped in the containingBlock traversal and CSS clip only applies to absolutely positioned elements. BUG=347172 Review URL: https://codereview.chromium.org/179833006 git-svn-id: svn://svn.chromium.org/blink/trunk@168473 bbb929c8-8fbe-4397-9dbb-9b2b20218538

Fix clippingContainer for fixed position elements.
Fixed position elements are clipped by CSS clip ancestors, which may be between the fixed position element and its containingBlock. So clippingAncestor needs to walk up the ancestors of a fixed positioned element manually instead of using containingBlock directly. I believe this only applies to fixed position elements. Other elements can use containingBlock because an absolutely positioned ancestor will never get skipped in the containingBlock traversal and CSS clip only applies to absolutely positioned elements. BUG=347172 Review URL: https://codereview.chromium.org/179833006 git-svn-id: svn://svn.chromium.org/blink/trunk@168473 bbb929c8-8fbe-4397-9dbb-9b2b20218538
e133b52d · ojan@chromium.org · e8259bc1 · e133b52d · e133b52d · e133b52d
Commit e133b52d authored Mar 05, 2014 by ojan@chromium.org
5 changed files
--- a/third_party/WebKit/LayoutTests/fast/css/fixed-overlaps-absolute-in-clip-expected.html
+++ b/third_party/WebKit/LayoutTests/fast/css/fixed-overlaps-absolute-in-clip-expected.html
+<!DOCTYPE html>
+<style>
+#absolute {
+    position: absolute;
+    background-color: chartreuse;
+    top: 100px;
+    left: 100px;
+    width: 200px;
+    height: 20px;
+}
+#fixed {
+    background-color: salmon;
+    width: 50px;
+    height: 20px;
+}
+#overlap {
+    position:absolute;
+    background-color: pink;
+    top: 0;
+    left: 0;
+    height: 75px;
+    width: 75px;
+}
+</style>
+<div id="overlap"></div>
+<div id="absolute">
+    <div id="fixed"></div>
+</div>
--- a/third_party/WebKit/LayoutTests/fast/css/fixed-overlaps-absolute-in-clip.html
+++ b/third_party/WebKit/LayoutTests/fast/css/fixed-overlaps-absolute-in-clip.html
+<!DOCTYPE html>
+<style>
+#absolute {
+    position: absolute;
+    background-color: chartreuse;
+    top: 100px;
+    left: 100px;
+    width: 200px;
+    height: 200px;
+    clip: rect(0, 200px, 20px, 0px);
+}
+#fixed {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background-color: salmon;
+    width: 100px;
+    height: 100px;
+}
+#overlap {
+    position:absolute;
+    background-color: pink;
+    top: 0;
+    left: 0;
+    height: 75px;
+    width: 75px;
+    -webkit-transform: translateZ(0);
+}
+</style>
+<div id="overlap"></div>
+<div id="absolute">
+    <div id="fixed"></div>
+</div>
--- a/third_party/WebKit/LayoutTests/fast/css/transformed-overflow-hidden-clips-fixed-expected.html
+++ b/third_party/WebKit/LayoutTests/fast/css/transformed-overflow-hidden-clips-fixed-expected.html
+<!DOCTYPE html>
+<style>
+div {
+    width: 100px;
+    height: 50px;
+}
+#transformed {
+    overflow: hidden;
+    -webkit-transform: translateZ(0);
+    height: 100px;
+    width: 100px;
+}
+#fixed {
+    position: fixed;
+    background-color: chartreuse;
+    width: 100px;
+    height: 100px;
+    top: -50px;
+}
+</style>
+<div style="background-color: chartreuse;"></div>
+<div style="background-color: salmon;"></div>
--- a/third_party/WebKit/LayoutTests/fast/css/transformed-overflow-hidden-clips-fixed.html
+++ b/third_party/WebKit/LayoutTests/fast/css/transformed-overflow-hidden-clips-fixed.html
+<!DOCTYPE html>
+<style>
+#transformed {
+    overflow: hidden;
+    -webkit-transform: translateZ(0);
+    height: 100px;
+    width: 100px;
+    background-color: salmon;
+}
+#fixed {
+    position: fixed;
+    background-color: chartreuse;
+    width: 100px;
+    height: 100px;
+    top: -50px;
+}
+</style>
+<div id="transformed">
+  <div id="fixed"></div>
+</div>
\ No newline at end of file
--- a/third_party/WebKit/Source/core/rendering/RenderObject.cpp
+++ b/third_party/WebKit/Source/core/rendering/RenderObject.cpp
@@ -817,7 +817,21 @@ RenderBlock* RenderObject::containingBlock() const
 RenderObject* RenderObject::clippingContainer() const
 {
-    for (RenderObject* container = containingBlock(); container; container = container->containingBlock()) {
+    RenderObject* container = const_cast<RenderObject*>(this);
+    while (container) {
+        if (container->style()->position() == FixedPosition) {
+            for (container = container->parent(); container && !container->canContainFixedPositionObjects(); container = container->parent()) {
+                // CSS clip applies to fixed position elements even for ancestors that are not what the
+                // fixed element is positioned with respect to.
+                if (container->hasClip())
+                    return container;
+            }
+        } else {
+            container = container->containingBlock();
+        }
+        if (!container)
+            return 0;
        if (container->hasClipOrOverflowClip())
            return container;
    }