Index: LayoutTests/fast/css/sticky/sticky-display.html |
diff --git a/LayoutTests/fast/css/sticky/sticky-left.html b/LayoutTests/fast/css/sticky/sticky-display.html |
similarity index 56% |
copy from LayoutTests/fast/css/sticky/sticky-left.html |
copy to LayoutTests/fast/css/sticky/sticky-display.html |
index b2537be107d69c398955d76598e9d53943bcc444..6294fe7e50180d6c94e8abdb4a69d5efd02f8658 100644 |
--- a/LayoutTests/fast/css/sticky/sticky-left.html |
+++ b/LayoutTests/fast/css/sticky/sticky-display.html |
@@ -8,19 +8,24 @@ |
width: 2000px; |
overflow: hidden; /* hide scrollbars */ |
} |
- |
+ |
+ p { |
+ position: relative; |
+ left: 100px; |
+ } |
+ |
.group { |
position: relative; |
width: 500px; |
height: 200px; |
} |
- |
+ |
.container { |
width: 400px; |
height: 180px; |
outline: 2px solid black; |
} |
- |
+ |
.box { |
width: 200px; |
height: 180px; |
@@ -31,7 +36,7 @@ |
left: 100px; |
background-color: green; |
} |
- |
+ |
.indicator { |
position: absolute; |
top: 0; |
@@ -48,25 +53,40 @@ |
</script> |
</head> |
<body> |
- <div class="group"> |
- <div class="indicator box" style="left: 200px;"></div> |
+ <p>Block</p> |
+ <div class="group" style="left: 100px"> |
+ <div class="indicator box" style="left: 100px;"></div> |
<div class="container"> |
<div class="sticky box"></div> |
</div> |
</div> |
+ <p>Table</p> |
<div class="group" style="left: 100px"> |
<div class="indicator box" style="left: 100px;"></div> |
<div class="container"> |
- <div class="sticky box"></div> |
+ <div class="sticky box" style="display: table"></div> |
+ </div> |
+ </div> |
+ |
+ <p>Grid</p> |
+ <div class="group" style="left: 100px"> |
+ <div class="indicator box" style="left: 100px;"></div> |
+ <div class="container"> |
+ <div class="sticky box" style="display: grid"></div> |
</div> |
</div> |
- <div class="group" style="left: 200px"> |
- <div class="indicator box" style="left: 0;"></div> |
+ <p>Flex box</p> |
+ <div class="group" style="left: 100px"> |
+ <div class="indicator box" style="left: 100px;"></div> |
<div class="container"> |
- <div class="sticky box"></div> |
+ <div class="sticky box" style="display: flex"></div> |
</div> |
</div> |
+ <div style="position: absolute; top: 500px;"> |
+ This test checks the behavior of position:sticky with various display values. |
+ There should be no red. |
+ </div> |
</body> |
</html> |