| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <script src="../../../../resources/js-test.js"></script> | 3 <script src="../../../../resources/js-test.js"></script> |
| 4 <script> | 4 <script> |
| 5 if (window.testRunner && window.eventSender && window.internals) { | 5 if (window.testRunner && window.eventSender && window.internals) { |
| 6 window.jsTestIsAsync = true; | 6 window.jsTestIsAsync = true; |
| 7 testRunner.waitUntilDone(); | 7 testRunner.waitUntilDone(); |
| 8 } | 8 } |
| 9 | 9 |
| 10 var horizontalContainer; | 10 var horizontalContainer; |
| 11 var verticalContainer; | 11 var verticalContainer; |
| 12 var startSpot; | 12 var startSpot; |
| 13 var missSpot; | |
| 14 | 13 |
| 15 var startXInViewport; | 14 var startXInViewport; |
| 16 var startYInViewport; | 15 var startYInViewport; |
| 17 var missXInViewport; | |
| 18 var missYInViewport; | |
| 19 var pinchViewportContentX = 300; | 16 var pinchViewportContentX = 300; |
| 20 var pinchViewportContentY = 300; | 17 var pinchViewportContentY = 300; |
| 21 var scale = 2; | 18 var scale = 2; |
| 22 | 19 |
| 23 var fullyScrolled; | 20 var fullyScrolled; |
| 24 | 21 |
| 25 var currentTest = 0; | 22 var currentTest = 0; |
| 26 var checkExpectation; | 23 var checkExpectation; |
| 27 | 24 |
| 28 window.onload = function() { | 25 window.onload = function() { |
| 29 verticalContainer = document.getElementById('vcontainer'); | 26 verticalContainer = document.getElementById('vcontainer'); |
| 30 horizontalContainer = document.getElementById('hcontainer'); | 27 horizontalContainer = document.getElementById('hcontainer'); |
| 31 startSpot = document.getElementById('startspot'); | 28 startSpot = document.getElementById('startspot'); |
| 32 missSpot = document.getElementById('missspot'); | |
| 33 fullyScrolled = verticalContainer.scrollHeight - verticalContainer.clientHei
ght; | 29 fullyScrolled = verticalContainer.scrollHeight - verticalContainer.clientHei
ght; |
| 34 | 30 |
| 35 var startX = startSpot.offsetLeft + startSpot.offsetWidth/2; | 31 var startX = startSpot.offsetLeft + startSpot.offsetWidth/2; |
| 36 var startY = startSpot.offsetTop + startSpot.offsetHeight/2; | 32 var startY = startSpot.offsetTop + startSpot.offsetHeight/2; |
| 37 startXInViewport = (startX - pinchViewportContentX)*scale; | 33 startXInViewport = (startX - pinchViewportContentX)*scale; |
| 38 startYInViewport = (startY - pinchViewportContentY)*scale; | 34 startYInViewport = (startY - pinchViewportContentY)*scale; |
| 39 | 35 |
| 40 var missX = missSpot.offsetLeft + missSpot.offsetWidth/2; | |
| 41 var missY = missSpot.offsetTop + missSpot.offsetHeight/2; | |
| 42 missXInViewport = (missX - pinchViewportContentX)*scale; | |
| 43 missYInViewport = (missY - pinchViewportContentY)*scale; | |
| 44 | |
| 45 if (window.testRunner && window.eventSender && window.internals) { | 36 if (window.testRunner && window.eventSender && window.internals) { |
| 46 internals.setPageScaleFactorLimits(1, 4.0); | 37 internals.setPageScaleFactorLimits(1, 4.0); |
| 47 runTest(); | 38 runTest(); |
| 48 } | 39 } |
| 49 | 40 |
| 50 description('Tests that slow-path flings convert to the scaled coordinate ' | 41 description('Tests that slow-path flings convert to the scaled coordinate ' |
| 51 + 'space correctly. To test manually, pinch zoom into the page ' | 42 + 'space correctly. To test manually, pinch zoom into the page ' |
| 52 + 'and perform a touchpad fling. If the mouse passes over the ' | 43 + 'and perform a touchpad fling. If the mouse passes over the ' |
| 53 + 'div it should cause it to scroll. If it doesn\'t pass over ' | 44 + 'div it should cause it to scroll. If it doesn\'t pass over ' |
| 54 + 'the div it shouldn\'t scroll.'); | 45 + 'the div it shouldn\'t scroll.'); |
| 55 } | 46 } |
| 56 | 47 |
| 57 var scrollHandler = function() { | |
| 58 if (window.scrollY == 0 || window.scrollX == 0) | |
| 59 finishedTest(); | |
| 60 } | |
| 61 | |
| 62 var verticalContainerScrollHandler = function() { | 48 var verticalContainerScrollHandler = function() { |
| 63 if (verticalContainer.scrollTop < fullyScrolled) | 49 if (verticalContainer.scrollTop < fullyScrolled) |
| 64 finishedTest(); | 50 finishedTest(); |
| 65 } | 51 } |
| 66 | 52 |
| 67 var horizontalContainerScrollHandler = function() { | 53 var horizontalContainerScrollHandler = function() { |
| 68 if (horizontalContainer.scrollLeft < fullyScrolled) | 54 if (horizontalContainer.scrollLeft < fullyScrolled) |
| 69 finishedTest(); | 55 finishedTest(); |
| 70 } | 56 } |
| 71 | 57 |
| 72 var setHorizontalContainerScrollsExpectation = function() { | 58 var setHorizontalContainerScrollsExpectation = function() { |
| 73 horizontalContainer.addEventListener("scroll", horizontalContainerScrollHand
ler); | 59 horizontalContainer.addEventListener("scroll", horizontalContainerScrollHand
ler); |
| 74 checkExpectation = function() { | 60 checkExpectation = function() { |
| 75 shouldNotBe('horizontalContainer.scrollLeft', 'fullyScrolled'); | 61 shouldNotBe('horizontalContainer.scrollLeft', 'fullyScrolled'); |
| 76 } | 62 } |
| 77 } | 63 } |
| 78 | 64 |
| 79 var setVerticalContainerScrollsExpectation = function() { | 65 var setVerticalContainerScrollsExpectation = function() { |
| 80 verticalContainer.addEventListener("scroll", verticalContainerScrollHandler)
; | 66 verticalContainer.addEventListener("scroll", verticalContainerScrollHandler)
; |
| 81 checkExpectation = function() { | 67 checkExpectation = function() { |
| 82 shouldNotBe('verticalContainer.scrollTop', 'fullyScrolled'); | 68 shouldNotBe('verticalContainer.scrollTop', 'fullyScrolled'); |
| 83 } | 69 } |
| 84 } | 70 } |
| 85 | 71 |
| 86 var setContainerDoesntScrollExpectation = function() { | |
| 87 window.addEventListener("scroll", scrollHandler); | |
| 88 checkExpectation = function() { | |
| 89 shouldBe('verticalContainer.scrollTop', 'fullyScrolled'); | |
| 90 shouldBe('horizontalContainer.scrollLeft', 'fullyScrolled'); | |
| 91 } | |
| 92 } | |
| 93 | |
| 94 var reset = function() { | 72 var reset = function() { |
| 95 window.removeEventListener("scroll", scrollHandler); | |
| 96 horizontalContainer.removeEventListener("scroll", horizontalContainerScrollH
andler); | 73 horizontalContainer.removeEventListener("scroll", horizontalContainerScrollH
andler); |
| 97 verticalContainer.removeEventListener("scroll", verticalContainerScrollHandl
er); | 74 verticalContainer.removeEventListener("scroll", verticalContainerScrollHandl
er); |
| 98 | 75 |
| 99 // Fully scroll both containers. | 76 // Fully scroll both containers. |
| 100 verticalContainer.scrollTop = verticalContainer.scrollHeight; | 77 verticalContainer.scrollTop = verticalContainer.scrollHeight; |
| 101 horizontalContainer.scrollLeft = horizontalContainer.scrollWidth; | 78 horizontalContainer.scrollLeft = horizontalContainer.scrollWidth; |
| 102 | 79 |
| 103 checkExpectation = null; | 80 checkExpectation = null; |
| 104 | 81 |
| 105 internals.setPageScaleFactor(scale); | 82 internals.setPageScaleFactor(scale); |
| (...skipping 13 matching lines...) Expand all Loading... |
| 119 setVerticalContainerScrollsExpectation(); | 96 setVerticalContainerScrollsExpectation(); |
| 120 eventSender.gestureFlingCancel(); | 97 eventSender.gestureFlingCancel(); |
| 121 eventSender.gestureFlingStart( | 98 eventSender.gestureFlingStart( |
| 122 startXInViewport, | 99 startXInViewport, |
| 123 startYInViewport, | 100 startYInViewport, |
| 124 0, | 101 0, |
| 125 10000, | 102 10000, |
| 126 "touchpad"); | 103 "touchpad"); |
| 127 }; | 104 }; |
| 128 | 105 |
| 129 var verticalFlingNotOverContainerTest = function() { | |
| 130 debug('Flinging vertically with mouse *not* over container. Container should
not be scrolled at all.'); | |
| 131 setContainerDoesntScrollExpectation(); | |
| 132 eventSender.gestureFlingCancel(); | |
| 133 eventSender.gestureFlingStart( | |
| 134 missXInViewport, | |
| 135 missYInViewport, | |
| 136 0, | |
| 137 10000, | |
| 138 "touchpad"); | |
| 139 }; | |
| 140 | |
| 141 var horizontalFlingOverContainerTest = function() { | 106 var horizontalFlingOverContainerTest = function() { |
| 142 debug('Flinging horizontally with mouse over container. Container should be
scrolled.'); | 107 debug('Flinging horizontally with mouse over container. Container should be
scrolled.'); |
| 143 setHorizontalContainerScrollsExpectation(); | 108 setHorizontalContainerScrollsExpectation(); |
| 144 eventSender.gestureFlingCancel(); | 109 eventSender.gestureFlingCancel(); |
| 145 eventSender.gestureFlingStart( | 110 eventSender.gestureFlingStart( |
| 146 startXInViewport, | 111 startXInViewport, |
| 147 startYInViewport, | 112 startYInViewport, |
| 148 10000, | 113 10000, |
| 149 0, | 114 0, |
| 150 "touchpad"); | 115 "touchpad"); |
| 151 }; | 116 }; |
| 152 | 117 |
| 153 var horizontalFlingNotOverContainerTest = function() { | 118 var tests = [verticalFlingOverContainerTest, horizontalFlingOverContainerTest]
; |
| 154 debug('Flinging horizontally with mouse *not* over container. Container shou
ld not be scrolled at all.'); | |
| 155 setContainerDoesntScrollExpectation(); | |
| 156 eventSender.gestureFlingCancel(); | |
| 157 eventSender.gestureFlingStart( | |
| 158 missXInViewport, | |
| 159 missYInViewport, | |
| 160 10000, | |
| 161 0, | |
| 162 "touchpad"); | |
| 163 }; | |
| 164 | |
| 165 var tests = [ verticalFlingOverContainerTest, | |
| 166 verticalFlingNotOverContainerTest, | |
| 167 horizontalFlingOverContainerTest, | |
| 168 horizontalFlingNotOverContainerTest | |
| 169 ]; | |
| 170 | 119 |
| 171 var finishedTest = function() { | 120 var finishedTest = function() { |
| 172 checkExpectation(); | 121 checkExpectation(); |
| 173 | 122 |
| 174 currentTest++; | 123 currentTest++; |
| 175 var test = tests[currentTest]; | 124 var test = tests[currentTest]; |
| 176 if (test === undefined) { | 125 if (test === undefined) { |
| 177 finishJSTest(); | 126 finishJSTest(); |
| 178 } else { | 127 } else { |
| 179 reset(); | 128 reset(); |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 220 } | 169 } |
| 221 | 170 |
| 222 .startspot { | 171 .startspot { |
| 223 position: absolute; | 172 position: absolute; |
| 224 left: 350px; | 173 left: 350px; |
| 225 top: 350px; | 174 top: 350px; |
| 226 width: 35px; | 175 width: 35px; |
| 227 height: 35px; | 176 height: 35px; |
| 228 background-color: grey; | 177 background-color: grey; |
| 229 } | 178 } |
| 230 | |
| 231 .missspot { | |
| 232 position: absolute; | |
| 233 left: 400px; | |
| 234 top: 400px; | |
| 235 width: 35px; | |
| 236 height: 35px; | |
| 237 background-color: red; | |
| 238 } | |
| 239 </style> | 179 </style> |
| 240 | 180 |
| 241 <div class="startspot" id="startspot"></div> | 181 <div class="startspot" id="startspot"></div> |
| 242 <div class="missspot" id="missspot"></div> | |
| 243 <div class="verticalContainer" id="vcontainer"> | 182 <div class="verticalContainer" id="vcontainer"> |
| 244 <div class="greenbox"></div> | 183 <div class="greenbox"></div> |
| 245 <div class="redbox"></div> | 184 <div class="redbox"></div> |
| 246 <div class="greenbox"></div> | 185 <div class="greenbox"></div> |
| 247 <div class="redbox"></div> | 186 <div class="redbox"></div> |
| 248 <div class="greenbox"></div> | 187 <div class="greenbox"></div> |
| 249 <div class="redbox"></div> | 188 <div class="redbox"></div> |
| 250 <div class="greenbox"></div> | 189 <div class="greenbox"></div> |
| 251 <div class="redbox"></div> | 190 <div class="redbox"></div> |
| 252 <div class="greenbox"></div> | 191 <div class="greenbox"></div> |
| (...skipping 12 matching lines...) Expand all Loading... |
| 265 <div style="float: left" class="greenbox"></div> | 204 <div style="float: left" class="greenbox"></div> |
| 266 <div style="float: left" class="redbox"></div> | 205 <div style="float: left" class="redbox"></div> |
| 267 <div style="float: left" class="greenbox"></div> | 206 <div style="float: left" class="greenbox"></div> |
| 268 <div style="float: left" class="redbox"></div> | 207 <div style="float: left" class="redbox"></div> |
| 269 <div style="float: left" class="greenbox"></div> | 208 <div style="float: left" class="greenbox"></div> |
| 270 <div style="float: left" class="redbox"></div> | 209 <div style="float: left" class="redbox"></div> |
| 271 <div style="float: left" class="greenbox"></div> | 210 <div style="float: left" class="greenbox"></div> |
| 272 <div style="float: left" class="redbox"></div> | 211 <div style="float: left" class="redbox"></div> |
| 273 </div> | 212 </div> |
| 274 </div> | 213 </div> |
| OLD | NEW |