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

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

Issue 2754983002: Composite sticky-positioned elements when they have composited descendants (Closed)
Patch Set: Address chrishtr comment Created 3 years, 7 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 .scroller {
7 overflow: auto;
8 height: 300px;
9 width: 250px;
10 }
11
12 .container {
13 width: 200px;
14 height: 2000px;
15 }
16
17 .composited {
18 /* Forces promotion without creating a stacking context. */
19 backface-visibility: hidden;
20 }
21
22 .outerSticky {
23 position: sticky;
24 top: 50px;
25 background-color: green;
26 width: 200px;
27 height: 200px;
28 }
29
30 .middleSticky {
31 position: sticky;
32 top: 100px;
33 background-color: yellow;
34 width: 200px;
35 height: 100px;
36 }
37
38 .innerSticky {
39 position: sticky;
40 top: 125px;
41 background-color: red;
42 width: 200px;
43 height: 50px;
44 }
45 </style>
46
47 <script>
48 if (window.testRunner)
49 testRunner.waitUntilDone();
50
51 function finishTest() {
52 document.querySelector('.scroller').scrollTop = 200;
53 if (window.testRunner)
54 testRunner.notifyDone();
55 }
56
57 window.addEventListener('load', function() {
58 requestAnimationFrame(function() {
59 requestAnimationFrame(finishTest);
60 });
61 });
62 </script>
63
64 <div class="scroller">
65 <div class="container">
66 <div class="outerSticky">
67 <div class="middleSticky composited">
68 <div class="innerSticky composited"></div>
69 </div>
70 </div>
71 </div>
72 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698