Index: LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding-expected.html |
diff --git a/LayoutTests/fast/css/sticky/sticky-top-overflow.html b/LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding-expected.html |
similarity index 55% |
copy from LayoutTests/fast/css/sticky/sticky-top-overflow.html |
copy to LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding-expected.html |
index dfda8ae3db7452f59994493c3ebad433e3042c88..b9a0bab6b23e0b6648833bc27de1dfbf7c823e77 100644 |
--- a/LayoutTests/fast/css/sticky/sticky-top-overflow.html |
+++ b/LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding-expected.html |
@@ -1,4 +1,5 @@ |
<!DOCTYPE html> |
+ |
<html> |
<head> |
<style> |
@@ -11,8 +12,9 @@ |
#overflow { |
width: 600px; |
- height: 550px; |
+ height: 400px; |
overflow: hidden; /* Still scrollable with JS */ |
+ padding: 20px; |
border: 1px solid black; |
} |
@@ -23,18 +25,18 @@ |
} |
.container { |
width: 100px; |
- height: 400px; |
+ height: 300px; |
outline: 2px solid black; |
} |
.box { |
width: 100px; |
- height: 200px; |
+ height: 150px; |
} |
.sticky { |
- position: sticky; |
- top: 100px; |
+ position: relative; |
+ bottom: 0px; |
background-color: green; |
} |
@@ -48,36 +50,41 @@ |
<script> |
function doTest() |
{ |
- document.getElementById('overflow').scrollTop = 120; |
+ document.getElementById('overflow').scrollTop = 100; |
} |
window.addEventListener('load', doTest, false); |
</script> |
</head> |
<body> |
-This test checks that sticky positioned elements are contained by their enclosing ancestor with an overflow clip. |
-There should be no red. |
<div id="overflow"> |
<div class="spacer"></div> |
- <div class="group"> |
- <div class="indicator box" style="top: 200px;"></div> |
+ <div class="group" style="top: 350px"> |
+ <div class="indicator box" style="top: 0px;"></div> |
<div class="container"> |
- <div class="sticky box"></div> |
+ <div class="box"></div> |
+ <div class="sticky box" style="bottom: 150px;"></div> |
</div> |
</div> |
- <div class="group" style="top: 100px"> |
- <div class="indicator box" style="top: 120px;"></div> |
+ <div class="group" style="top: 250px"> |
+ <div class="indicator box" style="top: 100px;"></div> |
<div class="container"> |
- <div class="sticky box"></div> |
+ <div class="box"></div> |
+ <div class="sticky box" style="bottom: 50px;"></div> |
</div> |
</div> |
- <div class="group" style="top: 240px"> |
- <div class="indicator box" style="top: 0;"></div> |
+ <div class="group" style="top: 200px"> |
+ <div class="indicator box" style="top: 150px;"></div> |
<div class="container"> |
+ <div class="box"></div> |
<div class="sticky box"></div> |
</div> |
</div> |
</div> |
+ <div style="position: absolute; top: 500px;"> |
+ This test checks that sticky positioned blocks positioned correctly in overflow with padding. |
+ There should be no red. |
+ </div> |
</body> |
</html> |