OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <script src="../../../resources/testharness.js"></script> | |
3 <script src="../../../resources/testharnessreport.js"></script> | |
4 <style> | |
5 body { | |
6 margin: 0; | |
7 } | |
8 | |
9 #scroller { | |
10 height: 100px; | |
11 width: 200px; | |
12 overflow-y: scroll; | |
13 } | |
14 | |
15 .paddingBefore { | |
16 height: 150px; | |
17 } | |
18 | |
19 #sticky { | |
20 height: 50px; | |
21 position: sticky; | |
22 top: 20px; | |
23 } | |
24 | |
25 .paddingAfter { | |
26 height: 500px; | |
27 } | |
28 </style> | |
29 | |
30 <div id="scroller"> | |
31 <div class="paddingBefore"></div> | |
32 <div id="writer"></div> | |
33 <div id="sticky"></div> | |
34 <div class="paddingAfter"></div> | |
35 </div> | |
36 | |
37 <script> | |
38 if (window.internals) { | |
39 internals.settings.setCSSStickyPositionEnabled(true); | |
40 } | |
41 | |
42 // These tests currently mimic the behavior of Firefox for the interaction | |
43 // between scrollIntoView() and position:sticky, where the offset location of | |
44 // the sticky element is used to determine how far to scroll. This means that | |
45 // scrollIntoView() may scroll even when the sticky is already 'in view', and | |
46 // attempts to scroll so that the offset position of the sticky is at the top | |
47 // of the screen. | |
48 // | |
49 // TODO(smcgruer): Update tests once http://crbug.com/664246 is resolved. | |
50 | |
51 test(function() { | |
52 var scroller = document.getElementById('scroller'); | |
53 var sticky = document.getElementById('sticky'); | |
54 var writer = document.getElementById('writer'); | |
55 | |
56 // Clean the writer. | |
57 writer.innerHTML = ''; | |
58 | |
59 // With no scroll, the sticky element is outside the scroller viewport. | |
60 scroller.scrollTop = 0; | |
61 | |
62 // Deliberately dirty layout to make sure that scrollIntoView() still works. | |
63 writer.innerHTML = '<div style="height: 50px;"></div>'; | |
64 | |
65 sticky.scrollIntoView(); | |
66 assert_equals(scroller.scrollTop, 200); | |
67 }, "scrollIntoView should scroll when sticky is not visible"); | |
68 | |
69 test(function() { | |
70 var scroller = document.getElementById('scroller'); | |
71 var sticky = document.getElementById('sticky'); | |
72 var writer = document.getElementById('writer'); | |
73 | |
74 // Clean the writer. | |
75 writer.innerHTML = ''; | |
76 | |
77 // Scroll so that the sticky element is past the top of the scroller | |
78 // viewport, and is thus sticking. | |
79 scroller.scrollTop = 200; | |
80 | |
81 // Deliberately dirty layout to make sure that scrollIntoView() still works. | |
82 writer.innerHTML = '<div style="height: 10px;"></div>'; | |
83 | |
84 // See comment above tests for why this shifts by an additional 20 pixels. | |
85 sticky.scrollIntoView(); | |
86 assert_equals(scroller.scrollTop, 230); | |
87 }, "scrollIntoView should scroll when sticky is already in view"); | |
88 | |
89 test(function() { | |
90 var scroller = document.getElementById('scroller'); | |
91 var sticky = document.getElementById('sticky'); | |
92 var writer = document.getElementById('writer'); | |
93 | |
94 // Clean the writer. | |
95 writer.innerHTML = ''; | |
96 | |
97 // With no scroll, the sticky element is outside the scroller viewport. | |
98 scroller.scrollTop = 0; | |
99 | |
100 // Deliberately dirty layout to make sure that scrollIntoViewIfNeeded() | |
101 // still works. | |
102 writer.innerHTML = '<div style="height: 70px;"></div>'; | |
103 | |
104 sticky.scrollIntoViewIfNeeded(); | |
105 assert_equals(scroller.scrollTop, 195); | |
106 }, "scrollIntoViewIfNeeded should scroll when sticky is not visible"); | |
107 | |
108 test(function() { | |
109 var scroller = document.getElementById('scroller'); | |
110 var sticky = document.getElementById('sticky'); | |
111 var writer = document.getElementById('writer'); | |
112 | |
113 // Clean the writer. | |
114 writer.innerHTML = ''; | |
115 | |
116 // Scroll so that the sticky element is at the top of the scroller viewport. | |
117 scroller.scrollTop = 150; | |
118 | |
119 // Deliberately dirty layout to make sure that scrollIntoViewIfNeeded() | |
120 // still works. | |
121 writer.innerHTML = '<div style="height: 20px;"></div>'; | |
122 | |
123 sticky.scrollIntoViewIfNeeded(); | |
124 assert_equals(scroller.scrollTop, 170); | |
125 }, "scrollIntoViewIfNeeded should not scroll when sticky is already in view"); | |
126 </script> | |
OLD | NEW |