OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 ::-webkit-scrollbar { | 3 ::-webkit-scrollbar { |
4 width: 0px; | 4 width: 0px; |
5 height: 0px; | 5 height: 0px; |
6 } | 6 } |
7 | 7 |
8 body, html { | 8 body, html { |
9 width: 100%; | 9 width: 100%; |
10 height: 100%; | 10 height: 100%; |
11 } | 11 } |
12 | 12 |
13 body { | 13 body { |
14 margin: 0px; | 14 margin: 0px; |
15 } | 15 } |
16 | 16 |
17 #container { | 17 #container { |
18 width: 100%; | 18 width: 100%; |
19 height: 100%; | 19 height: 100%; |
20 overflow: auto; | 20 overflow: auto; |
21 } | 21 } |
22 | 22 |
23 #spacer { | 23 #parent { |
| 24 width: 100%; |
| 25 height: 100%; |
| 26 overflow: auto; |
| 27 } |
| 28 |
| 29 .spacer { |
24 width: 2000px; | 30 width: 2000px; |
25 height: 2000px; | 31 height: 2000px; |
26 } | 32 } |
27 | 33 |
28 #rootspacer { | 34 #rootspacer { |
29 width: 1000px; | 35 width: 1000px; |
30 height: 1000px; | 36 height: 1000px; |
31 position: absolute; | 37 position: absolute; |
32 top: 0px; | 38 top: 0px; |
33 left: 0px; | 39 left: 0px; |
34 z-index: -1; | 40 z-index: -1; |
35 } | 41 } |
36 </style> | 42 </style> |
37 | 43 |
38 <div id="container"> | 44 <div id="parent"> |
39 <div id="spacer"> | 45 <div id="container"> |
40 <span id="spanner">TEST</span> | 46 <div class="spacer"> |
| 47 <span id="spanner">TEST</span> |
| 48 </div> |
41 </div> | 49 </div> |
| 50 <div class="spacer"></div> |
42 </div> | 51 </div> |
43 <div id="rootspacer"></div> | 52 <div id="rootspacer"></div> |
44 | 53 |
45 <script src="../../resources/testharness.js"></script> | 54 <script src="../../resources/testharness.js"></script> |
46 <script src="../../resources/testharnessreport.js"></script> | 55 <script src="../../resources/testharnessreport.js"></script> |
47 | 56 |
48 <script> | 57 <script> |
| 58 var parentScroller = document.querySelector('#parent'); |
| 59 var container = document.querySelector('#container'); |
| 60 var spanner = document.querySelector('#spanner'); |
| 61 |
49 test(function() { | 62 test(function() { |
50 assert_false(typeof document.rootScroller === 'undefined'); | 63 assert_false(typeof document.rootScroller === 'undefined'); |
51 }, 'setRootScroller API enabled'); | 64 }, 'setRootScroller API enabled'); |
52 | 65 |
53 // TODO(bokan): Break this test up, failing asserts are hard to find. | |
54 test(function() { | 66 test(function() { |
55 // Setting the container object should succeed. | 67 // Setting the container object should succeed. |
56 assert_equals(document.rootScroller, null); | 68 assert_equals(document.rootScroller, null); |
57 var container = document.querySelector('#container'); | 69 document.rootScroller = container; |
58 document.rootScroller = container; | 70 assert_equals(document.rootScroller, container); |
59 assert_equals(document.rootScroller, container); | 71 document.rootScroller = null; |
| 72 assert_equals(document.rootScroller, null); |
| 73 }, 'Setter and getter on a valid element works'); |
60 | 74 |
61 // Trying to set the <span> should succeed even though it's not a valid | 75 test(function() { |
62 // scroller. | 76 // Trying to set the <span> should succeed even though it's not a valid |
63 var spanner = document.querySelector('#spanner'); | 77 // scroller. |
64 document.rootScroller = spanner; | 78 document.rootScroller = spanner; |
65 assert_equals(document.rootScroller, spanner); | 79 assert_equals(document.rootScroller, spanner); |
| 80 }, 'Can set a non-scrolling element as the rootScroller'); |
66 | 81 |
67 // Scroll the container <div> past the end. The scrolls should not chain | 82 test(function() { |
68 // past the rootScroller to the scrollingElement. | 83 // Scroll the container <div> past the end. The scrolls should not chain |
69 document.rootScroller = container; | 84 // past the rootScroller to the parentScroller element. |
70 if (typeof eventSender !== 'undefined') { | 85 document.rootScroller = container; |
71 eventSender.gestureScrollBegin(500, 500); | 86 if (typeof eventSender !== 'undefined') { |
72 eventSender.gestureScrollUpdate(-300, -300); | 87 eventSender.gestureScrollBegin(500, 500); |
73 eventSender.gestureScrollEnd(0, 0); | 88 eventSender.gestureScrollUpdate(-300, -300); |
74 eventSender.gestureScrollBegin(500, 500); | 89 eventSender.gestureScrollEnd(0, 0); |
75 eventSender.gestureScrollUpdate(-300, -300); | 90 eventSender.gestureScrollBegin(500, 500); |
76 eventSender.gestureScrollEnd(0, 0); | 91 eventSender.gestureScrollUpdate(-300, -300); |
77 eventSender.gestureScrollBegin(500, 500); | 92 eventSender.gestureScrollEnd(0, 0); |
78 eventSender.gestureScrollUpdate(-300, -300); | 93 eventSender.gestureScrollBegin(500, 500); |
79 eventSender.gestureScrollEnd(0, 0); | 94 eventSender.gestureScrollUpdate(-300, -300); |
80 eventSender.gestureScrollBegin(500, 500); | 95 eventSender.gestureScrollEnd(0, 0); |
81 eventSender.gestureScrollUpdate(-300, -300); | 96 eventSender.gestureScrollBegin(500, 500); |
82 eventSender.gestureScrollUpdate(-300, -300); | 97 eventSender.gestureScrollUpdate(-300, -300); |
83 eventSender.gestureScrollUpdate(-300, -300); | 98 eventSender.gestureScrollUpdate(-300, -300); |
84 eventSender.gestureScrollEnd(0, 0); | |
85 | 99 |
86 assert_equals(container.scrollTop, 2000 - 600); | 100 assert_equals(container.scrollTop, 2000 - 600); |
87 assert_equals(container.scrollLeft, 2000 - 800); | 101 assert_equals(container.scrollLeft, 2000 - 800); |
88 assert_equals(document.scrollingElement.scrollTop, 0); | |
89 assert_equals(document.scrollingElement.scrollLeft, 0); | |
90 } | |
91 | 102 |
92 // Making the current rootScroller an invalid scroller should fallback to | 103 // The container is now fully scrolled. Normally, further scroll |
93 // the default element, the documentElement, but the rootScroller property | 104 // events would chain up to the parent element but, because the |
94 // should remain the same. | 105 // container is the root scroller, we shouldn't chain up past it. |
95 container.style.width = "95%"; | 106 eventSender.gestureScrollUpdate(-300, -300); |
96 assert_equals(document.rootScroller, container); | 107 eventSender.gestureScrollEnd(0, 0); |
| 108 eventSender.gestureScrollBegin(500, 500); |
| 109 eventSender.gestureScrollUpdate(-300, -300); |
| 110 eventSender.gestureScrollEnd(0, 0); |
97 | 111 |
98 // Now scrolling over the <div> should scroll the scrollingElement since the | 112 assert_equals(container.scrollTop, 2000 - 600); |
99 // rootElement is invalid (doesn't fill the viewport). | 113 assert_equals(container.scrollLeft, 2000 - 800); |
100 if (typeof eventSender !== 'undefined') { | 114 assert_equals(parentScroller.scrollTop, 0); |
101 eventSender.gestureScrollBegin(500, 500); | 115 assert_equals(parentScroller.scrollLeft, 0); |
102 eventSender.gestureScrollUpdate(-300, -300); | 116 } |
103 eventSender.gestureScrollEnd(0, 0); | 117 }, "Scrolls don't chain past root scroller element"); |
104 eventSender.gestureScrollBegin(500, 500); | |
105 eventSender.gestureScrollUpdate(-300, -300); | |
106 eventSender.gestureScrollEnd(0, 0); | |
107 eventSender.gestureScrollBegin(500, 500); | |
108 eventSender.gestureScrollUpdate(-300, -300); | |
109 eventSender.gestureScrollEnd(0, 0); | |
110 eventSender.gestureScrollBegin(500, 500); | |
111 eventSender.gestureScrollUpdate(-300, -300); | |
112 eventSender.gestureScrollEnd(0, 0); | |
113 | 118 |
114 assert_equals(document.scrollingElement.scrollTop, 400); | 119 test(function() { |
115 assert_equals(document.scrollingElement.scrollLeft, 200); | 120 document.rootScroller = container; |
116 } | 121 container.scrollTop = 999; |
| 122 container.scrollLeft = 998; |
117 | 123 |
118 // Don't output the text in spanner. | 124 // Window.scrollX and scrollY should reflect the scroll offset of the |
119 document.querySelector('#spanner').style.display = 'none'; | 125 // rootScroller |
| 126 assert_equals(container.scrollTop, 999); |
| 127 assert_equals(container.scrollLeft, 998); |
| 128 assert_equals(window.scrollY, container.scrollTop); |
| 129 assert_equals(window.scrollX, container.scrollLeft); |
| 130 assert_equals(document.scrollingElement.scrollTop, container.scrollTop); |
| 131 assert_equals(document.scrollingElement.scrollLeft, container.scrollLeft); |
120 | 132 |
121 }, 'Test the setRootScroller API basic functionality'); | 133 }, "document.scrollingElement and window scroll API reflect rootScroller offse
ts"); |
| 134 |
| 135 test(function() { |
| 136 // Making the current rootScroller an invalid scroller (by making it not |
| 137 // fill the viewport) should fallback to the default element, the |
| 138 // documentElement, but the rootScroller property should remain the same. |
| 139 document.rootScroller = container; |
| 140 container.style.width = "95%"; |
| 141 assert_equals(document.rootScroller, container); |
| 142 |
| 143 // Reset parentScroller's offsets, make container fully scrolled. |
| 144 parentScroller.scrollTop = 0; |
| 145 parentScroller.scrollLeft = 0; |
| 146 container.scrollTop = 10000; |
| 147 container.scrollLeft = 10000; |
| 148 |
| 149 // Now scrolling over the container should scroll the scrollingElement |
| 150 // since the rootElement is invalid (doesn't fill the viewport). |
| 151 if (typeof eventSender !== 'undefined') { |
| 152 eventSender.gestureScrollBegin(500, 500); |
| 153 eventSender.gestureScrollUpdate(-300, -300); |
| 154 eventSender.gestureScrollEnd(0, 0); |
| 155 eventSender.gestureScrollBegin(500, 500); |
| 156 eventSender.gestureScrollUpdate(-300, -300); |
| 157 eventSender.gestureScrollEnd(0, 0); |
| 158 eventSender.gestureScrollBegin(500, 500); |
| 159 eventSender.gestureScrollUpdate(-300, -300); |
| 160 eventSender.gestureScrollEnd(0, 0); |
| 161 |
| 162 assert_equals(parentScroller.scrollTop, 900); |
| 163 assert_equals(parentScroller.scrollLeft, 900); |
| 164 } |
| 165 }, "Setting an invalid rootScroller should reset to using the documentElemen
t."); |
122 </script> | 166 </script> |
OLD | NEW |