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

Side by Side Diff: third_party/WebKit/LayoutTests/compositing/overflow/composited-nested-sticky-left.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 position: relative;
8 width: 350px;
9 height: 200px;
10 }
11
12 .scroller {
13 will-change: transform;
14
15 overflow: hidden; /* hide scrollbars */
16 width: 350px;
17 height: 180px;
18 outline: 2px solid black;
19 }
20
21 .container {
22 width: 700px;
23 height: 180px;
24 }
25
26 .outerSticky {
27 will-change: transform;
28
29 display: inline-block;
30 position: sticky;
31 background-color: green;
32 width: 200px;
33 height: 180px;
34 }
35
36 .innerSticky {
37 will-change: transform;
38
39 display: inline-block;
40 position: sticky;
41 background-color: red;
42 width: 100px;
43 height: 180px;
44 }
45 </style>
46
47 <script>
48 if (window.testRunner)
49 testRunner.waitUntilDone();
50
51 function finishTest() {
52 for (const scroller of document.querySelectorAll('.scroller')) {
53 scroller.scrollLeft = 200;
54 }
55 if (window.testRunner)
56 testRunner.notifyDone();
57 }
58
59 window.addEventListener('load', function() {
60 requestAnimationFrame(function() {
61 requestAnimationFrame(finishTest);
62 });
63 });
64 </script>
65
66
67 <div class="group">
68 <div class="scroller">
69 <div class="container">
70 <div class="outerSticky" style="left: 50px;">
71 <div class="innerSticky" style="left: 50px;"></div>
72 </div>
73 </div>
74 </div>
75 </div>
76
77 <div class="group">
78 <div class="scroller">
79 <div class="container">
80 <div class="outerSticky" style="left: 50px;">
81 <div class="innerSticky" style="left: 100px;"></div>
82 </div>
83 </div>
84 </div>
85 </div>
86
87 <div class="group">
88 <div class="scroller">
89 <div class="container">
90 <div class="outerSticky" style="left: 50px;">
91 <div class="innerSticky" style="left: 300px;"></div>
92 </div>
93 </div>
94 </div>
95 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698