Index: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container.html b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container.html |
index e5fb661883a4a3eaa5c835722dff7c96f4735189..f3c47d230d9da07c31017f94a5e1fdb77aef5a27 100644 |
--- a/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container.html |
+++ b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container.html |
@@ -2,31 +2,73 @@ |
<script> |
if (window.internals) { |
internals.settings.setCSSStickyPositionEnabled(true); |
-} |
+} |
</script> |
-<style type="text/css"> |
-div { |
- height: 100px; |
- width: 100px; |
-} |
-.spacer { |
- background-color: red; |
-} |
-.sticky { |
- background-color: green; |
- position: sticky; |
-} |
-.absoffset { |
- background-color: green; |
- position: absolute; |
- top: -100px; |
-} |
+ |
+<html> |
+<head> |
+<style> |
+ body { |
+ margin: 0; |
+ height: 2000px; |
+ overflow: hidden; /* hide scrollbars */ |
+ } |
+ |
+ .group { |
+ display: inline-block; |
+ position: relative; |
+ width: 250px; |
+ height: 500px; |
+ } |
+ |
+ .container { |
+ width: 200px; |
+ height: 400px; |
+ outline: 2px solid black; |
+ } |
+ |
+ .box { |
+ width: 200px; |
+ height: 200px; |
+ } |
+ |
+ .sticky { |
+ position: sticky; |
+ top: 100px; |
+ background-color: silver; |
+ } |
+ |
+ .child { |
+ position: absolute; |
+ background-color: green; |
+ top: 50px; |
+ left: 50px; |
+ } |
+ |
+ .indicator { |
+ position: absolute; |
+ top: 250px; |
+ left: 50px; |
+ background-color: red; |
+ } |
</style> |
-<div class="spacer"></div> |
-<div class="sticky"> |
- <!-- |
- Tests that the absolute positioned child is positioned relative to the sticky container. You should see only a |
- green box as this will cover up the red box above the sticky div. |
- --> |
- <div class="absoffset"></div> |
-</div> |
+<script> |
+ function doTest() |
+ { |
+ window.scrollTo(0, 100); |
+ } |
+ window.addEventListener('load', doTest, false); |
+</script> |
+</head> |
+<body> |
+ <div class="group"> |
+ <div class="indicator box"></div> |
+ <div class="container"> |
+ <div class="sticky box"> |
+ <div class="child box"></div> |
+ </div> |
+ </div> |
+ </div> |
+ |
+</body> |
+</html> |