| 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 |