| Index: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained-expected.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides.html b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained-expected.html
|
| similarity index 50%
|
| copy from third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides.html
|
| copy to third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained-expected.html
|
| index 5ca5df94147f63ddb737cfdef1ba7d3cc04f2c01..0fc4c54e63219cc7c4eeaa483cbe76af0b5b6fc0 100644
|
| --- a/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides.html
|
| +++ b/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained-expected.html
|
| @@ -1,74 +1,76 @@
|
| <!DOCTYPE html>
|
| -<script>
|
| -if (window.internals) {
|
| - internals.settings.setCSSStickyPositionEnabled(true);
|
| -}
|
| -</script>
|
|
|
| <html>
|
| <head>
|
| <style>
|
| body {
|
| margin: 0;
|
| - width: 2000px;
|
| + width: 5000px;
|
| overflow: hidden; /* hide scrollbars */
|
| }
|
| -
|
| +
|
| .container {
|
| position: absolute;
|
| - width: 2000px;
|
| - height: 180px;
|
| - top: 350px;
|
| outline: 2px solid black;
|
| }
|
|
|
| - .vertical.container {
|
| - top: 0px;
|
| - left: 350px;
|
| - width: 180px;
|
| - height: 2000px;
|
| - }
|
| -
|
| - .box {
|
| - width: 800px;
|
| + .horizontal {
|
| + width: 5000px;
|
| height: 180px;
|
| + top: 100px;
|
| }
|
| -
|
| - .vertical .box {
|
| +
|
| + .vertical {
|
| + top: 0px;
|
| + left: 100px;
|
| width: 180px;
|
| - height: 500px;
|
| + height: 5000px;
|
| }
|
|
|
| .sticky {
|
| - position: sticky;
|
| - left: 50px;
|
| + position: fixed;
|
| + opacity: 0.75;
|
| + }
|
| +
|
| + .horizontal .sticky {
|
| + width: 300px;
|
| + height: 180px;
|
| right: 50px;
|
| background-color: green;
|
| }
|
| -
|
| +
|
| .vertical .sticky {
|
| - left: 0;
|
| - top: 50px;
|
| + width: 180px;
|
| + height: 300px;
|
| bottom: 50px;
|
| background-color: blue;
|
| - opacity: 0.75;
|
| }
|
| -</style>
|
| -<script>
|
| - function doTest()
|
| - {
|
| - window.scrollTo(300, 300);
|
| + .space {
|
| + background-color: grey;
|
| + opacity: 0.1;
|
| + }
|
| + .horizontal .space {
|
| + width: 2000px;
|
| + height: 100%;
|
| }
|
| - window.addEventListener('load', doTest, false);
|
| -</script>
|
| + .vertical .space {
|
| + width: 100%;
|
| + height: 2000px;
|
| + }
|
| + .inline {
|
| + display: inline-block;
|
| + }
|
| +</style>
|
| </head>
|
| <body>
|
| - <div class="container">
|
| - <div class="sticky box"></div>
|
| + <div class="horizontal container">
|
| + <div class="space inline"></div>
|
| + <div class="sticky inline"></div>
|
| </div>
|
| <div class="vertical container">
|
| - <div class="sticky box"></div>
|
| + <div class="space"></div>
|
| + <div class="sticky"></div>
|
| </div>
|
| -
|
| </body>
|
| </html>
|
| +
|
|
|
Chromium Code Reviews
Issue 2788053002:
Fix sticky bottom is not applied with both sticky position (Closed)
