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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-abspos-child.html

Issue 1870663002: Reland main thread position sticky implementation. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Only descend into children which have an ancestor overflow layer. Created 4 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/inline-sticky.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-abspos-child-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
(Empty)
1 <!DOCTYPE html>
2 <script>
3 if (window.internals) {
4 internals.settings.setCSSStickyPositionEnabled(true);
5 }
6 </script>
7
8 <html>
9 <head>
10 <style>
11 body {
12 margin: 0;
13 height: 2000px;
14 overflow: hidden; /* hide scrollbars */
15 font-family: 'Ahem';
16 font-size: 25px;
17 line-height: 2;
18 }
19
20 .group {
21 display: inline-block;
22 position: relative;
23 width: 220px;
24 height: 500px;
25 }
26
27 .container {
28 width: 200px;
29 height: 400px;
30 outline: 2px solid black;
31 }
32
33 .box {
34 width: 200px;
35 height: 200px;
36 }
37
38 .sticky {
39 width: 200px;
40 height: 200px;
41 color: blue;
42 position: sticky;
43 top: 100px;
44 }
45
46 .child {
47 position: absolute;
48 background-color: green;
49 top: 50px;
50 left: 50px;
51 height: 50px;
52 width: 50px;
53 }
54
55 .indicator {
56 display: none;
57 position: absolute;
58 top: 250px;
59 left: 50px;
60 background-color: red;
61 }
62 </style>
63 <script>
64 function doTest()
65 {
66 window.scrollTo(0, 100);
67 }
68 window.addEventListener('load', doTest, false);
69 </script>
70 </head>
71 <body>
72 <div class="group">
73 <div class="indicator box"></div>
74 <div class="container">
75 XXX <span class="sticky">XXXX</br>
76 <div class="child box"></div>
77 XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
78 </div>
79 </div>
80 <div class="group" style="top: 100px">
81 <div class="indicator box"></div>
82 <div class="container">
83 XXX <span class="sticky">XXXX</br>
84 <div class="child box"></div>
85 XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
86 </div>
87 </div>
88 <div class="group" style="top: 200px">
89 <div class="indicator box"></div>
90 <div class="container">
91 XXX <span class="sticky">XXXX</br>
92 <div class="child box"></div>
93 XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
94 </div>
95 </div>
96
97 </body>
98 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-abspos-child-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698