Index: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container-expected.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container-expected.html b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container-expected.html |
index 7fb007524262f774792dc16caa7f0086fd492c41..823cb4b66206f4406c2ab575f07ed86479a18428 100644 |
--- a/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container-expected.html |
+++ b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-as-positioning-container-expected.html |
@@ -1,27 +1,60 @@ |
<!DOCTYPE html> |
-<style type="text/css"> |
-div { |
- height: 100px; |
- width: 100px; |
-} |
-.spacer { |
- background-color: red; |
-} |
-.sticky { |
- background-color: green; |
- position: relative; |
-} |
-.absoffset { |
- background-color: green; |
- position: absolute; |
- top: -100px; |
-} |
+ |
+<html> |
+<head> |
+<style> |
+ body { |
+ margin: 0; |
+ } |
+ |
+ .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: relative; |
+ top: 200px; |
+ 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> |
+</head> |
+<body> |
+ <div class="group" style="top: -100px;"> |
+ <div class="indicator box"></div> |
+ <div class="container"> |
+ <div class="sticky box"> |
+ <div class="child box"></div> |
+ </div> |
+ </div> |
+ </div> |
+ |
+</body> |
+</html> |