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

Side by Side Diff: third_party/WebKit/LayoutTests/compositing/overflow/composited-nested-sticky-top.html

Issue 2733633002: Handle nested position:sticky elements correctly (compositor) (Closed)
Patch Set: Addressed the easier reviewer comments. Created 3 years, 9 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
OLDNEW
(Empty)
1 <style>
2 body {
3 margin: 0;
4 }
5
6 .group {
7 display: inline-block;
8 position: relative;
9 width: 250px;
10 height: 350px;
11 }
12
13 .scroller {
14 will-change: transform;
15
16 overflow: hidden; /* hide scrollbars */
17 width: 200px;
18 height: 350px;
19 outline: 2px solid black;
20 }
21
22 .container {
23 width: 200px;
24 height: 700px;
25 }
26
27 .outerSticky {
28 will-change: transform;
29
30 position: sticky;
31 background-color: green;
32 width: 200px;
33 height: 200px;
34 }
35
36 .innerSticky {
37 will-change: transform;
38
39 position: sticky;
40 background-color: red;
41 width: 200px;
42 height: 100px;
43 }
44 </style>
45
46 <script>
47 if (window.testRunner)
48 testRunner.waitUntilDone();
49
50 function finishTest() {
51 for (const scroller of document.querySelectorAll('.scroller')) {
52 scroller.scrollTop = 200;
53 }
54 if (window.testRunner)
55 testRunner.notifyDone();
56 }
57
58 window.addEventListener('load', function() {
59 requestAnimationFrame(function() {
60 requestAnimationFrame(finishTest);
61 });
62 });
63 </script>
64 <div class="group">
65 <div class="scroller">
66 <div class="container">
67 <div class="outerSticky" style="top: 50px;">
68 <div class="innerSticky" style="top: 50px;"></div>
69 </div>
70 </div>
71 </div>
72 </div>
73
74 <div class="group">
75 <div class="scroller">
76 <div class="container">
77 <div class="outerSticky" style="top: 50px;">
78 <div class="innerSticky" style="top: 100px;"></div>
79 </div>
80 </div>
81 </div>
82 </div>
83
84 <div class="group">
85 <div class="scroller">
86 <div class="container">
87 <div class="outerSticky" style="top: 50px;">
88 <div class="innerSticky" style="top: 300px;"></div>
89 </div>
90 </div>
91 </div>
92 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698