Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(37)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained-expected.html

Issue 2788053002: Fix sticky bottom is not applied with both sticky position (Closed)
Patch Set: use position:fixed instead of sticky on the expected result Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script>
3 if (window.internals) {
4 internals.settings.setCSSStickyPositionEnabled(true);
5 }
6 </script>
7 2
8 <html> 3 <html>
9 <head> 4 <head>
10 <style> 5 <style>
11 body { 6 body {
12 margin: 0; 7 margin: 0;
13 width: 2000px; 8 width: 5000px;
14 overflow: hidden; /* hide scrollbars */ 9 overflow: hidden; /* hide scrollbars */
15 } 10 }
16 11
17 .container { 12 .container {
18 position: absolute; 13 position: absolute;
19 width: 2000px;
20 height: 180px;
21 top: 350px;
22 outline: 2px solid black; 14 outline: 2px solid black;
23 } 15 }
24 16
25 .vertical.container { 17 .horizontal {
18 width: 5000px;
19 height: 180px;
20 top: 100px;
21 }
22
23 .vertical {
26 top: 0px; 24 top: 0px;
27 left: 350px; 25 left: 100px;
28 width: 180px; 26 width: 180px;
29 height: 2000px; 27 height: 5000px;
30 }
31
32 .box {
33 width: 800px;
34 height: 180px;
35 }
36
37 .vertical .box {
38 width: 180px;
39 height: 500px;
40 } 28 }
41 29
42 .sticky { 30 .sticky {
43 position: sticky; 31 position: fixed;
44 left: 50px; 32 opacity: 0.75;
33 }
34
35 .horizontal .sticky {
36 width: 300px;
37 height: 180px;
45 right: 50px; 38 right: 50px;
46 background-color: green; 39 background-color: green;
47 } 40 }
48 41
49 .vertical .sticky { 42 .vertical .sticky {
50 left: 0; 43 width: 180px;
51 top: 50px; 44 height: 300px;
52 bottom: 50px; 45 bottom: 50px;
53 background-color: blue; 46 background-color: blue;
54 opacity: 0.75; 47 }
48 .space {
49 background-color: grey;
50 opacity: 0.1;
51 }
52 .horizontal .space {
53 width: 2000px;
54 height: 100%;
55 }
56 .vertical .space {
57 width: 100%;
58 height: 2000px;
59 }
60 .inline {
61 display: inline-block;
55 } 62 }
56 </style> 63 </style>
57 <script>
58 function doTest()
59 {
60 window.scrollTo(300, 300);
61 }
62 window.addEventListener('load', doTest, false);
63 </script>
64 </head> 64 </head>
65 <body> 65 <body>
66 <div class="container"> 66 <div class="horizontal container">
67 <div class="sticky box"></div> 67 <div class="space inline"></div>
68 <div class="sticky inline"></div>
68 </div> 69 </div>
69 <div class="vertical container"> 70 <div class="vertical container">
70 <div class="sticky box"></div> 71 <div class="space"></div>
72 <div class="sticky"></div>
71 </div> 73 </div>
72
73 </body> 74 </body>
74 </html> 75 </html>
76
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698