Index: LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-ltr.html |
diff --git a/LayoutTests/fast/css/sticky/sticky-top-overflow.html b/LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-ltr.html |
similarity index 57% |
copy from LayoutTests/fast/css/sticky/sticky-top-overflow.html |
copy to LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-ltr.html |
index dfda8ae3db7452f59994493c3ebad433e3042c88..97973bf8aa4a9bd133f045b395c2c47aec13ab87 100644 |
--- a/LayoutTests/fast/css/sticky/sticky-top-overflow.html |
+++ b/LayoutTests/fast/css/sticky/sticky-horizontally-overconstrained-ltr.html |
@@ -1,40 +1,36 @@ |
<!DOCTYPE html> |
+ |
<html> |
<head> |
<style> |
- .group { |
- display: inline-block; |
- position: relative; |
- width: 150px; |
- height: 500px; |
- } |
- |
#overflow { |
width: 600px; |
- height: 550px; |
+ height: 450px; |
overflow: hidden; /* Still scrollable with JS */ |
border: 1px solid black; |
} |
- .spacer { |
- float: left; |
- width: 10px; |
- height: 1200px; |
+ .group { |
+ position: relative; |
+ width: 500px; |
+ height: 150px; |
} |
+ |
.container { |
- width: 100px; |
- height: 400px; |
+ width: 400px; |
+ height: 130px; |
outline: 2px solid black; |
} |
.box { |
- width: 100px; |
- height: 200px; |
+ width: 200px; |
+ height: 130px; |
} |
.sticky { |
position: sticky; |
- top: 100px; |
+ left: 100px; |
+ right: 200px; |
background-color: green; |
} |
@@ -48,32 +44,31 @@ |
<script> |
function doTest() |
{ |
- document.getElementById('overflow').scrollTop = 120; |
+ document.getElementById('overflow').scrollLeft = 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. |
+This test checks that right offset is ignored with overconstrained sticky positioning and ltr text direction. |
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="indicator box" style="left: 200px;"></div> |
<div class="container"> |
<div class="sticky box"></div> |
</div> |
</div> |
- <div class="group" style="top: 100px"> |
- <div class="indicator box" style="top: 120px;"></div> |
+ <div class="group" style="left: 100px"> |
+ <div class="indicator box" style="left: 100px;"></div> |
<div class="container"> |
<div class="sticky box"></div> |
</div> |
</div> |
- <div class="group" style="top: 240px"> |
- <div class="indicator box" style="top: 0;"></div> |
+ <div class="group" style="left: 200px"> |
+ <div class="indicator box" style="left: 0;"></div> |
<div class="container"> |
<div class="sticky box"></div> |
</div> |